@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{ 
	background: url(../images/m/mbg_4.png) repeat;
    min-width: 320px;
	max-width: 768px;
    	width: 100%;}}


*{-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:500px; 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") no-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%;}
}	




/* --1x3-- */	
.box_1x3 li{ width:370px; background-color:#fff; margin:0 25px 25px 0; 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;}
}	



/* --品牌新品-- */
.conten4{background: url(../images/block2X2.png) top center no-repeat;}
.box4_ul{ width:570px; background:#fff; display:inline-block; margin-right:13px; padding:10px; margin-bottom:25px;transition:all 0.5s; position:relative; overflow: visible;}
.b4display{ display:inline-block;}
.box4 .title,.box2 .title{ color:#fff;}
.box4 .title ul li,.box2 .title ul li{border-right: #fff 1px solid;}
.box4 .title ul li:last-child,.box2 .title ul li:last-child{border-right:none;}
.box4_ul a{ display:block;float:left;}
.box4_ul:hover{ transform: translateY(-8px);}
.box4_ul2{ margin-right:0px;}
.box4_ul li:nth-child(1){ width:264px; height:264px; vertical-align:middle; display:inline-block; margin-right:7px; border:1px #ccc solid; line-height:258px;}
.box4_ul li:nth-child(1) img{ max-height:264px; max-width:264px;vertical-align:middle;}
.box4_ul li:nth-child(2){width:278px; margin:0 auto; text-align:center; border-top:1px #261003 solid; border-right:1px #261003 solid; margin-bottom:4px; padding-top:6px;}
.box4_ul li:nth-child(2) h2{ width:278px;}
.box4_ul li:nth-child(3){ width:136px; height:136px; overflow:hidden; display:inline-block; margin:0px 6px 0 0; border:1px #ccc solid; padding:0;}
.box4_ul li:nth-child(3) img{ width:100%;}
.box4_ul li:nth-child(4){ width:136px; height:136px;overflow:hidden; display:inline-block; border:1px #ccc solid;}
.box4_ul li:nth-child(4) img{ width:100%; }
	@media screen and ( max-width: 768px ){
		.conten4{background: url(../images/bg_03.png) top center repeat;}
.box4_ul{ width:96vw;}
		.box4_ul li:nth-child(1){ width:44vw; height:44vw; text-align:center;line-height:44vw;}
		.box4_ul li:nth-child(1) img{ max-width:100%; max-height:100%;}
		.box4_ul li:nth-child(4) img{ max-width:100%; max-height:100%;}
		.box4_ul li:nth-child(3) img{ max-width:100%; max-height:100%;}
		.box4_ul li:nth-child(2){ width:47vw; height:20.8vw; margin-bottom:1vw;}
		.box4_ul li:nth-child(2) h2{ width:47vw;}
		.box4_ul li:nth-child(3),.box4_ul li:nth-child(4){ width:22vw; height:22vw;}
		}
	@media screen and ( max-width: 540px ){
		.b4display{ width:90vw; margin:0 auto; padding:0 3vw; margin-bottom:3.5vw;}
.box4_ul{ width:90vw; margin:0 auto; padding:2vw;}
		.box4_ul li:nth-child(1){ width:60vw; height:auto; margin:0 15vw; }
		.box4_ul li:nth-child(2){ width:60vw; height:auto; border:none; margin:0 15vw 1vw 15vw; }
		.box4_ul li:nth-child(2) h2{ width:86vw;}
		.box4_ul li:nth-child(3),.box4_ul li:nth-child(4){ width:42vw; height:auto;}
		}
	
		@media screen and ( max-width: 320px ){

			}




/* --1x2-- */
.box_1x2{ width:570px; background:#f2ecce; display:inline-block; margin-right:13px; padding:10px; margin-bottom:25px;transition:all 0.5s; position:relative; overflow: visible;}
.b4display{ display:inline-block;}
.box_1x2 a{ display:block;float:left;}
.box_1x2:hover{ transform: translateY(-8px);}
.box_1x22{ margin-right:0px;}
.box_1x2 li{ text-align:center;}
.box_1x2 li:nth-child(1){ width:264px; height:264px; vertical-align:middle; display:inline-block; margin-right:7px; border:1px #ccc solid; line-height:258px;}
.box_1x2 li:nth-child(1) img{ max-height:264px; max-width:264px;vertical-align:middle;}
.box_1x2 li:nth-child(2){width:278px; margin:0 auto; text-align:center;/* border-top:1px #261003 solid; border-right:1px #261003 solid;*/ margin-bottom:4px; padding-top:0px;}
.box_1x2 li:nth-child(2) h2{ width:278px; padding:4px 10px; height:36px; background-color: #9a3422; color:#ffffff; font-weight:600;}
.box_1x2 li:nth-child(2) h3{ width:278px; color: #353531; padding:10px 8px;font-weight:600;}
.box_1x2 li:nth-child(2) .proname{ font-size:0.7rem; padding:1px 12px 7px 12px;}
.box_1x2 li:nth-child(3){ width:136px; height:136px; overflow:hidden; display:inline-block; margin:0px 6px 0 0; border:1px #ccc solid; line-height:128px;}
.box_1x2 li:nth-child(3) img{ max-width:100%; max-height:100%;vertical-align:middle; }
.box_1x2 li:nth-child(4){ width:136px; height:136px;overflow:hidden; display:inline-block; border:1px #ccc solid;vertical-align:middle;line-height:128px;}
.box_1x2 li:nth-child(4) img{ max-width:100%; max-height:100%;vertical-align:middle; }
	@media screen and ( max-width: 768px ){
		.box_1x2{ width:96vw;}
		.b4display{ width:90vw;}
		.box_1x2 li:nth-child(1){ width:44vw; height:44vw; text-align:center;line-height:44vw; margin-bottom:1vw;}
		.box_1x2 li:nth-child(1) img{ max-width:100%; max-height:100%;}
		.box_1x2 li:nth-child(4) img{ max-width:100%; max-height:100%;}
		.box_1x2 li:nth-child(3) img{ max-width:100%; max-height:100%;}
		.box_1x2 li:nth-child(2){ width:47vw; height:20.8vw; margin-bottom:1vw; }
		.box_1x2 li:nth-child(2) h2{ width:47vw;padding:2vw 0; margin-top:2vw;font-size:1.1rem; font-weight:unset}
		.box_1x2 li:nth-child(2) h3{ width:47vw; padding:1vw 0;}
		.box_1x2 li:nth-child(3),.box_1x2 li:nth-child(4){ width:22vw; height:22vw; line-height: inherit;}
		.box_1x2 li:nth-child(2) .proname{ font-size:0.70rem; padding:3px 0px 3px 0px;}
	}
	@media screen and ( max-width: 540px ){
		.box_1x2{ width:96vw; margin:0 auto;}
		.b4display{ width:90vw; margin-bottom:5vw;}
		.box_1x2 li:nth-child(1){ width:85vw; height:auto;}
		.box_1x2 li:nth-child(2){ width:85vw; height:auto; margin-bottom:1vw; border:none;}
		.box_1x2 li:nth-child(2) h2{ width:85vw;}
		.box_1x2 li:nth-child(2) h3{width:85vw;padding:2vw 0;}
		.box_1x2 li:nth-child(3),.box_1x2 li:nth-child(4){ width:41.5vw; height:auto;line-height: inherit;}
	}


/* --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: 640px ){	
		.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;}
	
	
}