.wrap {position: relative;background: #fff;}
.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;padding-top: 600px;padding-bottom: 20px;background-size: cover;background-repeat: no-repeat;background-position: 0% 0%;}
#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 {position: relative;width: 1250px;z-index: 3;float: right;overflow: hidden;}
#aboutBox .info .left{
    float: left;
    width: 400px;
    margin-right: 70px;
}
#aboutBox .info .fight{
    float: left;
    width: calc(100% - 470px);
}
#aboutBox .info .bgTxt {text-align: left;color: #fff;padding: 0;letter-spacing: 0;line-height: 100%;}
#aboutBox .info .stitle {position: relative;margin-bottom: 25px;padding: 0px 0 15px;font-size: 22px;color: #dac5ff;margin-top: 10px;letter-spacing: 0.5px;}
#aboutBox .info h5{
    font-size: 21px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 10px;
}
#aboutBox .info article {line-height: 200%;color: #fff;font-size: 15px;padding-right: 140px;text-align: justify;font-weight: 100;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* aboutsbn */
#aboutsbn{}
#aboutsbn #Jslider {
    position: absolute;
    top: 40px;
    right: 0;
    width: 1250px;
    z-index: 99;
    overflow: hidden;
}

/* productBox */
#productBox .bgTxt.title{
    padding-top: 85px;
}
#productBox .workframe{ position: relative; width: 100%; }
#productBox .workframe:before {
    content: '';
    position: absolute;
    width: 1680px;
    height: 160px;
    right: calc(50% - 825px);
    top: 0;
    background: radial-gradient(#f3f3f3 30%, transparent 0) 0 0/10px 10px;
}
#productBox .proList{overflow: hidden;}
#productBox .proList li{position: relative;padding: 0;-webkit-transition: all .5s ease;-o-transition: all .5s ease;transition: all .5s ease;float: left;width: calc(100%/6);}
#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%;overflow: hidden;}
#productBox .proList .item .Img{ position: relative}
#productBox .proList .item .Img a.photo:after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to top,rgb(75 65 93 / 30%) 0%,rgba(0,0,0,0) 44%);content: "";}
#productBox .proList .item .info {position: absolute;left: 0;width: 100%;bottom: 35px;text-align: center;z-index: 3;}
#productBox .proList .item .info h3 {text-align: center;color: #645383;font-size: 20px;/* text-shadow: 0px 0px 1px rgb(145 122 185); */-webkit-line-clamp: 1;}
#productBox .proList .item  article{
    display: none;
}
#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 }

/* NewsBox */
#NewsBox{position: relative;padding-bottom: 40px;}
#NewsBox:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 110px;
    right: 0;
    top: 0;
    background: linear-gradient(to bottom,rgb(255 255 255) 40%,rgb(255 255 255 / 0%) 100%);
    z-index: 2;
}
#NewsBox .workframe{
    z-index: 8;
}

/* NewsBox */
#NewsBox ul {padding-top: 2vw}
#NewsBox ul li {margin: 0px 0;box-shadow: 0 0 10px rgba(54, 53, 53, 0.1);background-color: #fff;}
#NewsBox ul li , #NewsBox ul li .lineBox { position: relative; }
#NewsBox ul li:after { left: auto; right: 0; }
#NewsBox ul li .lineBox {margin: 0 5px;color: #afafaf;text-transform: uppercase;font-size: 13px;}
#NewsBox ul li:hover .lineBox{letter-spacing:1px;}
#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:after {position: absolute;width: calc((100% - 200px) / 2);height: 1px;display: block;background: #d399c3;right: 1px;top: calc((100% - 1px) / 2);content: "";}
#NewsBox ul li:hover .lineBox:after {
    width: calc((100% - 250px) / 2);
}
#NewsBox ul li .news-block {position: relative;padding: 50px;}
#NewsBox ul li .news-block .info{
    position: relative;
}
#NewsBox ul li .news-block .info a{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
}
#NewsBox ul li .news-block a.photo { position: absolute; width: calc(100% - 80px); height: calc(100% - 50px); top: 25px; left: 40px; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; z-index: 10; }
#NewsBox ul li .news-block p {color: #d399c3;}
#NewsBox ul li .news-block h3 {margin-bottom: 25px;height: 29px;line-height: 28px;font-size: 24px;color: #28282C;-webkit-line-clamp: 1;transition-duration: .6s;}
#NewsBox ul li .news-block article {height: 45px;line-height: 22px;color: #6D6D6D;-webkit-line-clamp: 2;transition-duration: .8s;font-size: 14px;text-align: justify;margin-bottom: 20px;}
.contentMain #NewsBox ul { font-size: 0; }
.contentMain #NewsBox ul li { margin: 45px 0; width: calc(100% / 3); display: inline-block; }
#NewsBox ul li:nth-child(3n - 1):after , #NewsBox ul li:nth-child(3n - 2):after { background: transparent; }

/* slogn */
#slogn{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 120px 0;
}
#slogn h2{
    text-align: center;
}
#slogn p{
    text-align: center;
    color: #fff;
    font-size: 30px;
    margin: 30px 0 120px;
}
#slogn article{
    text-align: center;
    color: #fff;
    letter-spacing: 5px;
    font-size: 16px;
}

@media screen and (min-width: 1025px) {
#productBox .proList .item:hover .Img{transform:scale(1.05);z-index:3;}
.wrap #wrapBox .bg, #slogn{
    background-attachment: fixed;
}
}
@media screen and (max-width: 1440px) {
	#productBox .proList .item .info{
    bottom: 15px;
}
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row {position: relative;width: 100%;display: inline-block;}
	#aboutBox .info {width: 70%;}
	#aboutBox p.more{}
	.contentMain #NewsBox ul li{ width: calc(100% / 2)}
	#aboutsbn #Jslider{width: 70%;}
    #aboutBox{
    padding-top: 500px;
}
    #aboutBox .info article{
    padding-right: 50px;
}
	#NewsBox ul li:nth-child(3n - 1):after , #NewsBox ul li:nth-child(3n - 2):after { background: #f0d8d3; }
	#NewsBox ul li:nth-child(2n - 1):after { background: transparent; }
}
@media screen and (min-width: 981px) {	
	#NewsBox ul li .lineBox a:hover{ letter-spacing: .3em;}
	#NewsBox ul li .lineBox a:hover:before { top: -2px; transition-duration: .3s;}
}
@media screen and (max-width: 1024px) {
	#aboutsbn #Jslider{ position: relative; width: 100%; top: 0;}
	#aboutBox{ padding: 40px 0;}
	#aboutBox .info{ width: 90%; margin: 0 auto; float: none;}
	#aboutBox .info article{ padding: 0;}
    #productBox .proList li{ width: calc(100%/3);}
    #productBox .proList li .item{ margin: 0 auto;}
	#NewsBox:before{display: none}
}
@media screen and (max-width: 980px) {
	#aboutBox .info .title {font-size: 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);}
	#NewsBox .btn { left: auto; right: 0; }
	#NewsBox ul li .date {font-size: 28px;}
	#NewsBox ul li .info {display: inline-block;text-align: center;}
	#NewsBox ul li .news-block {padding: 25px 20px;}
	#NewsBox ul li .news-block a.photo {width: 100%; height: 100%;top: 0;left: 0;position: relative;display: inline-block;opacity: 1;transform: translateX(0);}
	#NewsBox ul li .slick-slide:after  { background: #d7a297; }
}
@media screen and (max-width:768px) {
	#aboutBox .info .fight{    float: none;    width: 100%;}
	#aboutBox .info .left{    float: none;    width: 100%;}
	#aboutBox p.more{    position: absolute;    right: 0;    top: 0;}
	#productBox .bgTxt.title{    padding-bottom: 5vw;}
}
@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;}
	.contentMain #NewsBox ul li{ width: 100%; }
	#NewsBox ul li:nth-child(2n - 1):after { background: #f0d8d3; }
	#aboutBox p.more{
    position: relative;
    padding: 0 0 40px;
}
	#aboutBox .info .stitle{font-size: 18px;}
#aboutBox{
    background-position: 80% 0%;
}
#productBox .proList li {
    width: calc(100%/2);
}
#productBox .proList .item .info{
    bottom: 8px;
}
}
@media screen and (max-width: 450px) {	
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
}