@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */

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

html, body{	
	font-family:'Century Gothic',Futura,'Didact Gothic',san-serif,'Microsoft JhengHei';
	-webkit-text-size-adjust:none;
	background:url("../images/bg_m1.jpg") top center repeat;	
}
	@media screen and ( max-width: 768px ){
    	html, body{ 
    		min-width: 320px;
			max-width: 768px;
   			overflow: auto;
   			overflow-x: hidden;
			width: 100%;
			padding-bottom: 3%;
			background:background:url("../images/bg_m1.jpg") top center repeat; 
		}
    }

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

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


/*手機物件off*/
.item_m, .header_m{ display:none;}

header{ width:100%; position:relative; z-index:999; display:block; background-color:#000;}	
	@media screen and ( max-width: 768px ){
		header .top{ display:none;}
		.header_m{ display:block; width:100%; height:auto; position:relative; top:0; padding:5px 0; background-color:#000;}
		.header_m img{ width:120%; height:auto; display:block; }
		#tob{ width:50%; font-size:70%}
				.eslite_footer{margin-bottom: 50px;}
	}
footer{ width:100%; position:relative; z-index:990; background-color:#000;}



.container{ width:100%; margin:0 auto; position:relative; min-width:1200px; /*overflow:hidden;background:url("../images/bg.png") repeat;*/}
	@media screen and ( max-width: 768px ){
		.container{ min-width:100%;}
	}
.content{ width:1200px; margin:0px auto 0; position:relative; text-align:center;}
	@media screen and ( max-width: 768px ){
    	.content{ width:100%;}
    }
.container a { text-decoration:none; color:#444444; font-size:18px;}
	@media screen and ( max-width: 768px ){
		.container a { font-size:13px;}
	}
.container span{ font-weight:bold;}
	

/*主視覺*/
.s1{ width:100%; background:url("../images/kv.jpg") top center no-repeat; display:block;}
.s1_content{ }
.kv_pc{ background:url("../images/kv.jpg") center; min-height:630px; display:block;}
.promo01{ position:absolute; top:50px; left:374px;}
.promo02{ position:absolute; top:114px; left:469px;}
.promo03{ position:absolute; top:178px; left:370px;}
.promo04{ position:absolute; top:178px; left:457px;}
.promo05{ position:absolute; top:178px; left:552px;}
.promo06{ position:absolute; top:178px; left:645px;}
.promo07{ position:absolute; top:178px; left:740px;}


.kv_m{ display:none;}
.kv_m img{ display:block; width:100%;}
 	@media screen and ( max-width: 768px ){
		.kv_pc{ display: none;}
		.kv_m{ display: block; }
	}


/*menu.css*/


/*特別企劃*/
.s2{ width:100%; padding-bottom:40px; height:2563px; background:url("../images/bg_03.jpg") top center no-repeat; }
.s2_content{ }
.s2_sp{ margin-top:-200px;}
	@media screen and ( max-width: 768px ){
		.s2{ background:url("../images/bg_m1.jpg") top center repeat;}
		.s2_content{ padding-bottom:3%;}
		.s2, .s3, .s4, .s5, .s6, .s8, .s9{ padding:1%; height:auto;}
		.s7{ padding-top:0%; height:auto; }
		.s2_sp{ margin-top:0;}
	}
.Title{ padding:20px 0 0px 0;}
.Title img{ margin:0 auto;}
.subTitle1{ position:absolute; top:60px; left:5px;}
.subTitle2{ position:absolute; top:60px; left:605px;}
.subTitle3{ position:absolute; top:-126px; left:0px;}
.subTitle4{ position:absolute; top:-126px; left:0px;}
.s3_content .subTitle1{ position:absolute; top:10px; left:5px;}
.s3_content .subTitle2{ position:absolute; top:10px; left:605px;}
.s3_content_copy .subTitle1{ position:absolute; top:-114px; left:5px;}
.s3_content_copy .subTitle2{ position:absolute; top:-114px; left:605px;}
/*product layout*/
.box{ padding:0; margin:100px auto 130px auto; padding-bottom:10px; display:flex; justify-content:center; text-align:center; background:none;}
.box ul{ width:100%; list-style:none; padding:15px 0 15px 0;}
.box ul li{ width:47%; display:inline-block; text-align:left; margin:10px 2px; vertical-align:top; overflow:hidden;}
.box ul li img{ height:287px; width: 250px;object-fit: contain; display:block; transition:all 0.3s; margin:0 auto; padding:2%;}
.box ul li img:hover{ transform:scale(0.95);}
.box1_left, .box1_right{ width:590px; margin:5px; background:#ffffff; position:relative;border-radius:10px;/*  border:4px black solid;*/}
.box1_left ul, .box1_right ul{border-radius:10px; border:4px black solid;}
.box2{ width:1190px; margin:65px 5px 140px 5px; background:#ffffff; position:relative;/* border-radius:10px;border:4px black solid;*/ padding-bottom:0px;border-radius:10px;}
.box2 ul{ border-radius:10px;border:4px black solid;}
.box2 ul li{ width:24%;}
/*product content*/
div.productContentImg{
	position:relative;
}
div.productContentImg span{ position:absolute; bottom:0; padding:1.5% 6% 1.5% 3%; color:#ffffff; background:#cb2f07; border-top-right-radius:30px; z-index:10; font-size:0.77em;}
span.priceR{ color:#b83f2e; font-size:1.5em; font-weight:bold;}
	@media screen and ( max-width: 768px ){
		.item_m{ display:block; margin-top:0%; padding-bottom:1%;}
		.item_m img{ max-width:100%;}
		.item_pc{ display: none;}
		.subTitle img{ max-width:100%; margin-left:0%; /* position:relative; left:-85px; */}
		.box{ padding:0; margin:0% auto; display:inline-block; background:none; }
		.box ul{ padding:3% 0; margin-top:-20px;}
		.box ul li img{ width:auto;}
		.box1{background:url("../images/bg_m1.jpg") top center repeat;}
		.s3_content_copy .box1{background:url("../images/bg_m1.jpg") top center repeat;}
		.box1 ul, .box2 ul{ background:#ffffff;}
		.box1_left, .box1_right{ width:100%; margin:0 0 3%;background:none;}
		.box2{ width:100%; margin:0;}
		.box2 ul li{ width:47%;}
		div.productContentImg span{ padding:1.5% 7% 1.5% 3%;}
	}
	@media screen and ( max-width: 600px ){
		.box ul li img{ width:auto; height:215px;}
	}
	@media screen and ( max-width: 450px ){
		.box ul li img{ width:auto; height:173px;}
	}
	@media screen and ( max-width: 360px ){
		.box ul li img{ width:auto; height:145px;}
	}



/*新品推薦*/
.s6{ width:100%; padding-bottom:40px; height:951px; background:url("../images/bg_04.jpg") top center no-repeat;}
.s6_content{ height:auto; }
.s6 .box{ margin:10px auto 0 auto; background:none;}
.box4 ul{ padding:0;}
.box4 ul li{ width:32.1%; margin:7px 5px; background:#ffffff; padding:1% 2%; border-radius:8px;}
.box4 ul li img{ max-width:100%; display:block; transition: all 0.3s; margin-bottom: 2%;}
.box4 ul li img:hover{ transform: scale(0.95);}
	@media screen and ( max-width: 768px ){
		.s6{ padding-bottom:10px; height:auto; background:url("../images/mbg_2.png") top center repeat;}
		.s6 .box{ margin:3% auto 0 auto;}
		.box4 ul{ padding:1% 0;}
		.box4 ul li{ width:45%; padding:3%; border-radius:8px;}
		.box4 ul li img{ height: 142px;}
		.box4 ul li:nth-last-child(1){width:95%;}
		.box4 ul li img.item_m{ height: auto;}
	}



	

/*類型推薦*/
.s3{ width:100%; padding-bottom:0px; height:3295px; background:url("../images/bg2.jpg") top center no-repeat; margin: 0px 0 0 ;}
.s3_content{}	
	@media screen and ( max-width: 768px ){
		.s3{ width:100%; padding-bottom:0; height:auto; background:url("../images/bg_m1.jpg") top center repeat;margin: 0% 0 0 ;}
	}




/*出版社推薦*/
.s7{ width:100%; height:1660px; background:url("../images/bg3.jpg") top center no-repeat;position: relative;}
.s7_content{margin:0px auto 0px; }
.subTitle_top5{ text-align:left; margin-top:0;} /*小標*/
.s7 .box{ margin:0px auto 0 auto; background:none;}
.box5{ padding-top:400px;}
.box5 ul{ padding:0;}
.box5 ul li{ width:19.2%; text-align:center; margin: 10px 2px; background-color:#ffffff; border-radius:10px; padding: 15px 0;}
.s7 div.productContentImg{ transition:all 0.3s; width:200px; height:228px; border-radius:0 0 0 0; margin-bottom:2%; background-size:68%; background-color:#ffffff; background-repeat:no-repeat;  margin: 0 15px;}
/*.s7 div.productContentImg:hover{ border:5px solid #cb2f07;}*/
.s7 div.productContentImg span{ position:absolute; top:-15px; left:-15px; padding:0; border-radius:10px; font-size:2em; width:59px; height:50px;}
/*出版社推薦-重點出版社*/
.top5Product1-1{ background: url("http://pic.eslite.com/Upload/Product/201911/m/637106151685772500.jpg"); background-size:85% !important;background-position:top;} /* 手動調整填滿尺寸 建議範圍：90-140 */
.top5Product1-2{ background: url("http://pic.eslite.com/Upload/Product/202010/m/637378307955688998.jpg"); background-size:90% !important;background-position:top;}
.top5Product1-3{ background: url("http://pic.eslite.com/Upload/Product/202008/m/637338558831482500.jpg"); background-size:95% !important;background-position:top;}
.top5Product1-4{ background: url("http://pic.eslite.com/Upload/Product/202010/m/637378308694234848.jpg"); background-size:100% !important;background-position: center center;}
.top5Product1-5{ background: url("http://pic.eslite.com/Upload/Product/202007/m/637310053361578750.jpg"); background-size:80% !important;background-position:top;}
.top5Product1-6{ background: url("http://pic.eslite.com/Upload/Product/202003/m/637212499422555000.jpg"); background-size:100% !important;background-position: center center;} /* 手動調整填滿尺寸 建議範圍：90-140 */
.top5Product1-7{ background: url("http://pic.eslite.com/Upload/Product/201801/m/636516129504423750.jpg"); background-size:95% !important;background-position: center center;}
.top5Product1-8{ background: url("http://pic.eslite.com/Upload/Product/201803/m/636559571380602500.jpg"); background-size:100% !important;background-position: center center;}
.top5Product1-9{ background: url("http://pic.eslite.com/Upload/Product/200701/m/2680224118002m.jpg"); background-size:75% !important;background-position:top;}
.top5Product1-10{ background: url("http://pic.eslite.com/Upload/Product/201911/m/637099240326860000.jpg"); background-size:90% !important;background-position:top;}
/*本月暢榜-生活雜貨
.top5Product2-1{ background: url("http://pic.eslite.com/Upload/Product/201912/l/637128610506351250.jpg"); background-size:50% !important;}
.top5Product2-2{ background: url("http://pic.eslite.com/Upload/Product/202001/l/637134666143962500.jpg"); background-size:50% !important;}
.top5Product2-3{ background: url("http://pic.eslite.com/Upload/Product/202001/l/637142655350443750.jpg"); background-size:50% !important;}
.top5Product2-4{ background: url("http://pic.eslite.com/Upload/Product/201801/m/636511775474105000.jpg"); background-size:50% !important;}
.top5Product2-5{ background: url("http://pic.eslite.com/Upload/Product/201805/m/636619027089450000.jpg"); background-size:50% !important;}*/
	@media screen and ( max-width: 768px ){
		.s7{ height:auto; background:url("../images/bg_m5.jpg") top center repeat;}
		.s7_content{margin: 0; }
		.s7 .box span{ font-size:1.2em;}
		.box5{ padding-top:0;}
		/*小標-文具&雜貨TOP5*/
		.subTitle_top5{ text-align:center; margin-top:8%; display:none;} 
		.subTitle_top5 img{ width:70%;}
		/*small*/
		.box5 ul{ padding:2%;}
		.box5 ul li{ width:48%; margin: 4px 2px; } 
		.s7 div.productContentImg{ width:250px; height:250px; margin: 0 auto;background-position:top;}
		.s7 div.productContentImg span{ border-radius:0px; font-size:1.7em; }
		 /*big*/
		.box5 ul li:nth-child(1){ width:98%; }
		.box5 ul li:nth-child(6){ width:98%; }
		.box5 ul li:nth-child(1){ width:98%; }
		.s7 div.productContentImg span{ top:-15px; left:-5px;}
		.s7 div.top5Product1-1, .s7 div.top5Product1-11,.s7 div.top5Product2-1{ width:320px; height:320px; margin: 0 auto; }
		.s7 div.top5Product1-6{ width:320px; height:260px; margin: 0 auto; }
		.s7 div.top5Product1-1 span, .s7 div.top5Product1-6 span, .s7 div.top5Product1-11 span,.s7 div.top5Product2-1 span{ font-size:3.5em;}
		
		.top5Product1-1{ background-size:80% !important;background-position:top;}
		.top5Product1-2{ background-size:80% !important;background-position:top;}
		.top5Product1-3{ background-size:85% !important;background-position:top;}
		.top5Product1-5{ background-size:70% !important;background-position: top;}
		.top5Product1-6{ background-size:90% !important;background-position:top;}
		.top5Product1-7{ background-size:90% !important;background-position:top;}
		.top5Product1-8{ background-size:85% !important;background-position:top;}
		.top5Product1-9{ background-size:65% !important;background-position:top;}
		.top5Product1-10{ background-size:75% !important;background-position:top;}
		
	}
	@media screen and ( max-width: 540px ){
		/*small*/
		.s7 div.productContentImg{ width:165px; height:165px; margin: 0 auto;}
		/*big*/
		.box5 ul li:nth-child(1){ width:98%; }
		.box5 ul li:nth-child(6){ width:98%; }
		.box5 ul li:nth-child(11){ width:98%; }
		.s7 div.productContentImg span{ top:-15px; left:-5px;}
		.s7 div.top5Product1-1, .s7 div.top5Product1-6, .s7 div.top5Product1-11, .s7 div.top5Product2-1{ width:320px; height:320px; margin: 0 auto;}
		.s7 div.top5Product1-1 span, .s7 div.top5Product1-6 span, .s7 div.top5Product1-11 span, .s7 div.top5Product2-1 span{  font-size:3.5em;}
				.s7 div.top5Product1-6{ width:320px; height:260px; margin: 0 auto; }
	}
	@media screen and ( max-width: 320px ){
		/*small*/
		.box5 ul li{ width:47%;} 
		.s7 div.productContentImg{ width:140px; height:140px; margin: 0 auto;}
		.s7 div.productContentImg span{ font-size:1.6em;}
		/*big*/
		.box5 ul li:nth-child(1){ width:98%; }
		.box5 ul li:nth-child(6){ width:98%; }
		.box5 ul li:nth-child(11){ width:98%; }
		.s7 div.productContentImg span{ top:-15px; left:-5px;}
		.s7 div.top5Product1-1,  .s7 div.top5Product1-6, .s7 div.top5Product1-11, .s7 div.top5Product2-1{ width:290px; height:290px; margin: 0 auto;}
				.s7 div.top5Product1-6{ width:290px; height:230px; margin: 0 auto; }
		.s7 div.top5Product1-1 span, .s7 div.top5Product1-6 span, .s7 div.top5Product1-11 span, .s7 div.top5Product2-1 span{ font-size:3.3em;}
	}
	

.bt1{ position:absolute; top:47px; left:58px; overflow: hidden;}
.bt2{ position:absolute; top:47px; left:280px;overflow:hidden;}
.bt3{ position:absolute; top:47px; left:508px;overflow:hidden;}
.bt4{ position:absolute; top:47px; left:734px;overflow:hidden;}
.bt5{ position:absolute; top:47px; left:958px;overflow:hidden;}
	@media screen and ( max-width: 768px ){
.bt_area{ width:100vw; margin:0 auto; overflow:hidden; padding-top:2%;background:url("../images/bg_black.jpg") top center repeat; }
.bt1,.bt2,.bt3{ width:30vw; padding:0 0%;position: relative;top:0; left:0px;display: inline-block;}
.bt4,.bt5{ width:45vw; padding:2% 0%;position: relative;top:0; left:0px;display: inline-block;}
.bt1 img,.bt2 img,.bt3 img,.bt4 img,.bt5 img{ width:100%; padding:0 0%;  }
		}


/*banner640*/
.s8{ width:100%; padding:0% 0 0 0;background:url("../images/bg_black.jpg") top center repeat;}
.s8_content{ }
.banner640 { margin:0 auto 0px auto; max-width:1200px; text-align:center; padding-top:1%; border-radius:8px;}
.banner640 li{ display:inline-block; width:47%; margin:0% 0.7% 1.4% 0.7%; vertical-align:middle;}
.banner li img{ width:100%; transition: all 0.2s;}
.banner li img:hover{ transform: scale(0.98);}
	@media screen and ( max-width: 768px ){
		.banner640 { margin:0 auto 1px auto;}
		.banner { padding:0;}
		.banner li{ width: 91%; margin:0% 2% 3% 2%;}
	}




	
.s9{ width:100%; height:39px; background:url("../images/bg4.jpg") top center no-repeat;}
.s9_content{ }
.s9_content img{ padding-bottom:1%; max-width:100%;}
	@media screen and ( max-width: 768px ){
		.s9{ height:auto; background:url("../images/bg_black.jpg") top center repeat;}
		.s9_content img{ padding-top:2%; max-width:45%;}
	}
	#gotop {
		display:none;
		position:fixed; z-index:999; right:2%; bottom:2%;
		width:50px; height:50px; line-height:50px; border-radius:50%;
		color:#fff; text-align: center;
		background:rgba(0,0,0,0.4);
		transition:all 0.5s;
	}
	.fas{ color:#fff;}
		@media screen and ( max-width: 768px ){
			.s8{ height: auto; background:url("../images/bg_black.jpg") top center repeat; padding-top:4%;}	
			.s8_content{ width:100%; height: auto;}	
			.s8_content img{ max-width:45%; padding:3%;}
			#gotop { right:3%; bottom:8%; width:30px; height:30px; line-height:30px;}
			
		}





menu{display:none;}
	@media screen and ( max-width: 768px ){
		menu{ display:block;}
	}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display:flex;
	list-style: none;
	background-color:#e62f00;
	z-index:1000;
	padding:2px 0;
	border-top:5px solid #f5bb25;
}
menu ul li{
	border-right:1px solid #fff;
	padding:4px;
	width:33.33%;
	box-sizing:border-box;
	text-align:center;
	font-size:13px;
	letter-spacing: -1px;
}
menu ul li:nth-last-child(1){
	border-right:none;
}
menu a{
	color:#ffffff !important;
	text-decoration:none;
}