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

/* particle-canvas */
#particle-canvas{width:100%;height: 100%;position: absolute !important;bottom: 0;left: 0;z-index: -3;opacity: .25;}
#particle-canvas canvas{width:100%;height:100%;}

/* aboutBox */
#wrap #wrapBox #aboutBox {overflow: hidden;padding: 0;background-image: url(/images/42/aboutBg.png);background-repeat: no-repeat;background-position: 105% 0%;background-size: 50%;background-color: #f7f7f7;}
#aboutBox .imgs { position: absolute; width: 50vw; height: 100%; top: 0; left: 0; z-index: 1; }
#aboutBox .imgs .list {height: 100%;background: no-repeat 50% / cover;}
#aboutBox .info { position: relative; padding: 70px 0 70px 55vw; width: 490px; z-index: 3; }
#aboutBox .info .bgTxt { text-align: left; }
#aboutBox .info .stitle { position: relative; margin-bottom: 25px; padding: 0px 0 15px; font-size: 18px; color: #6D6D6D; }
#aboutBox .info .stitle:after { position: absolute; top: 33%; width: 70px; height: 1px; display: inline-block; background: #CCC; content: ""; }
#aboutBox .info article p {line-height: 200%;color: #323232;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more {text-align: left;margin-top: 50px;}

/* productBox */
#productBox .workframe {position: relative;}
#productBox .proList {margin: 0;}
#productBox .proList li {position: relative;padding: 0;-webkit-transition: all .5s ease;transition: all .5s ease;margin: 30px 20px 0;}
#productBox .proList li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#productBox .proList .item {position: relative;width: 100%;}
#productBox .proList .item .Img { position: relative; }
#productBox .proList .item .Img img{background-size: 90%;background-repeat: no-repeat;background-position: 50% 50%;background-color: #f6f6f6;box-shadow: 15px -30px #323232;}
#productBox .proList li:hover .item .Img img{box-shadow:0 0 #72120e}
#productBox .proList .item .info {margin-top:20px;}
#productBox .proList li:hover .item .info{transform: translateY(24px);}
#productBox .proList .item .info h3 {text-align: center;color: #393838;font-size: 20px;font-weight: bold;-webkit-line-clamp: 1;height: auto;}
#productBox .proList li:hover .item .info h3{background:linear-gradient(90deg,#dd3831,#971a15);background-clip:text;-webkit-background-clip:text;color:transparent;font-style:unset;}
#productBox .proList .item .info article {text-align: center;color: #8b8a8a;font-weight: 500;-webkit-line-clamp: 1;font-family: "Lato", sans-serif;}
#productBox .proList li:hover .item .info article{transform: translateY(-60px);}
#productBox .slick-prev{left:-50px;}
#productBox .slick-prev:before{content:url(/images/42/arrow-left.png)}
#productBox .slick-next{right:-50px;}
#productBox .slick-next:before{content:url(/images/42/arrow-right.png)}

/* NewsBox */
#NewsBox .workframe{width: min(90%, 1200px);display: grid;grid-template-columns: 25% 70%;justify-content: space-between;align-items: center;}
#NewsBox .titleBox *{text-align:left;}
#NewsBox li{position:relative;}
#NewsBox li a{position:absolute;width: 100%;height: 100%;top: 0;z-index: 2;}
#NewsBox li:not(:last-child):after {content:'';width: 100%;height: 5px;display: block;margin: 30px 0;background: linear-gradient(to right, #dadada, #dadada 2px, transparent 2px, transparent 4px);background-repeat: repeat-x;background-size: 4px 1px;background-position: 50% 50%;border-right: 1px solid #dadada;border-left: 1px solid #dadada;}
#NewsBox li .info{display:grid;grid-template-columns: 130px 1fr 50px;align-items: center;}
#NewsBox li .info p{font-family: "Lato", sans-serif;color: #5b5a5a;}
#NewsBox li .info h3{font-size:18px;}
#NewsBox li .info svg{width: 13px;height: 13px;padding: 18px;background: linear-gradient(90deg, #dd3831, #971a15);fill: #fff;border-radius: 50px;}

/* bookBox bookList*/
#bookBox { font-size: 0; }
#bookBox .row { position: relative; margin: 0; width: 100%; display: block; }
#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: 1024px) {
	#aboutBox .info{width: 40%;}
}
@media screen and (max-width: 980px) {
	#NewsBox .workframe{grid-template-columns:1fr;gap: 50px;}
	#aboutBox .imgs{position:relative;height: 50vw;width: 100%;overflow: hidden;}
	#aboutBox .info{width: 85%;margin: 50px auto;padding: 0;}
	#wrap #wrapBox>div{padding: 10vw 0;}
	#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 li .info h3{width:80%;}
	#NewsBox li .info{grid-template-columns:1fr;position: relative;align-items: center;}
	#NewsBox li .info svg{position:absolute;right: 0;}
	#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; }
}