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

/* aboutBox */
#aboutBox {width: min(90%,1440px);margin: 0 auto;display: grid;grid-template-columns: 1fr 55%;align-items: end;padding-bottom: 8vw;}
#aboutBox .imgs {height: max-content;position: relative;display: flex;flex-direction: column;align-items: center;z-index: -1;}
#aboutBox .imgs .img-text{width:50%;}
#aboutBox .imgs .img-text article{font-size:22px;}
#aboutBox .imgs .img-text p{font-size:14px;margin: 35px 0;}
#aboutBox .imgs img{position: relative;}
#aboutBox .info {position: relative;}
#aboutBox .info .bgTxt { text-align: left; }
#aboutBox .info .pageh1{position: relative;margin-bottom: 50px;padding: 0px 0 50px;font-size: 26px;color: #474747;font-weight: 400;}
#aboutBox .info article p{font-size: 17px;color: #474747;font-weight: 400;}
#aboutBox .info article .info_detail{display:flex;gap:80px;padding:80px 0}
#aboutBox .info article .info_detail p{display:flex;flex-direction: column;align-items: center;font-family: 'Montserrat', sans-serif;font-size: 72px;font-weight: bold;line-height: 100%;}
#aboutBox .info article .info_detail p span{font-size:16px;font-weight: 500;margin-top: 10px;}
#aboutBox .info article .info_detail p span.cn{opacity: 0;margin: 0;}
#aboutBox .info article .info_detail p:hover span.en{transform: translateY(24px);opacity: 0;}
#aboutBox .info article .info_detail p:hover span.cn{transform: translateY(-26px);opacity: 1;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more {text-align: left;padding: 0;}

/* 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: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); 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; }

/* bookBox bookList*/
#bookBox{width:min(90%,1440px);display:grid;grid-template-columns:1fr 70%;margin:0 auto;align-items:end;gap:15px;padding-bottom:4vw}
#bookBox .info{padding-top:70px}
#bookBox .bgTxt{text-align:left}
#bookBox .info .stitle{margin-bottom:20px}
#bookBox article{margin-bottom:50px}
#bookBox #BookList{}
#bookBox #BookList ul li{position:relative;height:450px;display:flex;justify-content:center}
#bookBox #BookList ul li .photo{height:450px;z-index:0;width:95%;position:relative}
#bookBox #BookList ul li .photo_more{position:absolute;height:100%;width:100%;z-index:9}
#bookBox #BookList ul li h3{position:absolute;width:100%;left:0;bottom:-25px;z-index:9}
#bookBox #BookList ul li h3 a{height:70px;color:#fff;font-size:22px;font-weight:400;text-align:center}
#bookBox #BookList ul li h3 a.more{height:fit-content;font-size:14px;display:flex;align-items:center;justify-content:center}
#bookBox #BookList ul li h3 a.more svg{width:18px}
#bookBox #BookList ul li:hover h3{bottom:10px}
#bookBox #BookList ul li img{height:100%;object-fit:cover}
#bookBox #BookList ul li .photo:before{content:'';position:absolute;width:100%;height:100%;top:0;background:linear-gradient(180deg,rgb(0 0 0 / 0%),rgb(0 0 0 / 75%))}
#bookBox .bookbtn button{border:0;background: 0;}
#bookBox .bookBg{position:absolute;z-index:-1;bottom:0;left:-10%;width:100vw}

@media screen and (min-width:1281px){
	#bookBox .bookbtn{grid-column:1 / 3;margin-right:345px;margin-left:auto}
}
@media screen and (max-width: 1280px) {
	.wrap{padding-top: 0;}
	#aboutBox{display: grid;grid-template-columns: 1fr;width:100%;}
	#aboutBox .info{display: flex;flex-direction: column;align-items: center;width: 90%;margin: 0 auto;}
	#aboutBox .info .bgTxt, #aboutBox .info article p{text-align:center;}
	#aboutBox .imgs .img-text,#aboutBox .imgs:before{display:none;}
	#aboutBox .imgs img{margin-top: -44px;}
	#bookBox{grid-template-columns: 1fr;display: flex;flex-direction: column;align-items: center;}
	#bookBox article{display:none;}
	#bookBox .bookbtn{padding:20px 0;}
	#bookBox #BookList{order:1;width: 100%;}
	#bookBox .info .stitle{text-align:center;padding-bottom: 0px;margin-bottom: 0;}
	#bookBox p.morePC{display: none;}
	#bookBox p.moreMO{display: inline-block;order: 2;}
	#bookBox .info {padding-top: 0px;}
	#NewsBox ul{margin-bottom: 25px;}
}
@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: 680px) {
	#aboutBox .stitle{margin:0;}
	#aboutBox .info article .info_detail{gap: 30px;padding: 70px 0;}
	#bookBox #BookList ul li{height: 310px;}
	#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; width: 90vw; }
	#aboutBox .imgs img{margin-top: -74px;}
}