@charset "utf-8";
/*=================================================

main.css
Date - 2025.12.23
msdia - screen
[Table of contents]


=================================================*/

:root {
  --bg:#f5f5f5;
  --fg:#262626;
  --muted: #666;
  --link: #ff6600;
}

body{
	background:var(--bg);
	/*background-size: cover;*/
	font-family: 'Noto Sans TC',system-ui, -apple-system, "Microsoft JhengHei", 'Gill Sans MT', 'Myriad Pro', Arial, sans-serif, serif;
	color:var(--fg);
	font-size:16px;
}
a{color:var(--link);font-weight: 700; }
a:hover{}

/**************** 標頭 ****************/

.mheader{
	background: url(../img/HeaderBg.jpg) 50% -60px no-repeat #fff000;
	background-size:cover;
	height: 600px;
	margin-bottom:0;
	/*border:1px solid #000;*/
}

.mheader::after{
	clear:both;
	}
.mheader .mHeaderFrame{
	position: relative;
	height: 600px;
	max-width: 1200px;
	margin: 0 auto;
	/*background: url(../img/HeaderInnBg.png?v=8) 50% 0 no-repeat;*/
	background-size:contain;
}
/*按鈕*/
.mheader .mHeaderFrame img.btnMore{display:block;width:30%;margin:0 auto;transition: transform .2s ease-out;}

.mheader .mHeaderFrame img.btnMore:hover{
	transform: scale(1.05);
	color:#ffe85f;
}
.mheader .mHeaderFrame img.btnMore:active{ transform: scale(1);}


.mheader .mHeaderFrame .logo{
	display: inline-block;
	width:9rem;
	margin:20px 0 0 20px;
}
a.HeaderInfo{
	position:absolute;
	top:0;
	left:0;
}
.HIPC{width:100%;display:inline-block;text-align: center;}
.HIMb{display:none;text-align: center;}
.HdTop{width:90%;display:inline-block;margin-top:1rem;}
.Hdbr01,.Hdbr02,.Hdbr03{width:30%;display:inline-block;}
.mNotePC{display:inline-block;}
.mNoteMB{display:none;}

/**************** footer ****************/

.mftr{
	width:100%;
	margin-top:0px;
	padding-top:2rem;
	padding-bottom:15px;
	text-align: center;
	/*border:1px solid #000;
	background:url(../img/ftBg.png?v=3) 0 0 repeat-x;*/
}
.mftr p{color:var(--link);font-size: 0.6em;margin: 0 auto;}
.mftr p.ftMobile{display:none;}

/**************** 內容 ****************/

.innFrame{
	max-width:1000px;
	margin: 0 auto;
	padding-top:0px;
	padding-bottom:0px;
	background:var(--bg);
	/*border:1px solid #000;*/
	}

.innContent{
	margin-top:2rem;
	margin-bottom:2rem;
	position: relative;
	vertical-align: top;
}

.innContent h2,.QAbox h2{font-size:3rem;font-weight: 900;color:rgba(38,38,38,1.00);text-align: center;margin-bottom:1rem;}
.innContent h2 span{font-size:3rem;}
.innContent h2 span.red{color:rgba(255,51,102,1.00);}
.innContent h2 span.blueOne{color:rgba(36,199,197,1.00);}
.innContent h2 span.blueTwo{color:rgba(42,170,236,1.00);}
.innContent h2 img{width:8%;vertical-align:middle;padding-bottom:6px; padding-right:6px;}

.innContent img.timeStyle{margin: 0 auto .5rem; width:100%;}

/* 注意事項 */
.innContent div.innCNote{width:80%;margin: 0 auto 1.5rem;}
.innContent h4.noteTit{font-size:1.2rem;font-weight: 600;color:var(--link);margin-bottom:.5rem;}
.innContent ol.noteList{padding-left:1rem;}
.innContent ol.noteList li{list-style-type: decimal; font-size:.8rem;font-weight: 400;color:var(--fg);margin-bottom:.5rem;}

/* 按鈕 */
.innContent img.btnMore,.QAbox img.btnMore{display:block;width:40%;margin:0 auto;transition: transform .2s ease-out;}
.QAbox img.btnMore{margin-top:1.5rem;}

.innContent img.btnMore:hover,.QAbox img.btnMore:hover{
	transform: scale(1.05);
	color:#ffe85f;
}
.innContent img.btnMore:active,.QAbox img.btnMore:active{ transform: scale(1);}

/* 版面分割 */
.innContent .listN4{
	display:inline-block;
	width:49.5%;
	}
.innContent .listN3{
	display:inline-block;
	width:33%;
	}

/**************** 查詢框架 ****************/
	div.storeFrame{
		/*width:95%;*/
		margin: 0 auto;
		padding: 1.5rem;
		background:rgba(255,255,255,1.00);
		border-radius: 40px;
		box-shadow:0 0px 8px 8px rgba(200, 200, 200, 0.1);
		overflow: hidden;
		margin-bottom:1rem;
	}

/**************** 圖片輪播 ****************/
	div.picFrame{
		width:95%;
		margin: 0 auto;
		background:rgba(255,255,255,1.00);
		border-radius: 40px;
		box-shadow:0 0px 8px 8px rgba(200, 200, 200, 0.1);
		overflow: hidden;
		margin-bottom:1rem;
	}
	.jssorbList{
		position: relative; top: 0px; left: 0px; width: 940px; height: 540px;  visibility: hidden;
	}/*overflow: hidden;*/
	.jssorbSlides{
		position: relative; top: 0px; left: 0px; width: 940px; height: 540px; overflow: hidden; cursor: default;
	}
	/*.jssorbStits{
		cursor: default; position: relative; top: 0px; left: 0px; overflow: hidden;z-index: 99;
	}
	.jssorbStits img{width:90%;}*/
	.jssorb05 {
				position: absolute;
				bottom:0;
			}
	.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
				position: absolute;
				/* size of bullet elment */
				width: 20px;
				height: 20px;
				background: url('../img/point.png') no-repeat;
				overflow: hidden;
				cursor: pointer;
			}
	.jssorb05 div { background-position: -7px -7px; }
	.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
	.jssorb05 .av { background-position: -67px -7px; }
	.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
	
	.jssora22l, .jssora22r {
				display: block;
				position: absolute;
				/* size of arrow element */
				width: 100px;
				height: 200px;
				cursor: pointer;
				background: url('../img/arrow.png') center center no-repeat;
				background-size:600%;
				overflow: hidden;
			}
	.jssora22l { background-position: 0px 0; }
	.jssora22r { background-position: -100px 0; }
	.jssora22l:hover { background-position: -200px 0; }
	.jssora22r:hover { background-position: -300px 0; }
	.jssora22l.jssora22ldn { background-position: -400px 0; }
	.jssora22r.jssora22rdn { background-position: -500px 0; }

/**************** Q&A ****************/

.QAbox .question{
	  max-width: 960px;
	  margin: 0 auto;	
	}
.question h3{
	  background:rgba(255,125,157,1) url(../images/ArrDown.png) 96% 50% no-repeat;
	  background-size:2%;
	  padding:1.5rem;
	  color:rgba(255,255,255,1);
	  font-size:1.2rem;
	  font-weight:700;
	  border-bottom: 1px solid rgba(245,245,245,1);
	}
.question h3.second{
	  background:rgba(255,170,191,1) url(../images/ArrDown.png) 96% 50% no-repeat;
	  background-size:2%;
	}
.question p{
	  display:none;
	  background:rgba(255,255,255,1);
	  padding:1.5rem;
	  color:rgba(0,0,0,1);
	  font-weight:400;
	  text-align: justify;
	  line-height: 1.8rem;
	}
.question p span{
		padding-left:.8rem;
		text-indent: -.8rem;
		color:rgba(0,0,0,1);
		display: inline-block;
		font-size:.9rem;
	}
.question span.listType{color:var(--link);font-weight: 900;font-size:.6rem;}
.question span.listTypeSec{color:var(--link);font-weight: 900;font-size:.4rem;}

.question span.qali{font-size:.7rem;padding-left:1.5rem; color:var(--fg);}
.question span.qaNote{font-size:.7rem;text-indent: 0rem;color:var(--fg);display:inline-block;}

.question h3:hover{
	  background:rgba(255,70,115,1) url(../img/ArrDown.png) 96% 50% no-repeat;
	  background-size:2%;
	  cursor: help;
	}
.question h3.active{
	  background:rgba(255,51,102,1) url(../img/ArrUp.png) 96% 50% no-repeat;
	  background-size:2%;
	  color:rgba(255,245,120,1);
	}

/**************** nav ****************/

.nav_menu{
  	max-width:1000px;
	margin: 1rem auto;
	text-align: center;
}
.nav_menu a{
	width:19%;
	display:inline-block;
	border-radius: 30px;
	padding:1rem;
	margin:.2rem;
	font-weight: 600;
	font-size: 1.2rem;
	background-color:rgba(255,102,153,1);
	color:#ffe85f;
	transition: background-color .2s ease-out;
}
.nav_menu a:hover{
	background-color:rgba(255,51,102,1);
	color:#ffe85f;
}
.nav_menu a:active{}

/* nav_top */

.nav_top{
  	width:100%;
	margin: 0 auto;
	padding: 1rem 0;
	text-align: center;
	background:rgba(255,255,255,.95);
	position: fixed;
	top:-150px;
	z-index: 99;
}
.nav_top a{
	width:12%;
	display:inline-block;
	border-radius: 30px;
	padding:1rem;
	margin:.2rem;
	font-weight: 600;
	font-size: 1.2rem;
	background-color:rgba(255,102,153,1);
	color:#ffe85f;
	transition: background-color .2s ease-out;
}
.nav_top a:hover{
	background-color:rgba(255,51,102,1);
	color:#ffe85f;
}
.nav_menu a:active{}

/**************** 客服信箱 ****************/ 
.te_ts_bubble{
    bottom:110px !important;
}
.te_ts_iframe{
    background-color:rgba(205,35,30,0.8) !important;
}

/**************** 視窗縮放 ****************/

@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 1000px) {

}
@media only screen and (max-width: 770px) {
	/* 選單 */
	.nav_top{display: none;}
	.nav_menu{
		width: 100%;
		position: fixed;
		z-index: 99;
		background-color:rgba(255,102,153,1);
		top:91%;
		text-align: center;
		
	}
	.nav_menu a{
		width:24%;
		display:inline-block;
		text-align: center;
		font-size: 1.3rem;
		border-radius: 0;
		padding:.5rem 0 2rem;
		margin:0;
	}
	
	/* 標頭 */
	.mheader{height: 40rem;}
	.mheader .mHeaderFrame{
	position: relative;
	height: 520px;
	max-width: 770px;
	}
	.HIPC{display:none;}
	.HIMb{display:inline-block;}
	.mNotePC{display:none;}
	.mNoteMB{display:inline-block;}
	.HdTop{width:100%;display:block;margin-bottom:0;}
	
	/*footer*/
	.mftr{padding-bottom:3rem;}
	.mftr p.ftPc{display:none;}
	.mftr p.ftMobile{display:inline;line-height:1rem;}
	
}
@media only screen and (max-width: 600px) {
	
	/* 選單 */	
	.nav_menu{
		width: 100%;
		position: fixed;
		z-index: 99;
		background-color:rgba(255,102,153,1);
		top:91%;
		text-align: center;
		
	}
	.nav_menu a{
		width:24%;
		display:inline-block;
		text-align: center;
		font-size: .8rem;
		border-radius: 0;
		padding:.5rem 0 2rem;
		margin:0;
	}
	
	/* 標頭 */
	.mheader{height: 31rem;}
	.mheader .mHeaderFrame{
	position: relative;
	height: 520px;
	max-width: 750px;
	background: url(../img/HeaderInnBg_m.png) 50% 0 no-repeat;
	background-size:contain;
	}
	.mheader .mHeaderFrame .logo{width:5.5rem;margin:10px 0 0 10px;}
	.HIPC{display:none;}
	.HIMb{display:inline-block;}
	.mNotePC{display:none;}
	.mNoteMB{display:inline-block;}
	.HdTop{width:100%;display:block;margin-bottom:0;}
	
	.mheader .mHeaderFrame img.btnMore{width:80%;}

	
	/* 內容 */
	.innContent img.btnMore,.QAbox img.btnMore{width:80%;}
	
	.innFrame{width:98%}
	
	.innContent h2,.QAbox h2{font-size:2rem;}
	.innContent h2 span{font-size:2rem;}
	
	.innContent{margin-top:.6rem;}
	.innContent .listN4{width:49%;}
	.innContent .listN3{width:32%;}
	
	/* Q&A */
	.QAbox .question{ width:95%;}
	.question h3{
	  font-size:1rem;
	  padding:1rem 3rem 1rem 1rem;
	  background-size:5%;
	}
	.question h3.second{background-size:5%;}
	.question h3:hover{background-size:5%;}
	.question h3.active{background-size:5%;}
	
	
}
@media only screen and (max-width: 430px) {
	
	/* 標頭 */
	.mheader{height: 28rem;}
}
@media only screen and (max-width: 390px) {
	
	/* 選單 */
	.nav_menu{top:89%;}
	
	/* 標頭 */
	.mheader{height: 23rem;}
}
@media only screen and (max-width: 320px) {
	
	/* 標頭 */
	/* .mheader{height: 15rem;} */
	
	/* Q&A */
	.QAbox .question{max-width: 250px;}
}