@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@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{	
background: url(../images/bg.png) top center repeat;
	font-family: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;}
@media screen and ( max-width: 991px){
   html, body{ 
    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:#633417;}	
#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: 991px){
		.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:#633417;}
		.header_m img{ width:120%; height:auto; display:block; }
		#tob{ width:50%; font-size:70%}}
footer{ width:100%; position:relative; z-index:990;background: url(../images/bg_content1.png) top center repeat;}

/* --通用-- */
.container{ width:100%;overflow:hidden; min-width:1200px;}
.box{ width:100%; overflow:hidden;}
.box_content{width:1200px;margin:0 auto; padding-left:20px; padding-right:20px;}
.item_pc{ display:block;}
.item_m{ display:none;}
ul{ display:inline-block; overflow:hidden;}
li{ list-style:none; float:left; overflow:hidden;}
.title{margin:0 auto; text-align:center; border-bottom:1px #2e3e66 solid; height:2rem; margin-bottom:50px;}
.title ul{ overflow:visible; padding:30px 0;background: url(../images/bg_content1.png) top center repeat;}
.title ul li{ color: #64433e;font-size:1.8rem; font-weight:bold; padding:0 15px;overflow:visible; border-right:#2e3e66 1px solid;}
.title ul li:last-child{border-right:none;}
h2{text-align:center; color:#261003; font-size:1rem;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';font-weight:500; 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 Sans TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#261003; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:#b23307; font-size:1.7rem; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}	
	@media screen and ( max-width: 991px){
		.container{width:100%; max-width:768px; min-width:320px; max-width:100vw;}
		.box{ width:100%; overflow:hidden; min-width:320px;max-width:100%;}
		.box_content{ width:96vw; padding-left:0px; padding-right:0px; margin:0 auto;}
		.item_pc{ display:none;}
		.item_m{ display:block;}
		.item_m img{ margin:0 auto; width:100%;}
		h2{font-size:0.8rem;}
		.proname{font-size:0.6rem;}	
        .number{font-size:1.2rem;}
		.title{ height:1.5rem; margin-bottom:30px; }
		.title ul li{ font-size:1.6rem;padding:0 10px;}
		.title ul{  padding:20px 0;}
		}
	@media screen and ( max-width: 991px ){	
			.title{ height:1rem; margin-bottom:30px; }
			.title ul li{ font-size:1.4rem;padding:0 8px;}
					.title ul{  padding:10px 0;}
}
			
/* --主視覺-- */
.kv{background:  url(../images/kv.jpg) top center no-repeat;width:100%;height:580px; position:relative; display:block;margin: 0 auto;}	
.kv_m{display: none;}
.fami{width:100%;background: url(../images/07sale_bg.jpg) top center no-repeat; height:150px; display:block; }
.fami_content{ width:1200px; margin:0 auto; min-width:1200px;position:relative;}		
.link{width:100%;background: url(../images/link_bg.jpg) top center no-repeat; height:159px; position:relative; display:block;}	
.link_content,.kv_content{ width:1200px; margin:0 auto; min-width:1200px;position:relative;}	
.kvtitle1{ z-index:99; position:absolute; top:160px; left:352px;}
.kvtitle2{ z-index:99; position:absolute; top:98px; left:471px;}
.kvtitle3{ z-index:99; position:absolute; top:403px; left:446px;}
.kvtitle4{z-index:99; position:absolute; top:97px; left:26px;}
.kvtitle4 img{ width:100%;}
.kvtitle5{z-index:99; position:absolute; top:31px; left:861px;}
.kvtitle5 img{ width:100%;}
.kvtitle6{ z-index:99; position:absolute; top:341px; left:53px;}
.kvtitle6 img{ width:100%;}
.kvtitle7{z-index:99; position:absolute; top:322px; left:951px;}
.kvtitle7 img{ width:100%;}
.link1{ z-index:99; position:absolute; top:32px; left:18px; overflow:hidden;}
.link2{ z-index:99; position:absolute; top:32px; left:415px; overflow:hidden;}
.link3{ z-index:99; position:absolute; top:32px; left:810px; overflow:hidden;}
.link1 img,.link2 img,.link3 img{ width:370px;}
.sale_m{ display:none;}

	@media screen and ( max-width: 991px){
		.fami{ display:none;}
		.kv{display: none;}
.kv_m{ display: block; max-width:100%;}
.kv_m img { display: block;width:100% }
.kvtitle1,.kvtitle2,.kvtitle3,.kvtitle4,.kvtitle5,.kvtitle6,.kvtitle7{ display:none;}

.link{ width:100vw;background: url(../images/link_bg.jpg) top center repeat;height:auto; padding:5vw 0;}
.link_content,.kv_content{ width:96vw;}	
.link1{ display:block;position: relative; top:0; left:0; width:90vw; margin:0 5vw 3vw 5vw;}
.link1 img,.link2 img,.link3 img{ width:90vw;}
.link2{ display:block;position: relative; top:0; left:0; width:90vw; margin:0 5vw 3vw 5vw;}
.link3{ display:block;position: relative; top:0; left:0; width:90vw; margin:0 5vw 0vw 5vw;}
}


/* --品牌優惠-- */	
.conten2{background: url(../images/bg_content1.png) top center repeat;}
.box2_block{padding:0px; height:370px; width:370px; line-height:364px;}
.box2_ul li{ width:370px; background-color:#fff; margin:0 25px 20px 0; text-align:center;}
.box2_ul li:nth-child(3n){ margin-right:0px;}
.box2_ul li img{max-height:370px; max-width:370px;transition:all 0.5s; vertical-align: middle; margin:0 auto; padding:0px;}	
.box2_ul li img:hover{ transform:scale(0.95);}		
	@media screen and ( max-width: 991px){
		.box2_ul{ width:96vw;}
		.box2_ul li{ width:80vw; margin:0 8vw 5% 8vw;}
		.box2_block{ width:80vw; height:auto; line-height:0; margin-top:3%;}
		.box2_ul li img{ max-height:80vw; max-width:80vw; vertical-align:top;}
		}	
	@media screen and ( max-width: 490px ){
.box2_block{ margin-top:0;}
		.box2_ul{ width:96vw; }
		.box2_ul li{ width:90vw; margin:0 3vw 5% 3vw; margin-right:0;}
		.box2_block{ width:90vw; height:auto; line-height:0; margin-top:3%;}
		}	

/* --誠品獨家-- */	
.conten3{background: url(../images/bg_content1.png) top center repeat;}
.box3_ul{ overflow:visible; display:flex; flex-wrap:wrap; align-items:stretch;}
.box3_ul li{ width:278px; margin:0 16px 20px 0; text-align:center; background-color:#fff; padding:10px;transition:all 0.5s; position:relative; overflow:visible; }
.box3_ul li div{ overflow:hidden;}
.box3_ul li:hover{ transform: translateY(-8px);}
.box3_ul li:nth-child(4n){ margin-right:0px;}
.box3_block{height:258px; width:258px;vertical-align: middle;margin:0 auto; line-height:256px;box-sizing: border-box;}
.box3_ul li img{max-height:258px; max-width:258px;transition:all 0.5s; margin:0 auto;vertical-align: middle;}
.box3 h2{ padding-top:0px;padding-bottom:0px; font-size:1.1rem;}

.box3_ul li p{ font-size:0.8rem; color:#000;font-family:'Noto Sans TC','Microsoft JhengHei','Heiti TC';}
.ex_text{ position:absolute; top:5px; left:25px; font-size:0.9rem; width:1.8rem; color:#fff; font-weight:500;}
.ex_tag{ position:absolute; width:70px; top:-8px; left:15px;}
	@media screen and ( max-width: 991px){
		.box3_ul{ margin:0 2vw;}
		.box3_ul li{ width:44vw; margin:3% 1vw;}
		.box3_block{ width:40vw; height:40vw; line-height:40vw;}
		.box3_ul li img{ max-width:100%; max-height:100%; margin:0; padding:0;}
		.ex_tag{ position:absolute; width:72px; top:-8px; left:15px;}
		.box3 span{padding-top:0px; margin-bottom:3px;}
		.box3 h2{ font-size:0.8rem; line-height:1rem; height:10vw;}
		.box3_ul li p{ font-size:0.6rem;}
		}
	@media screen and ( max-width: 991px ){
				.box3 h2{ font-size:0.8rem; line-height:1rem; height:14vw;}
				.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;}
		}

/* --品牌新品-- */
.conten4{background: url(../images/bg_content1.png) top center 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_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; margin:0 auto;object-fit: contain;}
.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; line-height:136px;}
.box4_ul li:nth-child(3) img{ width:100%;object-fit: contain;vertical-align:middle;}
.box4_ul li:nth-child(4){ width:136px; height:136px;overflow:hidden; display:inline-block; border:1px #ccc solid; line-height:136px;}
.box4_ul li:nth-child(4) img{ width:100%;object-fit: contain; vertical-align:middle;}
	@media screen and ( max-width: 991px){
.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; line-height: inherit;}
		}
	@media screen and ( max-width: 991px ){
.box4_ul{ width:94vw;}
		.box4_ul li:nth-child(1){ width:88vw; height:auto;}
		.box4_ul li:nth-child(2){ width:88vw; height:auto; margin-bottom:1vw; border:none;}
		.box4_ul li:nth-child(2) h2{ width:88vw;}
		.box4_ul li:nth-child(3),.box4_ul li:nth-child(4){ width:43vw; height:auto;line-height: inherit;}
		}
	
		@media screen and ( max-width: 320px ){

			}
/* --類別分類-- */	
.conten5{background: url(../images/bg_content1.png) top center repeat;}
.cata{ padding:0 80px;}
.cata li{ text-align:center;width:190px;margin-right:35px; margin-bottom:45px;margin-left:25px;}
.cata li:nth-child(5n){ margin-right:0px;}
.cata div{ width:190px; height:190px; border-radius:100%;overflow:hidden;}
.cata li img{ width:100%;transition:all 0.5s;}
.cata li img:hover{ border-radius:100%; transform:scale(1.15);}
.cata li p{ size:1.1rem; font-weight:bold; color:#261003; line-height:50px;}
	@media screen and ( max-width: 991px){
.cata{ padding:0 12%;width: 100%;}
.cata div{ width:16vw; height:16vw;}
.cata{ margin:0 auto;}
.cata li{ display:inline-block; width:16vw;margin: 0px 1vw 15px 1vw;}
.cata li:nth-child(5n){ margin-right:5px; display:block;}
.cata li p{ size:0.8rem;  line-height:30px;}
}
	@media screen and ( max-width: 991px ){
.cata div{ width:55vw; height:55vw;}
.cata{ margin:0 auto;}
.cata li{ display:inline-block; width:55vw;margin: 0 10vw 10vw 8vw;}
.cata li img{ width:100%;transition:all 0.5s;}
.cata li:nth-child(5n){ margin-right:1.5vw;}
.cata li p{ size:0.7rem;  line-height:30px;}
}


/* --品牌快搜-- */
.conten6{background: url(../images/bg_box6.png) top center repeat; padding-top:10px;}
.box6 .title ul{background: url(../images/bg_box6.png) top center repeat; }
.brand{overflow:hidden; padding-top:10px;}
.brand li a{ display:block; height:100px;}
.brand li{ width:370px; height:100px; margin-right:20px; margin-bottom:26px; position:relative; overflow:hidden;transition:all 0.5s;}
.brand li:hover{ transform: translateY(-5px);}
.text_D{ color:#261003;}
.text_L{ color:#fff;}
.brand li p{ z-index:998;font-size:1.25rem; padding:30px 0px 0px 22px; position:absolute; display:block; font-weight:bold;}
.brand li span{ padding:30px 0px 0px 0px; font-size:0.75rem; letter-spacing:0.5px; font-weight:400;}
.brand li:nth-child(3n){ margin-right:0px;}
.brand li img{ width:100%; z-index:90; position:absolute;}

	@media screen and ( max-width: 991px){
		.brand li{ width:46vw; height:auto; margin-right:2vw; margin-bottom:1vw;}
		.brand li:nth-child(3n){ margin-right:2vw;}
		.brand li p{ padding:3vw 0px 0px 3vw; font-size:0.85rem;}
		.brand li span{ padding:3vw 0px 0px 0px; font-size:0.65rem; letter-spacing:0px;}
		}
	@media screen and ( max-width: 991px ){
		.brand li{ width:96vw; height:26vw; margin-right:0; margin-bottom:2vw;}
		.brand li a{ height:26vw;}
		.brand li:nth-child(3n){ margin-right:2vw;}
		.brand li p{ padding:7vw 0px 0px 5vw; font-size:1rem;}
		.brand li span{ padding:3vw 0px 0px 0px; font-size:0.7rem; letter-spacing:0px;}
		}

/* --活動推薦-- */
.conten7 , .box7{ padding:0px 0px 15px 0px;}
.box7 ul{ padding-top:25px;}
.box7 ul a{ display:block;float:left;}
.box7 ul li{ width:586px; margin-right:20px; overflow:hidden;transition:all 0.5s;}
.box7 ul li:hover{ transform: translateY(-8px);}
.box7 ul li img{ width:100%;}
.box7 ul li:nth-child(2n){margin-right:0px;}
	@media screen and ( max-width: 991px){
	.box7 ul{ padding-top:3vw;}
	.box7 ul li{ width:96vw; margin:0 auto 2vw auto;}	
	.box7 ul li img{ width:96vw;}
		}

/*手機 下方選單*/

menu{ display:none;}
	@media screen and ( max-width: 991px){
		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-color:#fff;
			z-index:999;
			padding:4.5px 0;
			border-top:4px solid #633417;
		}
		menu ul li{
			border-right:1px solid #633417;
			padding:0.5px 2%;
			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:#633417;
			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: 991px){
#button {
  bottom: 40px;
  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% 22%;
}
#button:hover {
  cursor: pointer;
  background-color: #666;
}
#button:active {
  background-color: #666;
}
#button.show {
  opacity: 0.4;
  visibility: visible;
}