@charset "utf-8";
/* CSS Document */

/* default共用 */
body, h1, h2, h3, h4, div,  ul , img ,ol{	padding:0;	margin:0; list-style-type: none;}
body,table,tr,button,th,form,select, input , input textarea,p {
	padding:0;	margin:0; color: #444; 
	font: 13px/20px "verdana", "Georgia","apple LiGothic Medium", "arial", "Courier", "Helvetica", "Times";
}
input ,textarea, select{
	border:1px solid #bab0a4;	padding:2px; color:#998968;	font-size:12px; line-height:16px; vertical-align:middle;}
option{margin:0; color:#998968;}
#checkbox, #radio {	border:0;}
img{border:0;}
a, 
a:visited {text-decoration:none; color: #444; outline:none;/* 20071120新增 ● 去除Firefox會在鏈接周圍產生一個虛線外框 */}
a:hover{	text-decoration:underline;}
/* end */	




/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
.kv_pc { width: 100%; position: relative; text-align:center;  }
.kv_pc img { display: block; text-align: center; }
.top1200 { position: relative; width: 1200px; margin: auto;}

	/* 標題效果 */
	.title01{position: absolute; top: 133px; left: 467px; z-index: 2;}
	.title02{position: absolute; top: 214px; left: 401px; z-index: 2;}
	.title03{position: absolute; top: 338px; left: 440px; z-index: 2;}
	.title04{position: absolute; top: 384px; left: 78px; z-index: 2;}
	.title05{position: absolute; top: 414px; left: 120px; z-index: 2;}

	/* 隱藏手機版 */
	.kv_m { display: none; }
	.for_pc{ display: block; }
	.for_m { display: none; }

/* m */
@media screen and ( max-width: 768px ){
	.WRAPPER{ min-width:100%;}
	.kv_m { display: block; width: 100%;font-size: 0; }
	.kv_m img {  width: 100%; }
	.container {width: 100%; min-width: auto; }
	
		/* 隱藏PC版 */
		.kv_pc { display: none; }
		.for_pc{ display: none; }
		.for_m { display: block; }

}














.container { width:100%; clear: both; display: block;}
.picSlider{width: 100%;height: 100%;position: relative;}
.picSlider-wrap{width: 100%;height: 100%;position: relative;}
.picSlider-wrap > li{position: absolute;display: inline-block;list-style: none;width: 100%;height: 100%;text-align: center;}
.picDot-wrap{position: absolute;text-align: center;right: 0px;top: 240px;}
.picDot-wrap > li{display: inline-block;width: 6px;height: 6px;background-color:#d5d0c9;border-radius: 0px;margin-right: 10px;transition:background-color 1s;cursor: pointer;}
.picDot-wrap > .on{background-color: #a7212f;}
/*大B結尾*/

.brand{width: 960px; height: 230px; float: right; margin: 30px 0;}
.brand_m{display: none; width: 96vw; height: 50vw;}
.container img{width: 100%; display: block; border-radius: 8px;}

.fake{display: none;}


.wrapper{width: 1200px; margin: auto;}
.wrapper .kv_pc{float:left; display: block;}
.wrapper .kv_mobile{width: 100%; display: none;}

.itemblock{width: 960px; float: right;}

.title_new{margin-top: 15px; display: block; margin-bottom: 10px;}
.title_new_mobile{display: none;}

.title_pub{margin-top: 15px; display: block; margin-bottom: 10px;}
.title_pub_mobile{display: none;}


.new_item {float: right;position: relative; width: 960px; margin-top: 0px;}
.new_item li {float: left; width: 192px; vertical-align: top; text-align: center; margin-bottom: 10px;}
.new_item li img{display: block; width: 180px;height: 210px;object-fit: contain; margin: auto;}
.new_item li p{width: 130px; text-align: center; line-height: 16px; font-weight: bold; color: #333333; margin: auto;}
.new_item  .sale { display: inline-block; line-height: 20px; color:#a73217;  }
.new_item  span {font-weight: bold; font-size: 16px;  }
.new_item  span small { font-size: 12px;  }

.midbanner{display: block; background-color: #ff7200; border-radius: 8px; text-align: center; padding: 13px 0px 13px 0px;}
.midbanner_mobile{display: none;}

.recommtitle {padding: 0px 10px 0px 5px;}
.recommtitle li{float: left;}
.recommtitle li:nth-child(1){/*background-image:url(../images/flower.png);*/ background-repeat: no-repeat; font-size: 24px; font-weight: bold; color: #255f63;margin: 10px 0;}
.recommtitle li:nth-child(1) p {color: #db7b65; font-size: 15px; line-height: 24px; display: inline-block;margin: 0 0 0 10px;}
.recommtitle li:nth-child(2){float: right;}

.recomm_item {float: right;position: relative; width: 960px; margin-top: 10px; margin-bottom: 30px;}
.recomm_item li {float: left; width: 160px; vertical-align: top; text-align: center;}
.recomm_item li img{display: block; width: 150px;height: 160px;object-fit: contain; margin: auto;}
.recomm_item li p{width: 160px; text-align: center; font-size: 12px; line-height: 15px;color: #333333; margin: 8px auto;}


.leftblcok{width: 200px; float: left;}
.special_event{text-align: center; width: 180px;padding-left: 18px;background-color: #984967; padding-bottom: 18px;  border-radius: 0 0 8px 8px;}
.special_event li:nth-child(1){padding: 14px 0px 0px 0px; border-bottom: 0px;}
.special_event li{padding: 14px 0px 14px 0px; border-bottom: 2px dotted #ffffff3d; width: 160px;}
.special_event li a{color: #ffffff;font-size: 14px; font-weight: bold;}
.special_event li a:hover{text-decoration: none;font-size: 15px;}

.year_reading{text-align: center; width: 180px;padding-left: 18px;background-color: #fff4e8; padding-bottom: 18px;  border-radius: 8px; margin-top: 15px;}
.year_reading li{padding: 8px 0px 8px 0px; border-bottom: 2px dotted #f1ddc9; width: 160px;}
.year_reading li a{color: #32302d;font-size: 14px; font-weight: bold;}
.year_reading li a:hover{text-decoration: none;font-size: 15px;}
.year_reading .year_title{border-bottom: 0px; padding-top: 15px; margin-bottom: -5px;}

.ill_event{text-align: center; width: 180px;padding-left: 18px;background-color: #f1ebeb; padding-bottom: 18px; margin-top: 15px;  border-radius: 8px;}
.ill_event li{padding: 6px 0px 6px 0px; border-bottom: 2px dotted #dcd6d6; width: 160px;}
.ill_event li:nth-child(1){border: 0px;padding: 0px; float: left; margin: 10px 0;}
.ill_event li a:hover{text-decoration: none;font-size: 15px;}
.ill_event li p{float: left;color: #4d4949;font-size: 14px; font-weight: bold; line-height: 45px;}

.leftblock{float: left;}

.publish{ margin: 0 0 60px 0;}
.bookstore{margin: 5px 0px 5px 0px; overflow: hidden;}
.bookstore li:nth-child(4){margin-right: 0px;}
.bookstore li{ float: left; margin: 5px; border-radius: 10px; width: 290px; height: 160px; overflow: hidden; }
.bookstore li a{ display: flex; justify-content: space-between; text-decoration:none;}
.bookstore li a img{ width: 160px; }
.bookstore li a h3{ margin: auto; color: #fff; }
.bookstore li a h3 p{ color: #ffe565; font-size: 22px; line-height: 30px;}

.gototop{margin: auto; width: 990px;}

/*手機*/
@media screen and ( max-width: 768px ){
	
	
	.brand,.header,.menubar,.footer{display: none;}
	.brand_m{display:block;}
	.picDot-wrap{width: 100%;height: 10px;position:absolute; margin-top: 50%;top: 0px;}
    .container img{border-radius: 0px;}
	
	.fake{display: block;}
    .wrapper{width: 100%; text-align: center;}
    .wrapper .kv_pc{float:left; display:none;}
    .wrapper .kv_mobile{display: block;}

    .itemblock{width: 94vw; float: none; margin: auto; overflow: hidden;}
    
    .title_new{/*display:none;*/ margin-top: 0; overflow: hidden; margin-bottom: 0;}
    .title_new img{float: none; margin-right: 0px; width: 230vw; height: 14.8vw;}
    .title_new_mobile{display: block; width: 100%;}
    .title_new_mobile img{width: 100%;}
    
    .title_pub{/*display:none;*/}
    .title_pub img{float: none; margin-right: 0px;}
    .title_pub_mobile{display: block; width: 100%; margin-top: 3%;}
    .title_pub_mobile img{width: 100%;}
    
    .new_item {float: none;position: relative; width: 96vw; margin: auto;}
    .new_item li {width: 30vw; vertical-align: top; text-align: center;margin: 3vw 1vw;}
    .new_item li img{max-width:none; width: 30vw; height: 36vw;}
    .new_item li p{width: 90%; text-align: center; overflow: hidden; height: 34px; font-size: 0.8rem;}
		.new_item .sale {  line-height: 1.5rem;  }
		.new_item span {font-size: 1rem; }
		.new_item span small { font-size: 0.6rem; }
    
    .midbanner{display: none;}
    .midbanner_mobile{display: block; padding: 4%;}
    .midbanner_mobile img{width: 100%;}
    
    .recomm_item {float: right;position: relative; width: 96vw;  margin-top: 0; margin-bottom: 10px; display: flex;flex-wrap: wrap;}
    .recomm_item li {float: left; width: 46vw; vertical-align: top; text-align: center; margin: 3vw 1vw;}
    .recomm_item li img{display: block; width: 42vw; height: 42vw;}
    .recomm_item li p{width: 90%; text-align: center; font-size: 0.8rem; /*height: 46px; */ line-height: 15px; color: #333333;}
    .recomm_item li:nth-child(7){display: none;}
    .recommtitle li:nth-child(1){font-size: 1.5rem; text-align: left; margin: 0; line-height: 1.7rem;}
    .recommtitle li:nth-child(1) p{font-size: 3.5vw; margin: 0; display: block;}
	.recommtitle li:nth-child(2){right: 2vw; position: absolute;}
	
    .hrhr{width: 197vw; margin:2vw auto;}
    
    .leftblcok{width: 100%; float: none;}

    .special_event{text-align: center; width: 91%;padding-left: 0px;background-color: #f38864; padding-bottom: 5%;  border-radius: 8px; margin: auto; text-align: center;  margin-top: 3%; margin-bottom: 3%;  overflow: hidden;}
    .special_event li:nth-child(1){padding: 3% 0% 8% 0%; margin: 0%; width: 100%; border-bottom: 0px; text-align: center;}
    .special_event li{padding: 2% 0% 3% 0%; width: 44%; float: left; font-size: 2.5vw; height: 3vw; overflow: hidden; margin: 0% 3% 0% 3%;}

    
    .year_reading{text-align: center; width: 91%; padding-left: 0px;background-color: #faeee2; padding-bottom: 5%;  border-radius: 8px; margin-top: 2%; margin: auto; margin-bottom: 3%; overflow: hidden;}
    .year_reading .year_title{padding: 5% 0% 11% 0%; margin: 0%; width: 100%; border-bottom: 0px; text-align: center;}  
    .year_reading li{padding: 2% 0% 3% 0%; width: 44%; float: left; font-size: 2.5vw; height: 3vw; margin: 0% 3% 0% 3%;}

    
    .ill_event{text-align: center; width: 91%; padding-left: 0px;background-color: #f1ebeb; padding-bottom: 5%;  border-radius: 8px; margin: auto;  overflow: hidden;}
    .ill_event li:nth-child(1){border: 0px;padding: 0% 0% 6% 0%; float:none; width: 100%;}
    .ill_event li{padding: 2% 0% 6% 0%; width: 44%; float: left; font-size: 2.5vw; height: 3vw; overflow: hidden; margin: 0% 3% 0% 3%;}
    .ill_event li a:hover{text-decoration: none;font-size: 2.5vw;}
    .ill_event li p{float: left;color: #4d4949;font-size: 2.5vw; height: 3vw; margin-left: 7%;}
    
    .publish{width: 96vw; margin: 0 auto 8vw;; text-align: center; overflow: hidden;}
    
    .bookstore{/*width: 96vw;*/ margin: auto; }
    .bookstore li{ float: left; margin-right: 0px; width: 46vw; height:23vw; margin: 1vw;}
   
	.bookstore li a img{ width: 23vw; height:23vw;  }
	.bookstore li a h3{ margin: auto; color: #fff; font-size: 0.8rem; line-height: 1rem;}
	.bookstore li a h3 p{ color: #ffe565; font-size: 1rem; line-height: 1.2rem;}
}

/*--goto top--*/
#gotop {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 0px;
  right: 0px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  margin: 30px;
}
@media screen and ( max-width: 768px ){
#gotop {
  bottom: 2vw;
  right: 0;
  margin: 2vw;	
	}
  	
}

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