@charset "utf-8";
/*{ box-sizing:border-box;border:1px  #268A28 solid;}
/* 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;font-size: 100%;font: inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
a {text-decoration:none;}
/* ---reset.css--- */

html, body{	
	font-family:'Noto Serif JP','Noto Serif TC','Microsoft JhengHei','Helvetica','verdana','Georgia','apple LiGothic Medium','arial','Courier','Times','Heiti TC';
	font-size:20px;
	line-height:20px;
	-webkit-text-size-adjust:none;
	box-sizing: border-box;
	scroll-behavior: smooth;
	background: url("../images/bg-r.jpg") repeat;
}
@media screen and ( max-width: 768px ){
     html, body{ 
    min-width: 320px;
	max-width: 768px;
   	overflow: auto;
   	overflow-x: hidden;
    	width: 100%;
		font-size:16px;
    font-family:'Century Gothic', 'Noto Sans TC', sans-serif;
	-webkit-text-size-adjust:none;
	background-color:#fff;	
    }}


*{-webkit-box-sizing:border-box;box-sizing:border-box;}

:focus { outline: 0; }
h1{ text-indent:-9999px; position:absolute;}
a{text-decoration:none;}
img{ vertical-align:top;}


header{ width:100%; position:relative; z-index:999;display:block; background-color:#123a13;}	
#tob {font-size: 12px;text-align:right;color:#fff;padding-right:5px;}
#tob a {color: #fff;text-decoration:none;border-bottom:0px;}
#tob a:hover {color:#fff;text-decoration:none;border-bottom:1px solid;}
.header_m{ display:none;}
	@media screen and ( max-width: 768px ){
		.eslite_footer{margin-bottom: 50px;}
		header{display:none;}
		.header_m{ width:100%; height:auto; position:relative; top:0; display:block; padding:5px 0; background-color:#123a13;}
		.header_m img{ width:120%; height:auto; display:block; }
		#tob{ width:50%; font-size:70%}}
footer{ width:100%; position:relative; z-index:990; background-color:#123a13;}

/* --通用-- */
.container{ max-width:1920px; overflow:hidden; min-width:1200px; margin:0 auto; background: url("../images/m/mbg_y2.png") repeat;}
.box_content{ width:1200px; margin:0 auto; padding:0 20px 20px 20px;}
.item_pc{ display:block;}
.item_m{ display:none;}
ul{ display:inline-block;/*overflow:hidden;*/}
li{ list-style:none; /*float:left;*/ overflow:hidden;}
.title{ padding-top:20px; margin:0 auto; text-align:center;/* border-bottom:1px #053644 solid;*/ height:4rem; margin-bottom:10px; /*background:url(../images/bg_theme1.png) no-repeat center;*/ color: #116286;}
.box2 .box_content .title, .box3 .box_content .title, .box5 .box_content .title{ background:url(../images/bg_theme2.png) no-repeat center;}
.title ul{ overflow:visible; padding:10px 0;/*background: url(../images/bg_content1.png) top center repeat;*/}
.title ul li{ font-size:2.2rem; font-weight:bold; padding:0 15px;overflow:visible; border-right:#053644 1px solid;}
.title ul li:last-child{border-right:none;}
/*.title p{ font-size:2.2rem; line-height:2.2rem; font-weight:bold; padding:0 15px;}
.title span{ font-size:1rem; line-height:2rem; font-weight:bold; padding:0 15px;}*/


.title01{ position: absolute; top:119px; left: 460px; z-index: 10;}
.title02{ position: absolute; top:46px; left: 155px; z-index: 10;}
.title03{ position: absolute; top:498px; left: 570px; z-index: 10;}
.click_ani{ position: absolute; top:130px; left: 190px; z-index: 10;animation-name:ani01; animation-duration: 3s;animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
@keyframes ani01{0%{ transform:scale(1);} 20%{transform:scale(1);}  25%{transform:scale(0.8);} 30%{transform:scale(1);} 50%{transform:scale(1);} 53%{transform:scale(0.8);}56%{transform:scale(1);} 
	60%{transform:scale(1);} 63%{transform:scale(0.8);}66%{transform:scale(1);}100%{transform:translateY(0px);}}



h2{text-align:center; color:#123a13; font-size:1rem;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';font-weight:600; letter-spacing:0.5px; padding:10px 10px; line-height:1.1rem; height:66px;align-items: center; vertical-align:middle; display:table-cell;}
.proname{font-family:'Noto Serif TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#777; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:#982121; font-size:1.4rem; font-family: "Adobe Garamond Pro",'Noto Sans TC',Arial, Helvetica, sans-serif; font-weight:bold;}	
	@media screen and ( max-width: 768px ){
		.container{ width:100%; max-width:768px; min-width:320px; max-width:100vw;}
		.box_content{ width:96vw; padding:0px; }
		.item_pc{ display:none;}
		.item_m{ display:block;}
		.item_m img{ margin:0 auto; width:100%;}
		h2{font-size:0.8rem;}
		.title{ background:none; padding-top:2vw; line-height:2rem; height:auto;}
		.proname{font-size:0.6rem;}	
        .number{font-size:1.2rem;}
		.title{ height:auto; margin-bottom:3%;padding:0 2px;  }
		.title ul li{ font-size:1.6rem;padding:0 10px; border-right:none;}
		.title ul{  padding:20px 0;}
		/*.title p{ font-size:1.5rem; line-height:1.5rem; }
		.title span{ font-size:0.8rem; line-height:1.5rem; }*/
	}
	@media screen and ( max-width: 540px ){	
			.title{ height:auto; margin-bottom:1%; }
			.title ul li{ font-size:1.4rem; padding:0 1px; border-right:none; line-height: 1.6rem;}
			.title ul{  padding:10px 0;}
	}



/* --誠品獨家-- */	
.ex_text{ position:absolute; top:5px; left:25px; font-size:0.9rem; width:1.8rem; color:#ffe970; font-weight:500;}
.ex_tag{ position:absolute; width:70px; top:-8px; left:15px;}
	@media screen and ( max-width: 768px ){
		.ex_tag{ position:absolute; width:72px; top:-8px; left:15px;}}
	@media screen and ( max-width: 540px ){
				.ex_tag{ position:absolute; width:60px; top:-8px; left:13px;}
				.ex_text{top:5px; left:23px; font-size:0.7rem; width:1.4rem; line-height:0.9rem;}}



/* --主視覺-- */
.kv{width:100%;background: url(../images/kv.jpg) top center no-repeat; height:417px; display:block;}	
.kv_content{ position:relative; max-width:1200px; margin:0 auto; height:500px;}
.kv_m{ display:none;}

/*.kv_title{ position:absolute; top:162px; left:297px;}
.sp_5{ position:absolute; top:343px; left:757px;}
.sp_3000{ position:absolute; top:503px; left:406px;}*/
	@media screen and ( max-width: 768px ){
		.kv{ width:100vw;background:none; background-size:100%;height:auto;}
		.kv_content{ height:auto; max-width:100%;}
		.kv_pc{ display:none;}
		.kv_m{ display:block;width: 100%;}
		.kv_m img{ display:block;width: 100%;}
		.sale,.promo01,.promo02,.promo03{ display:none;}
		.sale_m{ width:100vw; display: block;}
		.sale_m img{ width:100%;}
	}


/* BACKGROUND */
.bg1{padding-top:0px; background: url("../images/bg1_pic.png") no-repeat top center,url("../images/bg1_pic2.png") no-repeat bottom center,url("../images/m/mbg_p.png") repeat bottom center;}

.box1{background: url("../images/bg1_pic3.png") no-repeat top center,url("../images/m/mbg_b.png") repeat top center;}
.bg1{background: url("../images/bg-r.jpg") repeat top center;}
.bg2{background: url("../images/bg-y.jpg") repeat top center;}
.bg3{background: url("../images/bg1.jpg") repeat top center;}
.bg4{background: url("../images/bg3.jpg") no-repeat top center;}

/*.bg3{ background: url("../images/m/mbg_y.png") repeat top center; }
.bg4{ background:url("../images/m/mbg_y.png") repeat top center;}
.bg5{ background:url(../images/bg_08.png) top center repeat; height:844px;}
.bg6{background:url(../images/bg_09.png) repeat center top; height:844px;}*/

.intro2 ul li:nth-child(2){ background:url(../images/product/intropic02.jpg) no-repeat center top;}
.intro3 ul li:nth-child(2){ background:url(../images/product/intropic03.jpg) no-repeat center top;}
.intro4 ul li:nth-child(2){ background:url(../images/product/intropic04.jpg) no-repeat center top;}
.intro5 ul li:nth-child(2){ background:url(../images/product/intropic05.jpg) no-repeat center top;}
.intro6 ul li:nth-child(2){ background:url(../images/product/intropic06.jpg) no-repeat center top;}
	@media screen and ( max-width: 768px ){
		.bg1 .title ul li{ border-right:none;}
		.bg1{ background: url("../images/bg-r.jpg") top center repeat; height:auto;  padding-top: 0; padding-top:2vw;}
		.bg1 .title{ margin-bottom: 0;}
		.box1{background: url("../images/m/mbg_b.png") repeat top center;}
		.bg2{ background: url(../images/bg-y.jpg) top center repeat; height:auto; padding-top:2vw;}
				.bg3{ background: url(../images//bg1.jpg) top center repeat; height:auto; padding-top:2vw;}
						.bg4{ background: url(../images//bg3.jpg) top center repeat; height:auto; padding-top:2vw;}

	}
		.bg_bnr{ background:#3c3c3c; padding:0;}
	@media screen and ( max-width: 640px ){
		.bg_content1{ background:url("../images/m/mbg_01.png") repeat; padding:2vw 0; }
		.bg_content1 h2{ background:url("../images/m/mbg_theme.png") no-repeat center center/100%;}
		.bg_content2{ margin:0 auto; padding:4vw 0 0 0; }
		.bg_content3{ background:none; padding:1vw;}
	}	


/* --第一區-- */	
.box1{height:auto;}
/*.conten1{background: url(../images/bg_content2.jpg) top center no-repeat;}*/
.box1 .conten1 .title{ color:#fff; margin-bottom: 30px;}
.box1 .conten1 .title span{ color: #123a13; background-color: #fff; font-size: 20px; line-height: 28px; padding: 3px 18px; float: right; border-radius: 20px; margin-top: 10px;transition: all 0.5s;}
.box1 .conten1 .title span:hover{ transform:translateY(-8px);}
.box1_block{padding:0px; height:370px; width:370px; line-height:364px;}
.box2_block{padding:0px; height:370px; width:370px; line-height:364px;}
.box2_box_1x4{padding:0px; height:366px; width:366px; line-height:368px;}
.box1_ul li{ width:370px; background-color:#fff; margin:0 25px 20px 0; text-align:center;}
.box1_ul li:nth-child(3n){ margin-right:0px;}
.box1_ul li img{max-height:370px; max-width:370px;transition:all 0.5s; vertical-align: middle; margin:0 auto; padding:10px;}	
.box1 h2{ background-color:#123a13; color:#ffffff; border-radius:30px; padding:3px 30px; height:1.5rem; font-size:1rem;  position:relative; top:-25px;}
.box1 h3{ color:#123a13; margin-top:-20px; padding:0px 10px; font-weight:600; line-height:1.1rem; font-size:1rem;}
.box1_ul li img:hover{ transform:scale(0.95);}		
	@media screen and ( max-width: 768px ){

		.box1_ul{ width:90vw;}
		.box1_ul li{ width:90vw; margin:0 3vw 5% 3vw;}
		.box1_block,.box2_block,.box2_box_1x4{ width:60vw; height:auto; line-height:0; margin:3% auto 0 auto}
		.box1_ul li img{ max-height:60vw; max-width:60vw; vertical-align:top;}
		.box1 .conten1 .title span{ color:#123a13; background-color: #fff; font-size: 14px; line-height: 20px; padding: 3px 18px; float: right; border-radius: 20px; margin-top: 2%;transition: all 0.5s; margin-right: 10vw;}
				.box1 .conten1 .title{ line-height:1rem; padding:3% 0;}
		.box1 .conten1 .title ul{ overflow:hidden;}
		}	
	@media screen and ( max-width: 490px ){
		.box1 .conten1 .title span{ color:#123a13; background-color: #fff; font-size: 14px; line-height: 20px; padding: 3px 18px; float: none; border-radius: 20px; margin-top: 0;transition: all 0.5s;margin-right: 0;}
		.box1 .conten1 .title{margin-bottom: 2vw;}
.box1_block{ margin-top:0; }
		.box1_ul{ width:96vw; display: flex; flex-wrap: wrap;}
		.box1_ul li{ width:47vw; margin:0 0 3vw 0; margin-right:0;}
		.box1_block{ width:40vw; height:auto; line-height:0; margin-top:3%;}
.box2_block{padding:0px; width:43vw; height:auto; line-height:auto;}
		.box1_ul li:nth-child(2n+1){ margin-right: 2vw;}
		.box1 h2{ font-size:0.8rem; width: 40vw;padding:3px 10px; }
		.box1 h3{font-size:0.8rem;}
		.box2_block img{ width: 100%;}
}	

/* 活動按鈕 */
.button { margin: 0px auto 20px;}
.button ul {display: flex;width: 1160px;justify-content: center;margin: auto;}
.button li {width: 360px; border: solid 1px #000; margin: auto;padding: 10px;transition-duration:.3s;background: #ebf910;}
.button a {color: #000;}
.button li:hover {  transform: scale(0.98) }
 	@media screen and ( max-width: 640px ){
		.button{ display: none;}
		
	}

/* 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;}
.title01{ top: 82px; left: 108px; position: absolute;}
.title02{ top: 55px; left: 241px; position: absolute;}
.title03{ top: 218px; left: 62px; position: absolute;}
.title04{ top: 203px; left: 190px; position: absolute;}
.title05{ top: 181px; left: 312px; position: absolute;}
.title06{ top: 441px; right: 72px; position: absolute;}
.title07{ top: 660px; left: 290px; position: absolute;}


.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.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; }




/* m */
@media screen and ( max-width: 768px ){
	.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; }

}



/* bg */
.bg01 { background:url("../images/bg01-1.jpg") top center no-repeat, url("../images/bg02.jpg") top center repeat;margin: -380px 0 0;padding: 430px 0 0;}
.bg02 { background:url("../images/bg02-1.jpg") top center no-repeat, url("../images/bg.jpg") top center repeat;margin: -300px 0 0;padding: 330px 0 0;}
.bg02 .rectangle_3p { background:url("../images/bg01.jpg") top center repeat;}
.bg03 { background:url("../images/bg03.jpg") top center repeat;}
	@media screen and ( max-width: 640px ){
		.bg01 { margin: 0; padding: 0;}
		.bg02 { margin: 0; padding: 0;}
	}

/* Public Version 公版顏色設定 */
:root {
	--PV-font: #323232; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #a62d33; /* 價格顏色-紅 */
	--PV-eslite: #a7212f; /* 誠品線上標準色 */
}

/* 文字樣式設定 */
html,body{font-family: Verdana,'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size: 16px;}
h2{font-size: 2.6rem; text-align: center;font-weight: 500;}/* 區塊大標 */
h3{font-size: 2.2rem; text-align: center;font-weight: 500;}/* 區塊小標 */
h4{font-size: 1.2rem; text-align: center;font-weight: 500;line-height: 1.4rem;}/* 特色標 */
p{font-size: 1rem; font-weight: 300;line-height: 1.4rem;}/* 內文 */
small{font-size: 60%;}
big{font-size: 140%;color:var(--PV-eslite);font-weight: bold;}
.price{font-size: 0.9rem;font-weight: 500;color:var(--PV-font);display: block;}/* 價格 */
.font{color:var(--PV-font);}/* 文字顏色 */
.sm-pic{display: none;}
	@media screen and ( max-width: 640px ){
		html,body{font-size: 14px;}
		h2{font-size: 2rem;}
	}


h2{ background: url("../images/Tbg.png") top center no-repeat;color: #ebf910; padding: 20px 0; margin: 10px auto; position: relative; z-index: 2;}
h2 p{ color: #ffedc7;font-size: 1.4rem;line-height: 2rem;margin: 0 0 10px;}

h2:nth-child(4n-1){ background: url("../images/Tbg2.png") top center no-repeat;}
.bg01 h2{ background: url("../images/Tbg2.png") top center no-repeat;}
.bg02 h2{ background: url("../images/Tbg.png") top center no-repeat;}
	@media screen and ( max-width: 640px ){
		h2{background-size: 80%;padding: 2vw 0 0; margin: 0;}
		h2 p{margin: 4vw 2vw 0;font-size: 1.2rem;line-height: 1.5rem;}
		h2:nth-child(4n-1){ background-size: 80%;}
		.bg01 h2{background-size: 80%; }
		.bg02 h2{ background-size: 80%;}
	}





/* 4-6 circle */
.circle{ width: 1160px; margin:-80px auto 40px; background: url(../images/bg01.jpg) top center repeat;padding: 70px 0 30px;border-radius: 20px; }
.circle ul { display: flex; justify-content: center;flex-wrap: wrap;}
.circle h3{ width: 1160px;margin: 4px 8px;}
.circle li { width: 260px; background: #fff; margin: 136px 8px 8px;border-radius: 0 0 50px 50px; white-space: nowrap; }
.circle li a { }
.circle .font { display: block; text-align: center;  }
.circle .font h4 { width: 230px; padding: 8px 0; color: var(--PV-eslite); margin: auto;overflow: hidden;}
.circle .font p { margin: 0;margin: 0 20px;overflow: hidden; height: 45px;}
.circle .font .price { padding: 10px 30px 10px 10px; margin: 15px 30px 25px;border: var(--PV-eslite) 1px solid; color:var(--PV-eslite);border-radius:50px;  position: relative;overflow: hidden; white-space: nowrap;}
.circle .font .price:after { content: 'GO';position: absolute;right: 0;top: -15px;background-color: var(--PV-eslite);color: #fff;line-height: 63px;padding: 3px;font-size: 0.8rem; }
.circle .font .price big {    }
.circle img { border-radius:20%;margin: -132px auto 0 auto;display: block; width: 260px; height: 260px; object-fit: cover; border: solid 5px #f1f1f1;background: #ffffff;}
	@media screen and ( max-width: 640px ){
		.circle{width: 100%; margin: 2vw auto 5vw;padding: 4vw 0;}
		.circle ul {flex-wrap: wrap;}
		.circle h3{ width: 96vw;margin: 1vw;}
		.circle li {width: 46vw;  margin: 1vw; padding: 1vw 1vw 2vw; border-radius: 0;}
		.circle a {  }
		.circle .font {  margin: 1vw 0;}
		.circle .font h4 {width: 44vw; padding: 1vw;}
		.circle .font p { }
		.circle .font .price { margin: 0 2vw 2vw; padding: 1vw 6vw 1vw 1vw;}
		.circle .font .price:after { top: -5px;line-height: 2rem;padding: 6px 3px;font-size: 0.5rem; }
		.circle .font .price big { font-size: 1.1rem; }
		.circle img { width: 43vw; height: 43vw; margin: auto;}
	}

/* 3-1 rectangle_3p */
.rectangle_3p{ width: 1160px; margin:-80px auto 40px; background: url(../images/bg02.jpg) top center repeat;padding: 70px 0 30px;border-radius: 20px; position: relative; }
.rectangle_3p ul { display: flex; justify-content: center;flex-wrap: wrap;}
.rectangle_3p h3{ width: 1160px;margin: 4px 8px;}
.rectangle_3p li { width: 320px; background: #fff; margin: 4px;  padding: 10px; text-align: center; }
.rectangle_3p li a { display: flex;flex-wrap: wrap; justify-content: center;}
.rectangle_3p .font {  margin: auto; }
.rectangle_3p .font h4 { margin: 10px 0; color: var(--PV-eslite); padding: 2px 16px;}
.rectangle_3p .font p {  }
.rectangle_3p .font .price { margin: 10px 0; }
.rectangle_3p .font .price big {    }
.rectangle_3p img { width: 266px; height: 266px; object-fit: contain; }
	@media screen and ( max-width: 640px ){
		.rectangle_3p{width: 100%; margin: 2vw auto 5vw;padding: 4vw 0;}
		.rectangle_3p ul {flex-wrap: wrap;}
		.rectangle_3p h3{ width: 96vw;margin: 1vw;}
		.rectangle_3p li {width: 46vw; padding: 3vw; margin: 1vw; }
		.rectangle_3p a {  }
		.rectangle_3p .font {padding: 1vw; }
		.rectangle_3p .font h4 { padding: 1vw;width: 40vw;white-space: nowrap;overflow: hidden; }
		.rectangle_3p .font p { }
		.rectangle_3p .font .price { margin: 1vw;}
		.rectangle_3p img { width: 40vw; height: 40vw;}
		.rectangle_3p ul li:first-child {width: 94vw; padding: 3vw; margin: 1vw 3vw; }
		.rectangle_3p ul li:first-child a { flex-wrap: nowrap; }
		.rectangle_3p ul li:first-child .font {padding: 1vw 0vw 1vw 3vw; }

	}


/* 4-4 hightlight */
.hightlight{ width: 1160px; margin:-10px auto 40px;  }
.hightlight ul { display: flex; justify-content: center;flex-wrap: wrap;}
.hightlight h3{ width: 1160px;margin: 4px 8px;}
.hightlight li { width: 260px; background: #fff; margin: 4px 8px;  padding: 0; }
.hightlight li a { }
.hightlight .font { display: block; text-align: center;  }
.hightlight .font h4 { padding: 6px 10px; margin: 0 0 5px; color:#fff; background: #48afcb;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.hightlight .font p { margin: 0; }
.hightlight .font .price { margin: 10px 0 15px; }
.hightlight .font .price big {    }
.hightlight img { display: block; width: 260px; height: 260px; object-fit: cover; }
	@media screen and ( max-width: 640px ){
		.hightlight{width: 100%; margin: 2vw auto;}
		.hightlight ul {flex-wrap: wrap;}
		.hightlight h3{ width: 96vw;margin: 1vw;}
		.hightlight li {width: 46vw; padding: 0; margin: 1vw; }
		.hightlight a {  }
		.hightlight .font {  margin: 0 0 3vw 0;}
		.hightlight .font h4 { padding: 1vw;}
		.hightlight .font p { }
		.hightlight .font .price { margin: 1vw 0;}
		.hightlight img { width: 46vw; height: 46vw;}
	}

/* 2-6 various half */
.half{ display: flex; flex-wrap: wrap;justify-content: center;}
.half ul{width: 560px;flex-wrap: wrap; margin: 4px 8px;background: #eeea1c;padding: 20px 10px;border-radius: 10px;}
.half ul h3{ width: 560px; }
.half ul li{  margin: 4px; }
	@media screen and ( max-width: 640px ){
		.half{ }
		.half ul{width: 100%; margin: 2vw; padding: 2vw 0;}
		.half ul h3{ width: 100%; }
		.half ul li{  margin: 1vw; width: 45vw; }
		.half img{ width: 45vw; }
	}

/* scene */
.scene { display: flex; justify-content: center;flex-wrap: wrap;}
.half .scene li { width: 470px; background: none; margin:auto;  padding: 0; }
.scene li a { }
.scene .font { display: block; text-align: center;  }
.scene .font h4 { padding: 6px 10px; margin: 20px 0; color:#fff; background: #48afcb; font-size: 1.3rem; line-height: 1.6rem;}
.scene .font p { margin: 0; text-align: left; font-size: 1.1rem; line-height: 1.6rem; }
.scene .font .price { margin: 10px 0 15px; }
.scene .font .price big {    }
.scene img { display: block; width: 470px; height: 470px; object-fit: cover; }
	@media screen and ( max-width: 640px ){
		.scene {flex-wrap: wrap;}
		.half .scene li {width: 80vw; padding: 0; margin: 1vw; }
		.scene a {  }
		.scene .font {  margin: 0 0 3vw 0;}
		.scene .font h4 { padding: 1vw;}
		.scene .font p { }
		.scene .font .price { margin: 1vw 0;}
		.scene img { width: 80vw; height: 80vw;}
	}

/* 6-1 collect_5x6 */
.collect_5x6 { width: 1160px; margin: -10px auto 10px 20px; }
.collect_5x6 ul { display: flex;overflow: hidden; justify-content: center; }
.collect_5x6 li {  background-color: #fff; text-align: center;margin: 6px; padding: 6px; position: relative;}
.collect_5x6 .font { display: block; text-align: center;color:#000; font-size:1.4rem; font-family: "Adobe Garamond Pro",'Noto Sans TC',Arial, Helvetica, sans-serif; font-weight:bold;   }
.collect_5x6 .font h4 { font-weight: bold;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;color:#000; font-size:1.4rem; font-family: "Adobe Garamond Pro",'Noto Sans TC',Arial, Helvetica, sans-serif; font-weight:bold;}
.collect_5x6 .font p { margin: 0;color:#000; font-size:1rem; font-family: Verdana,'Noto Sans TC','Microsoft JhengHei',sans-serif;font-weight:bold ; }
.collect_5x6 .font .price { margin: 10px 0 10px;color:#982121; font-size:1.4rem; font-family: "Adobe Garamond Pro",'Noto Sans TC',Arial, Helvetica, sans-serif; font-weight:bold; }
.collect_5x6 img { object-fit: contain;}

	/* h-row 橫排兩品 */
	.collect_5x6 .h-row li { width: 600px; padding: 12px -10px;}
	.collect_5x6 .h-row a {display: flex; }
	.collect_5x6 .h-row img {  width: 240px;height: 240px; }
	.collect_5x6 .h-row .font {text-align: left; margin: auto 0 auto 30px;}
	.collect_5x6 .h-row .font h4 { text-align: left; margin: 10px 0; font-size: 1.4rem; line-height: 2rem;  }
	.collect_5x6 .special { font-size: 1rem; color:#ffffff; background:var(--PV-eslite);  padding: 5px 15px; border-radius: 20px; }

	/* h-row 直排四品 */
	.collect_5x6 .s-row li { width: 266px; padding: 0;  }
	.collect_5x6 .s-row img { width: 256px;height: 256px;padding: 10px; margin: 42px auto 0;}
	.collect_5x6 .s-row h4 { width: 266px; padding: 10px; color:#fff; background:#48afcb; position: absolute; top: 0; }

	@media screen and ( max-width: 640px ){
		.collect_5x6 {width: 100%; margin: 2vw auto 5vw;}
		.collect_5x6 ul {flex-wrap: wrap;}
		.collect_5x6 li { padding: 0; margin: 1vw; }
		.collect_5x6 .font {  margin: 0 0 3vw 0;}
		.collect_5x6 .font h4 { }
		.collect_5x6 .font p { }
		.collect_5x6 .font .price { margin: 1vw 0;}
		.collect_5x6 img { }
		
			/* h-row 橫排兩品 */
			.collect_5x6 .h-row li { width: 96vw; padding: 2vw;}
			.collect_5x6 .h-row a { }
			.collect_5x6 .h-row img {  width: 46vw;height: 46vw; }
			.collect_5x6 .h-row .font {margin: auto 0 auto 4vw;}
			.collect_5x6 .h-row .font h4 {  padding: 0; margin: 10px 0; font-size: 1.2rem; line-height: 1.5rem;  }
			.collect_5x6 .special { font-size: 1rem; color:#ffffff; background:var(--PV-eslite);  padding: 5px 15px; border-radius: 20px; }

			/* h-row 直排四品 */
			.collect_5x6 .s-row li { width: 46vw; padding: 0;  }
			.collect_5x6 .s-row img { width: 42vw;height: 42vw;padding: 2vw;}
			.collect_5x6 .s-row h4 { width: 46vw;  }


    }


/* 6-5 keyword 關鍵字 */
.keyword { width: 1200px; margin: auto; min-width:1200px;}
.keyword { margin: 0px auto 40px; padding: 0px 50px; overflow: hidden; /*display: none;*/}
.keyword ul {display: flex; flex-wrap: wrap; justify-content: center;  }
.keyword ul li {  text-align: center; overflow: hidden;margin: 10px;padding: 0 20px; border: solid 1px;}
.keyword ul li:active a, .keyword ul li:hover a { color: #469bec;}
.keyword ul li a { color: #000;font-weight: bold; font-size: 24px; }
.keyword ul li a span { color: #f3f68c;}

	@media screen and ( max-width: 768px ){
		.keyword { margin:auto; padding: 0;width: 100%;min-width: 100%; }
		.keyword ul { overflow: hidden; margin: 3vw; }
		.keyword ul li { margin: 1vw; padding: 1vw 3vw;line-height: 1.2rem; }
		.keyword ul li a { font-size: 0.95rem; line-height: 1rem}
	}
	
	

/* --1x3-- */	
.box_1x3 li{ width:370px; background-color:#fff; margin:0 25px 25px 10px; text-align:center;transition:all 0.5s;}
.box_1x3 li:hover{ transform: translateY(-8px);}
.box_1x3 li:nth-child(3n){ margin-right:0px;}
.box_1x3 li img{max-height:370px; max-width:370px;transition:all 0.5s; vertical-align: middle; margin:0 auto; padding:10px;}	
.box_1x3 h3{ color:#353531; padding:0px 10px; font-weight:600; line-height:24px; font-size:18px;}
.box_1x3{ display: flex; flex-wrap: wrap; width: 1200px; margin: 0 auto;}
/*.box_1x3 li img:hover{ transform:scale(0.95);}	*/	
	@media screen and ( max-width: 768px ){
		.conten1 { width:100%; margin:0 auto;}

		.box_1x3{ width:100vw; display: flex;flex-wrap: wrap;align-items: stretch;}
		.box_1x3 li{ width:47vw; margin:0 0vw 2vw 0vw;}
		.box_1x3 h3{ padding-top: 8px;line-height:1.1rem; font-size:0.8rem;}
		.box_1x3 li:nth-child(3n+1){ width: 95vw;}
		.box_1x3 li:nth-child(3n+2){ margin-right: 1vw;}
		.box_1x3 li img{ max-height:47vw; max-width:47vw; vertical-align:top; padding: 1vw;}
		.box_1x3 li:nth-child(3n+1)img{ max-height:60vw; max-width:60vw; vertical-align:top;}
		.box2_box_1x4{width:47vw;height: 47vw;}
}	
/* --類別推薦（拼）-- */
/* CSS Document */
/* ---reset.css--- */

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


html, body{	
    font-family:'Century Gothic', 'Noto Sans TC','AppleGothic','sans-serif','Microsoft JhengHei', 'Noto Sans JP';
	-webkit-text-size-adjust:none;
	background-color:#fff; overflow-x:hidden;
}

*{-webkit-box-sizing:border-box;
  box-sizing:border-box;
  line-height:1;

 }

:focus { outline: 0; }
h1{ text-indent:-9999px; position:absolute;}
a {text-decoration:none;}

/* --類別推薦-電腦版型------------------------------------- */
li{ list-style:none; float:left;}
.top{ width:100%; position:relative; z-index:999; background:var(--topC);}
/*.eslite_top{ width:100%;z-index:999; background:#ffffff; position:relative;}*/
.WRAPPER{ width:100%; min-width:1200px; }
.header_m{ display:none;}




/*--類別推薦(box)--*/
.box10{ width:100%;height:80px;display:block;line-height:0; position:relative;}
.box10_content{ width:1200px; height:300px; margin:-100px auto; position:relative; display:block;line-height:0; margin-top:0px;margin-bottom: 10px}
.cata_title{ width:1020px; height:40px; position:absolute; top:23px; left:-7px;display:inline-block;overflow: hidden;}
.cata_titletext{ height:34px;font-size:2rem; line-height:2.4rem; color:#3a3a3a; 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:1200px; height:4px; display:inline-block; margin-left:30px; position:absolute;top:17px; border-bottom:#cfcfcf solid 1px; border-top:#cfcfcf solid 1px;}

@media screen and ( max-width: 768px ){
	
.box10{ width:100%;height:70px;display:block;position:relative;}
.box10_content{ width:100%;height:auto; margin:0 auto; position:relative; display:block;line-height:0; }
.cata_title{width:100%;height:50px; position:absolute; top:15px;display:inline-block;overflow: hidden;}
.cata_titletext{ height:60px;font-size:2em; line-height:2rem; color:#3a3a3a; 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:20px;margin-bottom:10px}


	}

/* --BANNER-- */
.bnr { width:1160px; margin:0 auto; min-width:1160px; padding:10px; text-align:center; }
.bnr ul li { width:48%; margin:5px; display:inline-block; }
.bnr ul li img { width:100%; }
.bnr ul li.ad1280{ width:97.4%; } /*for 1280x307*/
	@media screen and ( max-width: 768px ){	
		.bnr { margin: 0; padding: 2%; width:100%; min-width:100%;  }
		.bnr ul li { width:96%; margin:2vw; display:block; }
		.bnr ul li.ad1280{ width:96%; }
	}




/* --1x4-- */
.intro{ height:385px; margin:0 auto 10px auto; position:relative; overflow:hidden;}
.intro a{ width:100%;height:385px;}
.intro ul li:nth-child(1){ width:448px; height:1px;color:#fff; text-align:center;  z-index:1; position:absolute; top:350px; left:0px; display:none;}
.intro ul li:nth-child(2){ width:470px; height:290px; background-color: #fff;z-index:3; position:absolute; left:0px; top:60px; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.1), 1px 2px 4px rgba(0, 0, 0, 0.1);border-radius:10px;}
.intro ul li:nth-child(3){ width:358px; height:auto; font-size:1.6rem; line-height:2.3rem; color:#123a13; text-align:center; font-weight:600; border-bottom:#000000 solid 1px; position:absolute; z-index:10;letter-spacing:2px; top:80px; left:56px; overflow: hidden;  padding:20px 10px;}
.intro ul li:nth-child(3) span{ font-size:1rem; line-height:1rem; color:#000000;}
.intro ul li:nth-child(4){ width:358px; height:auto; font-size:0.9rem; line-height:1.4rem; color:#575757; font-weight:500;position:absolute; z-index:10; top:190px; left:56px;overflow:hidden;text-align:center;text-justify:inter-ideograph; padding: 0px 10px 0 10px; letter-spacing:1px; }
.intro ul li:nth-child(5){ width:750px; height:350px;font-weight:300;  position:absolute; right:0px; top:30px;z-index:2; }
.intro ul li:nth-child(5) img{width:750px; height:350px;}
	@media screen and ( max-width: 768px ){
		.intro{ width:96vw; height:auto;margin:0 auto; padding-top:0%; }
		.intro a{width:96vw;height:auto;}
		/*.intro ul{ background:url(../images/m/mbg_intro.png) repeat;}*/
		.intro ul li:nth-child(1){ display:none;}
		.intro ul li:nth-child(2){ display:none;}
		.intro ul li:nth-child(3){ width:96vw; height:auto; font-size:1.5rem; line-height:1.9rem; font-weight:700; text-align:center; position:unset; letter-spacing:0px; padding:10px 10px; background-color:#fff; }
		.intro ul li:nth-child(4){ width:96vw; height:auto; font-size:0.8rem; line-height:1rem; font-weight:400; position: relative; z-index:10;top:0px; left:0px;overflow:hidden;text-align: center;text-justify:inter-ideograph; padding: 3% 10% 3% 10%;background-color:#fff; }
		.intro ul li:nth-child(5){ width:96vw; height:auto;font-weight:300; position: relative; right:0px; top:0px;z-index:2; margin-bottom: 2vw;}
		.intro ul li:nth-child(5) img{width:100%; height:auto;}
	}

.box_1x4 {/*padding:20px 00px;*/ width: 1200px; min-width:1140px;margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch;}
.box_1x4 li {width:280px; background-color:#fff; text-align:center;padding:8px;  margin-right:14px; display:inline-block; vertical-align:top; margin-bottom:13px;transition:all 0.5s}
.box_1x4 li:hover{box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.2), 1px 4px 8px rgba(0, 0, 0, 0.2); transform: translateY(-8px);}
.box_1x4 li:nth-child(4n){margin-right:0px;}
.box_1x4 li div{width:264px;height:264px;overflow:hidden; vertical-align:middle;line-height:258px; margin-bottom:8px;}
.box_1x4 li img{ max-width:100%; max-height:100%; margin:0 auto; vertical-align:middle;/*transition:all 0.5s;*/}
/*.box_1x4 li img:hover{ transform:scale(0.95);}*/
.box_1x4 li h2{ height:auto; font-size:0.95rem; line-height:1.2rem; color:#ffffff; text-align:center; font-weight:600; position:relative;overflow: hidden;  margin:10px 0px 5px 0px; background-color:#982121; padding:5px; width:264px;}
.box_1x4 li p{ height:auto; font-size:18px; line-height:24px; color:#353531; text-align:center; font-weight:600; position:relative;overflow: hidden; z-index:10; padding-bottom:8px; padding-top:8px;}
.box_1x4 li h4{ height:auto; font-size:0.75rem; line-height:1.5rem; color:#777; text-align:center; font-weight:500; position:relative;padding-top:0px;}
.box_1x4 li h4 span{  height:auto; font-size:1.4rem; line-height:1.5rem; color:#982121; text-align:center; font-weight:900; position:relative;font-family:"Adobe Garamond Pro",'Noto Sans TC',Arial, Helvetica, sans-serif;}
	@media screen and ( max-width: 768px ){
		.box_1x4{ padding:0% 0 0% 0; min-width:100vw;width:100vw;margin:0 auto;}
		.box_1x4 li {width:47vw; padding:1vw; overflow:hidden; margin-right:1vw; margin-bottom:2vw;}
		.box_1x4 li:hover{box-shadow:none;}
		.box_1x4 li:nth-child(2n){margin-right:0px;}
		.box_1x4 li:nth-child(4n){margin-right:0px;}
		.box_1x4 li div{width:45vw;height:45vw;overflow:hidden;vertical-align:middle; margin:0 auto; line-height:45vw;margin-bottom:2vw;}
		.box_1x4 li img{line-height:0; vertical-align:top; transition:all 0.5s;vertical-align:middle;}
		.box_1x4 li h2{ font-size:0.8rem; line-height:1.2rem;  margin:0px 0px 0px 0px;  padding:5px; font-weight:unset; letter-spacing:0;}
		.box_1x4 li p{font-size:0.8rem; line-height:1.1rem; padding-bottom:0;}
		.box_1x4 li h4{font-size:0.5rem; line-height:1.5rem;padding-top:2%;}
		.box_1x4 li h4 span{  font-size:1.2rem; line-height:1.5rem; }}



/*  每日一物  */

.calendar{ width: 1160px; height: auto; margin:40px auto; background:#ffdf7c; padding-bottom:15px; min-width: 1160px;}

.cal_ul{ display: flex; flex-wrap: wrap;justify-content: center; }
.calendar .title{width: 1160px; margin: 0 auto; padding-left: 50px; color: #123a13;}
.calendar .title small{ font-size:15px; margin-left: 10px;  }
.calendar .title span{ color: #ffffff; background-color: #123a13; font-size: 20px; line-height: 28px; padding: 3px 48px 3px 25px; float: right; border-radius: 20px 0 0 20px; margin-top: 10px;transition: all 0.5s;}
.calendar .title span:hover{transform: translateY(-8px);}
.cal_ul li{ width: 255px;padding: 5px 0 0;margin: 8px;text-align: center;background:url("../images/m/bgp.jpg") no-repeat bottom center ,none  #ffffff repeat bottom center;}
.cal_ul li a { position: relative;}
.cal_ul li a .day{ display: flex; padding: 0 17.5px;}
.cal_ul li a .day font { }
.cal_ul li a .day font h5{ font-size: 10px; color: #123a13;}
.cal_ul li a .day font h4{ font-size: 36px;color: #123a13; padding-top:10px;}
.cal_ul li a .day hr{ width: 1px;  margin: 10px 12px; color: #123a13;}
.cal_ul li a .day p{text-align: left; margin: 7px 0; font-size: 18px; color: #123a13;}
.cal_ul li a img{ width: 220px; height: 220px;margin: 10px;object-fit: contain; }
.cal_ul li a .special{ width: 46px; height: 46px;padding: 5px;background: #da325d; color: #fff; position: absolute; right: 0;border-radius: 4px;
font-size: 16px; line-height: 18px;font-weight: normal; }
.cal_ul li a .sale{ display: block; background: #da325d; color: #fff; line-height: 50px;font-family: century gothic,'Noto Sans TC',Arial, Helvetica, sans-serif;}

	@media screen and ( max-width: 768px ){
		
		.calendar{ min-width: 96vw;}
		.calendar .title{width:90vw; margin: 0 auto; padding-left: 0px; line-height:20px; }
.calendar .title small{ font-size:14px; margin-left: 10px; }
.calendar .title span{ color: #ffffff; background-color: #123a13; font-size: 14px; line-height: 28px; padding: 3px 25px 3px 25px; float:none; border-radius: 20px ; margin-top: 3px;transition: all 0.5s; display:block;}
		.calendar{ width:96vw; height: auto; margin:2vw;  padding:  1vw 0; border-radius: 10px;}
		.calendar h2{ font-size: 2.2rem; padding: 0; line-height: 3.5rem; margin: 0;}
		.calendar h2 p{ font-size: 1.6rem; display: block; margin: 0 14px;}
		.calendar h2 .more{  height: 8vw; padding: 1vw 1vw 1vw 4vw ; top: 12vw;font-size: 1.2rem; line-height: 1.5rem;}
		.cal_ul{margin: 3vw 0; }
		.cal_ul li{ width: 46vw;padding: 7vw 0 0;margin: 1vw; }
		.cal_ul li a {}
		.cal_ul li a .day{ display: flex; padding: 0 2vw;}
		.cal_ul li a .day font { }
		.cal_ul li a .day font h5{ }
		.cal_ul li a .day font h4{ font-size: 2.2rem; font-size: 1.8rem;}
		.cal_ul li a .day hr{ margin: 1vw;}
		.cal_ul li a .day p{ font-size: 0.82rem;line-height: 1rem;font-family: 'Noto sans TC',serif;}
		.cal_ul li a .day p br{display: none;}
		.cal_ul li a img{ width: 42vw; height: 42vw;margin: 1vw; }
		.cal_ul li a .special{ width: 10vw; height: 10vw;padding: 1vw;font-size: 1.2rem; line-height: 1.4rem;}
		.cal_ul li a .sale{ line-height: 2.2rem;}
		
		
		
	}

	@media screen and ( max-width:640px ){	.cal_ul li a .special{ width: 10vw; height: 10vw;padding: 1vw;font-size: 1rem; line-height: 1.2rem;}}
	@media screen and ( max-width:540px ){	.cal_ul li a .special{ width: 10vw; height: 10vw;padding: 1vw;font-size: 0.8rem; line-height: 0.9rem;}}
	@media screen and ( max-width:440px ){	.cal_ul li a .special{ width: 10vw; height: 10vw;padding: 1vw;font-size: 0.7rem; line-height: 0.8rem;}}
	@media screen and ( max-width:400px ){	.cal_ul li a .special{ width: 10vw; height: 10vw;padding: 1vw;font-size: 0.6rem; line-height: 0.7rem;}}


/* --關鍵字--  */		
.box07{background: url(../images/key_bg.jpg) top center no-repeat; height:577px; position: relative;}
.box07 .box1200{ height:577px; text-align:center; margin: 0 auto;width: 1160px; min-width: 1200px;}
.keyword ul{ width:170px; height:448px;z-index:10; verflow:hidden;	text-align:center; padding-top: 86px; float: left; padding-left: 160px;}
.keyword ul li{ display:block;    text-align: center; margin:0 auto;width:170px; }
.keyword ul li a{ color:#123a13; font-size:1.4rem; line-height:2.25rem;  text-align:center; margin:0 auto; font-weight:500;}
.keyword ul li a:hover{ color:#da325d;}
.ad_block{ padding-top:74px; padding-left: 483px;}
.ad_block img{ width:470px; height:220px; display:block; transition:all 0.5s; }
.ad_block img:hover{ transform:scale(0.95);}
.ad_block img:nth-child(odd){ margin-bottom:13px;}
.bt{ width:194px; height:507px; float: right; padding-right:374px; margin-top: -573px;}
.bt ul{ width:194px;height:507px;}
.bt ul li{ width:194px; height:117px;background: url(../images/bt.jpg) top center no-repeat; line-height: 116px; text-align:center; color:#fff; font-size:1rem;transition:all 0.5s; margin-bottom:9px;}
.bt ul li a{color:#fff; font-size:0.8rem;}
.bt ul li a:hover{color:#fff;}
.bt ul li span{ font-size: 1.4rem; color:#FFD238;}
.bt ul li:hover{ transform:scale(0.95);}
.bt ul li img{ vertical-align:middle; margin-left:5px; padding-bottom:3px;}


	@media screen and ( max-width: 768px ){
.box07	{background: url("../images/m/mbg_b.png") top center repeat; height: auto; padding-top: 3vw;}
.box07 .box1200{  width:94vw; text-align:center; height: auto;margin:0 auto;  min-width:94vw;}	
.keyword ul{width:94vw; height: auto; position: relative;  left:0;  top:0; padding-top:0px; padding-left: 0px; margin:0 auto; margin-bottom:2vw;float: none;}
.keyword ul li{ display:block;    text-align: center; margin:0 auto;width:47vw; background-color:#fff;}
.keyword ul li:nth-child(1),.keyword ul li:nth-child(4),.keyword ul li:nth-child(5),.keyword ul li:nth-child(8),.keyword ul li:nth-child(9){ background-color:#fff2bd;}
.keyword ul li a{  font-size:1rem; line-height:3rem;}
.ad_block { padding-top: 0; padding-left: 0;}
.ad_block img{ width:94vw; height: auto; display:block; position: relative; top:0; left:0; margin-bottom:3vw;}
.ad_block img:nth-child(odd){ margin-bottom:3vw;}
.bt{ width:94vw; height: auto; position: relative; top:0; left:0;float: none; margin-top: 0px;}
.bt ul{ width:94vw;height: auto; display:inline-block;}
.keyword .bt ul li{ width:45vw; height: 27.5vw;background: #da325d; background-size:100%; line-height: 27.5vw; text-align:center; color:#fff; font-size:1rem;transition:all 0.5s; margin-bottom:9px;}
.bt ul li{ margin-right:2vw;}
.othertitle{ width:100vw;}
.othertitle img{ width:94vw;}
.s8_m{ width:94vw; margin:0 auto; height:auto;}
		}

	@media screen and ( max-width: 1199px ){
		.bt ul li{ font-size:1rem;}
		}


/* --AD-- */
.boxAD{padding:0px 0px 15px 0px; background: url("../images/m/mbg_y.png")repeat;}
.contenAD{ padding:0 20px;}
.boxAD ul{ padding-top:25px;}
.boxAD ul a{ display:block;float:left;}
.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(4){ width:1160px; transition:all 0.5s;}
.boxAD .item_pc{ width:1152px; margin-bottom:22px;}
.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:565px; margin-right:22px; overflow:hidden;transition:all 0.5s;margin-bottom:22px;}
.boxv ul li:hover{ transform: translateY(-8px);}
.boxAD ul li img{ width:100%;}
.boxAD ul li:nth-child(3n){margin-right:0px;}
	@media screen and ( max-width: 768px ){
		.contenAD{ padding:0;}
		.boxAD .item_m{ width:96vw; margin-bottom:0;}
		.boxAD ul{ padding-top:3vw; display:block;}
		.boxAD ul li{ width:96vw; margin:0 auto 2vw auto;}	
		.boxAD ul li img{ width:96vw;}
		.boxAD .item_pc{ display:none;}
		.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(4),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:96vw;margin-right:0; margin-bottom:2vw;}
	}



/*手機 下方選單*/
menu{ display:none;}
	@media screen and ( max-width: 768px ){
		menu{
			display:inherit; -width:100%;
		}
		menu ul{
			position:fixed;
			bottom:0;
			left:0;
			margin:0;
			width:100%;
			display:flex; justify-content:center; text-align:center;
			flex-wrap: nowrap;
			background:#ce9418;
			z-index:999;
			padding:4.5px 0;
			/* border-top:4px solid #d6666e;*/
		}
		menu ul li{
			border-right:1px solid #ffffff;
			padding:0.5px 1%;
			min-width:25%;
			box-sizing:border-box;
			font-size:12px;
			font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC','Heiti TC';
		}
		menu ul li:nth-last-child(1){ border-right:none;}
		menu a{
			color:#ffffff;
			text-decoration: none;
		}
	}
	
/*--goto top--*/
#button {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 15px;
  right: 15px;
  transition: background-color .3s, 
 opacity .5s, visibility .5s;
	  opacity: 0;
  visibility: hidden;
  z-index: 1000;

}
@media screen and ( max-width: 768px ){
#button {
  bottom: 35px;
  right: 10px;}
}

#button::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:45%;background-position:40% 30%;
}
#button:hover {
  cursor: pointer;
  background-color: #666;
}
#button:active {
  background-color: #666;
}
#button.show {
  opacity: 0.4;
  visibility: visible;
}


/* 導覽頁籤 */
.sidenav { position: fixed; left: 0; top: 80px; z-index: 99; width: 90px; border-radius:25px; overflow: hidden; background:url("../images/bg_05.jpg")top center repeat;   }
.sidenav ul { overflow: hidden;  padding: 20px 0; }
/*.sidenav ul:last-child  { background-color:#000; }*/
.sidenav ul li {font-weight: bold; font-size: 18px; line-height: 22px; text-align: center; color:#f9ef4d; }

nav ul li:nth-child(6){ margin-bottom: 30px;}
.sidenav ul li a { display: block; color: #fff; font-size: 15px; line-height: 30px;text-align: center;}
.sidenav hr { margin: 12px; padding: 0; border: #f9ef4d 0.5px solid;}
nav h5{ font-size: 20px; padding: 3px 10px 15px 10px; border-bottom: double 4px #000; margin: 0 2px 5px 4px; font-weight: 600;}
.sidenav li { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.sidenav li:hover a {  background-color:#fff; }
.sidenav li:hover a { color:var(--font-color) ; }

/*收*/
.nav_block{position: fixed; z-index:99;}
@media screen and ( max-width: 768px ){
.nav_block { display: none; }}
.sidenav_pc{	position: fixed; z-index:99;}
.side-menu{
	position: fixed;
	width: 120px;
	top:70px;
	padding: 20px 0;
	border-radius:20px;
	box-sizing: border-box;
	background:#ffffffc7;
	display: flex;
	flex-direction: column;
	transform: translateX(0%);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
}
.side-menu form{
	display: flex;
	margin: 0 10px 50px;
	border-radius: 100px;
	border:1px solid rgb(255,255,255,.4);
}
.side-menu form input,
.side-menu form button{
	border:none;
	background-color: transparent;
	color: #fff;
	padding: 5px 10px;
}
.side-menu form input{
	width: 230px;
}
.side-menu form button{
	width: 50px;
}
.side-menu form input:focus,
.side-menu form button:focus{
	outline: none;
}
.side-menu label{
	position: fixed;
	width: 40px;
	height: 150px;
	background:#ffffff99;
	color: #da325d;
	right: -40px;
	top: -350px;
	bottom: 0;
	margin: auto;
	line-height: 28px;
	text-align: center;
	font-size: 24px;
	border-radius: 0 10px 10px 0;
	padding:18px 8px 10px 8px;
	font-weight:bold;
}
#side-menu-switch{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch:checked + .side-menu{
	transform: translateX(-100%);
}
#side-menu-switch:checked + .side-menu label .fa{
	transform: scaleX(-1);
} 
nav a{
	display: block;
	padding: 8px 12px;
	color: #123a13;
	text-decoration: none;
	position: relative;
	font-size:17px;	
	font-weight: bold; text-align: center;

}
nav a:hover{
	color: #fff;
	background-color:#da325d;
}

nav a + a::before{
	content: '';
	position: absolute;
	border-top: 1px solid rgb(255,255,255,.4);
	left: 10px;
	right: 10px;
	top: 0;
}
nav a .fa{
	margin-right: -1.1em;
	transform: scale(0);
	transition: .3s;
}
nav a:hover .fa{
	margin-right: 0em;
	transform: scale(1);
}
nav ul{width: 110px;}
nav ul li{margin: 0 auto; width: 110px;}

@media screen and ( max-width: 768px ){
	.side-menu { display: none;}
	
	
}