@charset "UTF-8";
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th,p,a,li,td,b,div,textarea{font:400 "Poppins", "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial";color:#333;}
h2 { color: #333; font-size: 0.38rem; font-weight: 600; }

.cur{transform: translateY(1rem);opacity: 0;transition:transform .3s,opacity .3s;}
.eff.cur{transform: translateY(0);opacity: 1;}

/* section1 */
.sec1 { position: relative; }
.iframe { position: absolute; top: 0; width: 100%; height: 100%; display: none; }
.close-iframe { position: absolute; top: 0.15rem; right: 0.3rem; background-color: #e4e4ff; border-radius: 50%; width: 0.3rem; height: 0.3rem;  display: flex; justify-content: center; align-items: center; cursor: pointer; }
.close-iframe::after { display: inline-block; content: "\e916"; font-family: 'iconfont'; color: #aaaaaa; font-size: 0.14rem; line-height: 0.14rem; }
.close-iframe:hover::after { color: #fff; }
.close-iframe:hover { background-color: #6A66FF; }
.banner { text-align: center; padding: 1.2rem 0 0.16rem; background: url(../tools/img/fs-banner-bgimg.png) top center no-repeat; background-size: cover; margin-bottom: 1rem; }
.banner-text h1 { font-size: 0.48rem; font-weight: 600; color: #000; margin: 0.2rem 0; }
.banner-des { color: #666; font-size: 0.18rem; max-width: 11.2rem; width: 96%; margin: 0 auto; }
.banner-btns { margin: 0.5rem auto; }
a.download-btn {display: inline-block; padding: .15rem 0; border-radius: 8px; background: #343434; color: #FFF; font-size: 0.2rem; font-weight: 600;   text-decoration: none; text-align: center; max-width: 2.5rem; width: 100%; box-sizing: border-box; margin: 0 0.075rem; }
a.download-btn svg, a.start-btn svg { margin-right: 0.1rem; vertical-align: middle; width: 0.19rem; height: 0.18rem; }
a.start-btn { display: inline-block; padding: .15rem 0; color: #fff; border-radius: 8px; background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%); font-size: 0.2rem; font-weight: 600;  text-decoration: none; text-align: center; max-width: 2.5rem; width: 100%; box-sizing: border-box;  margin: 0 0.075rem;}

a.start-btn:hover { background: linear-gradient(90deg, #0148FF 0%, #8940FF 100%); }
a.download-btn:hover { background: #000; }

iframe { width: 100%; height: 9rem; }
#recorder .sec1, #camera .sec1 { margin-bottom: 1rem; }

#es a.download-btn, #es a.start-btn { max-width: 2.7rem; }
#de a.download-btn, #de a.start-btn { max-width: 3rem; }
#fr a.download-btn, #fr a.start-btn { max-width: 3.8rem; }


/* section2 */
.advantage { max-width: 17rem; width: 96%; margin: 0 auto 1rem; background: url(../tools/img/advantage-bgimg.png) top center no-repeat; background-size: cover; box-sizing: border-box; border-radius: .2rem; padding: .55rem 1rem .4rem; text-align: center; }
.advantage h2 { color: #342929; }
.advantage-des { max-width: 10rem; width: 100%; margin: .2rem auto .4rem; color: #6C6C6C;font-size: .16rem; }
.advantage-lists { display: flex; justify-content: space-between; justify-content: center; flex-wrap: wrap; }
.advantage-item { background: url(../tools/img/advantage-item-bgimg.png) top center no-repeat; background-size: cover; max-width: 3rem; width: 100%; height: 3rem; display: flex;justify-content: center; flex-direction: column; align-items: center; transition: transform .3s ease-in-out; }
.advantage-item:hover { transform: translateY(-5px); transition: transform .3s ease-in-out; }
.advantage-item img { width: 1.18rem; height: 1.18rem; }

#fr .advantage-item { padding: 0 0.2rem; box-sizing: border-box; }

/* section3 */
.feature { max-width: 14rem; width: 96%; margin: 0 auto 1.2rem; box-sizing: border-box; text-align: center; }
.feature-des {max-width: 10.2rem; width: 100%; margin: .2rem auto .5rem; color: #666; font-size: 0.16rem;}
.feature-lists { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2rem; }
.feature-item { max-width: 6.7rem; width: 48%; min-height: 4.3rem; box-sizing: border-box; padding: 0.3rem 0.6rem 0; border-radius: 0.1rem; }
.feature-item h3 { color: #FFF;font-size: 0.24rem;font-weight: 600; margin: 0.2rem auto; }
.feature-item1 { background-color: #663EBB; }
.feature-item2 { background-color: #6A70F9; }
.feature-item3 { background-color: #5A6DFF; }
.feature-item4 { background-color: #6D60E2; }
.camera-feature-item1 { background-color: #6A70F9; }
.camera-feature-item2 { background-color: #4B4069; }
.camera-feature-item3 { background-color: #7469E0; }
.camera-feature-item4 { background-color: #5A6DFF; }
.recorder-feature-item1 { background-color: #4E3987; }
.recorder-feature-item2 { background-color: #6A70F9; }
.recorder-feature-item3 { background-color: #5A6DFF; }
.recorder-feature-item4 { background-color: #7469E0; }
.feature-item-des { color: #FFF;font-size: 0.16rem; }
.feature-item-des a { color: inherit; text-decoration: underline; }

#camera .feature-item { min-height: 4.3rem; padding: 0.3rem 0.64rem; }
#recorder .feature-item { min-height: 4rem; padding: 0.3rem 0.4rem; }

/* section4 */
.usestep { max-width: 14rem; width: 96%; margin: 0 auto 1.2rem; box-sizing: border-box; text-align: center; }
.usestep-des { color: #666; font-size: 0.16rem; margin: 0.2rem auto 0.4rem; }
.usestep-lists { display: flex; gap: 0.4rem; justify-content: center;}
.usestep-item { max-width: 4.3rem; width: 100%; box-sizing: border-box; }
.usestep-item h3 { color:#342929; font-size: 0.24rem; font-weight: 600; margin: 0.2rem 0;}
.usestep-item-des { color:#6C6C6C; font-size: .15rem; }

#recorder .usestep-item { max-width: 4rem; }
#camera .usestep-item { max-width: 4.4rem; }

/* section5 */
.sec5 { position: relative; z-index: 2; }
.unique { max-width: 14rem; width: 96%; margin: 0 auto; box-sizing: border-box; text-align: center; }
.unique-des { color: #666; font-size: 0.16rem; margin: 0.2rem auto 0.5rem; }
.unique-video { max-width: 5.6rem; width: 48%; border-radius: 0.2rem; overflow: hidden; }
.unique-video video { width: 100%; height: 100%; vertical-align: bottom; }
.unique-cont { background: url(../tools/img/unique-bgimg.png) top center no-repeat; background-size: cover; box-sizing: border-box; padding: 0.37rem 0.5rem; direction: rtl; display: flex; justify-content: space-between; align-items: center; border-radius: 0.2rem; }
.unique-text { max-width: 6rem; width: 48%; text-align: left;}
.unique-text h3 { color: #333;font-size: 0.24rem; font-weight: 600; margin-bottom: 0.2rem;}
.unique-text li { direction: ltr;  margin-bottom: 0.15rem; }
.unique-text li p {display: inline-block; width: calc(100% - 0.3rem); }
.unique-text li::before { content: url(../tools/img/unique-tipicon.png); display: inline-block; vertical-align: top; margin: 0.03rem 0.06rem 0 0; }
.unique-text a { border-radius: 10px; background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%); direction: ltr; display: inline-block; color: #FFF; font-size: 20px; font-weight: 600; text-decoration: none; max-width: 2.6rem; width: 100%; padding: 0.15rem 0; text-align: center;}
.unique-text a svg { margin-right: 0.1rem; vertical-align: middle; display: inline-block; }
.unique-text a:hover { background: linear-gradient(90deg, #0148FF 0%, #8940FF 100%); }

#fr .unique-text a { max-width: 3.8rem; }

/* section6 */
.sec6 { max-width: 13rem; width: 90%; margin: -1rem auto 1rem; box-sizing: border-box; text-align: center; border-radius: 20px; border: 2px solid #E5E2F0; text-align: center; padding: 1.2rem 1.5rem 0.3rem; position: relative; z-index: 0;}
.sec6 h2 { color: #333;font-size: 0.3rem; font-weight: 600; }
.reviews-item img { border-radius: 50%; margin: 0.2rem 0; }
.reviews-info { color: #999; font-size: 0.18rem; }
.reviews-des { color: #333; font-size: 0.24rem; font-weight: 500; margin: 0.2rem auto 0.4rem; }
.swiper-pagination-bullet { width: 0.16rem; height: 0.06rem; border-radius: 60px; background: #333;}
.swiper-pagination-bullet-active { width: 0.4rem; background: linear-gradient(90deg, #2C67FF 0%, #9E62FF 100%);}

/* section7 */
.faq { max-width: 14rem; width: 96%; margin: 0 auto 1rem; box-sizing: border-box;}
.faq h2 { margin-bottom: 0.5rem; text-align: center; }
.faq-item { border-radius: 0.1rem; border: 1px solid #E6E6E6;background: #FFF; box-sizing: border-box; padding: 0.3rem 0.2rem; cursor: pointer; margin-bottom: 0.2rem; }
.faq-item h4 { color: #000;font-size: 0.18rem;font-weight: 500; position: relative;}
.faq-item h4 .icon_down{position: absolute;right: 0.06rem;top: 0.02rem; cursor: pointer;}
.faq-item h4 .icon_down::after{position: absolute;display: inline-block; font-family: "iconfont";content: "\e901";color: #000;font-size: 0.12rem;top: 0.02rem; transition: .2s;}
.faq-item .faq-a{margin-top: 0.16rem; display: none;}
.faq-item .faq-a p { color: #666; font-size: 0.16rem; }
.faq-item .faq-q.atc .icon_down::after{transform: rotateZ(180deg);}

/* section8 */
.product {text-align: center;padding: 1.2rem 0;background: url(../img/content7_bg.png) top center no-repeat #000;}
.product-cont p { color: #FFF;font-size: 0.28rem;font-weight: 600;}
.product-cont .vaml { vertical-align: middle; display: inline-block; margin-right: 0.2rem; }
.product-cont h2 { color: #FFF; font-size: 0.4rem; font-weight: 600; max-width: 8rem; width: 96%; margin: 0.2rem auto 0.3rem; }

@media screen and (max-width: 1800px) {
    .advantage-item { max-width: 2.6rem; width: 20%; height: 2.6rem;  }
    .advantage { padding: 0.55rem 0.8rem 0.4rem; }
}

@media screen and (max-width: 1400px) {
    .advantage-item { max-width: 3rem; width: 100%; height: 3rem;  }
}

@media screen and (max-width: 1200px) {
    .feature-item { padding: 0.3rem 0.6rem; }
}


@media screen and (max-width: 980px) {
    .feature-lists { display: block; }
    .feature-item { padding: 0.3rem 0.6rem; width: 100%; margin: 0 auto 0.4rem; }
    .feature-item4 { margin-bottom: 0; }

    .usestep-lists { display: block; }
    .usestep-item { max-width: 90%; margin: 0 auto 0.4rem; }
    .usestep-item:last-child { margin: 0 auto; }

    .advantage { padding: 0.55rem 0.6rem 0.4rem; }
    .advantage-lists { gap: 0.2rem; }
    .advantage-item { width: 48%; box-sizing: border-box; padding: 0 0.3rem; }

    .unique-cont { display: block; }
    .unique-video { max-width: 100%; width: 100%; }
    .unique-text { max-width: 100%; width: 100%; margin-top: 0.4rem; text-align: center; }
    .unique-text li { text-align: left; }
    .unique-text a { margin-top: 0.2rem; }

    #fr .unique-text a { max-width: 90%; }
    #fr a.download-btn, #fr a.start-btn { max-width: 60%; margin: 0.1rem 0; }
    
    iframe { width: 100%; height: 90vh; }
    .iframe iframe { height: 100%; }
}


@media screen and (max-width: 750px) {
    .banner-text { width: 96%; margin: 0 auto; }
    h2, .sec6 h2 { font-size: 0.4rem; }

    .banner-des, .faq-item h4 { font-size: 0.32rem; }
    a.download-btn, a.start-btn { font-size: 0.32rem; max-width: 60%; padding: 0.2rem 0; margin: 0.2rem 0; }
    a.download-btn svg, a.start-btn svg { width: 16px; height: 15px; }

    .unique-des,.advantage-des,.feature-des, .usestep-des { font-size: 0.28rem; }
    .unique-text a { max-width: 70%; width: 100%; }
    .unique-text h3, .feature-item h3, .usestep-item h3 { font-size: 0.36rem; }
    .unique-text li p {  width: calc(100% - 30px); font-size: 0.26rem; }
    .unique-video-img { height: 3.2rem; }
    
    .feature-item-des, .advantage-item p, .usestep-item-des, .reviews-des, .faq-item .faq-a p { font-size: 0.26rem; }

    .reviews-info { font-size: 0.24rem; }

    .sec6 { padding: 1.2rem 0.6rem 0.4rem; margin-top: -0.8rem; }
    .swiper-pagination-bullet { height: 0.1rem; width: 0.3rem; }
    .swiper-pagination-bullet-active { width: 0.4rem; }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0px; }

    .faq-item { padding: 0.3rem 0.4rem 0.3rem 0.2rem; }
    .faq-item h4 .icon_down::after { font-size: 0.26rem; }

    .product-cont .vaml { width: 0.8rem; height: 0.8rem; }
    .product-cont p { font-size: 0.36rem; }

    #es .unique-text a { max-width: 80%; }
    #es a.download-btn, #es a.start-btn { font-size: 0.32rem; max-width: 60%; padding: 0.2rem 0; margin: 0.2rem 0; }

    #de .unique-text a { max-width: 90%; }
    #de a.download-btn, #de a.start-btn { font-size: 0.32rem; max-width: 60%; padding: 0.2rem 0; margin: 0.2rem 0; }

    #fr .unique-text a { max-width: 100%; }
    #fr a.download-btn, #fr a.start-btn { font-size: 0.32rem; max-width: 80%; padding: 0.2rem 0; margin: 0.2rem 0; }

    .close-iframe { width: 28px; height: 28px; }
    .close-iframe::after { font-size: 13px; }
}