.wrap {position: relative;z-index: 998;}
.wrap #wrapBox >div {position: relative;padding: 50px 0;}
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }
.h1title{display: block;text-align: center;font-size: 45px;color: #fff;font-weight: 800;width: 1440px;margin: 0 auto;border-bottom: 5px solid #fff;padding-bottom: 15px;}

/* aboutBox */
#aboutBox {overflow: hidden;}
#aboutBox .imgs {position: absolute;width: 50vw;height: 100%;top: 0;left: 0;z-index: 1;}
#aboutBox .imgs .list {height: 40vw;background: no-repeat 50% / cover;}
#aboutBox .info {width: 1440px;margin: 0 auto;text-align: center;}
#aboutBox .info .bgTxt {}
#aboutBox .info .stitle {position: relative;margin: 20px 0 50px;font-size: 32px;color: #2f2d2d;text-align: center;font-weight: 600;}
#aboutBox .info article {line-height: 200%;color: #252525;margin-top: 10px;font-size: 17px;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

/* productBox */
.wrap #wrapBox #productBox{background: #fd7f2b;padding-bottom: 0;}
.wrap #wrapBox #productBox .h1title{color:#333}
#productBox .workframe{position: relative;width: 1430px;border-left: 5px solid #fff;border-right: 5px solid #fff;}
#productBox .proList li:nth-child(even) .workframe{border-color:#fd7f2b}
#productBox .proList li:last-child .workframe{border-bottom: 5px solid #fd7f2b;}
#productBox .proList li:nth-child(even) .item .info h3 a, #productBox .proList li:nth-child(even) .item .info p{color:#555}
#productBox .proList li:nth-child(even) .item .info p a{color: #555;border: 1px #555 solid;}
#productBox .proList li:nth-child(even) .item .info p a:before{background: #333;}
#productBox .proList li{ position: relative; padding: 0; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
#productBox .proList li:nth-child(even){background:#fff;}
#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{position: relative;padding: 70px 50px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#productBox .proList .item .Img{position: relative;width: 45%;}
#productBox .proList .item .info {width: 50%;}
#productBox .proList .item .info h3 a {color: #fff;font-size: 2.4rem;font-weight: bold;-webkit-line-clamp: 1;}
#productBox .proList .item .info p {color: #ffffff;font-weight: 500;-webkit-line-clamp: 6;font-size: 22px;line-height: 200%;margin-top: 20px;}

/* NewsBox */
#NewsBox .h1title, #bookBox .h1title{color: #00a3e8;border: 0;margin-bottom: 30px;text-transform: uppercase;}
#NewsBox .workframe{width: 1440px;}
#NewsBox li .photo{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;width: 35%;border-radius: 100px;margin: 5px 0 0;}
#NewsBox li {background: #fd7f2b;padding-bottom: 30px;}
#NewsBox li .ttinfo{width: 70%;border-left: 3px solid #fff;border-right: 3px solid #fff;padding: 20px 7.5%;margin: 0 auto;border-bottom: 3px solid #fff;position: relative;}
#NewsBox li:nth-child(even) {background: #00a3e8;}
#NewsBox li .ttinfo:before{content:'“';font-family: 'Noto Sans TC', sans-serif;font-size: 50px;color: #fff;position: absolute;left: -20px;top: 30px;}
#NewsBox li .ttinfo:after{content:'”';font-family: 'Noto Sans TC', sans-serif;font-size: 50px;color: #fff;position: absolute;right: -20px;top: 30px;}
#NewsBox li .ttinfo article{-webkit-line-clamp: 5;color: #fff;font-style: italic;height: 150px;font-size: 18px;}
#NewsBox li .info{background: #fff;}
#NewsBox li .info .box{display: flex;flex-direction: column;align-items: center;width: 85%;border-left: 3px solid #fd7f2b;border-right: 3px solid #fd7f2b;margin: 0 auto;border-top: 3px solid #fd7f2b;}
#NewsBox li:nth-child(even) .info .box{border-color:#00a3e8}
#NewsBox li .info .tt{margin-bottom: 15px;}
#NewsBox li .info h3{font-size: 20px;font-weight: 700;}
#NewsBox li .info *{text-align:center;}
#NewsBox li .info h3 span{display: block;font-style: italic;}
#NewsBox li .info p{font-size: 19px;}
#NewsBox .slick-prev{left: -85px;}
#NewsBox .slick-prev:before {content:'<';color: #00a3e8;opacity: 1;font-size: 60px;font-weight: 600;}
#NewsBox .slick-next{right:-85px}
#NewsBox .slick-next:before {content:'>';color: #00a3e8;opacity: 1;font-size: 60px;font-weight: 600;}

/* bookBox bookList*/
#bookBox {font-size: 0;}
#bookBox .row { position: relative; width: 100%; }
#bookBox #BookList {text-align: center;}
#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: 1440px) {
	.h1title, #aboutBox .info{width:90%;}
	#productBox .workframe{width: calc(90% - 10px);}
	#NewsBox .workframe{width:95%;}
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row {position: relative;width: 100%;display: inline-block;}
	#aboutBox p.more{ text-align: center;}
}
@media screen and (max-width: 1024px) {
	#aboutBox .info{opacity:1;transform: translateZ(0);}
}
@media screen and (max-width: 980px) {
	.wrap #wrapBox #bookBox{padding-top:0;}
	#productBox .proList .item .info{width:100%;}
	#productBox .proList .item .Img{width: 100%;margin-bottom: 20px;}
	#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) {
	#NewsBox ul{opacity:1;}
	.h1title{font-size:30px;}
	#productBox .proList .item{padding: 30px 25px;}
	#aboutBox .imgs .list {height: 60vw;}
	#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;}
	#aboutBox .info .stitle{font-size: 25px;}
	#productBox .proList .item .info h3 a{font-size: 26px;}
	#productBox .proList .item .info p{font-size: 17px;margin-top: 0;}
}