.about-box{
    width: 85%;
    max-width: 1620px;
    display: flex;
    align-items: center;
    margin:auto;
    justify-content:space-between;
    padding:60px 0;
}
.about-box .about{ flex: 0 0 50%; padding-right: 5%;}
.about-box .about h2{ font-size: 32px; font-weight: bolder; line-height: 1; margin-top:15px;}
.about-box .about p{font-size: 16px; line-height:2;}
.about-box .about-img{max-height: 440px; width: 50%; }
.about-box .about-img img{ object-fit: cover; width: 100%; height: 440px;}
.about-box .about .icon-ani{margin-bottom: 30px;}
.about-box .about .icon-ani span{display: inline-block; margin: 0 6px 0 0;height: 6px; border-radius: 6px;}
.about-box .about .icon-ani span:nth-child(1){width: 6px;background: #fabe00; animation: fa_span01_ani 1.2s linear infinite alternate; }
.about-box .about .icon-ani span:nth-child(2){width: 6px;background: #fabe00; animation: fa_span02_ani 1.2s linear infinite alternate; }
.about-box .btn-more {display: flex;  cursor: pointer; position: relative;overflow: hidden;text-align: center;box-sizing: border-box;width: 160px;padding: 10px 24px;margin: 60px auto 0 0; align-items: center;background: #fabe00;justify-content: center;border-radius: 36px;color:#fff;}
.about-box .btn-more::before {content: "";position: absolute;display: block;transition: all .6s; width: 100%;height: 0;border-radius: 50%;left: 50%;top: 50%;padding-top: 100%;transform: translateX(-50%) translateY(-50%);}
.about-box .btn-more::after { content: "";position: absolute;width: 0;height: 100%;transition: all .3s;z-index: 0;opacity: 0; top: 0;left: 0px;}
.about-box .btn-more:hover{box-shadow: rgba(70,111,129,0.4) 0 0 48px 0px;}
.about-box .btn-more:hover:before {animation: style1 .75s;z-index: 1}
.about-box .btn-more:hover:before {animation: style1 .75s;z-index: 1}
.about-box .btn-more a{color:#fff;}
@media screen and (max-width: 1024px) {
    .about-box{width:95%; flex-wrap: wrap; padding:5vw 2.5vw;}
    .about-box .about{width: 100%;  flex: 0 0 auto; margin-bottom:5vw; padding-right:0}
    .about-box .about-img{ width: 100%;}
}
@media screen and (max-width: 768px) {
.about-box .about h2{font-size: 26px;}
.about-box .about img{width: 25%;}
.about-box .about .icon-ani{margin-bottom: 10px;}
.about-box .btn-more{margin-top:0}
.about-box .about-img{ height: 95vw; overflow: hidden;}
.about-box .about-img img{object-fit: cover; height: 95vw;}
}

/*About box*/
.about-box-outer{
    background-repeat: no-repeat;background-size: cover;background-attachment: fixed;
}
.service-outer .service .service-lists dl{ }

.service-outer{width: 100%; }
.service-outer .service{width: 85%;max-width: 1620px; margin:auto; padding:80px 0}
.service-outer .service .service-lists{ display: flex; flex-wrap: wrap; color:#fff; justify-content: space-between; margin-top:30px 0}
.service-outer .service .service-lists dl{ width: calc( (100% - 180px)/4 );  padding:30px;     border-style: solid;  background-color: rgba(0,0,0,0.4);     transition-property: all; transition-duration: 0.6s;transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); cursor: pointer;}
.service-outer .service .service-lists dl:hover{ background-color: #fabe00; }
.service-outer .service .service-lists dl dd{ min-width: calc(100%/4);  }
.service-outer .service .service-lists dl dd span{ width: 80px; height: 80px; border-radius: 50px;  font-size: 60px;}
.service-outer .service .service-lists dl dt h4{font-size: 26px; font-weight: bold;}
.service-outer .service .service-lists dl dt p{
    word-wrap: break-word; overflow-wrap: break-word; -webkit-line-clamp: 12;
display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;font-size: 14px;
}
@media screen and (max-width: 1024px){
    .service-outer .service{width: calc(100% - 20px); margin:0 10px; padding:20px 0}        
}
@media screen and (max-width: 414px){
    .service-outer .service .service-lists dl{ width: 100%; }
}
/* app.html */
.content{padding:30px 0 0 0}
.big-title{ text-align: center; }
@media screen and (max-width: 1024px){
    .content{padding:10px 0 0 0}
    .big-title h1{ font-size: 1.3rem; margin-bottom: 0; }
    .icon-ani{margin-bottom:10px}
}
@media screen and (max-width: 414px){
    
}



.main-top-box{ background-color: rgba(246,246,246,1); margin:auto; }
.main-top{
    padding:80px 0;width: 85%;max-width: 1620px; display: flex;align-items: start;margin:auto;justify-content:space-between; flex-wrap: wrap;}
.main-top .video{ padding:0 40px; width: 50%; }
.main-top .video img{width: 100%; object-fit: cover;}
.main-top .texts{width: 50%; height: 100%; padding: 20px;}
.main-top .cnt{ width: 100%; margin-top:80px}
@media screen and (max-width: 1024px){
    .main-top{display: block; width: 100%; padding:0 20px; padding-top:20px}
    .main-top .video{width: 100%; padding:0 0px;}
    .main-top .texts{width: 100%;}
}

/* contact */
.contact-outer{width: 85%;max-width: 1620px; margin:auto;  box-shadow: rgba(17, 12, 46, 0.12) 0px var(--yx_FS24) var(--yx_FS48) 0px;  margin:30px auto; padding:30px 0}
.contact-outer .contact-box{display: flex; justify-content: space-around; ; }
.contact-outer .contact-box div{width: 35%;}
.contact-outer .contact-box div img{max-width: 100%;}
.contact ul li{margin:20px 0; font-size: 24px;}
.contact ul li span{width: 40px; height: 40px; border-radius: 50%; text-align: right; display: inline-block; text-align: center; background-color: #333; color:#fff;}
@media screen and (max-width: 1024px){
    .contact-outer{width: calc(100% - 20px); margin:10px; }
    .contact-outer .contact-box{display: block;}
    .contact-outer .contact-box div{width: 100%;}
    .contact-outer .contact-box div.contact{padding:10px;}
}


/* company */
.content{width: 85%;max-width: 1620px; margin:auto; }
.cnt_str{padding:30px;}
.cnt_str img{width: 95%; margin:auto; display: block; font-size: 16px;}
@media screen and (max-width: 1024px){
    .content{width: calc(100% - 20px); margin:0 10px; }  
    .cnt_str{padding:10px;}
}