/* 大于等于 1200px 的分辨率 */
@media screen and (min-width: 1200px) {
    .video-box{ width: 100%; height: 986px; position: relative;}
    .video-box video{width: 100%; height: 100%;}
    .video-box .mask{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(28, 28, 28,0.5);}
    .video-box .logo{position: absolute; top: 365px; left: 120px;}
    .video-box .logo img{ width: 235px;}
    .video-box .index-banner-font{ position: absolute; top: 480px;left: 120px;}
    .video-box .index-banner-font img{ width: 648px;}





    .excessive-box{ width: 864px; height: 30px; margin: 0 auto; position: relative;}


    .project-box{ width: 100%; height: 200px; position: relative;}
    .project-box .project-font-box{ position: absolute;}
    .project-box .project-font-box img{ vertical-align: middle;}

    .project-list-box{ width: 100%;}
    .project-list-box .project-list-top ul{ height: 100%; width: 100%; display: flex;}
    .project-list-box .project-list-top li{ width: 100%; height: 100%; flex: 0.25; position: relative; cursor: pointer;}

    .project-list-box .project-list-top li .icon{display: block; transition:0.3s; -webkit-transition:0.3s; opacity: 0;}
    .project-list-box .project-list-top li .project-list-icon-animation{opacity: 1;}

    .project-list-box .project-list-top li .desc-box{position: absolute; left: 36px;width: 360px;}
    .project-list-box .project-list-top li .desc-box .title{ color: #fff; font-size: 24px; font-weight: 900; font-family: 'Inter', sans-serif;}
    .project-list-box .project-list-top li .desc-box .desc{color: rgba(255, 255, 255, 0.5); font-size: 14px; margin-top: 10px;font-family: 'Quicksand', sans-serif; font-weight: 500;}
    .project-list-box .project-list-top li .desc-box .detail{ color: #DC2526; font-size: 16px;margin-top: 17px;font-family: 'Inter', sans-serif;}
    .project-list-box .project-list-top li .desc-box .detail .more_btn_arrow{ float: right; width: 60px; height: 21px; background-image: url(../images/more_btn_arrow.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; }


    .project-list-box .project-list-top li:nth-child(2n):hover{ background-color: #DC2526;} 
    .project-list-box .project-list-top li:nth-child(2n):hover .detail{ color: #fff;}
    .project-list-box .project-list-top li:nth-child(2n):hover .detail .more_btn_arrow{ background-image: url(../images/more_hover_btn_arrow.png);}
    .project-list-box .project-list-top li:nth-child(1n):hover img{ transform: scale(1.2); } 

    .project-list-box .project-list-bottom{display: flex;}
    .project-list-box .project-list-bottom .left-box{flex: 0.5; width: 100%; position: relative; cursor: pointer;}
    .project-list-box .project-list-bottom .left-box:hover img{ transform: scale(1.2); } 

    .project-list-box .project-list-bottom .left-box .icon{ margin: 0 auto;transition:0.3s; -webkit-transition:0.3s; opacity: 0; position: relative;}
    .project-list-box .project-list-bottom .left-box .icon img{ width: 100%; height: 100%;transition:0.3s; -webkit-transition:0.3s;}

    .project-list-box .project-list-bottom .left-box .desc-box{ width: 792px; position: absolute; top: 710px; left: 36px;}
    .project-list-box .project-list-bottom .left-box .desc-box .title{ color: #fff; font-size: 24px; font-weight: 900;font-family: 'Inter', sans-serif;}
    .project-list-box .project-list-bottom .left-box .desc-box .desc{color: rgba(255, 255, 255, 0.5); font-size: 14px; margin-top: 10px;font-family: 'Quicksand', sans-serif; font-weight: 500;}
    .project-list-box .project-list-bottom .left-box .desc-box .detail{ color: #DC2526; font-size: 16px;margin-top: 17px;font-family: 'Inter', sans-serif;}
    .project-list-box .project-list-bottom .left-box .desc-box .detail .more_btn_arrow{ float: right; width: 60px; height: 21px; background-image: url(../images/more_btn_arrow.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;}




    .project-list-box .project-list-bottom .right-box{flex: 0.5; width: 100%; position: relative;}
    .project-list-box .project-list-bottom .right-box ul{ width: 100%; height: 100%;}
    .project-list-box .project-list-bottom .right-box li{ width: 50%; height: 100%; float: left; position: relative; cursor: pointer;}

    .project-list-box .project-list-bottom .right-box li .icon{display: block; transition:0.3s; -webkit-transition:0.3s; opacity: 0;}

    .project-list-box .project-list-bottom .right-box li .desc-box{width: 792px; position: absolute;  left: 36px;}
    .project-list-box .project-list-bottom .right-box li .desc-box .title{ color: #fff; font-size: 24px; font-weight: 900;font-family: 'Inter', sans-serif;}
    .project-list-box .project-list-bottom .right-box li .desc-box .desc{color: rgba(255, 255, 255, 0.5); font-size: 14px; margin-top: 10px;font-family: 'Quicksand', sans-serif; font-weight: 500;}
    .project-list-box .project-list-bottom .right-box li .desc-box .detail{ color: #DC2526; font-size: 16px;margin-top: 17px;font-family: 'Inter', sans-serif;}
    .project-list-box .project-list-bottom .right-box li .desc-box .detail .more_btn_arrow{ float: right; width: 60px; height: 21px; background-image: url(../images/more_btn_arrow.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;}
    .project-list-box .project-list-bottom .right-box li:nth-child(1):hover{ background-color: #DC2526;} 
    .project-list-box .project-list-bottom .right-box li:nth-child(1):hover .detail{ color: #fff;}
    .project-list-box .project-list-bottom .right-box li:nth-child(1):hover .detail .more_btn_arrow{ background-image: url(../images/more_hover_btn_arrow.png);}
    .project-list-box .project-list-bottom .right-box li:nth-child(2):hover img{ transform: scale(1.2);transition:0.3s; -webkit-transition:0.3s; }


    .project-list-box .project-list-bottom .right-box .more-box{ width: 100%; height:432px; position: relative; cursor: pointer;}


    .project-list-box .project-list-bottom .right-box .more-box .project-list-bottom-top-line-animation{ width: 100%;}
    .project-list-box .project-list-bottom .right-box .more-box .project-list-bottom-bottom-line-animation{ width: 100%;}
    .project-list-box .project-list-bottom .right-box .more-box .more-font-box{font-size: 24px; color: #fff; position: absolute; width: 100%; text-align: center; top: 187px; cursor: pointer;font-family: 'Inter', sans-serif; font-weight: 900;}
    .project-list-box .project-list-bottom .right-box .more-box .more-font-box .arrow{ margin-top: 15px;}
    .project-list-box .project-list-bottom .right-box .more-box .more-font-box .arrow .more_btn_arrow{width: 60px; height: 14px; background-image: url(../images/more_btn_arrow.png); background-size: 100% auto; display: block; margin: 0 auto;}
    .project-list-box .project-list-bottom .right-box .more-box:hover{ background-color: #DC2526;}
    .project-list-box .project-list-bottom .right-box .more-box:hover .more-font-box .arrow .more_btn_arrow{background-image: url(../images/more_hover_btn_arrow.png);}



    .excessive-service-box{ width: 100%; height: 200px; position: relative;}
    .excessive-service-box .decoration-box{ width: 50%; position: absolute; left: 0;bottom: 0; height: 40px;}

    .service-box{width: 100%; display: flex; height: 570px;}
    .service-box .service-title-box{flex: 0.125; position: relative;}
    .service-box .service-title-box .service-font{display: block;transition:2s; -webkit-transition:2s; opacity: 0;}
    .service-box .service-title-box .service-font-animation{ margin: 0 auto; opacity: 1;}
    .service-box .developers-box{flex: 0.4375; position: relative; cursor: pointer;}
    .service-box .publisher-box{flex: 0.4375; position: relative; cursor: pointer;}
    .service-box .title{ font-size: 48px; font-weight: 700; position: absolute; top: 36px; left: 36px; color: #fff; font-family: 'Inter';}
    .service-box .desc{ font-size: 16px; font-weight: 400; position: absolute; top: 114px; left: 36px; color: rgba(255,255,255,0.5); width: 684px;font-family: 'Quicksand', sans-serif; font-weight: 500;}
    .service-box .more{ position: absolute; top: 515px; left: 36px; color: #DC2526; font-size: 16px;font-family: 'Inter', sans-serif;}


    .service-box .more .more_btn_arrow{width: 60px; height: 21px; background-image: url(../images/more_btn_arrow.png); background-size: 100% auto;  margin-left: 82px; display: block; float: right; background-position: center center; background-repeat: no-repeat;}

    .service-box .developers-box:hover{ background-color: #DC2526;}
    .service-box .developers-box:hover span{ color: #fff;}
    .service-box .developers-box:hover .more_btn_arrow{background-image: url(../images/more_hover_btn_arrow.png);}

    .service-box .publisher-box:hover{ background-color: #DC2526;}
    .service-box .publisher-box:hover span{ color: #fff;}
    .service-box .publisher-box:hover .more_btn_arrow{background-image: url(../images/more_hover_btn_arrow.png);}

    .about-box .about-font-box{ width: 100%; margin-top: 200px; height: 120px; position: relative;}
    .about-box .about-font-box .about-font{ position: absolute;  transition:2s; -webkit-transition:2s; opacity: 0;}
    .about-box .about-font-box .about-font-animation{opacity: 1;}

    .about-box .about-logo-box{ width: 100%; height: 298px;background-image: url(../images/about-logo.png); background-size: 17.3% auto; background-position: center center; background-repeat: no-repeat; position: relative;}
    .about-box .about-logo-box .about-logo-bgc{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0,0.8);}
    .about-box .about-logo-box .about-logo-bgc .about-logo-font-box{ width: 800px; margin: 0 auto; text-align: center; margin-top: 96px;}
    .about-box .about-logo-box .about-logo-bgc .about-logo-font-box p:nth-child(1){ font-size: 32px; font-weight: 700;color: #fff; font-family: 'Inter', sans-serif; font-weight: 900;}
    .about-box .about-logo-box .about-logo-bgc .about-logo-font-box p:nth-child(2){ font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.5); margin-top: 15px;font-family: 'Quicksand', sans-serif;}

    .about-box .about-desc-box{ width: 100%; height: 288px;}
    .about-box .about-desc-box ul{ width: 100%; height: 100%; display: flex;}
    .about-box .about-desc-box ul li{ flex: calc(1/3); width: 100%; height: 100%; position: relative;}
    .about-box .about-desc-box ul li .icon{width: 72px; height: 72px; position: absolute; left: 36px; top: 36px;}
    .about-box .about-desc-box ul li .desc{width: 504px;color: rgba(255,255,255,0.5);font-size: 14px;font-weight: 400; position: absolute; left: 36px; top: 200px;font-family: 'Quicksand', sans-serif; font-weight: 500;}

    .about-box .about-timeline-box{ width: 100%; height: 248px; position: relative;}
    .about-box .about-timeline-box .time-line-start{ width: 1557px; height: 8px; background-color: #DC2526; position: absolute; left: 0; bottom: 0;}
    .about-box .about-timeline-box .time-line-point{ width: 4px; height: 20px; background-color: #DC2526;position: absolute; bottom: 0;}

    .about-box .about-timeline-box .timeline-font{ width: 176px; position: absolute; left: 72px; top: 84px;}
    .about-box .about-timeline-box .font-box{ width: 360px; position: absolute; top: 55px;}
    .about-box .about-timeline-box .font-box p:nth-child(1){ font-size: 24px; color: #fff; font-weight: 700; font-family: 'Inter'; }
    .about-box .about-timeline-box .font-box p:nth-child(2){ font-size: 14px; font-weight: 350;color: rgba(255,255,255,0.5); margin-top: 10px;font-family: 'Quicksand', sans-serif; font-weight: 500;}

    .about-box .about-timeline-box .time-line-end{ height: 8px; position: absolute; bottom: 0; background-color: #DC2526;}



    .partners-box{ width: 100%; margin-top: 200px;}
    .partners-box .partners-font-box{width: 100%; height: 120px; position: relative;}
    .partners-box .partners-font{width: 357px; position: absolute; left: 108px; top: 36.5px;}
    .partners-box .partners-list{ width: 100%; height: 756px; position: relative;}
    .partners-box .partners-list .partners-empty-left{ width: 108px; height: 100%; position: absolute; top: 0; left: 0;}
    .partners-box .partners-list .partners-empty-right{ width: 108px; height: 100%; position: absolute; top: 0; right: 0;}
    .partners-box .partners-list ul{ width: 1512px; height: 100%; position: absolute; left: 108px; top: 0;}
    .partners-box .partners-list ul li{ width: 252px; height: 252px; float: left; position: relative;text-align: center; line-height: 252px;}
    .partners-box .partners-list ul li img{ width: 80%; vertical-align: middle;}
    .partners-box .partners-list ul li:nth-child(1) img{width: 60%;}
    .partners-box .partners-list ul li:nth-child(4) img{width: 60%;}
    .partners-box .partners-list ul li:nth-child(11) img{width: 60%;}
    .partners-box .partners-list ul li:nth-child(15) img{width: 60%;}
    .partners-box .partners-list ul li:nth-child(16) img{width: 60%;}
    .partners-box .partners-list ul li:nth-child(19) img{width: 60%;}


    .footer-box{ width: 100%; height: 408px; margin-top: 120px;position: relative; padding: 60px 108px; box-sizing: border-box; display: flex;}    
    .footer-box .left{flex: 0.4;}
    .footer-box .left .footer_logo{ width: 235px;}
    .footer-box .font-animation{ opacity: 1 !important;}
    .footer-box .left p{ font-family: 'Quicksand', sans-serif; color: rgba(255,255,255,0.5); font-size: 15px; margin-top: 30px; line-height: 150%; font-weight: 200;}
    .footer-box .left .footer_mail{ width: 531px; margin-top: 30px;}
    .footer-box .left .mobile_footer_mail{ display: none;}
   
    .footer-box .right p{color: rgba(255,255,255,0.3);font-family: 'Quicksand', sans-serif;font-weight: 400; font-size: 14px;}
    .footer-box .right { position: relative; flex: 0.6;}
    .footer-box .right .copyright-box{ position: absolute; right: 0; top: 185px; width: 531px; height: 56px; display: flex; align-items: center; justify-content: flex-end;}



}

/* 小于 1200px 的分辨率 */
@media screen and (max-width: 1199px) {

  
    .project-list-box,.lang-switch{ display: none;}

    .video-box{ width: 100%; margin-top: 45px; overflow: hidden; height: 460px; position: relative;}
    .video-box video{ height: 100%; position: absolute; left: -220px;}
    .video-box .index-banner-font-mobile{ width: 335px;  position: absolute; z-index: 3; left: 20px; bottom: 0;}
    .video-box .index-banner-font-mobile img{ width: 100%;}
    .video-box .index-banner-font{ display: none;}
    .video-box .logo{ display: none;}

    .excessive-box{ width: 187px; height: 10px; margin: 0 auto; margin-top: 65px; position: relative;}
    .project-box{ width: 100%; height: 50px; position: relative;}
    .project-box .project-font-box{ width: 144px; position: absolute; left: 15px; top: 13.44px;}
    .project-box .project-font-box img{ width: 100%;}

    .project-list-mobile{ width: 100%;}
    .project-list-mobile li{ width: 100%; height: 50vw;  display: flex; }
    .project-list-mobile li .img-box img{ width: 33.1vw; vertical-align: middle; position: absolute; left: 8.8vw; top: 8.8vw;}
    .project-list-mobile li .left,.project-list-mobile li .right{ flex: 0.5; position: relative; }

    
    .project-list-mobile li .desc .title{font-size: 16px;font-family: 'Inter'; color: #fff; font-weight: 900; position: absolute; left: 4vw; top: 4vw;}
    .project-list-mobile li .desc .more{ padding: 4vw; position: absolute; bottom: 0; width: 100%; box-sizing: border-box;}
    .project-list-mobile li .desc .more img{ width: 11.2vw; position: absolute; right: 4vw; vertical-align: middle;}
    .project-list-mobile li .desc .more span{ font-size: 12px;font-family: 'Inter'; color: #DC2526; font-weight: 500;}

    .project-list-mobile li:nth-child(3){position: relative; text-align: center; display: block;padding-top: 20.5vw; box-sizing: border-box;}
    .project-list-mobile li:nth-child(3) .see-more{ font-size: 16px; font-family: 'Inter'; font-weight: 100;color: #DC2526;}
    .project-list-mobile li:nth-child(3) .arrow{width: 11.2vw; margin-top: 1.3vw;}


    .excessive-service-box{ width: 100%; height: 18.66vw; position: relative;}
    .excessive-service-box .decoration-box{ width: 50%; height: 2.66vw; position: absolute; left: 0; bottom: 0;}
    .service-box{ width: 100%; height: 168vw; position: relative;}
    .service-box .service-title-box{ width: 16vw; height: 100%; position: absolute; left: 0;}
    .service-box .service-title-box img{ height: 29.8vw; position: absolute; left: 5.66vw; top: 5.66vw;}

    .service-box .developers-box,.service-box .publisher-box{width: 84vw; height: 84vw; position: absolute;right: 0; padding: 4vw; box-sizing: border-box;}
    .service-box .developers-box{ top: 0;}
    .service-box .developers-box .bottom-line{ display: none;}
    .service-box .publisher-box{ top: 84vw;}

    .service-box .developers-box .title,.service-box .publisher-box .title{ font-size: 22px; font-family: 'Inter'; font-weight: 700; color: #fff;}

    .service-box .developers-box .desc,.service-box .publisher-box .desc{ color:rgba(255, 255, 255, 0.5); font-size: 12px; font-weight: 400; margin-top: 2.66vw;}

    .service-box .developers-box .more,.service-box .publisher-box .more{ width: 45.9vw; height: 4vw; position: absolute; left: 4vw; bottom: 4vw; font-family: 'Inter'; font-size: 12px; color:#DC2526; font-weight: 500;}
    .service-box .developers-box .more_btn_arrow,.service-box .publisher-box .more_btn_arrow{ width: 11.2vw; height: 2.66vw; position: absolute; right: 0; top: 0; background-image: url(../images/more_btn_arrow.png); background-size: auto 100%; background-repeat: no-repeat; top: 0.67vw;}

    .about-box{ width: 100%; margin-top: 16vw;}
    .about-box .about-font-box{ width: 100%; height: 13.33vw; position: relative;}
    .about-box .about-font-box .about-font{ width: 41.86vw; position: absolute; left: 4vw; top: 3.58vw;}
    .about-box .about-logo-box{ width: 100%; height: 49.86vw; box-sizing: border-box;  text-align: center;  background-image: url(../images/about-logo.png); background-size: 44.5% auto;background-position: center center; background-repeat: no-repeat; position: relative;}
    .about-box .about-logo-box p:nth-child(1){font-family: 'Inter'; font-weight: 700; font-size: 18px; color: #fff;}
    .about-box .about-logo-box p:nth-child(2){font-family: 'Inter'; font-weight: 400; font-size: 11px; color:rgba(255, 255, 255, 0.5); margin-top: 1.33vw;}
    .about-box .about-logo-box .about-logo-bgc{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0,0.8); padding: 4vw;padding-top: 16vw;box-sizing: border-box; }
    .about-box .about-desc-box li{ width: 100%; height: 24vw; display: flex; position: relative;}
    .about-box .about-desc-box li .icon{display: none;}
    .about-box .about-desc-box li .icon-mobile{ flex: 0.176; line-height: 9.6vw; display:flex;align-items: center;justify-content: center;}
    .about-box .about-desc-box li .icon-mobile img{width: 9.6vw; height: 9.6vw; vertical-align: middle;}
    .about-box .about-desc-box li .desc{flex: 0.824; width: 100%; height: 100%; font-family: 'Inter'; color: rgba(255, 255, 255, 0.5); padding-right: 4vw; box-sizing: border-box;display:flex;align-items: center; font-size: 12px;}

    .about-box .about-timeline-box{display: none;}


    .partners-box{ width: 100%; margin-top: 16vw; position: relative;}
    .partners-box .partners-font-box{ width: 100%; height: 13.33vw; position: relative;}
    .partners-box .partners-font-box img{width: 44.8vw; position: absolute; top: 3.7vw; left: 4vw;}
    .partners-box .partners-list ul{ display: flex; width: 100%;flex-wrap: wrap;}
    .partners-box .partners-list ul li{flex-grow: 1; flex-basis: calc(100%/3); position: relative; width: 100%; height: 33.33vw; display: flex; align-items: center;justify-content: center;}
    .partners-box .partners-list ul li img{ width: 60%;}
    .partners-box .partners-list ul li:nth-child(3n) .right-line{display: none;}
    .partners-box .partners-list ul li:nth-child(3n + 1) .left-line{display: none;}
    .partners-box .partners-list ul li:nth-child(5) img{ width: 80%;}
    .partners-box .partners-list ul li:nth-last-child(-n+3){display: none;}


    .footer-box{ width: 100%; height: 84.5vw; margin-top: 16vw; position: relative; padding: 4vw; box-sizing: border-box;}
    .footer-box .left .footer_logo{ width: 31.3vw; margin-top: 4vw;}    
    .footer-box .left .footer_mail{ display: none;}
    .footer-box .left p{ width: 100%; font-family: 'Quicksand', sans-serif;;font-weight: 400; font-size: 3vw; color: rgba(255,255,255,0.3); margin-top: 4vw;}
    .footer-box .left .mobile_footer_mail{ width: 100%;margin-top: 4vw;}
    .footer-box .right p{ width: 100%; margin-top: 5.33vw; color: rgba(255,255,255,0.3);font-family: 'Quicksand', sans-serif;;font-weight: 400; font-size: 3.5vw; text-align: center;}
    .footer-box .font-animation{ opacity: 1 !important;}
}