@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_content1.png) top center repeat;
	font-family:Noto Sans JP,Noto Sans 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; min-width:1200px;}
@media screen and ( max-width: 768px ){
   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:#280000;}	
#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:#280000;}
		.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; position:relative;}
.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:6px #053644 double; height:2.3rem; margin-bottom:40px;}
.title ul{ overflow:visible; padding:30px 0;background: url(../images/bg_content1.png) top center repeat; letter-spacing:5px;}
.title ul li{ font-size:2.2rem; font-weight:600; padding:0 15px;overflow:visible; border-right:#053644 1px solid;}
.title ul li:last-child{border-right:none;}
h2{text-align:center; color:#053644; font-size:1rem;font-family:'Noto Serif 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 Serif TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#777; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:#eb6100; font-size:1.4rem; font-family:'Century Gothic','Noto Sans TC',Arial, Helvetica, sans-serif; font-weight:bold;}	
#navbar{ display:block;}
	@media screen and ( max-width: 768px ){
		.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;}
		#navbar{ display:none;}
		}
	@media screen and ( max-width: 540px ){	
			.title{ height:1.2rem; margin-bottom:30px; }
			.title ul li{ font-size:1.4rem;padding:0 8px;}
					.title ul{  padding:10px 0;}
}
	
.go { padding-top:1.5%; right:0.5%; position:relative; z-index:999; }
.go img { margin-bottom:10px; display:block;}
.go2 { padding-top:2%; leftt:0%; position:fixed; z-index:999; }
.go2 img { margin-bottom:10px; display:block;}
	@media screen and ( max-width: 768px ){
		.index_pc, .pcItem{ display:none;}
		.index_m, .mItem{ display:block;}
		.index_m img{ width:100%; height:auto; min-width:320px;}

		.go,.go2 { display:none; }
		.pickup{ width:98% !important; display:block; margin:1% auto;}
	}
	
			
/* --主視覺-- */
.kv{width:100%;background: url(../images/kv.jpg) top center no-repeat; height:559px; position:relative; display:block;}	
/*.kv_content{background: url(../images/box1200_01.jpg) top center no-repeat;height:559px;}*/
.kv_m{ display:none;}	
.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:120px; left:544px;}
.kvtitle2{ z-index:99; position:absolute; top:250px; left:408px;}

.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: 768px ){
.kv{ width:100vw;background:none; background-size:100%;height:auto;}
.kv_content{background: none;height:auto;}
.kv_m{ display:block;width: 100%;}
.kv_m img{ display:block;width: 100%;}
.kvtitle1,.kvtitle2,.kvtitle3{ display:none;}
.sale_m{ width:100vw; display: block;}
.sale_m img{ width:100%;}
.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;}
}

/* --手機選單- */
.s2m{ display:none;}
	@media screen and ( max-width: 768px ){
.pro01,.pro02,.pro03{ display:none;}

.item{ display: inline-block; padding-top: 0%; height:auto;}
.item li{ display: inline-block; padding-top: 0%;}
.item .item100 { width: 100%; text-align: center; margin: 0%; }
.item .item20 { width: 20%; text-align: center; margin: 0%; }
.item li .img100 { width: 100%;height:auto; margin:auto;  z-index:99;}
.item li .img95 { width: 95%; margin:auto; z-index:99; }
.item li .img90 { width: 90%; margin:auto; }
.item li .img80 { width: 80%; margin:auto; }
.item li .img70 { width: 70%; margin:auto; }
.item li .img50 { width: 50%; margin:auto; }
.item li .img20 { width: 20%; margin:auto; }
.item .item50 { width: 50%;height:auto; text-align: center; margin: 0 auto; display:inline-block; z-index:99;}
.s2m{ width:100%; height:auto;display:block; position:relative;}
.s2m_content{ width:100%; height:auto; display:block; text-align: center;}
		}

/* --2.品牌新品-- */
/*.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{ text-align:center;}
.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:0px;}
.box4_ul li:nth-child(2) h2{ width:278px; padding:4px 10px; height:36px; background-color: #eb6100; color:#fff; font-weight:600;}
.box4_ul li:nth-child(2) h3{ width:278px; color: #280000; padding:10px 8px;font-weight:500;}
.box4_ul li:nth-child(2) .proname{ font-size:0.7rem; padding:1px 12px 7px 12px;}
.box4_ul 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;}
.box4_ul li:nth-child(3) img{ max-width:100%; max-height:100%;vertical-align:middle; }
.box4_ul li:nth-child(4){ width:136px; height:136px;overflow:hidden; display:inline-block; border:1px #ccc solid;vertical-align:middle;line-height:128px;}
.box4_ul li:nth-child(4) img{ max-width:100%; max-height:100%;vertical-align:middle; }
	@media screen and ( max-width: 768px ){
.box4_ul{ width:96vw;}
.b4display{ width:96vw;}
		.box4_ul li:nth-child(1){ width:44vw; height:44vw; text-align:center;line-height:44vw; margin-bottom:1vw;}
		.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;padding:2vw 0; margin-top:2vw;font-size:1.2rem;}
		.box4_ul li:nth-child(2) h3{ width:47vw; padding:1vw 0;}
		.box4_ul li:nth-child(3),.box4_ul li:nth-child(4){ width:22vw; height:22vw; line-height: inherit;}
		.box4_ul li:nth-child(2) .proname{ font-size:0.70rem; padding:3px 0px 3px 0px;}
		}
	@media screen and ( max-width: 540px ){
.box4_ul{ width:96vw; margin:0 auto;}
.b4display{ width:96vw; margin-bottom:5vw;}
		.box4_ul li:nth-child(1){ width:90vw; height:auto;}
		.box4_ul li:nth-child(2){ width:90vw; height:auto; margin-bottom:1vw; border:none;}
		.box4_ul li:nth-child(2) h2{ width:90vw;}
		.box4_ul li:nth-child(2) h3{width:90vw;padding:2vw 0;}
		.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 ){

			}



/* --3.經典品牌新品-- */	
/*.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:10px;}	
.box2 h2{ background-color:#eb6100; color:#fff; border-radius:30px; padding:3px 30px; height:1.5rem; font-size:1rem;  position:relative; top:-25px; font-weight:600;}
.box2 h3{ color:#280000; margin-top:-20px; padding:0px 10px; font-weight:500; line-height:1.3rem; font-size:1rem;}
.box2_ul li img:hover{ transform:scale(0.95);}		
	@media screen and ( max-width: 768px ){
		.box2,.conten2{background: url(../images/S2_bg.jpg) top center repeat;}
		.box2_ul{ width:96vw;}
		.box2_ul li{ width:90vw; margin:0 3vw 5% 3vw;}
		.box2_block{ width:90vw; height:auto; line-height:0; margin-top:3%;}
		.box2_ul li img{ max-height:90vw; max-width:90vw; vertical-align:top;}
		}	
	@media screen and ( max-width: 490px ){
.box2_block{ margin-top:0;}
		.box2_ul{ width:96vw; }
		.box2_ul li{ width:96vw; margin:0 0 3vw 0; margin-right:0;}
		.box2_block{ width:96vw; height:auto; line-height:0; margin-top:3%;}
		}	

/* --誠品獨家-- */	

.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;}}

/* --類別推薦-- */

.box01{background: url(../images/S5_bg.jpg) top center repeat; padding-bottom:0px;}
.box{ width:100%; overflow:hidden;}
.box_content{width:1200px;margin:0 auto; padding-left:20px; padding-right:20px;}
.intro{ height:385px;margin:0 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;}
.intro1 ul li:nth-child(2){background: url(../images/pro/intro02.jpg) top center repeat;}
.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:0px 0px;}
.intro ul li:nth-child(3){ width:180px; height:auto; font-size:1.6rem; line-height:2rem; color:#280000; text-align:center; font-weight:600; border-bottom:#280000 solid 1px; position:absolute; z-index:10;letter-spacing:2px; top:90px; left:26px; overflow: hidden;  padding:20px 10px; }
.intro ul li:nth-child(4){ width:180px; height:auto; font-size:0.8rem; line-height:1.2rem; color:#280000; font-weight:400;position:absolute; z-index:10;top:195px; left:26px;overflow:hidden;text-align: justify;text-justify:inter-ideograph; padding: 0px 10px 0 10px; letter-spacing:1px;font-family:Noto Sans TC; }
.intro ul li:nth-child(5){ width:750px; height:350px;font-weight:400;  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 ){
.box{ width:100vw; overflow:hidden; min-width:320px;max-width:100%; padding-bottom:0;}
.box_content{ width:96vw; padding-left:0px; padding-right:0px; margin:0 auto;}
.box01{background: none;background: url(../images/S5_bg.jpg) top center repeat}
.intro{ width:96vw; height:auto;margin:0 auto; padding-top:3%;}
.intro a{width:96vw;height:auto;}
.intro ul li:nth-child(1),intro_left ul li:nth-child(1){ display:none;}
.intro ul li:nth-child(2),intro_left ul li:nth-child(2){ display:none;}
.intro ul li:nth-child(3),intro_left ul li:nth-child(3){ width:96vw; height:auto; font-size:1.5rem; line-height:1.9rem; text-align:center; font-weight:700; border-bottom:#001e65 solid 1px; position: relative;z-index:10;letter-spacing:0px; top:0px; left:0px;;  padding:10px 10px; background-color:#fff; color:#001e65;}
.intro ul li:nth-child(4),intro_left ul li:nth-child(4){ width:96vw; height:auto; font-size:0.8rem; line-height:1.3rem; color:#535353; 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),intro_left ul li:nth-child(5){ width:96vw; height:45vw;font-weight:300;  position: relative; right:0px; top:0px;;z-index:2;}
.intro ul li:nth-child(5) img,intro_left ul li:nth-child(5) img{width:100%; height:auto;}
}

.block{ padding:20px 00px; min-width:1160px;margin:0 auto; display:flex; flex-wrap:wrap;align-item:stretch;}
.block li {width:280px; background-color:#fff; text-align:center;padding:8px; overflow:hidden; margin-right:13px; display:inline-block; vertical-align:top; margin-bottom:13px;transition:all 0.5s;}
.block li:hover{ transform: translateY(-8px);}
.block li:nth-child(4n){margin-right:0px;}
.block li div{width:264px;height:264px;overflow:hidden; vertical-align:middle;line-height:264px; margin-bottom:8px;}
.block li img{ max-width:100%; max-height:100%; margin:0 auto; vertical-align:middle;transition:all 0.5s;}
.block li img:hover{ transform:scale(1.1);}
.block li h2{ height:auto; font-size:1rem; line-height:1.2rem; color:#fff; text-align:center; font-weight:600; position:relative;overflow: hidden;  margin:10px 0px 5px 0px; background-color:#eb6100; padding:5px; width:264px;}
.block li p{ height:auto; font-size:18px; line-height:22px; color:#280000; text-align:center; font-weight:500; position:relative;overflow: hidden; z-index:10; padding-bottom:8px; padding-top:8px;}
.block li h4{ height:auto; font-size:0.75rem; line-height:1.5rem; color:#777; text-align:center; font-weight:300; position:relative;padding-top:0px;}
.block li h4 span{  height:auto; font-size:1.4rem; line-height:1.5rem; color:#eb6100; text-align:center; font-weight:900; position:relative;font-family:'Century Gothic'}

	@media screen and ( max-width: 768px ){
.block{ padding:2% 0 2% 0; min-width:100vw;margin:0 auto;}
.block li {width:47vw; padding:1vw; overflow:hidden; margin-right:1vw; margin-bottom:2vw;}
.block li:hover{box-shadow:none;}
.block li:nth-child(2n){margin-right:0px;}
.block li:nth-child(4n){margin-right:0px;}
.block li div{width:45vw;height:45vw;overflow:hidden;vertical-align:middle; margin:0 auto; line-height:45vw;margin-bottom:2vw;}
.block li img{line-height:0; vertical-align:top; transition:all 0.5s;vertical-align:middle;}
.block li h2{ font-size:0.8rem; line-height:1.2rem;  margin:0px 0px 0px 0px;  padding:5px;}
.block li p{font-size:0.8rem; line-height:1.1rem; padding-bottom:0;}
.block li h4{font-size:0.5rem; line-height:1.5rem;padding-top:2%;}
.block li h4 span{  font-size:1.2rem; line-height:1.5rem; }}




/* --活動推薦-- */
.conten7 , .box7{background: url(../images/bg_content1.png) top center repeat; padding:0px 0px 15px 0px;}
.conten7{ padding:0 20px;}
.box7 ul{ padding-top:25px;}
.box7 ul a{ display:block;float:left;}

.box7 .item_pc{ width:1152px; margin-bottom:22px;}
.box7 ul li{transition:all 0.5s;}
.box7 ul li:nth-child(1),.box7 ul li:nth-child(2){ width:572px; margin-right:16px; overflow:hidden;margin-bottom:22px;}
.box7 ul li:hover{ transform: translateY(-5px);}
.box7 ul li img{ width:100%;}
.box7 ul li:nth-child(2n){margin-right:0px;}
	@media screen and ( max-width: 768px ){
	.conten7{ padding:0;}
	.box7 .item_m{ width:96vw; margin-bottom:0;}
	.box7 ul{ padding-top:3vw; display:block;}
	.box7 ul li{ width:96vw; margin:0 auto 2vw auto;}	
	.box7 ul li img{ width:96vw;}
	.box7 .item_pc{ display:none;}
.box7 ul li:nth-child(1),.box7 ul li:nth-child(2){ width:96vw;margin-right:0; margin-bottom:2vw;}
.box7 ul li:nth-child(3){ display: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: 10px;
  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;
}


.box1_1{background: url(../images/bg_content1.jpg) top center repeat; padding-top:20px;}
.box1_2{background: url(../images/bg_content1.jpg) top center repeat; padding-top:20px;}
.box1_3{background: url(../images/S5_bg.jpg) top center repeat; padding-top:20px;}
.box4_1{background: url(../images/bg_content1.jpg) top center repeat; padding-top:20px;}
.box4_3{background: url(../images/S6_bg.jpg) top center repeat; padding-top:30px;}
@media screen and ( max-width: 768px ){
.box1_1{background: url(../images/bg_content1.jpg) top center repeat; padding-top:2vw;}
.box1_2{background: url(../images/S6_bg.jpg) top center repeat; padding-top:4vw;}
.box1_3{background: url(../images/S5_bg.jpg) top center repeat; padding-top:0;}	
.box4_1{background: url(../images/bg_content1.jpg) top center repeat; padding-top:2vw;}
}