.flex{display:flex;align-items:center}
.hide{display:none}
.show{display:block}
.gray{background-color: #f6f9fc;}

img {max-width:100%;}
.linkBtns .btn{border-radius:10px;}

/* 简单淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/*** banner ***/
.banner{position:relative;background:url(../img/banner-en.png) no-repeat;aspect-ratio:1920/700;background-size:100%}
.banner .content{position:absolute;z-index:-1}
.banner .number-group{position:absolute;z-index:10;color:#fff;left:42.5%;bottom:15%;display:flex;gap:20px}
.banner .number-group .person{border-right:1px solid #fff;padding-right:20px}
.banner .number-group .area{padding-left:20px}
.banner .number-group .counter{font-weight:700;font-size:42px}
.banner .advantages{position:absolute;z-index:3;left:50%;bottom:-27px;transform:translate(-50%);height:54px;background-color:#fff;border-radius:10px;padding:15px 28px;box-shadow:0 4px 20px 0 #00000026;display:flex;align-items:center;gap:25px}
.banner .advantages span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.banner .advantages span:before{display:inline-block;content:"";width:24px;height:24px;background:url(../img/icon-1.png) no-repeat;background-size:contain}
.banner .advantages span:nth-child(2):before{background-image:url(../img/icon-2.png)}
.banner .advantages span:nth-child(3):before{background-image:url(../img/icon-3.png)}
.banner .advantages span:nth-child(4):before{background-image:url(../img/icon-4.png)}
.banner .advantages span:nth-child(5):before{background-image:url(../img/icon-5.png)}
.banner .advantages span:nth-child(6):before{background-image:url(../img/icon-6.png)}
.banner .advantages span:nth-child(7):before{background-image:url(../img/icon-7.png)}


/*** esimCard ***/
.card{padding:80px 0 60px;min-height:500px}
.card .box{display:flex;align-items:stretch;justify-content:space-between;margin:30px auto 0;max-width: 1200px;}
.card .box .content{width:460px}
.card .box .content div{margin-bottom:20px}
.card .box .img{width:calc(100% - 500px);background:url(../img/img-card.png) no-repeat center;background-size:contain}
.card .plan .tab-nav{display:flex;align-items:center;gap:20px;justify-content:center;margin-top:40px}
.card .plan .tab-nav .tab_item{background-color:#fff;padding:10px 30px;border:1px solid #ddd;border-radius:10px;cursor:pointer}
.card .plan .tab-nav .tab_item.active{background-color:#1274fc;color:#fff;border-color:#1274fc}
.card .plan .tab-content{display:none}
.card .plan .tab-content.active{display:flex;animation:fadeIn .3s ease;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.card .plan .tab-content .scroll-content{display:flex;gap:20px;margin:20px auto 0;align-items:center;justify-content:center;padding:16px}
.card .plan .tab-content .item{width:240px;box-shadow:0 3px 20px 0 #00000026;border-radius:10px;position:relative}
.card .plan .tab-content .item .desc{background-color:#1274fc;display:block;padding:15px 20px;color:#fff;border-radius:10px;margin-top:-10px;z-index:9;position:relative;font-weight:700}
.card .plan .tab-content .item .desc b{color:#ffb700;padding:0 5px}
.card .plan .tab-content .item .area {position:absolute;right:10px;top:10px;z-index:2;font-size:14px;}


/*** process ***/
.process{padding:60px 0;background-color:#f6f9fc}
.process .box{display:flex;justify-content:space-between;align-items:stretch;gap:20px;margin-top:40px}
.process .box .item{background-color:#fff;border-radius:15px;overflow:hidden;width:calc(25% - 15px);display:flex;flex-direction:column;align-items:center;box-shadow:2px 4px 10px rgba(0,0,0,.1)}
.process .box .item:hover{box-shadow:2px 4px 10px rgba(0,0,0,.45)}
.process .box .item .title{background:linear-gradient(90deg,#00e0ff,#00a0ff);color:#fff;padding:10px 20px;font-size:22px;font-weight:700;width:100%;display:flex;align-items:center;gap:10px}
.process .box .item .sub{color:#777;font-size:16px;margin:10px 20px 0;min-height:66px}
.process .box .item img{margin:5px auto}
.process .box .item .btn{background:linear-gradient(180deg,#57ffff,#25b1ff);border:0;padding:6px 20px;color:#fff;margin-bottom:20px;width:60%;border-radius:10px}
.process .box .item .title:before{display:block;content:"1";font-size:36px;font-weight:700}
.process .box .item:nth-child(2) .title:before{content:"2"}
.process .box .item:nth-child(3) .title:before{content:"3"}
.process .box .item:nth-child(4) .title:before{content:"4"}


/*** 全球覆盖 ***/
.applicable{padding:60px 0}
.applicable .box{gap:20px;align-items:stretch;padding:30px 0 10px}
.applicable .box,.applicable .box .item{position:relative;overflow:hidden;display:flex}
.applicable .box .item{width:calc(25% - 17px);border-radius:15px;box-shadow:2px 4px 10px rgba(0,0,0,.1);flex-direction:column;text-align:center;background-color:#fff;flex-direction:column;}
.applicable .box .item:hover{box-shadow:2px 4px 10px 0 rgba(0,0,0,.45);}
.applicable .box .item img{max-width:100%}
.applicable .box .item b{margin-bottom:10px;z-index:9;font-size:20px;padding:10px 20px 0}
.applicable .box .item p{z-index:9;margin-bottom:0;padding:0 15px 15px;color:#777}
.applicable .box .stopAnim{animation-play-state:paused!important}
.applicable .slider{display:flex;align-items:center;justify-content:center;margin-top:20px}
.applicable .slider span{background-color:rgba(0,0,0,.5);width:20px;height:10px;border-radius:30px;margin:0 5px}
.applicable .slider span.active{background-color:rgba(0,0,0,.8);width:40px;height:10px;border-radius:30px}


/*** download ***/
.download{padding:60px 0;background-color: #f6f9fc;}
.download .box{max-width: 1200px;align-items:center;justify-content:space-between;margin:0 auto;}
.download .box .left{width: 50%;}
.download .box .left .info {display: flex;flex-direction: column;gap: 10px;}
.download .box .left .info h2{margin-bottom: 0;}
.download .box .left .info .sub{color:#777;margin-top:10px}
.download .box .left .info .linkBtns{text-align:left;margin:10px 0 0;}
.download .box .left .info .imgs {position:relative;max-width:449px;}
.download .box .left .info .imgs img {max-width: 100%;margin-top: 20px;}
.download .box .left .info .imgs a {position:absolute;display:block;width:40%;height:30%;top:20%;right:0}
.download .box .left .info .imgs a.google {bottom:15%;top:auto;}
.download .box .right{width: calc(50% - 20px);display: flex;}
.download .box .right img{max-width: 50%;}


/*** platform ***/
.platform {padding:60px 0;}
.platform .box{max-width: 1200px;align-items:center;justify-content:space-between;margin:0 auto;gap:30px;}
.platform .box .right .info{display: flex;flex-direction: column;gap: 10px;}
.platform .box .right .info h2{font-weight: 600;font-size:26px;line-height:1.5;margin-bottom: 0;}
.platform .box .right .info div{font-weight: 600;font-size:18px;line-height:1.5}
.platform .box .right .info p{color: #777;font-size:16px;margin-bottom: 0;font-weight: normal;line-height:1.5}
.platform .box .left{width: calc(60% - 40px);}

/*** platform ***/
.scheme {padding:60px 0;}
.scheme .content{padding:30px 0 0;}
.scheme .box{max-width: 1200px;margin: 0 auto;overflow-x: auto;}
.scheme .box .scroll-content{margin:20px auto 0}
.scheme .box .table{border:1px solid #ccc;background-color: #fff;border-radius:5px;overflow: hidden;box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);}
.scheme .box .table tr:not(:first-child) td:last-child {color: #F89119;}

/*** cooperation ***/
.cooperation{padding:60px 0;text-align:center;}
.cooperation .box{padding:30px;background-color:#fff;border: 1px solid #CCCCCC;border-radius:20px;}
.cooperation .tab-nav {display:flex;align-items:center;justify-content:center;width:100%}
.cooperation .tab-nav .tabs_item {padding:10px 30px;border-bottom:2px solid #ddd;cursor: pointer;width:calc(100% / 3);font-size:1.6em;}
.cooperation .tab-nav .tabs_item.active {border-bottom:4px solid #333;}
.cooperation .tabs-content { display:none;}
.cooperation .tabs-content.active { display:block;margin-top:40px;animation: fadeIn 0.3s ease;}
.cooperation .tabs-content .sub {color:#F89119;font-size:20px;}
.cooperation .tabs-content .flex {display:flex;flex-wrap: wrap;align-items:stretch;justify-content:space-between; gap:20px;margin-top:20px}
.cooperation .tabs-content .dmkjm {min-height:330px}
.cooperation .tabs-content .dmkjm .item {display:flex;flex-direction: column;justify-content: space-between;font-weight:bold;gap:20px;width: calc(100% / 3 - 40px / 3);}
.cooperation .tabs-content .left {width:45%;}
.cooperation .tabs-content .right {display:flex;flex-direction: column;justify-content: space-around;width:45%;}
.cooperation .tabs-content .right span {display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:10px;text-align: left;}
.cooperation .tabs-content .right span:before {display:inline-block;content:"";width:32px;height:32px;background:url('../img/sjfx-1.png') no-repeat;background-size:contain;}
.cooperation .tabs-content .sjfx .right span:nth-child(1):before {background-image:url('../img/sjfx-1.png')}
.cooperation .tabs-content .sjfx .right span:nth-child(2):before {background-image:url('../img/sjfx-2.png')}
.cooperation .tabs-content .sjfx .right span:nth-child(3):before {background-image:url('../img/sjfx-3.png')}
.cooperation .tabs-content .scsy .right span:nth-child(1):before {background-image:url('../img/scsy-1.png')}
.cooperation .tabs-content .scsy .right span:nth-child(2):before {background-image:url('../img/scsy-2.png')}
.cooperation .tabs-content .scsy .right span:nth-child(3):before {background-image:url('../img/scsy-3.png')}
.cooperation .tabs-content .scsy .right span:nth-child(4):before {background-image:url('../img/scsy-4.png')}
.chart-container {width: 600px;height: 410px;max-width:100%}


/*** partners ***/
.service{padding:60px 0;text-align:center}
.service .box{padding:50px 0 20px;display:flex;justify-content:space-around}
.service .box .line{position:relative;width:calc(92% / 6)}
.service .box .line:first-child,.service .box .line:last-child{width:calc(92% / 6 + 4%)}
.service .box .line:before{position:absolute;display:block;top:calc(50% - 40px);left:0;right:0;content:'';height:1px;border-top:1px dashed #999;z-index:-1}
.service .box .line .circle{display:block;width:114px;height:114px;border-radius:50%;border:.79px solid #999;margin:0 auto}
.service .box .line .circle:before{background:#d9d9d9;display:flex;width:100%;height:100%;border-radius:50%;content:'1';color:#fff;font-size:32px;align-items:center;justify-content:center;border:14px solid #fff}
.service .box .line .text{line-height:30px;margin-top:15px;display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.service .box .line .sub{line-height:1.5;margin-top:5px;display:block;text-align:center;font-size:14px;color:#777;padding:0 20px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.service .box .line.active:before{border-top:1px dashed #35d1fe}
.service .box .line.active .circle{border:.79px solid #35d1fe}
.service .box .line.active .circle:before{background:linear-gradient(92.99deg,#57ffff 0,#25b1ff 100%)}
.service .box .line2 .circle:before{content:'2'}
.service .box .line3 .circle:before{content:'3'}
.service .box .line4 .circle:before{content:'4'}
.service .box .line5 .circle:before{content:'5'}
.service .box .line6 .circle:before{content:'6'}


/*** advantages ***/
.advantage{padding:60px 0;background-color: #f6f9fc;}
.advantage .box{display: flex;flex-direction: row;flex-wrap: wrap;gap: 20px;justify-content: space-between;padding:50px 0 20px;margin:30px 0 0;max-width: 1200px;margin: 0 auto;}
.advantage .box .item{display: flex;flex-direction: column;align-items:center;justify-content: center;    width: calc(100% / 4 - 20px * 3 / 4);
    max-width: 260px;height:280px;text-align:center;background-color: #ffffff;box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);border-radius: 15px;justify-content: flex-start;padding: 40px 20px 20px;}
.advantage .box .item:hover{box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45);}
.advantage .box .item b{line-height: 1;font-size: 16px;font-weight: 600;margin-bottom: 5px;}
.advantage .box .item span {color: #777;font-size: 14px;}
.advantage .box .item div{background: url(../img/advantage-icon.png) no-repeat;width: 100px;height: 100px;margin: 10px 0;}
.advantage .box .item:nth-child(2) div{background-position: -120px 0;}
.advantage .box .item:nth-child(3) div{background-position: -240px 0;}
.advantage .box .item:nth-child(4) div{background-position: -354px 0;}
.advantage .box .item:nth-child(5) div{background-position: -0 -130px;}
.advantage .box .item:nth-child(6) div{background-position: -120px -130px;}
.advantage .box .item:nth-child(7) div{background-position: -240px -130px;}
.advantage .box .item:nth-child(8) div{background-position: -360px -130px;}


/*** partners ***/
.partners {padding:60px 0;}
.partners .box{max-width: 1200px;align-items:center;justify-content:space-between;margin:0 auto;}
.partners .box .left{display:flex;flex-direction: column;align-items: flex-start;gap:20px;}
.partners .box .left .img{border:1px solid #333;border-radius:10px;padding:10px;display:inline-block}
.partners .box .left span{color:#ABAAAA;}
.partners .box .left .linkBtns {text-align: left;margin:0;}
.partners .box .right{background-color:#1274FC;color:#fff;padding:50px;}
.partners .box .right .name{font-size:14px;}
.partners .box .right .con{font-size:20px;}

@media(max-width: 1200px) {
  .banner .number-group .counter{font-size:28px}
  .banner .number-group span{font-size:14px}

  .card .box .content{width: 100%;}
  .card .box .img{display: none;}
  .card .box img{margin: 0 auto;}
  .card .plan .tab-nav{gap:10px;}
  .card .plan .tab-nav .tab_item{padding:5px 15px;}
  .card .plan .tab-content.active{scrollbar-width: none;}
  
  .scheme .content .table tr td{font-size:14px;padding:10px 5px}
  .scheme .content .table tr:first-child td{font-size:14px;}
  .scheme .content .table tr td:first-child{font-size:14px;}
  
  .applicable .box .item b{font-size:16px;}
  .applicable .box .item p{padding:0 10px 10px;font-size:14px;}
  
  .cooperation .box{padding:10px;}
  .cooperation .tab-nav .tabs_item{font-size: 16px;padding: 10px 0;}
  .cooperation .tabs-content .right span{font-size:16px;}
  .cooperation .tabs-content .right span:before{width:24px;height:24px;}
  .cooperation .tabs-content .flex{align-items:center;justify-content: center;}
  .chart-container {width: 400px;height: 410px;max-width:100%}
  
  .service .box{flex-wrap:wrap;row-gap: 20px;}
  .service .box .line{width:calc(92% / 2 + 4%)}
  .service .box .line:first-child, .service .box .line:last-child{width:calc(92% / 2 + 4%)}
  .service .box .line .circle{width:60px;height:60px;}
  .service .box .line .circle:before{border: 6px solid #fff;font-size:24px;}

  .process .box .item .title{font-size: 22px;}
  .process .box .item .title:before{font-size: 32px;}
  .process .box .item .sub{font-size: 16px;min-height: 50px;}
  .process .box .item img{width: 96px;}

  .advantage .box .item{width: calc(100% / 4 - 15% / 4);padding: 20px 10px;height: 223px;}
  .advantage .box .item div{width: 80px;height: 80px;background-size: 404px 199px;}
  .advantage .box .item:nth-child(2) div{background-position: -96px 0;}
  .advantage .box .item:nth-child(3) div{background-position: -192px 0;}
  .advantage .box .item:nth-child(4) div{background-position: -284px 0;}
  .advantage .box .item:nth-child(5) div{background-position: -0 -104px;}
  .advantage .box .item:nth-child(6) div{background-position: -96px -104px;}
  .advantage .box .item:nth-child(7) div{background-position: -192px -104px;}
  .advantage .box .item:nth-child(8) div{background-position: -288px -104px;}
}
@media(max-width:768px) {
  .banner{background-image: url(../img/banner-m-en.png);aspect-ratio: 750/804;margin-top: 50px;}
  .banner .number-group{left:50%;bottom:7%;display:flex;gap:20px;transform: translate(-50%);border:1px solid #fff;padding:0 5px;}
  .banner .number-group .person{border-right:0;padding-right:0;display:flex;white-space: nowrap;align-items:center;gap:5px;}
  .banner .number-group .area{padding-left:0;display:flex;white-space: nowrap;align-items:center;gap:5px;}
  .banner .number-group .counter{font-size:16px;order:2;}
  .banner .number-group span{font-size:12px}
  .banner .advantages{width: 95%;overflow-x: auto;scrollbar-width: none;padding: 10px 28px;height: 44px;}
  
  .card .plan .tab-content .item{width:160px;}
  .card .plan .tab-content .item .desc{padding:5px;font-weight:normal;font-size: 14px;}
  .card .plan .tab-content .item .area {font-size:12px;}
  
  .scheme .box {scrollbar-width: none;}
    
  .partners .box{flex-wrap: wrap;gap:30px;}
  .partners .box .right{width:100%;padding:30px}
  .partners .box .left{align-items:center;text-align:center;}
  .partners .box .left .linkBtns{width:100%;text-align:center}
  .partners .box .left .img{margin:0 auto;}
  
  .download .box{flex-wrap: wrap;gap:30px;}
  .download .box .left .info,.download .box .left .info .linkBtns{text-align:center}
  .download .box .left, .download .box .right{width:100%;}
  .download .box .left .info .imgs{margin: 0 auto;}

  .platform .box{flex-direction: column;gap: 20px;}
  .platform .box .left{width:90%}
  .platform .box .right{width: 100%;text-align:center;}

  .advantage .box{gap:10px}
  .advantage .box .item{width:calc(25% - 7.5px);margin:0;height: 190px;}
  .advantage .box .item div{width:50px;height:50px;background-size:252px 124px}
  .advantage .box .item b{font-size: 18px;}
  .advantage .box .item span{font-size: 14px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
  .advantage .box .item:nth-child(2) div{background-position: -60px 0;}
  .advantage .box .item:nth-child(3) div{background-position: -120px 0;}
  .advantage .box .item:nth-child(4) div{background-position: -180px 0;}
  .advantage .box .item:nth-child(5) div{background-position: -0 -65px;}
  .advantage .box .item:nth-child(6) div{background-position: -60px -65px;}
  .advantage .box .item:nth-child(7) div{background-position: -120px -65px;}
  .advantage .box .item:nth-child(8) div{background-position: -180px -65px;}
  
  .applicable .box{justify-content:center}
  .applicable .box,.applicable .box .item{flex-wrap:wrap}
  .applicable .box .item{width:calc(50% - 10px);max-width:300px}
  
  .cooperation .tabs-content .sub{font-size:18px;}
  .cooperation .tabs-content .left {width:100%;}
  .cooperation .tabs-content .right {width:100%;}
  .cooperation .tabs-content .right span{font-size:14px;text-align:left;}
  .cooperation .tabs-content .dmkjm .item{width:auto;}
  .chart-container {width: 360px;height: 510px;max-width:100%}
}
@media(max-width:567px){
  .process .box .item{min-height: 260px;width: calc(50% - 10px);}
  .process .box .item .title{font-size: 16px;}
  .process .box .item .title:before{font-size: 26px;}
  .process .box .item .sub{min-height: 45px;font-size: 14px;margin: 10px 10px 0;}
  .process .box .item .btn{padding: 4px 20px;border-radius: 5px;margin-bottom: 10px;}
  
  .advantage .box{gap: 20px;}
  .advantage .box .item{width: calc(100% / 2 - 20px / 2);height: 185px;}
}