.wrap {position: relative;background: #fff;padding-top: 14vh;z-index: 99;}
.wrap #wrapBox >div {position: relative;padding: 20px 0;}
#NewsBox .workframe{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* aboutBox */
#aboutBox {overflow: initial;display: flex;margin-bottom: 50px;}
#aboutBox .imgs {position: relative;width: 40%;height: 100%;top: 0;left: 0;z-index: 1;display: flex;flex-direction: column;}
#aboutBox:before{
	content:"";
	position:absolute;
	width: 45%;
	height: 120%;
	background: #f5f5f58a;
	z-index: -3;
	top: -264px;
	border-radius: 10px;
}
#aboutBox .imgs .list {height: 40vw;background: no-repeat 50% / cover;border-radius: 0 10px 50px 0;}
#aboutBox .info {position: relative;padding: 0;width: 53%;margin-left: 7%;z-index: 3;display: flex;flex-direction: column;}
#aboutBox .info:after{
	content:"";
	position: absolute;
	width: 350px;
	height: 350px;
	background:url(/images/42/DBBA.png);
	right: 10px;
	bottom: 0;
	opacity: 0.3;
	background-size: cover;
	animation-name: fish;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}

::after {}
#aboutBox .info:before{
	content:"";
	position:absolute;
	width: 570px;
	height: 570px;
	border: #e7e7e747 80px solid;
	right: -169px;
	top: -430px;
	border-radius: 500px;
}

@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg)}
100%{transform-origin:right bottom;transform:rotate(3deg)}}
				
#aboutBox .info .bgTxt {text-align: left;padding: 0px 0;color: #ededed;font-size: 56px;}
#aboutBox .info .stitle {position: relative;margin-bottom: 0;padding: 0px 0 15px;font-size: 29px;color: #6D6D6D;}
#aboutBox .info .stitle:after{position: absolute;top: 42%;width: 70px;height: 1px;display: inline-block;background: #CCC;content: "";}
#aboutBox .info article {line-height: 200%;color: #6D6D6D;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more {margin-left: 25px;margin-top: 20px;}
#aboutBox p.more a{
    width: 200px;
    padding: 10px;
    display: flex;
    justify-content: center;
    border: 1px #4b455161 solid;
    flex-direction: column;
}
#aboutBox p.more a:hover font{
    color: white;
}
#aboutBox p.more a font{
    font-size: 15px;
    letter-spacing: 0.18em;
    color: #4b4551;
}

/* 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.5;}

#productBox .proList li.slick-center{z-index: 1;-webkit-transform: scaleY(1);-ms-transform: scaleY(1);transform: scaleY(1);opacity: 1;}
#productBox .proList .item{margin: 30px auto;position: relative;width: 100%;max-width: 1180px;-webkit-box-shadow: 0px 5px 30px -5px rgb(0 0 0 / 19%);box-shadow: 0px 5px 30px -5px rgb(0 0 0 / 19%);}
#productBox .proList .item .Img, #productBox .proList .item .Img a ,#productBox .proList .item{position: relative;border-radius: 20px;}
#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 li.slick-slide .Img a.photo:after{
	background-color: #00000080;
}
#productBox .proList li.slick-slide .Img a{
    filter: blur(2px);
}
#productBox .proList li.slick-center .Img a{
	filter: blur(0px);
}
#productBox .proList li.slick-center .Img a.photo:after{
    background-color: rgb(0 0 0 / 0.2);
}
#productBox .proList .item .info {position: absolute;bottom: 35px;width: 100%;display: flex;flex-direction: column;align-items: center;align-content: 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 / 12%);-webkit-line-clamp: 1;border-bottom: #f7f7f7b8 1px solid;margin-bottom: 10px;}
#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;}
#productBox .proList .item .info article{
    width: 95%;
    margin: 0 auto;
}
/* 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: absolute;width: 100%;display: inline-block;top: 85px;width: 50%;z-index: 5;left: -15%;}
	#aboutBox .imgs .list{
    height: 100%;
}
	#aboutBox .info {padding: 10% 0% 10% 10%;width: 80%;background: rgb(249 249 249);display: flex;margin-left: 30%;}
	#aboutBox p.more{ text-align: center;}
	#NewsBox .workframe{
	    display: block;
	}
	#aboutBox .info:after{
    right: -30px;
}
}
@media screen and (max-width: 980px) {
	#aboutBox .info .title { font-size: 8vw; }
	#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: 870px){
	#aboutBox .info{
	    width: 100%;
	    padding: 5px 20px;
	    border-radius: 20px 20px 20px 20px;
	    margin-left: 5%;
	}
	#aboutBox .imgs{
    z-index: 0;
    display: none;
}
}
@media screen and (max-width: 680px) {
	#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;}
	#aboutBox .info:after{
    opacity: 0.1;
    right: -123px;
}
}
@media screen and (max-width: 480px) {	
	#aboutBox .info{}
	#aboutBox .info {
	    margin-left: 0;
	    padding: 35px 15px;
	}
	#aboutBox .info:before{
	    width: 350px;
	    height: 350px;
	    top: -246px;
	    border: #e7e7e747 60px solid;
	    right: -200px;
	}
	#productBox .proList .item .info article{
	    width: 81%;
	}
	#productBox .proList .item .info h3{
    font-size: 28px;
}


}