img{cursor:pointer}
body,html{overflow-x:hidden;overflow-y:auto;min-height:100%}
html{overflow:-moz-scrollbars-vertical}
.fade-enter-active{opacity:1;margin-top:0;-webkit-transition:all 1s;transition:all 1s}
.fade-enter{opacity:0;margin-top:500px}
.up-enter-active{opacity:1;margin-top:0;-webkit-transition:all 1s;transition:all 1s}
.up-enter{opacity:0;margin-top:20px}
img{-webkit-transition:-webkit-transform 1s;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}
img:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}
.swiper-pagination-bullet{width:.6rem;height:.6rem}
.carousel{width:100%;height:58vw;position:relative}
.carousel .swiper-container.swiper-container-horizontal,.carousel .swiper-slide,.carousel .swiper-wrapper{width:100%;height:100%}
.carousel .swiper-slide{position:relative}
.carousel .swiper-slide img{width:100%;height:90%;-o-object-fit:cover;object-fit:cover}
.carousel .swiper-slide img:hover{-webkit-transform:unset;transform:unset}
.carousel .swiper-slide video{width:100%;height:90%;-o-object-fit:inherit;object-fit:inherit;cursor:pointer;z-index:2}
.carousel .swiper-slide .play-icon{position:absolute;width:5rem;height:5rem;z-index:2;cursor:pointer!important;top:calc(45% - 3.5rem);left:calc(50% - 2.5rem)}
.carousel .swiper-pagination{position:absolute;bottom:8vw;margin:0 auto;width:100%}
.carousel .swiper-pagination .swiper-pagination-bullet{margin-left:.5rem}
.carousel .swiper-pagination .swiper-pagination-bullet-active{background-color:#fff}
.carousel-part,.carousel-title{cursor:pointer}
.btns{border-radius:0;margin-top:2rem;padding:.5rem 1.5rem;background-color:#000;color:#fff;border:none;cursor:pointer}
.carousel-part,.static-card-part{font-size:1rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(48,48,48,.5);margin:0}
.carousel-title,.static-card-title{font-size:1.5rem;font-family:PingFangSC-Regular;font-weight:400;color:#303030;margin:0}
.carousel-title{margin-top:.3rem}
.static-card-title{margin-top:1rem}
.main-body{padding:0 6rem;width:calc(100vw - 2rem);padding-bottom:unset;margin-top: 4rem;}


.main-body .server-card-left,.main-body .server-card-right{margin-top:10rem}
.main-body .server-card-left.animation,.main-body .server-card-right.animation{margin-top:2rem;-webkit-transition:all .5s;transition:all .5s}
.main-body .server-card-left .static-card-center,.main-body .server-card-right .static-card-center{text-align:left;width:80%;margin:0 auto}
.main-body ul{width:100%;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:3rem}
.main-body .server-small-card{width:40vw;height:42vw;list-style:none}
.main-body .server-small-card .server-small-card-img-box{width:100%;height:22.5vw;overflow:hidden}
.main-body .server-small-card .server-small-card-img-box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.main-body .server-small-card .server-card-info{width:100%;height:35%;overflow:hidden}
.main-body .server-small-card .server-card-info .static-card-center{height:100%;position:relative;text-align:center}
.main-body .server-small-card .server-card-info .btns{position:absolute;bottom:2rem;left:calc(50% - 3.7rem);display:inline-block}
.main-body .server-small-card .static-card-center{text-align:center;margin-top:1rem}
.main-body .server-small-card .btn{margin-top:.5rem}
.main-body .server-card-box{width:calc(100vw - 14rem);height:100%;display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 3rem;}
.back-top-box{text-align:center}
.back-top-box a{cursor:pointer;text-decoration:none;color:#000;font-size:.88rem;line-height:1.25rem}
.back-top-box a img{width:1rem;height:1rem}
.carousel-part{margin-top:.5rem}
.mobile-cardBox{display:none;width:100%}
.mobile-cardBox .mobile-card{width:100%;margin-top:2rem}
.mobile-cardBox .mobile-card:first-of-type{margin-top:6rem}
.mobile-cardBox .mobile-card.animation{margin-top:2rem;-webkit-transition:all .5s;transition:all .5s}
.mobile-cardBox .mobile-card .mobile-card-img-box{width:100%;height:54.45vw;overflow:hidden}
.mobile-cardBox .mobile-card .mobile-card-img-box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.mobile-cardBox .mobile-card .mobile-card-info{text-align:center;background-color:#f6f7fa;overflow:hidden}
.mobile-cardBox .mobile-card .mobile-card-info .mobile-card-info-two{width:80%;margin:0 auto;margin-top:2rem}
.mobile-cardBox .mobile-card .mobile-card-info p{margin:0}
.mobile-cardBox .mobile-card .mobile-card-info p.mobile-card-part{font-size:.7rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(48,48,48,.5);line-height:1.38rem}
.mobile-cardBox .mobile-card .mobile-card-info p.mobile-card-title{font-size:1rem;font-family:PingFangSC-Regular;font-weight:400;color:#303030;line-height:1.75rem}
.mobile-cardBox .mobile-card .mobile-card-info .btns{margin-bottom:2rem}
.swiper-slide{cursor:pointer}
@media screen and (min-width:1820px){
    .main-body{margin-top:0!important}
    .main-body .server-small-card .server-card-info{width:100%;height:25%;overflow:hidden}
    .main-body .server-small-card .server-card-info .static-card-center{height:100%;position:relative;text-align:center}
    .main-body .server-small-card .server-card-info .btns{position:absolute;bottom:1rem;left:calc(50% - 3.7rem);display:inline-block}
    .main-body .server-small-card{height:35vw}
    .main-body .server-small-card .server-small-card-img-box{width:100%;height:22.5vw;overflow:hidden}
    .main-body .server-small-card .server-small-card-img-box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
    .main-body ul{margin-top:6rem}
}
@media screen and (min-width:1440px) and (max-width:1820px){
    .main-body .server-small-card .server-card-info{width:100%;height:28%;overflow:hidden}
    .main-body .server-small-card .server-card-info .static-card-center{height:100%;position:relative;text-align:center}
    .main-body .server-small-card .server-card-info .btns{position:absolute;bottom:1rem;left:calc(50% - 3.7rem);display:inline-block}
}
@media screen and (min-width:1200px) and (max-width:1440px){.carousel{height:60vw}
.main-body{padding:0 3rem}
.main-body .server-card-box{width:calc(100vw - 8rem)}
.main-body .static-card{width:calc(100vw - 8rem);height:calc(35.7vw - 2.856rem)}
.main-body .server-small-card .server-card-info{width:100%;height:35%;overflow:hidden}
.main-body .server-small-card .server-card-info .static-card-center{height:100%;position:relative;text-align:center}
.main-body .server-small-card .server-card-info .btns{position:absolute;bottom:1rem;left:calc(50% - 3.5rem);display:inline-block}
}
@media screen and (max-width:1200px) and (min-width:992px){.main-body{/* margin-top:-5rem; */padding:0 3rem;}
.main-body .server-card-box{width:calc(100vw - 8rem)}
.main-body .static-card{width:calc(100vw - 8rem);height:calc(35.7vw - 2.856rem)}
.carousel{height:66vw}
.carousel-part,.static-card-part{font-size:.88rem}
.carousel-title,.static-card-title{font-size:1.2rem}
.main-body .static-card{height:calc(35.7vw - 4.998rem)}
.main-body .server-small-card{width:38vw;height:33.4vw}
.main-body .server-small-card .server-small-card-img-box{height:21.375vw}
.main-body .server-small-card .server-card-info{width:100%;height:50%;overflow:hidden}
.main-body .server-small-card .server-card-info .static-card-center{height:100%;position:relative;text-align:center}
.main-body .server-small-card .server-card-info .btns{position:absolute;bottom:2rem;left:calc(50% - 3.7rem);display:inline-block}
.main-body .server-card-left.animation,.main-body .server-card-right.animation{margin-top:4rem}
}
@media screen and (max-width:992px) and (min-width:768px){.carousel{height:75vw}
.carousel-part,.static-card-part{font-size:.88rem}
.carousel-title,.static-card-title{font-size:1rem}
.main-body,.main-body .server-card-box{width:calc(100vw - 5rem)}
.main-body{padding:0 1rem;/* margin-top:-7rem */}
.main-body .static-card{width:calc(100vw - 5rem);/* height:calc(35.7vw - 1.785rem)!important */}
.main-body .static-card .static-card-img-box{width:calc(70vw - 3.5rem)}
.main-body .server-small-card{width:38vw;height:33.5vw}
.main-body .server-small-card .server-small-card-img-box{height:21.375vw;overflow:hidden}
.main-body .server-small-card .server-small-card-img-box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.main-body .server-card-left,.main-body .server-card-right{margin-top:10rem}
.main-body .server-card-left.animation,.main-body .server-card-right.animation{margin-top:6rem;-webkit-transition:all .5s;transition:all .5s}
.main-body .server-card-left .static-card-center,.main-body .server-card-right .static-card-center{text-align:left;width:80%;margin:0 auto}
.main-body .server-small-card .server-card-info{width:100%;height:55%;overflow:hidden}
.main-body .server-small-card .server-card-info .static-card-center{height:100%;position:relative;text-align:center}
.main-body .server-small-card .server-card-info .static-card-center .static-card-part,.main-body .server-small-card .server-card-info .static-card-center .static-card-title{margin-top:.5rem}
.main-body .server-small-card .server-card-info .btns{position:absolute;bottom:1rem;left:calc(50% - 3.7rem);display:inline-block}
.back-top-box{/* margin-top:5rem */}
}
@media screen and (max-width:768px) and (min-width:500px){.carousel{height:70vw}
.carousel .swiper-slide img{height:88%}
.main-body{margin-top:-5rem}
.carousel-part,.carousel-title{display:block}
.carousel-part,.static-card-part{font-size:.6rem}
.carousel-title,.static-card-title{font-size:.8rem}
.btns{padding-top:.5rem;padding-bottom:.5rem;font-size:.8rem;margin-top:.5rem!important}
.main-body{padding:0;width:100%}
.main-body .static-card{height:34.6vw}
.server-card-box{display:none}
.mobile-cardBox{display:block;width:100%}
.swiper-pagination-bullet{width:.5rem;height:.5rem}
.carousel .swiper-slide .play-icon{width:3rem!important;height:3rem!important;top:calc(50% - 3rem);left:calc(50% - 1.5rem)}
}
@media screen and (max-width:500px){.carousel{height:70vw}
.carousel img{-o-object-fit:cover;object-fit:cover}
.carousel .swiper-slide img{height:70%}
.carousel .swiper-pagination{bottom:21vw}
.carousel-part,.carousel-title{font-size:.7rem;margin:0}
.carousel-title{font-size:1rem;height:1rem}
.carousel-part{margin-top:.5rem}
.carousel-title{margin-top:.3rem}
.static-card-part{font-size:.65rem}
.btns,.static-card-title{font-size:.77rem;margin-top:.5rem}
.btns{padding:.3rem 1rem}
.main-body{padding:0;width:91.5vw!important}
.main-body .server-card-box{display:none}
.main-body .back-top-box{margin-top:2rem}
.carousel .swiper-slide .play-icon{width:2rem!important;height:2rem!important;top:calc(50% - 2rem);left:calc(50% - 1rem)}
.mobile-cardBox{display:block;width:100%}
.swiper-pagination-bullet{width:.5rem;height:.5rem}
}
.main-body .static-card{width: 48%;height: 42vw;margin-bottom: 2rem;display:-webkit-box;display:-ms-flexbox;display:flex;/* -webkit-box-align:center; */-ms-flex-align:center;/* align-items:center; */flex-direction: column-reverse;}
.main-body .static-card .static-card-article{width:100%;height:35%;background: none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.main-body .static-card .static-card-article .static-card-center{width:80%;margin-top: 1rem;}
.main-body .static-card .static-card-img-box{width:100%;height: 23vw;overflow:hidden;}
.main-body .static-card:first-child{width: 100%;height:calc(35.7vw - 4.998rem);flex-direction:  row;}

.main-body .static-card:first-child .static-card-img-box{width: 60%;height:100%;}
.main-body .static-card .static-card-img-box img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.main-body .static-card:first-child .static-card-article{text-align:center;width:40%;height:100%;background:#f6f7fa;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.main-body .static-card:first-child .static-card-article .static-card-center{width:80%;}
