.wrap {position: relative;background: #fff;z-index: 998;}
.wrap #wrapBox >div { position: relative; }
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* aboutBox */
#aboutBox {overflow: hidden;display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-end;margin: 80px 0;}
#aboutBox .imgs {position: absolute;width: 50%;height: 100%;top: 0;left: 0;z-index: 1;}
#aboutBox .imgs img{width: 100%;height: 100%;object-fit: cover;}
#aboutBox .imgs .list {height: 40vw;background: no-repeat 50% / cover;}
#aboutBox .info {position: relative;padding: 20px 0;width: 35%;z-index: 3;margin-right: 10%;}
#aboutBox .info .bgTxt {text-align: left; margin: 0;padding: 0;font-size: 40px;}
#aboutBox .info .stitle {position: relative;margin-bottom: 25px;padding: 0px 0 15px;font-size: 22px;color: #6D6D6D;font-weight: 400;}
#aboutBox .info .stitle:after{position: absolute;top: 33%;width: 70px;height: 1px;display: inline-block;background: #CCC;content: "";margin-left: 15px;}
#aboutBox .info article {line-height: 200%;color: #6D6D6D;margin: 0 0 40px;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

/* NewsBox */
#NewsBox{background: #f5f7f7;padding-bottom: 40px;}
#NewsBox ul{}
#NewsBox ul li{margin: 0 20px;}
#NewsBox ul li .lineBox{margin:0 5px}
#NewsBox ul li .lineBox font{position:relative;margin-top:-26px;display:block;text-align:center;font-size:32px;color:#d7a297}
#NewsBox ul li .lineBox a{margin-bottom:-13px;display:block;text-align:center;font-size:18px;color:#d7a297}
#NewsBox ul li .lineBox a:before{position:absolute;top:-10px;left:calc((100% - 50px) / 2);width:50px;height:1px;background:#d7a297;content:""}
#NewsBox ul li .lineBox:before,#NewsBox ul li .lineBox:after{position:absolute;width:calc((100% - 200px) / 2);height:1px;display:block;background:#f0d8d3;left:1px;top:calc((100% - 1px) / 2);content:""}
#NewsBox ul li .lineBox:after{left:auto;right:1px}
#NewsBox ul li .news-block{position:relative}
#NewsBox ul li .news-block a.photo img{width:100%}
#NewsBox ul li .news-block p{color:#ffffff;display:inline-block;background: #b00110;margin:10px 0;padding:5px 15px}
#NewsBox ul li .news-block h3 a{height:29px;line-height:130%;font-size:24px;color:#28282C;-webkit-line-clamp:1;transition-duration:.6s;font-weight:400;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}
#NewsBox ul li .news-block article{height:65px;line-height:22px;color:#6D6D6D;-webkit-line-clamp:3;transition-duration:.8s}
.contentMain #NewsBox ul{font-size:0}
.contentMain #NewsBox ul li{margin:15px;width:calc((100% / 3) - 30px);display:inline-block;vertical-align:top}
#NewsBox ul li:nth-child(3n - 1):after,#NewsBox ul li:nth-child(3n - 2):after{background:transparent}

/* productBox */
#productBox .workframe{ position: relative; width: 100%; }
#productBox .proList{padding: 0 0 1vw;}
#productBox .proList li{ position: relative; padding: 0; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
#productBox .proList li.slick-slide{-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform: scale(0.8);z-index: -1;margin: 0 -30px;opacity: 0.4;}
#productBox .proList li.slick-center{z-index: 1;-webkit-transform: scaleY(0.9);-ms-transform: scaleY(0.9);transform: scaleY(0.9);opacity: 1;}
#productBox .proList .item{margin: 30px auto;position: relative;width: 100%;max-width: 1180px;-webkit-box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3);box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3);}
#productBox .proList .item .Img{ position: relative}
#productBox .proList .item .Img a.photo:after { position: absolute; top: 0; left: 0;width: 100%; height: 100%; background-color: rgb(0 0 0 / 0.2); content: ""}
#productBox .proList .item .info {position: absolute;left: 50%;bottom: 35px;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);text-align: center;}
#productBox .proList .item .info h3 {text-align: center;color: #fff;font-size: 2.4rem;font-weight: bold;text-shadow: 0px 0px 10px rgb(0 0 0 / 0.5);-webkit-line-clamp: 1;}
#productBox .proList .item .info article p {text-align: center;color: #ffffff;font-weight: 500;text-shadow: 0 0 10px rgb(0 0 0 / 0.3);-webkit-line-clamp: 2;}

/* productTabs */
#productTabs{background-image: url(/images/34/wrap_bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 0;}
#productTabs .workframe{width: 1300px;}
#productTabs #tabs_container .tab_content .workframe{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
#productTabs #tabs_container .tab_content .img{width: 30%;}
#productTabs #tab01 .img, #productTabs #tab04 .img, #productTabs #tab06 .img{order:2}
#productTabs .tab_content .text{display: flex;flex-wrap: wrap;width: 65%;}
#productTabs .tab_content .text a{margin: 10px;background: #7eafda;padding: 15px;text-align:center;width: calc((100%/5) - 50px);}
#productTabs .tab_content .text a img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#productTabs .titleBox{display:flex;flex-wrap: wrap;align-items: center;margin-bottom: 15px;}
#productTabs .titleBox h3{position:relative;font-size: 40px;font-weight: 500;line-height: 100%;}
#productTabs .titleBox .back_water{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-left:20px;flex-direction:column;align-items:center}
#productTabs .titleBox .back_water span{font-size: 20px;line-height: 100%;}
#productTabs .titleBox .back_water span:first-child{background: #b00110;font-size: 13px;padding: 7px 20px;color: #fff;display: inline-block;margin-bottom: 2px;font-weight: 500;}
#productTabs .textBox p{margin: 0 0 50px;line-height:180%;font-size: 15px;}
#productTabs .textBox {margin:0 10px;}
#productTabs .tab_content{padding:50px 0;border-bottom: 1px solid #eee;}
#productTabs #tab01, #productTabs #tab04, #productTabs #tab06{background: none;}

/* bookBox bookList*/
#bookBox {font-size: 0;}
#bookBox .row { position: relative; width: 100%; }
#bookBox #BookList {padding-bottom: 7vh;}
#bookBox #BookList ul li { position: relative; width: 100%; max-width: 1180px; -webkit-box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 30px -5px rgba(0, 0, 0, 0.3);   }
#bookBox #BookList ul li.slick-slide {position: relative;-moz-transform:scale(0.8);-webkit-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform: scale(0.8);z-index: -1;margin: 0 -70px;filter: blur(3px);}
#bookBox #BookList ul li.slick-slide:after {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgb(215 162 151 / 78%);content: "";}
#bookBox #BookList ul li.slick-center{ z-index: 1; -webkit-transform: scaleY(0.9); -ms-transform: scaleY(0.9); transform: scaleY(0.9); filter: none}
#bookBox #BookList ul li.slick-center:after { display: none; }
#bookBox #BookList ul li h3 {position: absolute;width: 100%;left: 0;bottom: 35px;}
#bookBox #BookList ul li h3 a {height: 70px;color: #fff;font-size: 3rem;font-weight: bold;text-shadow: 0 0 10px rgb(0 0 0 / 50%);text-align: center;-webkit-line-clamp: 1;}

/* bookBox customBox*/
#bookBox #customBox { background: url(/images/42/flower-bg.jpg) no-repeat 50% / cover; }
#bookBox #customBox ul { margin-bottom: 0;}
#bookBox #customBox .custom{position: relative;height: 80vh;font-size: 0;}
#bookBox #customBox .imgs {position: absolute;top: 0;right: 0;display: inline-block;width: 48vw;z-index: 1;}
#bookBox #customBox .imgs .list {height: 100vh;background: no-repeat 50% / cover;}
#bookBox #customBox .info {display: inline-block;width: 25vw;vertical-align: top;padding: 5vw 13vw 0;float: left;z-index: 3;}
#bookBox #customBox .info h3 { position: relative; font-size: 40px; color: #D7A297; text-align: center;}
#bookBox #customBox .info h3:after { position: absolute; bottom: -11px; left: calc((100% - 80px) / 2); width: 80px; height: 1px; background:#D7A297; content: ""; }
#bookBox #customBox .info article {color: #6D6D6D;margin: 55px 0;}
#bookBox #customBox .slick-dots { position: absolute; bottom: 4vh; left: -25%; }
#bookBox #customBox .slick-dots li button:before{ color: #d49e93; font-size: 10px; opacity: .25 }
#bookBox #customBox .slick-dots li.slick-active button:before{ color: #d7a297; opacity: .75 }

@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row {position: relative;width: 100%;display: inline-block;}
	#aboutBox .info {padding: 40px 0 0;width: 90%;margin: 0 auto;}
	#aboutBox p.more{ text-align: center;}
	#productTabs .workframe{width: 90%;}
}
@media screen and (max-width: 980px) {
	#aboutBox{margin-top:0;margin-bottom: 50px;}
	#productTabs .tab_content .text a {width: calc((100%/3) - 50px);}
	#bookBox #BookList ul li.slick-slide{ margin: 0}
	#bookBox #customBox .custom { height: auto;}
	#bookBox #customBox .info {width: 100%; height: 48vh; display: block;float: none;padding: 10vh 0;}
	#bookBox #customBox .info article {width: 60%;margin: 0 auto;padding: 5vh 0;}
	#bookBox #customBox .imgs {position: relative;width: 100%;}
	#bookBox #customBox .imgs .list {height: 35vh;}
	#bookBox #customBox .slick-dots {bottom: 40vh;left: calc(0% / 2);}
}
@media screen and (max-width: 680px) {
	#productTabs #tabs_container .tab_content .img{width: 100%;}
	#productTabs .tab_content .text{width: 100%;margin-top: 20px;}
	#productTabs #tab01 .img, #productTabs #tab04 .img, #productTabs #tab06 .img{order: 0;}
	NewsBox{padding-top: 40px;}
	#aboutBox .imgs .list {height: 60vw;}
	#productBox .proList {padding: 5vh 0 1vh;}
	#productBox .proList li.slick-center {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
    #bookBox #customBox .info article{width: 90%;padding: 8vw 0 0;}

}
@media screen and (max-width: 450px) {	
	#aboutBox .info { padding: 10vw 5vw 0; width: 90vw; }
}