*{
    margin: 0;
    padding: 0;
    font-family: inter, "Noto Sans", "Segoe UI", Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
}
ul,li{list-style: none;}
.relative{position: relative}
.overhide{overflow: hidden;}
.phone,.hide{display: none;}
.fl{float: left;}
.fr{float: right;}
.m-auto{margin: 0 auto}
.w-90{width: 90%}
.w-50{width:50%}

body{
    overflow-x: scroll;
}

.bg-white{background:white}
.flex-center{ display: flex;justify-content:center;align-items: center;flex-wrap: wrap}
.flex{ display: flex;flex-wrap: wrap}
header{height:38px;padding:12px 0; position: fixed;top: 0;left: 0;width: 100%;z-index: 999;background: white;box-shadow: 0 12px 64px 0 rgba(154, 171, 233, .16);}
footer{ padding: 64px 0 96px;background: url(../imgs/bg-2.png) center center no-repeat; background-size: cover;}
/* button */
.down-btn{border-radius: 8px;color: white;text-align: center;}
.header-btn{background-color: #333;width: 130px;line-height: 38px;font-size: 14px;}
.blue-btn{background-color: #3265f3;box-shadow: 0 24px 24px 0 rgba(50, 101, 243, .16), 0 20px 8px -12px rgba(50, 101, 243, .12) !important;line-height: 60px;width: 30%;margin: 0 auto;color: white}

.screen-1{background: url("../imgs/bg-1.png") top 62px center no-repeat;width: 100%;background-size:cover;}
.screen-2{background: linear-gradient(180deg, #f8faff .14%, #fff 99.88%);}
/*.card-2{min-width: 488px;margin-left: 32px;border-radius: 24px;position: relative;    box-shadow: 0 4px 95px 0 hsla(0, 0%, 69%, .25);}*/
.card-2{width: 488px;height: 490px;margin-left: 32px;border-radius: 24px;position: relative;    box-shadow: 0 4px 95px 0 hsla(0, 0%, 69%, .25);}
.card-2 img{width: 100%;}
.screen-2 .swiper-slide{height: 490px;!important;}
.swiper-tit{padding: 32px 48px 0  48px;font-size: 28px;font-weight: 700;line-height: 36px;margin-bottom: 16px;}
.swiper-des{color: rgba(0, 0, 0, .7);font-size: 18px;font-weight: 500;line-height: 26px;padding: 0 48px 32px 48px;}
.screen-3{background: #f2f3f7;}
.screen-3 img{height: 532px;margin-right: 32px;width: auto;    border-radius: 24px;}
.screen-4{background: linear-gradient(180deg, #f1f2f6 .14%, #fff 99.88%), #f2f3f7;}
.item-4{width:calc(96%/3);line-height: 26px;color: rgba(0, 0, 0, .7);}
.item-4:nth-child(2){margin: 0 2%}
.item-4 .cont{padding: 40px;border-radius: 24px;border: 1px solid rgba(13, 13, 13, .12);min-height: 200px;}
.screen-5{background: linear-gradient(180deg, #e3f2fd 0%, transparent 42%),linear-gradient(0deg, #ffffff 0%, transparent 45%),linear-gradient(85deg, #b388ff 35%, #ff8a80 65%);}
.icon-5{margin: 64px 0;border-radius: 24px;border: 1px solid #fff;background: hsla(0, 0%, 100%, .4);padding: 26px 21px 0 21px;}
.icon-5 .icon-item{width: calc(100%/3);margin-bottom: 40px; color: rgba(0, 0, 0, .7);}
.card-6{height: 369px;padding: 32px;width: 288px;margin-left: 32px; box-shadow:0 4px 48px 0 #b0b0b040;    border-radius: 24px;position: relative}
.card-6 .foot{position: absolute;bottom: 32px;}
.card-6 .des{padding: 20px 0}

.scroll{
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}
.scroll::-webkit-scrollbar { width: 0 !important }


.padding-lr-100{padding: 0 100px;}
.mb-32{margin-bottom: 32px;}
.mt-32{margin-top: 32px;}
.mt-8{margin-top:8px;}
.m-lr-32{margin-left: 32px;margin-right: 32px}
.ml-32{margin-left: 32px}
.mr-32{margin-right: 32px}

.font-xxxl{font-size: 48px;}
.font-xxl{font-size: 40px;}
.font-xl{font-size: 28px;}
.font-m{font-size: 24px;}
.font-sm{font-size:20px;}
.font-s{font-size:18px;}
.font-xs{font-size:14px;}
.font-b{font-weight:700;}
.text-c{text-align: center;}
.m-auto{margin:0 auto;}

.padding-t-120{ padding-top: 120px;}
.main{max-width: 1200px}
.color-black{color: black}
.text-color{background: linear-gradient(89.92deg, #000 50.34%, #4831da 80.07%, #0036aa 99.89%);-webkit-background-clip: text;color: transparent;margin-top:16px;margin-bottom:64px;}
.text-color-2{background: linear-gradient(90deg, #000, #3661d8);-webkit-background-clip: text;color: transparent;margin-top:16px;margin-bottom:64px;}
.middle-1{padding:  0 100px}
.phone{display: none}
.screen{padding-top: 128px;}
.pop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999999999999999999999;
    display: none;
}
.pop-img ,.pop img{
    width: 500px;
    margin-top:10vh;
}
.cancel-btn{
    position: absolute;top:12vh;right:5%;
    transition: all 0.3s ease;
    width: 40px;height: 40px;line-height: 40px;
    background: #3265f3;
    color: white; border-radius: 40px;
    transform-origin: 50% 50%;
}
.cancel-btn:hover{
    transform: scale(1.1) rotate(90deg);
}
@media screen and (max-width: 1024px) {
    .phone,.windows{display: none }
    .blue-btn{line-height: 88px;width:50%;}
    .text-color{margin-top:8px;margin-bottom:32px}
    .screen-3 img{ max-height: 500px; margin-bottom: 20px;width: 40%;height:auto}
    .item-4 .cont{height: 260px;}
    .screen{padding-top: 68px;}
}
@media screen and (max-width: 768px) {
    .main{max-width:90%}
    .font-xxxl,.font-xxl{font-size:28px;}
    .font-m{font-size: 16px;}
    .font-s{font-size: 14px;}
    .font-xs{font-size: 12px;}
    .blue-btn{line-height: 48px;width:80%;}
    .middle-1{padding:  0 10%}
    .not-phone{display: none}
    .phone{display: block}
    /*.screen-3 img{ margin: 10px auto 20px auto;height: auto;    border-radius: 24px;}*/
    .w-50{width:80%}
    .item-4,.item-4:nth-child(2){width: 90%;margin:0 5% 20px 5%;}
    .item-4 .cont{height: max-content;}
    .icon-5 .icon-item{width: 50%}
    .swiper-tit{font-size: 16px;padding: 20px 5% 0  5%;}
    .swiper-des{font-size: 14px;}
    .screen-2 .swiper-slide{height: auto}
    .card-6{height: 260px;margin: 0 auto}
    .card-2{margin: 0 auto;width: 90%}
    .pop-img ,.pop img{width: 90%;margin-top:20vh;}
    .cancel-btn{
        top:22vh;
    }
}





.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}















