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

/* video */
#wrapBox .video{width:100%; height:100%;}
#wrapBox .video >div{width: 100%;text-align: center;}
#wrapBox .video .video-bg iframe {width:80%; height: 85vh;}

/* aboutBox */
#aboutBox {position: relative;overflow: hidden;width: 100%;padding-top: 15vh;}
#aboutBox:before{content:"";position: absolute;top: 0;right: 0;width: 480px;height: 100%;background-image: url(../../images/42/bamboo-right.png);background-size: contain;background-repeat: no-repeat;opacity: 0.1;}
#aboutBox .imgs {position: absolute;width: 50%;height: 100%;left: 0;z-index: 1;text-align: center;}
#aboutBox .imgs .list {position: relative;margin: 0 auto;width: 665px;height: 500px;background: no-repeat 50% / contain;}
#aboutBox .imgs .list:before{content:"";position: absolute;top: 25px;left: 25px;width: 665px;height: 500px;border: 1px solid #99968D;z-index: -1;}
#aboutBox .info {position: relative;padding: 0 0 70px 55vw;width: 40%;z-index: 3;}
#aboutBox .info .bgTxt {text-align: left;}
#aboutBox .info .stitle {position: absolute;bottom: 0%;right: 0;font-size: 1.3em;color: #999e70;font-family: reey;}
#aboutBox .info article {line-height: 200%;color: #6D6D6D;padding-bottom: 20px;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { margin: 0; }

/*map-section*/
#map-section .bgTxt.title{font-size: 4rem;}
#map-section .bgTxt.title h3{font-size: 5rem;text-align: right;margin-right: 15%;} 
#map-section article{width: 75%;margin: 0 auto;padding: 10px 0 53px;color: #99968D;}
#map-section article p {font-size: 16px}
#map-section .form_box { text-align: center; padding-bottom: 50px;}
#map-section .form_box select {padding: 12px 100px 12px 12px;border-radius: 12px;border-color: #56613b;color: #56613b;background-color: #fff;font-family: 'Poppins';font-weight: 300;margin-right: 25px;margin-bottom: 25px;}

/* news */
#newsWrap {padding: 70px 0 0px;z-index: 2;}
#newsWrap ul { position: relative; margin-bottom: 0px; }
#newsWrap ul li {overflow: hidden;display: inline-block;padding: 10px 20px 80px;}
#newsWrap .slick-dots li{ text-align: center; float: none; padding: 0; }
#newsWrap ul li:nth-child(2) { -webkit-animation-delay: 0.5s; }
#newsWrap ul li:nth-child(3) { -webkit-animation-delay: 1s; }
#newsWrap ul li .newPhoto {float: left;width: 40%;margin: 10px;}
#newsWrap ul li .newPhoto a.photo {overflow: hidden;background-position: 50%;background-repeat: no-repeat;background-size: cover;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;transition: all 0.4s ease;display: block;width: 100%;transition: 1.2s;}
#newsWrap ul li:hover .newPhoto a.photo{ transform: scale(1.1); }
#newsWrap ul li .info {position: relative;margin: 10px;width: 53%;float: right;transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1);}
#newsWrap ul li .info p{color: #56613b;margin: 0;font-size: 12px;}
#newsWrap ul li:hover .info h3 a { color: #56613b; }
#newsWrap ul li .info h3{margin-bottom: 15px;height: 53px;color: #28282C;-webkit-line-clamp: 2;transition-duration: .6s;}
#newsWrap ul li .info h3 a {font-weight: 600;display: block;color: #031814;margin: 3px 0 6px;transition: all 0.4s ease;font-size: 18px;}
#newsWrap ul li .info article {letter-spacing: 0px;height: 60px;-webkit-line-clamp: 3;margin-top: 10px;color: #99968D;}
#newsWrap ul li .info a.more { position: absolute; display: inline-block; right: 11px; font-size: 13px; color: #272727; transition: all 0.5s ease; }
#newsWrap ul li:hover .info a.more{letter-spacing: 5px;}
#newsWrap .slick-dots {text-align: center;position: absolute;top: 240px;bottom: 0px;padding-bottom: 0px;}
#newsWrap .slick-dots li button {border-radius: 50%;border: 1px transparent solid;text-align: center;line-height: 20px;}
#newsWrap .slick-dots li button:before , #newsWrap .slick-dots li.slick-active button:before { width: 8px; height: 8px; background: #8c8c8c; border-radius: 50%; line-height: inherit; top: calc((100% - 8px) / 2); left: calc((100% - 8px) / 2); opacity: 1; content: ""; }
#newsWrap .slick-dots li.slick-active button {border-color: #c3c3c363;}
#newsWrap .slick-dots li button:before , #newsWrap .slick-dots li.slick-active button:before { background: #cacaca; }
#newsWrap .bgTxt.title{ width: calc(100% / 2); text-align: right; font-size: 4rem; }
#newsWrap .bgTxt.title h3 { position: absolute; top: -60px; right: -75%; }

/* 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 rgb(0 0 0 / 30%);}
#productBox .proList .item:before{content:"";position: absolute;top: 25px;left: 25px;width: 100%;height: 100%;border: 1px solid #56613b;}
#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;}

/* 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;padding: 0 0 25px;}
	#aboutBox .info {padding: 50px 10%;width: 80%;}
	#aboutBox p.more{margin: 0 auto;}
	#newsWrap {padding: 70px 90px 40px;}
	#newsWrap .bgTxt.title {width:100%;text-align: center;}
	#newsWrap .bgTxt.title h3 {position: relative;top: 0;right: 0;margin-top: -40px;}
	#newsWrap ul li .info h4 a { margin: 5px 0; height: 50px; font-size: 18px; }
	#newsWrap ul li .info {margin: 15px;width: 50%;}
}
@media screen and (max-width: 980px) {
	#aboutBox {padding-top: 8vh;}
	#aboutBox .info .stitle {right: 0;left: auto;}
	#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);}
	#newsWrap ul li .newPhoto,#newsWrap ul li .info{ float: none; width: 100%; margin: 0; }
	#newsWrap ul li .newPhoto{float: none;width: 85%;margin: auto;padding-bottom: 15px;}
	#newsWrap .slick-dots{ top: -20px; }
	#newsWrap ul li .info { width: 100%; }
}
@media screen and (max-width: 680px) {
    #wrapBox .video .video-bg iframe {width:100%; height: 30vh;}
	#aboutBox .info .stitle {}
	#aboutBox .imgs .list { width: 90%; height: 350px; }
    #aboutBox .imgs .list:before{ display: none; }
	#productBox .proList {padding: 1vh 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;}
    #newsWrap {padding: 70px 0 40px;}
    #map-section .bgTxt.title h3 { font-size: 3rem; text-align: center; margin: 0; }
	#map-section .bgTxt.title{ font-size: 3rem; line-height: 110%; }
}
@media screen and (max-width: 450px) {	
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
	#aboutBox .info .stitle {top: auto;bottom: 10px;}
	#aboutBox .imgs .list { height: 250px}
	#aboutBox .info .bgTxt {padding-bottom: 65px;}
}