.wrap {position: relative;background: #fff;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; }

.topic{position:relative;/* padding:70px 0; */}
.topic .topic-title{display: flex;position:relative;z-index:3;color:#333;flex-direction: column;align-items: flex-start;}
.topic .topic-title h2{text-align:center;text-transform: uppercase;color: var(--complement);letter-spacing:0.32px;line-height:1.5;font-weight: 700;font-size: 45px;font-family: 'serif';background: linear-gradient(90deg, #6187ba, #154a7b);background-clip: text;-webkit-background-clip: text;color: transparent;}
.topic .topic-title p{line-height: 130%;margin-top:7px;font-weight:500;font-size: 18px;letter-spacing:1.5px;padding-left: 23px;position: relative;text-align: center;}

.topic .topic-title p::before{-webkit-animation:beat 1.5s ease-in-out infinite;animation:beat 1.5s ease-in-out infinite;border-radius:999px;border: 1px solid var(--triadic1);content:"";height:14px;left:0;position:absolute;top: 6px;width:14px}
.topic .topic-title p::after{-webkit-animation:beat 1.5s ease-in-out infinite;animation:beat 1.5s ease-in-out infinite;background-color: var(--triadic1);border-radius:999px;content:"";height:6px;left:4px;position:absolute;top: 10px;width:6px}
.topic b{font-family:'Marck Script',cursive;position:absolute;z-index:2;left:0;width:100%;height:100%;display:block;top:0;font-size:170px;color:#eaeaea;line-height:197px;text-align:center;font-style:italic;transform:rotate(-5deg);font-weight:400}
#freebox{padding: 0 0 40px;position:relative;overflow:hidden;z-index:3;}
#freebox .topic-title{margin-bottom:50px;align-items:center}
#freebox .webframe{width:min(90%,1440px);padding: 70px 0;margin-bottom: 0;margin:  0 auto;}
#freeboxlist{position:relative;z-index:2;text-align:center;display:grid;grid-template-columns: repeat(3,1fr);gap: 20px;}
#freeboxlist >div{display:inline-block;margin-right:-5px;vertical-align:top;-webkit-transition: all 0.5s;transition: all 0.5s;}
#freeboxlist .free{padding:30px;text-align:center;position:relative;overflow:hidden;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);background-color: #ffffff;-webkit-transform: translateY(0px);transform: translateY(0px);-webkit-transition: all .5s;transition: all .5s;}
#freeboxlist .free .topBox{-webkit-box-align:center;align-items:center;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin-bottom: 20px;position:relative;z-index:1;flex-direction:row-reverse}
#freeboxlist .free .topBox .stepBox{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:"Cardo",serif}
#freeboxlist .free .topBox .stepBox .number{display:inline-block;font-size:40px;line-height:0.8;font-family:"Libre Baskerville",serif;opacity:.3}
#freeboxlist .free .topBox .stepBox .text{display:inline-block;font-size:16px;line-height:1;letter-spacing:0.75px;margin-left:10px}
#freeboxlist .free .topBox .Img{padding: 16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #dcdcdc;background-color:#ffffff;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
#freeboxlist .free .topBox .Img img{width: 35px;aspect-ratio: 1 / 1;object-fit: contain;}
#freeboxlist .free .Txt{position:relative;z-index:1}
#freeboxlist .free .Txt .title{margin-bottom: 16px;position:relative;border-bottom:1px solid #cbcbcb;padding: 0px 0px 20px 0px;color:#313131;letter-spacing: 1px;line-height: 140%;font-size: 20px;font-weight: 500;}
#freeboxlist .free .Txt .title::before{content:"";width: 10%;height: 2px;background-color: #70bcdd;position:absolute;bottom: -1px;left:0;z-index:1}
#freeboxlist .free:hover .Txt .title::before{width: 100%;}
#freeboxlist .free .Txt .title a{display:block;font-size:18px;font-weight:500;line-height:1.2;letter-spacing:1.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#freeboxlist .free .Txt .text{color: #2f2f2f;line-height:1.65;letter-spacing: 0.4px;"Libre Baskerville",font-family:sans-serif;font-size: 16px;font-weight: 400;}
#freeboxlist .free::before{content:"";display:block;width:calc(100% - 20px);height: 17px;background-color: #70bcdd;position:absolute;bottom:0;left:10px}
#freeboxlist .free::after  {content: '';position: absolute;bottom: -130px;right: -20px;background-image: url(/images/18/img-logo2.png);background-size: contain;background-repeat: no-repeat;width: 130px;height: 130px;opacity: .25;-webkit-transition: all 0.5s;transition: all 0.5s;}
#freeboxlist .free:hover::after {bottom: -20px;opacity: .2;-webkit-transition: all 0.5s;transition: all 0.5s;}

@keyframes bannerMouse1{0%{transform:rotate(0deg)}
10%{transform:rotate(0deg)}
20%{transform:rotate(5deg)}
30%{transform:rotate(0deg)}
40%{transform:rotate(5deg)}
50%{transform:rotate(0deg)}
100%{transform:rotate(0deg)}
}
#freeboxlist .free:hover{-webkit-box-shadow: 0px 20px 40px 1.4px rgba(149, 149, 149, 0.35);box-shadow: 0px 20px 40px 1.4px rgba(149, 149, 149, 0.35);-webkit-transform: translateY(-20px);transform: translateY(-20px);-webkit-transition: all 0.5s;transition: all 0.5s;}
#freeboxlist .free a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}
#freeboxlist .free img{}
#freeboxlist .free .photo{text-align:center;width:70px;margin:0 auto 30px;box-shadow:0 0 10px rgb(0 0 0 / 10%);border-radius:50%;padding:30px;background:#fff}
#freeboxlist .free:hover .photo:before{top:0}
#freeboxlist .free:nth-child(2){animation-delay: 0.2s;-webkit-animation-delay: 0.2s;}
#freeboxlist .free:nth-child(3){animation-delay: 0.3s;-webkit-animation-delay: 0.3s;}
#freeboxlist .free:nth-child(4){animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
#freeboxlist .free:nth-child(5){animation-delay: 0.5s;-webkit-animation-delay: 0.5s;}
#freeboxlist .free:nth-child(6){animation-delay: 0.6s;-webkit-animation-delay: 0.6s;}
#freeboxlist .free:nth-child(7){animation-delay: 0.7s;-webkit-animation-delay: 0.7s;}
#freeboxlist .free h4{text-align:center;font-size:22px;line-height:110%;overflow:hidden;margin-bottom: 12px;height: 25px;}
#freeboxlist .free p{font-size: 14px;text-transform: capitalize;}

/* videobox */
#videobox{position:relative;display: flex;justify-content: center;align-items: center;}
#videobox .videotitle{position:absolute;width: 90%;margin: 0 auto;}
#videobox .videotitle h2{font-size: max(4 * (1vw + 1vh) / 2, 16px);color: #fff;font-weight: 400;letter-spacing: 15px;text-align: center;}
#videobox .videoBg{z-index: -1;background: #6c757d;}
#videobox .videoBg .Img{object-fit:cover;object-position: 50% 80%;opacity: .5;}
/* aboutBox */
#aboutBox {overflow: hidden;background: #f5f5f5;}
#aboutBox .imgs { position: absolute; width: 50vw; height: 100%; top: 0; left: 0; z-index: 1; }
#aboutBox .imgs .list {height: 30vw;background: no-repeat 50% / contain;}
#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 {line-height: 200%;padding: 20px 0;}
#aboutBox .info article p{font-weight: 400;}
#aboutBox:before{content:"";position: absolute;width: 300px;height: 300px;right: 0px;bottom: -70px;z-index: 1;background: url(/images/42/img-logo.png);background-size: contain;background-repeat: no-repeat;animation: float 4s ease-in-out infinite;}
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }
@keyframes float{0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

/* productBox */
#productBox{padding: 4vw 0;}
#productBox .workframe {position: relative;}
#productBox .topic-title{align-items: center;}
#productBox .topic-title h1{font-size:20px;font-weight: 400;text-align: center;}
#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;display: flex;justify-content: center;}
#productBox .proList .item .Img img{background-size: 90%;background-repeat: no-repeat;background-position: 50% 50%;aspect-ratio: 3/4;object-fit: contain;height: 330px;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);}
#productBox .proList li:hover .item .Img img{-webkit-animation-name:hvr-bob-float,hvr-bob;animation-name:hvr-bob-float,hvr-bob;-webkit-animation-duration:.3s,1.5s;animation-duration:.3s,1.5s;-webkit-animation-delay:0s,.3s;animation-delay:0s,.3s;-webkit-animation-timing-function:ease-out,ease-in-out;animation-timing-function:ease-out,ease-in-out;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-direction:normal,alternate;animation-direction:normal,alternate}

@keyframes hvr-bob-float{100%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}
}
@keyframes hvr-bob{0%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}
50%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}
100%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}
}
#productBox .proList .item .info{margin-top:20px}
#productBox .proList .item .info h3 {color: #393838;font-size: 20px;font-weight: bold;-webkit-line-clamp: 1;height: auto;}
#productBox .proList li .item .info .cate{color: #fff;background: linear-gradient(90deg, #6187ba, #154a7b);width: fit-content;padding: 5px 10px;margin-bottom: 10px;font-weight: 400;}
#productBox .proList li:hover .item .info h3{background: linear-gradient(90deg, #6187ba, #154a7b);background-clip:text;-webkit-background-clip:text;color:transparent;font-style:unset;}
#productBox .proList .item .info p {color: #8b8a8a;font-weight: 400;-webkit-line-clamp: 2;}
#productBox .proList li .item .info .p-more{font-size: 15px;background: #e9ecef;width: fit-content;padding: 4px 20px;margin-top: 20px;display: flex;font-weight: 400;color: #6d6d6d;}
#productBox .proList li .item .info .p-more svg{width: 20px;aspect-ratio: 1/1;fill: #6d6d6d;transform: rotate(45deg);transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#productBox .proList li:hover .item .info .p-more svg{transform: rotate(0deg);}

#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)}

#productBox p.more{padding-top: 80px;}

/* NewsBox */
#NewsBox{padding: 5vw 0 4vw;}
#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 .titleBox p.more{padding-left:0;}
#NewsBox ul{width:100%;max-width: 100%;}
#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: 100px 1fr 50px;align-items: center;gap: 30px;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#NewsBox li:hover .info{grid-template-columns: 100px 1fr 60px;}
#NewsBox li .info img{aspect-ratio:1/1;object-fit: cover;}
#NewsBox li .info p{font-family: "Lato", sans-serif;color: #5b5a5a;font-weight: 400;}
#NewsBox li .info h3{font-size:18px;font-weight: 400;}
#NewsBox li .info svg{width: 13px;height: 13px;padding: 18px;background: linear-gradient(90deg, #6187ba, #154a7b);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: 1280px) {
	#aboutBox .imgs, #bookBox .row { position: relative; width: 100%; display: inline-block; }
	#aboutBox .info {padding: 0 15% 50px;width: 70%;}
	#aboutBox p.more { text-align: center; }
	#NewsBox .workframe{grid-template-columns:1fr;gap: 40px;}
	#NewsBox li .info h3{width: 90%;-webkit-line-clamp: 1;}
}
@media screen and (max-width: 1024px){
	#videobox .videotitle h2{font-size: 28px;}
	#videobox .videoBg,#videobox .videoBg video{}
	#productBox .slick-prev{left: -35px;}
	#productBox .slick-next{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); }
    #videobox .videoBg .Img img{aspect-ratio: 5/ 2;object-fit: cover;}
}
@media screen and (max-width: 768px) {
	#videobox .videotitle h2{letter-spacing: 5px;font-size: 20px;}
	#freeboxlist{grid-template-columns: repeat(1, 1fr);}
	#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); }
	#productBox .slick-prev{left: -20px;}
	#productBox .slick-next{right:-20px;}
	#bookBox #customBox .info article { width: 90%; padding: 8vw 0 0; }
	#NewsBox li .info h3{font-size:18px;-webkit-line-clamp: 2;}
	#NewsBox li:hover .info{grid-template-columns: 100px 1fr 50px;}
}
@media screen and (max-width: 450px) {
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
	#productBox .slick-prev{left: -10px;}
	#productBox .slick-next{right: -10px;}
}