.text-clamp{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}
.subBoxTitle{font-family:'Lato',sans-serif;text-align:center;font-weight:bold;font-size:50px;line-height:100%;text-transform:uppercase}
.subBoxTitle:first-letter{color:#ed4612}
.speBoxTitle{text-align:center;font-weight:400;font-size:18px;letter-spacing:2px;margin-top:10px}
#content{position:relative}
#content .bg{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1}
#content .bg:before,#content .bg:after{content:"";width:70vmax;height:70vmax;position:absolute;background:rgb(96 96 96 / 3%);left:-20vmin;top:-20vmin;animation:morph 15s linear infinite alternate,spin 15s linear infinite;z-index:1;will-change:border-radius,transform;transform-origin:55% 55%;pointer-events:none;z-index:-1}
#content .bg:after{width:70vmin;height:70vmin;left:auto;right:-10vmin;top:auto;bottom:0;animation:morph 10s linear infinite alternate,spin 26s linear infinite reverse;transform-origin:20% 20%}
@keyframes morph{0%{border-radius:40% 60% 60% 40% / 70% 30% 70% 30%}
100%{border-radius:40% 60%}}
@keyframes spin{to{transform:rotate(1turn)}}
#page-form{padding: 0 0 60px;}
#page-form .workframe{}
#page-form form,#page-form fieldset{margin:0;padding:0;border:0;width: 85%;margin: 0 auto;}
#page-form fieldset{display:flex;justify-content: space-between;flex-wrap: wrap;}
#page-form p{overflow:hidden;color:#000;font-size: 15px;width: 49%;margin: 10px 0;}
#page-form p:last-child{width:100%;}
#page-form p.send{float:none;width:100%;text-align:center}
#page-form label{float:left;width:100px;padding:5px 0}
#page-form span{}
#page-form .ra span{width:auto;float:left;margin-left:10px;padding:5px 0}
#page-form input[type="text"],#page-form select{padding: 15px;}
#page-form input#Checknum{width: 200px;margin-right: 10px;}
#page-form select{width:100%;}
#page-form p.send input{background: #ff9450;color:#fff;text-align:center;width:200px;font-size:14px;letter-spacing:0.2em;outline:none;margin-top:15px;cursor:pointer;border:0;padding: 21px 48px 19px;border-radius: 10px;}
#page-form p.send input:hover{background: #ed4612;}
#page-form p.text{text-align:center;font-size: 16px;margin: 30px auto;width: 65%;float: none;}
#page-form h2 img{margin-right:5px;vertical-align:bottom}
#page-form h2 b{display:inline-block;font-size:24px;color:#353535;margin-right:10px;vertical-align:baseline}
form p input[type="text"],form p input[type="password"],form p textarea,form p select{background-color: #f0f0f0;border:0;border-radius: 10px;width: calc(100% - 30px);}
form p textarea{width: calc(100% - 30px);padding: 15px;}
form p input[type="text"]:focus,form p input[type="password"]:focus{border-color:#000000;color:#000000}
input[type="text"],input[type="submit"],input[type="reset"],input[type="button"],button{-webkit-appearance:none}
select,input[type="text"]{border-top-right-radius:0;border-top-left-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;-webkit-appearance:none}
select{background-image:url(/images/24/selectbutton.png);background-repeat:no-repeat;background-position:95% 50%}
.more{display:flex;font-size:16px;padding:21px 48px 19px;background:#ff9450;border:2px solid #ff9450;box-sizing:border-box;text-align:center;font-family:'Poppins',sans-serif;transition:ease .3s;color:#fff;justify-content:center;align-items:center;border-radius:10px}
.more i{background:#fff;color:#ff9450;width:30px;height:30px;margin-right:10px;border-radius:50%;display:flex;justify-content:center;align-items:center}
.more:hover i{color:#ed4612}
.more:hover{color:#fff;background:#ed4612;border-color:#ed4612}
#Extra-setting{background:#1a1a1a}
#Extra-setting .workframe{display:flex;flex-wrap:wrap;padding:160px 0px 110px}
#Extra-setting .item{width:50%;display:flex;padding:20px 0px 50px}
#Extra-setting .item .item-icon{padding:0 15px}
#Extra-setting .item .item-icon img{width:170px;height:160px}
#Extra-setting .item .item-info{padding:0 15px;width:62%}
#Extra-setting .item .item-info .item-title{margin-bottom:27px;color:#fff;font-size:22px}
#Extra-setting .item .item-info .item-descript{color:#888888;font-size:17px;line-height:30px}
#waypoint{padding:90px 0;background-image:url(/images/24/woman-filling-out-form.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}
#waypoint:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.35;z-index:0}
#waypoint .workframe{position:relative;z-index:3}
#waypoint h3{font-size:30px;font-weight:bold;letter-spacing:5px;color:#fff}
#waypoint p{color:#fff;margin-top:26px;font-size:18px;letter-spacing:2px}
#waypoint .moreBox{position:absolute;right:0;top:0}
#aboutFunc{padding:0 0 80px;background-attachment:fixed;background-repeat:no-repeat;background-size:cover}
#aboutFunc .speBox{display:flex;flex-wrap:wrap;justify-content:space-between}
#aboutFunc .speBox .youtubebox{width:45%;order:2}
#aboutFunc .speBox .youtubebox img{width:100%;height:100%;object-fit:cover;border-radius:15px}
#aboutFunc .speBox .youtubebox #youtube .UTwo iframe{width:100%;height:376px}
#aboutFunc .speBox #about{width:50%;order:0}
#aboutFunc .speBox #about h4{display:inline-block}
#aboutFunc .speBox #about h3.subBoxTitle{text-align:left}
#aboutFunc .speBox #about h2{text-align:left}
#aboutFunc .speBox #about .arts{font-size:15px;line-height:180%;font-weight:300;text-align:justify;margin:35px 0}
#aboutFunc #SeoStarRating{padding-bottom:50px}
#product .titleSet{}
#product #prolay .pro-list{max-width:1280px;margin:50px auto}
#product #prolay .pro-list > div{overflow:hidden;transition:ease .3s}
#product #prolay .pro-list > div .photo{position:relative;background-position:center;background-repeat:no-repeat;background-size:cover;display:block}
#product #prolay .pro-list > div .photo::after{content:"";position:absolute;left:0px;top:0px;display:block;background:transparent;transition:ease .3s;width:100%;height:100%}
#product #prolay .pro-list > div .p-box .p-info{width:95%;color:#fff;position:absolute;left:20px;bottom:0px;transform:translateY(85px);transition:ease .3s}
#product #prolay .pro-list > div .p-box .p-info .describe{height:44px;overflow:hidden;padding-right:17px;box-sizing:border-box;-webkit-line-clamp:2}
#product #prolay .pro-list > div .p-box .p-info .price{height:23px;overflow:hidden;padding-bottom:10px}
#product #prolay .pro-list > div .p-box .p-info .price span{display:inline-block}
#product #prolay .pro-list > div .p-box .p-info .price span.saleprice{margin-left:5px;height:28px}
#product #prolay .pro-list > div .p-box .p-info .price span.saleprice b{font-size:22px;color:red}
#product #prolay .pro-list > div .p-box .p-info .title{display:flex;justify-content:space-between;align-items:center;padding-bottom:60px}
#product #prolay .pro-list > div .p-box .p-info h3{max-width:65%;position:relative;font-size:22px;font-family:'Poppins',sans-serif;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#product #prolay .pro-list > div .p-box .p-info h3 a{color:#fff}
#product #prolay .pro-list > div .p-box .p-info a.btn{display:block;width:58px;height:58px;text-align:center;line-height:58px;border:2px solid #fff;border-radius:50%;margin-right:20px;color:#fff;transition:ease .3s;opacity:0}
#NewsBox{background:#1a1a1a}
#NewsBox .workframe{padding:160px 0px}
#NewsBox .workframe .speBox .titleSet{display:flex}
#NewsBox .workframe .speBox .titleSet h2{font-size:42px;font-family:'Poppins',sans-serif;line-height:1.3;color:#fff;margin-right:45px}
#NewsBox #news .newsList{padding-top:50px}
#NewsBox #news .newsList .border{padding:0 15px;overflow:hidden}
#NewsBox #news .newsList .border a{display:block;background-position:center;background-repeat:no-repeat;background-size:cover}
#NewsBox #news .newsList .border .news-info h3{font-family:'Poppins',sans-serif;font-size:22px;line-height:1.6;color:#fff;padding:35px 0px 27px}
#NewsBox #news .newsList .border .news-info .describe{font-family:'Poppins',sans-serif;font-size:17px;color:#888888;line-height:1.6;-webkit-line-clamp:2}
#NewsBox #news .newsList .slick-prev,#NewsBox #news .newsList .slick-next{height:58px;width:58px;border:2px solid #888888;border-radius:50%}
#NewsBox #news .newsList .slick-prev{right:87px;top:0px;left:unset}
#NewsBox #news .newsList .slick-next{right:15px;top:0px}
#NewsBox #news .newsList .slick-prev:before{content:"\f053";font:normal normal normal 14px/1 FontAwesome;padding-right:5px}
#NewsBox #news .newsList .slick-next:before{content:"\f054";font:normal normal normal 14px/1 FontAwesome;padding-left:5px}
#NewsBox #news .newsList .slick-prev:before,#NewsBox #news .newsList .slick-next:before{font-size:20px;color:#888888}
#bookBox{display:flex;background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed}
#bookBox .speBox{width:35%;position:relative}
#bookBox .speBox .booktitle{width:100%;position:absolute;top:50%;left:50%;transform:translate(0%,-50%)}
#bookBox .speBox .booktitle h2{font-size:42px;color:#fff;font-family:'Poppins',sans-serif;line-height:1.3}
#bookBox #book{width:65%;transform:translateX(200px)}
#bookBox #book .bList .mofd{position:relative}
#bookBox #book .bList .photo{background-size:cover;background-repeat:no-repeat;background-position:center}
#bookBox #book .bList .photo img{height:700px}
#bookBox #book .bList .mofd h3{transition:ease .3s;position:absolute;bottom:0px;left:0px;width:100%;height:60px;background:#020202a6;text-align:center;line-height:60px;box-sizing:border-box;border-right:1px solid #888}
#bookBox #book .bList .mofd h3 a{color:#fff;display:block;width:100%}
#bookBox #book .bList .mofd:hover h3{background:#020202d6}
#freebox.noneCI{display:none}
#freebox{padding:80px 0}
#freebox .free h3{font-size:18px;margin-top:15px;text-align:center;color:#ed4612;font-weight:500;letter-spacing:2px}
#freebox .free p{margin-top:10px;line-height:150%;color:#555;font-size:14px;text-align:center}
#freeboxlist{display:flex;flex-wrap:wrap;justify-content:center;width:85%;margin:60px auto 0}
#freeboxlist >div{width:calc(100%/4)}
#freeboxlist .free{margin:0 20px}
#freeboxlist >div .photo{width:130px;background:#ff9450;margin:0 auto;border-radius:50%;display:flex;justify-content:center;align-items:center;height:130px}
#freeboxlist >div:hover .photo{background:#ed4612}
#freeboxlist >div .photo img{width:70px;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
#ssbanner{padding:80px 0}
#ssbanner .bxslider{margin-top:60px}
#ssbanner .caseBox{margin:15px;box-shadow:0 0 10px rgb(0 0 0 / 15%);padding: 50px;border-radius:15px;background:#fff}
#ssbanner .caseBox .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;border-radius:50%;width: 70%;margin:0 auto 20px}
#ssbanner .caseBox h3{font-weight:500;margin-bottom:10px;text-align: center;}
#ssbanner .caseBox p{font-size:14px;color:#78797a;overflow:hidden;text-align: justify;/* height:71px; *//* text-overflow:ellipsis; *//* display:-webkit-box; *//* -webkit-line-clamp:3; *//* -webkit-box-orient:vertical; */}
#ssbanner .bxslider >div{position:relative}
#ssbanner .bxslider > div a{position:relative;display:block;background-repeat:no-repeat;background-position:center;background-size:cover;height:100%}
#ssbanner .bxslider > div a::after{content:"";position:absolute;left:0px;top:50%;transform:translateY(-50%);width:100%;height:0%;transition:all .25s;background-color:rgba(27,47,66,0.5);z-index:1}
#ssbanner .bxslider > div a:hover::after{height:100%}
#ssbanner .bxslider > div a p{position:absolute;width:85%;bottom:14%;left:8%;color:#fff;font-size:22px;z-index:2}

@media screen and (min-width:1025px){
#product #prolay .pro-list > div:hover .photo::after{background:rgba(9,113,242,0.9)}
#product #prolay .pro-list > div:hover .p-box .p-info{transform:translateY(0px)}
#product #prolay .pro-list > div:hover .p-box .p-info{transform:translateY(0px)}
#waypoint{background-attachment:fixed}
#product #prolay .pro-list > div:hover .p-box .p-info a.btn{opacity:1}
}
@media screen and (max-width:1300px){
#product #prolay .pro-list > div .p-box .p-info a.btn{width:45px;height:45px;line-height:45px}
#product #prolay .pro-list > div .p-box .p-info .title{padding-bottom:40px}
}
@media screen and (max-width:1280px){
#product #prolay .pro-list{width:90%;}
}
@media screen and (max-width:1024px){
#page-form p.text{width:95%;}
#page-form form, #page-form fieldset{width:100%;}
#Extra-setting .item .item-info .item-descript{font-size:16px}
#Extra-setting .item .item-info .item-title{font-size:18px}
#aboutFunc .speBox .youtubebox{width:100%;float:unset;margin-top: 30px;}
#aboutFunc .speBox #about{width:100%;padding-top:35px}
#product #prolay .pro-list > div .p-box .p-info h3{font-size:20px}
#product #prolay .pro-list > div .p-box .p-info .describe{height:44px}
#product .titleSet{}
#product .titleSet .product-desc{max-width:100%}
#bookBox{display:block}
#bookBox .speBox{width:100%;position:unset}
#bookBox .speBox .booktitle{width:100%;position:unset;padding:30px 40px;transform:unset}
#bookBox #book{width:100%;transform:unset}
#bookBox #book .bList .photo img{height:auto}
#ssbanner .bxslider > div a p{font-size:18px}
#freeboxlist{width:100%;}
#aboutFunc{padding-bottom: 50px;}
#freebox{padding:40px 0}
}
@media screen and (max-width: 768px){
#Extra-setting .workframe{padding:40px 20px}
#Extra-setting .item{width:100%}
#Extra-setting .item .item-icon img{height:auto}
#product #prolay .pro-list > div .p-box .p-info h3{font-size:18px}
#NewsBox .workframe .speBox .titleSet{display:block}
#NewsBox #news .newsList .slick-prev,#NewsBox #news .newsList .slick-next{height:35px;width:35px}
#NewsBox #news .newsList .slick-prev{right:65px}
#NewsBox #news .newsList .slick-prev:before,#NewsBox #news .newsList .slick-next:before{font-size:14px}
#NewsBox #news .newsList .slick-prev:before{padding-right:3px}
#NewsBox #news .newsList .slick-next:before{padding-left:3px}
#ssbanner .bxslider{flex-wrap:wrap}
.subBoxTitle{font-size:40px;}
#waypoint .moreBox{position:relative;margin-top: 30px;display: inline-block;}
#waypoint h3, #waypoint p, #waypoint .workframe{text-align: center;line-height: 140%;}
}
@media screen and (max-width:580px){
#ssbanner .bxslider{margin-top: 30px;}
#NewsBox #news .newsList .slick-prev,#NewsBox #news .newsList .slick-next{top:45px}
#NewsBox #news .newsList{padding-top:75px}
#freeboxlist >div{width:50%}
#freeboxlist .free{margin: 15px;}
#page-form p{width:100%;}
}
@media screen and (max-width:480px){
.subBoxTitle{font-size:35px;}
#product .titleSet .product-desc{font-size:18px}
.more{padding:8px 25px 10px}
#Extra-setting .workframe{padding:40px 0px}
#Extra-setting .item .item-info .item-title{font-size:16px}
#Extra-setting .item .item-info .item-descript{font-size:14px}
#freebox .free h3{font-size: 16px;letter-spacing: 0;}
}
@media screen and (max-width:420px){
#product #prolay .pro-list > div .p-box .p-info h3{font-size:16px}
#ssbanner .bxslider > div a p{font-size:16px}
}
@media screen and (max-width:374px){
#product .titleSet,#aboutFunc,#NewsBox .workframe,#freebox{padding:60px 20px}
}