@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html, body{
	background:url("../images/bg-y.jpg") top center repeat;
	font-family:'Noto Sans TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
}



/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 640px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.sale{ top: 440px; left: 440px; position: absolute;}
.title01{ top: 108px; left: 256px; position: absolute;}
.title02{ top: 108px; left: 402px; position: absolute;}
.title03{ top: 108px; left: 527px; position: absolute;}
.title04{ top: 108px; left: 657px; position: absolute;}
.title05{ top: 108px; left: 807px; position: absolute;}

.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }
.hightlight .font h4 {background: #1a7887;}
.half ul{
background:url("../images/bg_half.png") top center repeat;
margin-bottom: 25px;
}

/* m */
@media screen and ( max-width: 640px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}

.titleC {margin: 40px auto 10px; background:url("../images/titlebg.png") top center no-repeat;}
.titleC h2 { font-size: 3rem; padding: 40px 0; color: #f2f2f2; letter-spacing: 15px;}
.titleC h2 p {font-size: 1.5rem; margin: 15px; letter-spacing: 4px; color: #ffd936;}
@media screen and ( max-width: 640px ){
.titleC {margin: 2vw auto 2vw; background:url("../images/titlebgm.png") top center no-repeat; background-size: cover; }
.titleC h2{ padding:10vw 0 5vw; letter-spacing: 0px;}
.titleC h2 p { margin: 2vw 0 0; letter-spacing: 0;}
}

.bg01{background:url("../images/bg01.jpg") top center no-repeat; padding: 0 0 20px;}
.bg02{background:url("../images/bg02.jpg") top center no-repeat; padding: 0 0 20px;}
.bg03{background:url("../images/bg03.png") top center no-repeat; padding: 0 0 20px;}
.bg04{background:url("../images/bg04.jpg") top center no-repeat; padding: 0 0 20px;}
.bg05{background:url("../images/bg05.png") top center no-repeat; padding: 0 0 20px;}
.bg06{background:url("../images/bg06.png") top center no-repeat; padding: 30px 0;}
@media screen and ( max-width: 640px ){
.bg01{width: 98%; margin:4vw auto; background:url("../images/bg-w.jpg") top center repeat; padding:2vw 0;}
.bg02{width: 98%; margin:4vw auto; background:url("../images/bg-or.jpg") top center repeat; padding:2vw 0;}
.bg03{width: 98%; margin:4vw auto; background:url("../images/bg-or.jpg") top center repeat; padding:2vw 0;}
.bg04{width: 98%; margin:4vw auto; background:url("../images/bg-w.jpg") top center repeat; padding:2vw 0;}
.bg05{width: 98%; margin:4vw auto; background:url("../images/bg-w.jpg") top center repeat; padding:2vw 0;}
.bg06{background:url("../images/bg07.png") top center no-repeat; padding: 30px 0;}
}


/*品牌推薦*/
.box02{ width:100%;height:500px;display:block;line-height:0; position:relative; background:url(../images/bg.jpg) top center repeat; /*background-color:var(--B1color-L);*/}
.box02_content{ width:1200px; height:470px; margin:0 auto; position:relative;}
.B1_intro{ width:1180px; height:350px;text-align:center;display:block; margin:0px auto 0px auto; background-size:100%;overflow:hidden; position:absolute; top:30px;}
.B1_intro li:nth-child(1){ width:448px; height:1px; font-size:1.8rem; line-height:3.4rem; color:black; text-align:center; font-weight:500; background-color: #fff; z-index:1; position: relative; top:325px; left:63px;}

.B1_intro li:nth-child(2){ width:470px; height:290px; background-color: #fff;z-index:3; position:absolute; left:62px; top:30px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 1px 2px 4px rgba(0, 0, 0, 0.1);}

.B1_intro li:nth-child(3){ width:330px; height:50px; font-size:1.6rem; line-height:2rem; color:black; text-align:center; font-weight:600; border-bottom:#572e16 solid 1px; position:relative; z-index:10;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif'; letter-spacing:2px; left:130px; top:70px; overflow: hidden;}

.B1_intro li:nth-child(4){ width:335px; height:140px; font-size:1rem; line-height:1.7rem; color:#523a1b; text-align:left; font-weight:400;position:absolute; z-index:10;left:135px; top:140px; overflow:hidden;}

.B1_intro li:nth-child(5){ width:370px; height:350px;font-weight:300; position: relative; right:-388px; bottom:50px;;z-index:2;}

.B1_intro li:nth-child(5) img{width:750px; height:350px;}

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

.box02{ width:100%;height:auto;display:block;line-height:0; position:relative; background:url(../images/bg_01.jpg) top center repeat; overflow:hidden;}
.box02_content{ width:100%; height:auto; margin:0 auto; position:relative; min-width:320px; margin-top:0;}
.B1_intro{ width:100%; height:550px;text-align:center;margin:0px auto;overflow:hidden; position: relative; display:block; background:url(../images/bg_01.jpg) top center repeat; padding:1% 0 0% 0 ;}
.B1_intro li:nth-child(1){ display:none;}
.B1_intro li:nth-child(2){display:none;}
.B1_intro li:nth-child(3){width:100%; height:auto; font-size:1.8rem; line-height:2rem; color:#ffffff; text-align:center; font-weight:500; border-bottom:#3a3a3a solid 0px; position:relative; z-index:10;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif'; letter-spacing:2px; overflow: hidden; display:block; margin:0 auto;top:0; left:0; padding:3% 20% 0 20%;}
.B1_intro li:nth-child(4){ width:100%; height:auto; font-size:1rem; line-height:1.7rem; color:#ffffff; text-align:center; font-weight:300; z-index:10;position: relativel;overflow:hidden;font-family:'Helvetica','Century Gothic', 'Noto Sans TC', 'sans-serif';  display:block; top:0; left:0; padding:15% 10% 3% 10%;}
.B1_intro li:nth-child(5){ width:100%; height:auto;font-weight:300;position: relative;z-index:2; margin:0 auto; top:28%; left:0;}
	.B1_intro li:nth-child(5) img{width:100%; height:auto}}


/*--goto top--*/
#gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}
#gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}
#gotop:hover {cursor: pointer;background-color: #666;}
#gotop:active {background-color: #666;}
#gotop.show {opacity: 0.4;visibility: visible;}
	@media screen and ( max-width: 640px ){
	#gotop {bottom: 2vw;right: 0;margin: 2vw;	}
	}


.nav li:active, .nav li:focus, .nav li:hover, 
menu li:active, menu li:focus, menu li:hover{
		    transform:none !important;}
	@media screen and ( max-width: 640px ){
		.container li:active, .container li:focus, .container li:hover{
			-webkit-transform:translateY(0px);
					transform:translateY(0px);}
	}


/* -- sidemanu for pc -- */
.side-menu{
	position: fixed;
	width: 130px;
	top:20%;
	left:10px;
	padding:10px;
	border-radius:20px;
	box-sizing: border-box;
	background:url("../images/bg-b.jpg") top center repeat;
	opacity:0.95; 
	display: flex;
	flex-direction: column;
	transform: translateX(0);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
	
}
.side-menu label{
	position: fixed;
	width: 40px;
	height: 150px;
	background:#f27e7e;
	opacity:0.95; 
	color: #ffffff;
	right: -40px;
	top: 0%;
	line-height: 28px;
	text-align: center;
	font-size: 24px;
	border-radius: 0 10px 10px 0;
	padding:18px 8px 10px 8px;
	font-weight:500;
	
}
#side-menu-switch{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch:checked + .side-menu{
	transform: translateX(0);
}
nav a{
	display: block;
	padding: 6px 5px;
	color: #ffffff;
	text-decoration: none;
	position: relative;
	font-size:14px;	
	font-weight: 300;
	line-height: 18px;
}
nav a:hover{
	color: #000;
	background-color:#f2e541;
	border-radius:0;
}
nav p.name_menu{ padding:5% 0 3% 0; font-size:1.2em; line-height:1.2em; border-bottom:1px solid; color:#f2e541; font-weight: bold;}
nav ul.area1{ margin-bottom:150px;}
nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #f2e541;}
nav ul.area1 li:nth-child(even){ border-right:1px dotted #f2e541;}
nav ul.area2 li{ border-bottom:1px dotted #f2e541;}
nav ul.area1 li:nth-last-child(1), nav ul.area1 li:nth-last-child(2), nav ul.area2 li:nth-last-child(1){ border-bottom:none;}
	@media screen and ( max-width: 640px ){
		.side-menu {display: none;}
	}

/* precaution */
.container{ width: 1160px; margin: 60px auto; display: flex; flex-wrap: wrap; justify-content: center;position: relative;}
.container h2{ margin: 10px auto;}


.precaution { width: 100%; margin: auto;color: #fff; background: #1c8c9e;padding: 70px 100px;border-radius: 10px; }
.precaution ul { padding: 0 0 0 26px;text-align: justify;}
.precaution ul li { font-size: 1.2rem;list-style: circle;; margin: 8px 0;}
.precaution ol { padding: 0 0 0 26px;text-align: justify;}
.precaution ol li { list-style: decimal; margin: 8px 0;}
.precaution h5{ color: #ffc107;}
.precaution span{ color: #ffebae;}
	@media screen and ( max-width: 640px ){
		.container{ width: 96vw; margin: auto; }
		.container h2{ margin: auto;}
		.container img{ width: 100%;}
		.precaution { width: 94vw; margin: 2vw auto; padding:6vw;border-radius: 0;}
		.precaution h5{font-size: 1.8rem;}
		.precaution ol { padding: 0 0 0 6vw ;}
		.precaution ol li { margin: 2vw 0;}
	}


/*--類別推薦(1)--*/
.box10{ width:100%;height:450px; background:url("../images/bgcolor.jpg") top center repeat;display:block;line-height:0; position:relative;}
.box10_content{ width:1200px; height:400px; margin:0 auto; position:relative; display:block;line-height:0; margin-top:-15px;}
.cata_title{ width:1020px; height:34px; position:absolute; top:50px; left:90px;display:inline-block;overflow: hidden;}
.cata_block{ width:8px; height:34px; background-color:#85ffe9; display:inline-block;}
.cata_titletext{ height:34px;font-size:2rem; line-height:2.4rem; color:#fff; text-align:left; font-weight:600;position:relative;font-family:'Helvetica', 'Noto Sans TC', 'sans-serif'; overflow: hidden; display:inline-block;margin-right:8px; margin-left:10px;}
.title_line{ width:1000px; height:4px; display:inline-block; margin-left:30px; position:absolute;top:17px; border-bottom:#fff solid 1px; border-top:#fff solid 1px;}
.cata_bg{ width:1260px; height:300px;background:url("../images/bgcolor.jpg") top center repeat; position:absolute; top:150px; left:20px; z-index:1;}
.cata_product {width:1040px; height:350px;z-index:99;position:absolute; top:-50px; left:70px; display:inline-block; overflow:hidden; }
.cata_product2 {width:1040px; height:350px;z-index:99;position:absolute; top:320px; left:70px; display:inline-block; overflow:hidden; }
.cata_p { width:235px; height:340px;padding:4px; background-color:#fff; display:inline-block; margin-right:20px;}
.cata_p:hover{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 1px 2px 4px rgba(0, 0, 0, .1);}
.cata_p li:nth-child(1){ width:226px; height:226px;}
.cata_p li:nth-child(1) img{ width:226px; height:226px;}
.cata_p li:nth-child(2){ width:226px; height:64px; font-size:1.2rem; line-height:1.4rem; color:#3a3a3a; text-align:center; font-weight:600; border-bottom:#325646 solid 1px; position:relative;font-family:'Helvetica', 'Noto Sans TC', 'sans-serif'; overflow: hidden; z-index:10; padding-top:12px;}
.cata_p li:nth-child(3){ width:226px; height:40px; font-size:1rem; line-height:1.95rem; color:#981515; text-align:center; font-weight:600; position:relative; font-family:'Helvetica','Noto Sans TC', 'sans-serif'; overflow: hidden;  margin-top:6px;}
.cata_p li:nth-child(3) span{ width:226px; height:40px; font-size:2rem; line-height:1.95rem; color:#981515; text-align:center; font-weight:900; position:relative; font-family:'Century Gothic','Noto Sans TC', 'sans-serif'; overflow: hidden;  margin-top:4px;}

/*--類別推薦(2+3+4)--*/
.box11{ width:100%;height:450px; background:url("../images/bgcolor.jpg") top center repeat;display:block;line-height:0; position:relative;}
.box11_content{ width:1200px; height:450px; margin:0 auto; position:relative; display:block;line-height:0; margin-top:-15px;}
.box12{ width:100%;height:450px; background:url("../images/bgcolor.jpg") top center repeat;display:block;line-height:0; position:relative;}
.box12_content{ width:1200px; height:450px; margin:0 auto; position:relative; display:block;line-height:0; margin-top:-15px;}
.box13{ width:100%;height:450px; background:url("../images/bgcolor.jpg") top center repeat;display:block;line-height:0; position:relative;}
.box13_content{ width:1200px; height:450px; margin:0 auto; position:relative; display:block;line-height:0; margin-top:-15px;}
/*RWD*/
@media screen and ( max-width: 768px ){
.box10{ width:100%;height:850px; background:url("../images/bgcolor.jpg") top center repeat;display:block;line-height:0; position:relative; padding-top:0%;}
.box10_content{ width:95%;height:auto; margin:-30px -75px -50px; position:relative; display:block;line-height:0; }
.cata_title{width:100%;height:auto; position:relative;display:inline-block;overflow: hidden;}
.cata_block{ width:8px; height:34px; background-color:#523a1b; display:inline-block; margin-bottom:1%;}
.cata_titletext{ height:40px;font-size:2rem; line-height:2.4rem; color:#523a1b; text-align:left; font-weight:600;position:relative;font-family:'Helvetica', 'Noto Sans TC', 'sans-serif'; overflow: hidden; display:inline-block;margin-right:8px; margin-left:10px;}
.title_line{ display:none; }
.cata_bg{width:100%;height:350px; background:url("../images/bgcolor.jpg") top center repeat; position:relative;}
.cata_product {width:100%; height:auto;z-index:99; position:relative; display:inline-block; overflow:hidden;margin-top: -20px;}
.cata_p { width:48%; height:auto;padding:0%; background-color:#fff; display:inline-block;margin:1% 0% 1% 1%;}
.cata_p li:nth-child(1){ width:100%; height:auto;padding:3% 3% 4% 3%;}
.cata_p li:nth-child(1) img{  width:100%; height:auto;}
.cata_p li:nth-child(2){ width:100%;height:64px; font-size:0.8rem; line-height:1.2rem; color:#3a3a3a; text-align:center; font-weight:600; border-bottom:#523a1b solid 1px; position:relative;font-family:'Helvetica', 'Noto Sans TC', 'sans-serif'; overflow: hidden; z-index:10; padding-top:12px;}
.cata_p li:nth-child(3){ width:100%;height:40px; font-size:1rem; line-height:1.95rem; color:#981515; text-align:center; font-weight:600; position:relative; font-family:'Helvetica','Noto Sans TC', 'sans-serif'; overflow: hidden;  margin-top:6px;}
.cata_p li:nth-child(3) span{width:100%; height:40px; font-size:1.6rem; line-height:1.95rem; color:#981515; text-align:center; font-weight:900; position:relative; font-family:'Century Gothic','Noto Sans TC', 'sans-serif'; overflow: hidden;  margin-top:4px;}
	
	
/* 文字樣式設定 */
h5{font-size: 2rem; text-align: left;font-weight: 500;line-height: 2rem;text-align:justify;}
small{font-size: 60%;}
big{font-size: 140%;font-weight: bold;}
	@media screen and ( max-width: 640px ){
		h5{font-size: 1rem;line-height: 1.4rem;  }
	}


/*for mobile*/
menu{display:none;}
	@media screen and ( max-width: 640px ){
		menu{ display:block;}
		.deco_arrows{ width:1vw; }
	}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	list-style: none;
	background:#fff150;
	z-index:1000;
	padding:2px 0;
	border-top:none;
	font-weight: bold;
}
menu ul li{
	border-top:1px solid #000;
	border-right:1px solid #000;
	/*border-bottom:1px solid #000;*/
	padding:4px 0;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	letter-spacing:0px;
	color:#ffffff;
}
menu ul li a{
	font-size:14px;
	line-height:12px;
}
menu ul li:nth-last-child(5), menu ul li:nth-last-child(1){
	border-right:none;
}
menu ul li:nth-last-child(4), menu ul li:nth-last-child(3), menu ul li:nth-last-child(2), menu ul li:nth-last-child(1){
	border-bottom:none;
}

menu a{
	color:#000 !important;
	text-decoration:none;


}