@media only screen and (min-width:768px ) {
    .main{
        padding-top: 98px;
        
    }
    .partNetwork{
        min-width: 900px;
        overflow: hidden;
        position: relative;
    }
    .partNetwork .networkBg{
        width: 100%;
        position: absolute;
        top: 0;
        opacity: 0.2;
    }
    .partNetwork .warperBox{
        position: relative;
        padding: 150px 0 214px;
        color: #FFFFFF;
    }
    .partNetwork .title{
        font-size: 100px;
        font-family: "DIN Condensed";
        font-weight: bold;
        line-height: 100px;
    }
    .partNetwork .tips strong{
        font-size: 28px;
        font-weight: bold;
        color: #C7212D;
        margin-top: 10px;
    }
    .partNetwork .tips span{
        font-size: 28px;
        font-weight: 300;
        line-height: 33px;
        margin-left: 15px;
    }
    .partNetwork .text{
        margin-top: 15px;
        font-size: 21px;
        font-weight: 300;
        line-height: 36px;
        /* width: 756px; */
        text-align: justify;
    }
    .partNetwork .btnBox{
        margin-top: 60px;
    }
    .partNetwork .btnBox .btn{
        height: 72px;
        line-height: 72px;
        border-radius: 10px;
        text-align: center;
        margin-right: 50px;
        font-size: 32px;
        font-weight: 500;
        color: #FFFFFF;
        cursor: pointer;
    }
    .partNetwork .btnBox .btn.mine{
        background-color: #C7212D;
        width: 182px;
    }
    .partNetwork .btnBox .btn.use{
        background-color: #4d4d4d;
        width: 150px;
    }

    .partWhyNetwork .warperBox{
        padding: 96px 0 140px;
    }
    .partWhyNetwork .title{
        font-size: 60px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        line-height: 80px;
    }
    .partWhyNetwork .text{
        font-size: 20px;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 36px;
        margin-top: 20px;
        text-align: justify;
        /* width: 652px; */
    }
    .partWhyNetwork .listBox{
        margin-top: 30px;
        margin-left: -25px;
    }
    .partWhyNetwork .listBox .item{
        margin-left: 25px;
        width: 280px;
        background: #101B2D;
        box-sizing: border-box;
        padding: 32px 18px;
        color: #FFFFFF;
        min-height: 217px;
    }
    .partWhyNetwork .listBox .itemTitle{
        font-size: 30px;
        font-weight: bold;
    }
    .partWhyNetwork .listBox .itemText{
        font-size: 16px;
        margin-top: 15px;
    }

    .partCoverageMap{
        background: #101B2D;
    }
    .partCoverageMap .warperBox{
        padding: 66px 0;
        width: 1080px;
        position: relative;
    }
    .partCoverageMap .coverageMapBg{
        width: 100%;
    }
    .partCoverageMap .title{
        position: absolute;
        color: #FFFFFF;
        left: 100px;
        top: 108px;
        font-size: 60px;
        font-family: "DIN Condensed";
        font-weight: bold;
    }
    .partCoverageMap .dot{
        position: absolute;
        width: 50%;
        height: 50%;
        background: #FFFFFF;
        opacity: 0.6;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: -webkit-translate(-50%,-50%);
        border-radius: 50%;
    }
    .partCoverageMap .dotSmall{
        position: absolute;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #C7212D;
    }
    .partCoverageMap .dotBig{
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #C7212D;
    }
    .partCoverageMap .dot1{
        top: 221px;
        left: 690px;
        animation: goBig 1s 0s linear infinite;
        -webkit-animation: goBig 1s 0s linear infinite;
    }
    .partCoverageMap .dot2{
        top: 452px;
        left: 219px;
        animation: goBig 1s .2s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot3{
        top: 319px;
        left: 261px;
        animation: goBig 1s .4s linear infinite;
        -webkit-animation: goBig 1s .4s linear infinite;
    }
    .partCoverageMap .dot4{
        top: 457px;
        left: 610px;
        animation: goBig 1s .6s linear infinite;
        -webkit-animation: goBig 1s .6s linear infinite;
    }
    .partCoverageMap .dot5{
        top: 390px;
        left: 879px;
        animation: goBig 1s .8s linear infinite;
        -webkit-animation: goBig 1s .8s linear infinite;
    }
    .partCoverageMap .dot6{
        top: 480px;
        left: 880px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot7{
        top: 314px;
        left: 862px;
        animation: goBig 1s .4s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot8{
        top: 614px;
        left: 948px;
        animation: goBig 1s .6s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot9{
        top: 591px;
        left: 574px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot10{
        top: 602px;
        left: 303px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot11{
        top: 344px;
        left: 247px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .4s linear infinite;
    }
    .partCoverageMap .dot12{
        top: 334px;
        left: 103px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .6s linear infinite;
    }
    .partCoverageMap .dot13{
        top: 364px;
        left: 482px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .8s linear infinite;
    }
    .partCoverageMap .dot14{
        top: 396px;
        left: 735px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s 0s linear infinite;
    }
    .partCoverageMap .dot15{
        top: 314px;
        left: 752px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot16{
        top: 437px;
        left: 848px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .4s linear infinite;
    }
    .partCoverageMap .dot17{
        top: 348px;
        left: 940px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .6s linear infinite;
    }
    .partCoverageMap .dot18{
        top: 535px;
        left: 934px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .8s linear infinite;
    }
    .partCoverageMap .dot19{
        top: 313px;
        left: 192px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot20{
        top: 563px;
        left: 355px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partMine {
        min-width: 900px;
        position: relative;
    }
    .partMine .mineBg{
        width: 100%;
        position: absolute;
        bottom: 0;
        opacity: 0.5;
    }
    .partMine .warperBox{
        padding: 52px 0 268px;
        position: relative;
    }
    .partMine .title{
        font-size: 90px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
    }
    .partMine .tips{
        margin-top: 26px;
        font-size: 26px;
        color: #C7212D;
    }
    .partMine .text{
        margin-top: 18px;
        font-size: 16px;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 36px;
        width: 398px;
        text-align: justify;
    }
    .partMine .mineImg{
        width: 986px;
        position: absolute;
        top: 0;
        left: 410px;
    }

    .partBlockchain{
        background: #101B2D;
    }
    .partBlockchain .warperBox{
        padding: 94px 0 32px;
    }
    .partBlockchain .title{
        font-size: 40px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
    }
    .partBlockchain .title strong{
        color: #C7212D;
    }
    .partBlockchain .content{
        margin-top: 60px;
        padding-left: 45px;
    }
    .partBlockchain .content .blockchainImg{
        width: 312px;
    }
    .partBlockchain .content .textBox{
        margin-left: 55px;
        width: 494px;
    }
    .partBlockchain .content .text{
        font-size: 18px;
        font-weight: 300;
        color: #FFFFFF;
        line-height: 24px;
        margin-top: 30px;
        /* text-indent: -20px; */
    }

    .useWarper{
        background: #101B2D;
        padding-bottom: 238px;
    }
    .useWarper .topImg{
        width: 100%;
        display: block;
        margin-top: 30px;
    }
    .useWarper .networkBox{
        position: relative;
        padding: 150px 0 214px;
        color: #FFFFFF;
    }
    .useWarper .networkBox .userImgBg{
        width: 100%;
        position: absolute;
        bottom: 0;
        opacity: 0.2;
    }
    .useWarper .networkBox .title{
        font-size: 96px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .useWarper .imgBoxWarper{
        background: #000000;
        padding: 80px 0;
    }
    .useWarper .useBnt{
        width: 148px;
        height: 72px;
        line-height: 72px;
        text-align: center;
        border-radius: 10px;
        background: #C7212D;
        color: #FFFFFF;
        font-size: 32px;
        margin-left: 335px;
    }
    .useWarper .userText{
        width: 812px;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 36px;
        margin-top: 30px;
    }
    .useWarper .imgBox{
        margin-top: 20px;
    }
    .useWarper .imgBox img{
        width: 300px;
        display: block;
    }
    .useWarper .worksBox {
        margin-top: 98px;
    }
    .useWarper .worksBox .worksBoxTitle{
        font-size: 90px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .useWarper .worksBox .worksBoxText{
        width: 882px;
        margin-top: 48px;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 36px;
    }
    .useWarper .worksBox .worksBoxImg {
        width: 900px;
        display: block;
        margin-top: 68px;
    }
    .useWarper .realTimeBox{
        margin-top: 52px;
        color: #FFFFFF;
    }
    .useWarper .realTimeBox .realTimeBoxTitle{
        font-size: 36px;
    }
    .useWarper .realTimeBox .realTimeBoxText{
        margin-top: 10px;
        font-size: 20px;
        line-height: 48px;
    }

    .technologyWarper{
        background: #101B2D;
    }
    .technologyWarper .bannerBox{
        position: relative;
    }
    .technologyWarper .bannerBox .warperBox{
        position: absolute;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .technologyWarper .bannerBox img{
        width: 100%;
        min-width: 900px;
    }
    .technologyWarper .bannerBox .text{
        position: absolute;
        font-size: 100px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        top: 60%;
        right: 80px;
        text-align: right;
        /* transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%); */
    }
    .technologyWarper .title{
        font-size: 60px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .technologyWarper .text{
        font-size: 20px;
        color: #FFFFFF;
        line-height: 36px;
        width: 870px;
        font-weight: 300;
    }
    .technologyWarper .architectureBox{
        padding-top: 76px;
    }
    .technologyWarper .architectureBox .architectureText{
        margin-top: 20px;
    }
    .technologyWarper .architectureBox .architectureImg{
        display: block;
        margin-top: 46px;
        width: 890px;
        margin-bottom: 90px;
    }
    .line{
        width: 1080px;
        height: 1px;
        background-color: #C0202D;
        margin: 0 auto;
    }
    .technologyWarper .blockchainBox{
        margin-top: 70px;
    }
    .technologyWarper .blockchainBox .blockchainText{
        margin-top: 20px;
    }
    .technologyWarper .blockchainImgBox{
        margin-top: 60px;
        margin-bottom: 40px;
    }
    .technologyWarper .blockchainImg{
        width: 420px;
    }
    .technologyWarper .blockchainItemBox{
        font-size: 24px;
        font-weight: 400;
        color: #FFFFFF;
    }
    .technologyWarper .blockchainItemBox .blockchainItem:nth-child(2){
        margin-top: 24px;
    }
    .technologyWarper .blockchainItemBox .blockchainItem:nth-child(3){
        margin-top: 100px;
    }
    .technologyWarper .blockchainItemBox .blockchainItem:nth-child(4){
        margin-top: 120px;
    }
    .technologyWarper .abstractBox{
        margin-top: 70px;
    }
    .technologyWarper .abstractTips{
        margin-top: 35px;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 400;
    }
    .technologyWarper .abstractText{
        margin-top: 10px;
    }
    .technologyWarper .downloadBox{
        margin-top: 120px;
        padding-bottom: 145px;
    }
    .technologyWarper .downloadBox .downloadTitle{
        font-size: 36px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
    }
    .technologyWarper .downloadBox .downloadText{
        margin-top: 16px;
        font-size: 18px;
        font-weight: 300;
        color: #FFFFFF;
    }
    .technologyWarper .downloadBox .downloadBtn{
        width: 305px;
        height: 72px;
        line-height: 72px;
        border-radius: 10px;
        background: #C7212D;
        text-align: center;
        font-size: 20px;
        color: #FFFFFF;
        margin-left: 50px;
        cursor: pointer;
    }

    .ecosystemWarper{
        background: #101B2D;
    }
    .ecosystemWarper .title{
        font-size: 60px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .ecosystemWarper .text{
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 36px;
    }
    .ecosystemWarper .ecosystemBriefBox{
        padding-top: 140px;
    }
    .ecosystemWarper .ecosystemBriefBox .ecosystemBriefTitle{
        font-size: 96px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .ecosystemWarper .ecosystemBriefBox .ecosystemBriefText{
        margin-top: 10px;
    }
    .ecosystemWarper .ecosystemBriefBox .ecosystemBriefTips{
        font-size: 18px;
        font-weight: 500;
        color: #C7212D;
        margin-top: 30px;
    }
    .ecosystemWarper .ecosystemWordsItem{
        margin-top: 55px;
    }
    .ecosystemWarper .ecosystemWordsItem .ecosystemWordsTitle{
        color: #C7212D;
        font-size: 24px;
    }
    .ecosystemWarper .ecosystemWordsItem .ecosystemWordsText{
        margin-top: 10px;
    }
    .ecosystemWarper .economyBox{
        margin-top: 88px;
    }
    .ecosystemWarper .economyBox .economyTips{
        margin-top: 10px;
    }
    .ecosystemWarper .economyBox .economyImg{
        width: 100%;
        margin-top: 32px;
    }
    .ecosystemWarper .economyBox .economyText{
        margin-top: 34px;
    }
    .ecosystemWarper .openModelBox{
        margin-top: 70px;
    }
    .ecosystemWarper .openModelBox .economyTips{
        margin-top: 30px;
    }
    .ecosystemWarper .openModelBox .openModelImg{
        margin-top: 30px;
        width: 100%;
    }
    .ecosystemWarper .openModelBox .economyText{
        margin-top: 46px;
    }
    .ecosystemWarper .openProtocolBox{
        margin-top: 70px;
        padding-bottom: 32px;
    }
    .ecosystemWarper .openProtocolBox .openProtocolImg{
        margin-top: 30px;
        width: 100%;
    }
    .ecosystemWarper .openProtocolBox .openProtocolText{
        margin-top: 28px;
    }
    .ecosystemWarper .contactBox{
        background: #1A1A1A;
        border-bottom: 1px solid #4d4d4d;
    }   
    .ecosystemWarper .contactBox .warperBox{
        padding: 52px 0 40px;
    }
    .ecosystemWarper .contactBox .itemBox{
        margin-top: 45px;
    }
    .ecosystemWarper .contactBox .itemBox .item{
        margin-right: 35px;
        cursor: pointer;
    }
    .ecosystemWarper .contactBox .itemBox .item img{
        width: 36px;
    }
    .ecosystemWarper .contactBox .itemBox .item .itemText{
        margin-left: 10px;
        font-size: 18px;
        color: #959595;
        display: block;
    }
    .ecosystemWarper .contactBox .itemBox .item .itemText:hover{
        color: #FFFFFF;
    }
    .ecosystemWarper .ecosystemAnalysis{
        margin-top: 60px;
        margin-bottom: 65px;
        position: relative;
    }
    .ecosystemWarper .ecosystemAnalysis .ecosystemAnalysisImg{
        width: 900px;
    }
    .ecosystemWarper .ecosystemAnalysis .textTips{
        position: absolute;
        font-size: 18px;
        line-height: 24px;
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsTop{
        text-align: center;
        width: 100%;
        color: #0071BC;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsBottom{
        text-align: center;
        width: 100%;
        color: #65C8D0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsLeft{
        text-align: right;
        color: #29ABE2;
        left: 0;
        top: 50%;
        margin-top: 8px;
        width: 165px;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsRight{
        text-align: left;
        color: #29ABE2;
        right: 0;
        top: 50%;
        margin-top: 8px;
        width: 165px;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMain{
        position: absolute;
        width: 150px;
        height: 150px;
        text-align: center;
        font-size: 24px;
        color: #101B2D;
        line-height: 24px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .ecosystemWarper .ecosystemAnalysis .textMainTop{
        top: 90px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMainBottom{
        bottom: 77px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMainLeft{
        left: 197px;
        top: 50%;
        margin-top: 8px;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMainRight{
        right: 197px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textContent{
        width: 290px;
        position: absolute;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 36px;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentTop{
        top: 110px;
        text-align: right;
        right:565px;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentBottom{
        top: 465px;
        text-align: left;
        left:565px;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentLeft{
        top: 465px;
        text-align: right;
        right:565px;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentRight{
        top: 110px;
        text-align: left;
        left:565px;
    }

    .aboutWarper{
        background: #101B2D;
        padding-bottom:87px;
    }
    .aboutWarper .title{
        font-size: 60px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .aboutWarper .text{
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 36px;
    }
    .aboutWarper .teamBox{
        padding-top: 140px;
        padding-bottom: 108px;
    }
    .aboutWarper .teamBox .teamText{
        margin-top: 30px;
    }
    .aboutWarper .teamBox .teamItemBox{
        padding-top: 26px;
    }
    .aboutWarper .teamItemBox .teamItem{
        margin-top: 53px;
        background: #1F2A40;
    }
    .aboutWarper .teamItem .imgBox{
        width: 216px;
        height: 289px;
        overflow: hidden;
    }
    .aboutWarper .teamItem .imgBox img{
        height: 100%;
        width: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    .aboutWarper .teamItem .itemContent{
        padding: 36px 28px 0 36px;
        color: #FFFFFF;
    }
    .aboutWarper .teamItem .itemContentTitle{
        font-size: 36px;
    }
    .aboutWarper .teamItem .itemContentText{
        font-size: 18px;
        line-height: 24px;
        margin-top: 35px;
        font-weight: 300;
    }
    .aboutWarper .partnersBox{
        padding-top: 66px;
    }
    .aboutWarper .partnersBox .partnersText{
        margin-top: 15px;
    }
    .aboutWarper .partnersItemBox{
        padding-top: 30px;
        margin-left: -30px;
    }
    .aboutWarper .partnersItemBox .partnersItem{
        margin-top: 60px;
        width: 280px;
        height: 432px;
        margin-left: 30px;
        background: #1F2A40;
        padding-top: 36px;
        padding-left: 36px;
        box-sizing: border-box;
    }
    .aboutWarper .partnersItem .imgBox{
        width: 208px;
        height: 208px;
        border-radius: 10px;
        overflow: hidden;
    }
    .aboutWarper .partnersItem .imgBox img{
        height: 100%;
        width: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    .aboutWarper .partnersItem .name{
        font-size: 20px;
        margin-top: 20px;
        color: #FFFFFF;
    }
    .aboutWarper .partnersItem .from{
        font-size: 16px;
        color: #C7212D;
        margin-top: 15px;
    }
    .aboutWarper .partnersItem .itemText{
        font-size: 16px;
        margin-top: 10px;
        color: #FFFFFF;
        line-height: 28px;
    }
    .tokenWarper{
        background: #101B2D;
        padding-bottom: 220px;
    }
    .tokenWarper .tokenTitle{
        padding-top: 120px;
        font-size: 40px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .tokenWarper .tokenText{
        margin-top: 30px;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 36px;
    }

    .tokenWarper .pieChart{
        width: 900px;
        height: 500px;
    }
    .tokenWarper .columnChartTitleBox{
        margin-top: 100px;
        text-align: center;
    }
    .tokenWarper .columnChartTitleBox .titleText{
        font-size: 24px;
        color: #FFFFFF;
    }
    .tokenWarper .columnChartTitleBox .titleTips{
        font-size: 24px;
        color: #C7212D;
        margin-top: 20px;
    }
    .tokenWarper .columnChart{
        margin-top: 60px;
        width: 900px;
        height: 400px;
    }

    .roadmapWarper{
        background: #101B2D;
    }
    .roadmapWarper .roadmapBanner{
        position: relative;
    }
    .roadmapWarper .roadmapBannerBg{
        width: 100%;
    }
    .roadmapWarper .roadmapBanner .warperBox{
        position: absolute;
        top: 0;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .roadmapWarper .roadmapBanner .logo{
        position: absolute;
        left: 100px;
        top: 140px;
        font-size: 120px;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        white-space:nowrap;
    }
    .roadmapWarper .roadmapBanner .titleText{
        position: absolute;
        right: 90px;
        bottom: 60px;
        color: #FFFFFF;
    }
    .roadmapWarper .roadmapBanner .titleText .text1{
        font-size: 100px;
        font-weight: 200;
    }
    .roadmapWarper .roadmapBanner .titleText .text2{
        font-size: 80px;
    }
    .roadmapWarper .courseBox{
        width: 882px;
        box-sizing: border-box;
        margin: 0 auto;
        background: url(../img/roadmap/courseBoxBg.png) no-repeat top;
        background-size: 100% auto;
        padding:15px 10px 165px;
    }
    .roadmapWarper .courseBox .itemBox{
        margin-top: -4px;
        cursor: pointer;
    }
    
    .roadmapWarper .courseBox .itemBox,.roadmapWarper .courseBox .item{
        height: 180px;
    }
    .roadmapWarper .courseBox .item .dateBox{
        width: 180px;
        height: 180px;
        background: url(../img/roadmap/courseDate.png) no-repeat center;
        background-size: 100% 100%;
        color: #1F2A40;
    }
    .roadmapWarper .courseBox .item .dateBox .month{
        font-size: 24px;
    }
    .roadmapWarper .courseBox .item .dateBox .year{
        font-size: 48px;
    }
    .roadmapWarper .courseBox .item .textBox{
        padding: 0 35px;
    }
    .roadmapWarper .courseBox .item .textBox.textRight{
        text-align: right;
    }
    .roadmapWarper .courseBox .item .textBox .titleText{
        font-size: 24px;
        color: #808080;
    }
    .roadmapWarper .courseBox .item .textBox .text{
        font-size: 20px;
        font-weight: 300;
        color: #808080;
        line-height: 30px;
        margin-top: 5px;
    }
    .roadmapWarper .courseBox .item:hover .dateBox{
        color: #101B2D;
        background: url(../img/roadmap/courseDateActive.png) no-repeat center;
        background-size: 100% 100%;
    }
    .roadmapWarper .courseBox .item:hover .textBox .titleText{
        color: #C7212D;
    }
    .roadmapWarper .courseBox .item:hover .textBox .text{
        color: #FFFFFF;
    }
}

@media only screen and (max-width:768px ) {
    .main{
        padding-top: .82rem;
    }
	.line{
        width: 100%;
        height: 1px;
        background-color: #C0202D;
        margin: 0 auto;
    }
    .partNetwork{
        width: 100%;
        position: relative;
        background: url('../img/home/networkBg.jpg') none center;
        background-size: auto 100%;
        padding: ;
    }
    .partNetwork {
        width: 86%;
    	position: relative;
    	padding: 1.87rem 0 1.73rem 1rem;
    }
    
    .partNetwork::after {
        content: "";
        display: block;
        background: url('../img/home/networkBg.jpg') no-repeat center;
        background-size: auto 100%;
        opacity: 0.2;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;   
    }
    .partNetwork .title{
        font-size: 1.2rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
        line-height: 1.2rem;
    }
    .partNetwork .tips{
        font-size: .36rem;
        font-weight: bold;
        color: #C7212D;
        margin-top: .2rem;
    }
    .partNetwork .tipsText{
        font-size: .26rem;
        line-height: .3rem;
        margin-top: .08rem;
        color: #FFFFFF;
    }
    .partNetwork .text{
        margin-top: .45rem;
        font-size: .2rem;
        font-weight: 300;
        line-height: .36rem;
        width: 5.62rem;
        color: #FFFFFF;
        text-align: justify;
    }
    .partNetwork .btnBox{
        margin-top: 1.06rem;
    }
    .partNetwork .btnBox .btn{
        height: .97rem;
        line-height: .97rem;
        border-radius: .1rem;
        text-align: center;
        margin-right: .63rem;
        font-size: .43rem;
        font-weight: 500;
        color: #FFFFFF;
        cursor: pointer;
    }
    .partNetwork .btnBox .btn.mine{
        background-color: #C7212D;
        width: 2.42rem;
    }
    .partNetwork .btnBox .btn.use{
        background-color: #4d4d4d;
        width: 2rem;
    }

    .partWhyNetwork{
        padding: .66rem .95rem;
        text-align: center;
    }
    .partWhyNetwork .title{
        font-size: .58rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        line-height: .58rem;
        white-space: nowrap
    }
    .partWhyNetwork .text{
        font-size: .2rem;
        font-weight: 300;
        color: #FFFFFF;
        line-height: .28rem;
        margin-top: .3rem;
        text-align: justify;
    }
    .partWhyNetwork .listBox{
        margin-top: .4rem
    }
    .partWhyNetwork .listBox .item{
        background: #101B2D;
        box-sizing: border-box;
        text-align: center;
        color: #FFFFFF;
        min-height: 2.6rem;
        padding-top: .32rem;
        margin-bottom: .2rem;
    }
    .partWhyNetwork .listBox .itemTitle{
        font-size: .35rem;
        font-weight: bold;
    }
    .partWhyNetwork .listBox .itemText{
        font-size: .2rem;
        margin-top: .2rem;
    }

    .partCoverageMap{
        background: #101B2D;
        position: relative;
    }
    .partCoverageMap .coverageMapBg{
        width: 100%;
    }
    .partCoverageMap .title{
        position: absolute;
        color: #FFFFFF;
        width: 100%;
        text-align: center;
        top: .4rem;
        font-size: .4rem;
        font-family: "DIN Condensed";
        font-weight: bold;
    }
    .partCoverageMap .dot{
        position: absolute;
        width: 50%;
        height: 50%;
        background: #FFFFFF;
        opacity: 0.6;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: -webkit-translate(-50%,-50%);
        border-radius: 50%;
    }
    .partCoverageMap .dotSmall{
        position: absolute;
        width: .08rem;
        height: .08rem;
        border-radius: 50%;
        background: #C7212D;
    }
    .partCoverageMap .dotBig{
        position: absolute;
        width: .12rem;
        height: .12rem;
        border-radius: 50%;
        background: #C7212D;
    }
    .partCoverageMap .dot1{
        top: 1.07rem;
        left: 4.78rem;
        animation: goBig 1s 0s linear infinite;
        -webkit-animation: goBig 1s 0s linear infinite;
    }
    .partCoverageMap .dot2{
        top: 452px;
        left: 219px;
        animation: goBig 1s .2s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot3{
        top: 1.75rem;
        left: 1.81rem;
        animation: goBig 1s .4s linear infinite;
        -webkit-animation: goBig 1s .4s linear infinite;
    }
    .partCoverageMap .dot4{
        top: 457px;
        left: 610px;
        animation: goBig 1s .6s linear infinite;
        -webkit-animation: goBig 1s .6s linear infinite;
    }
    .partCoverageMap .dot5{
        top: 390px;
        left: 879px;
        animation: goBig 1s .8s linear infinite;
        -webkit-animation: goBig 1s .8s linear infinite;
    }
    .partCoverageMap .dot6{
        top: 480px;
        left: 880px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot7{
        top: 314px;
        left: 862px;
        animation: goBig 1s .4s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot8{
        top: 614px;
        left: 948px;
        animation: goBig 1s .6s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot9{
        top: 591px;
        left: 574px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot10{
        top: 602px;
        left: 303px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot11{
        top: 344px;
        left: 247px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .4s linear infinite;
    }
    .partCoverageMap .dot12{
        top: 334px;
        left: 103px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .6s linear infinite;
    }
    .partCoverageMap .dot13{
        top: 364px;
        left: 482px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .8s linear infinite;
    }
    .partCoverageMap .dot14{
        top: 396px;
        left: 735px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s 0s linear infinite;
    }
    .partCoverageMap .dot15{
        top: 314px;
        left: 752px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }
    .partCoverageMap .dot16{
        top: 437px;
        left: 848px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .4s linear infinite;
    }
    .partCoverageMap .dot17{
        top: 348px;
        left: 940px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .6s linear infinite;
    }
    .partCoverageMap .dot18{
        top: 535px;
        left: 934px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .8s linear infinite;
    }
    .partCoverageMap .dot19{
        top: 313px;
        left: 192px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .1s linear infinite;
    }
    .partCoverageMap .dot20{
        top: 563px;
        left: 355px;
        animation: goBig 1s .1s linear infinite;
        -webkit-animation: goBig 1s .2s linear infinite;
    }

    .partMine {
        padding: .66rem  0;
        text-align: center;
    }
    .partMine .title{
        font-size: 1rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
    }
    .partMine .tips{
        margin-top: .42rem;
        font-size: .35rem;
        color: #C7212D;
    }
    .partMine .text{
        margin: .3rem auto 0;
        font-size: .2rem;
        font-weight: 300;
        color: #FFFFFF;
        line-height: .28rem;
        width: 5.6rem;
    }
    .partMine .mineImg{
        width: 100%;
    	display: block;
    	margin: .82rem 0 0 0;
    }

    .partBlockchain{
        background: #101B2D;
        padding: .56rem 0 1rem;
        text-align: center;
    }
    .partBlockchain .title{
        font-size: .4rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
        
    }
    .partBlockchain .title strong{
        color: #C7212D;
    }
    .partBlockchain .content{
        margin-top: .3rem;
    }
    .partBlockchain .content .blockchainImg{
        width: 4rem;
        display: block;
        margin: .5rem auto 0;
    }
    .partBlockchain .content .textBox{
        padding: 0 .8rem;
        box-sizing: border-box;
    }
    .partBlockchain .content .text{
        font-size: .2rem;
        font-weight: 300;
        color: #FFFFFF;
        line-height: .28rem;
        margin-top: .3rem;
        text-align: left;
    }

    .useWarper{
        background: #101B2D;
        padding-bottom: 1.56rem;
    }
    .useWarper .topImg{
        width: 100%;
        display: block;
    }
    .useWarper .networkBox{
        padding: 1.25rem 0 .5rem;
        position: relative;
    }
    .useWarper .networkBox .warperBox{
        position: relative;
    }
    .useWarper .networkBox .userImgBg{
        position: absolute;
        width: 100%;
        bottom: 0;
        opacity: 0.2;
    }
    .useWarper .networkBox .title{
        font-size: .6rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        text-align: center;
    }
    .useWarper .useLogo{
        font-size: .6rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
    }
    .useWarper .useBnt{
        width: 3.78rem;
        height: .96rem;
        line-height: .96rem;
        text-align: center;
        border-radius: .1rem;
        background: #C7212D;
        color: #FFFFFF;
        font-size: .42rem;
        margin: .65rem auto 0;
    }
    .useWarper .userText{
        width: 5.75rem;
        text-align: center;
        font-size: .2rem;
        color: #FFFFFF;
        line-height: .35rem;
        margin: .45rem auto 0;
        text-align: justify;
    }
    .useWarper .imgBoxWarper{
        background: #000000;
        padding: .5rem 0;
    }
    .useWarper .imgBox{
        margin: .42rem auto 0;
        width: 6.1rem;
    }
    .useWarper .imgBox img{
        width: 3.05rem;
        display: block;
    }
    .useWarper .worksBox {
        margin-top: .7rem;
        text-align: center;
    }
    .useWarper .worksBox .worksBoxTitle{
        font-size: .6rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .useWarper .worksBox .worksBoxText{
        width: 5.72rem;
        margin: .54rem auto 0;
        font-size: .2rem;
        color: #FFFFFF;
        line-height: .35rem;
    }
    .useWarper .worksBox .worksBoxImg {
        width: 6.1rem;
        display: block;
        margin: .7rem auto 0;
    }
    .useWarper .realTimeBox{
        margin: .53rem auto 0;
        color: #FFFFFF;
        text-align: center;
    }
    .useWarper .realTimeBox .realTimeBoxTitle{
        font-size: .35rem;
    }
    .useWarper .realTimeBox .realTimeBoxText{
        margin-top: .1rem;
        font-size: .2rem;
        line-height: .35rem;
    }

    .technologyWarper{
        background: #101B2D;
    }
    .technologyWarper .bannerBox{
        position: relative;
    }
    .technologyWarper .bannerBox img{
        width: 100%;
    }
    .technologyWarper .bannerBox .text{
        position: absolute;
        font-size: 1rem;
        width: 100%;
        text-align: center;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .technologyWarper .title{
        font-size: .6rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
        text-align: center;
    }
    .technologyWarper .text{
        font-size: .2rem;
        color: #FFFFFF;
        line-height: .36rem;
        width: 6.45rem;
        font-weight: 300;
        margin: 0 auto;
        text-align: center;
    }
    .technologyWarper .architectureBox{
        padding-top: .57rem;
    }
    .technologyWarper .architectureBox .architectureText{
        margin-top: .7rem;
    }
    .technologyWarper .architectureBox .architectureImg{
        display: block;
        margin: .62rem auto 0;
        width: 6.25rem;
    }
    .technologyWarper .blockchainBox{
        margin-top: 1.15rem;
    }
    .technologyWarper .blockchainBox .blockchainText{
        margin-top: .4rem;
    }
    .technologyWarper .blockchainImgBox{
        margin-top: .9rem;
        padding-bottom: 1.2rem;
        /* padding-left: .5rem; */
    }
    .technologyWarper .blockchainImg{
        width: 4.35rem;
    }
    .technologyWarper .blockchainItemBox{
        font-size: .2rem;
        font-weight: 400;
        color: #FFFFFF;
        margin-left: .18rem;
    }
    .technologyWarper .blockchainItemBox .blockchainItem:nth-child(2){
        margin-top: .42rem;
    }
    .technologyWarper .blockchainItemBox .blockchainItem:nth-child(3){
        margin-top: .87rem;
    }
    .technologyWarper .blockchainItemBox .blockchainItem:nth-child(4){
        margin-top: .97rem;
    }
    .technologyWarper .abstractBox{
        margin-top: .85rem;
        text-align: center;
    }
    .technologyWarper .abstractTips{
        margin-top: .4rem;
        font-size: .2rem;
        color: #FFFFFF;
        font-weight: 400;
    }
    .technologyWarper .abstractText{
        margin-top: .1rem;
    }
    .technologyWarper .downloadBox{
        margin-top: 1.2rem;
        padding-bottom: 2rem;
        text-align: center;
    }
    .technologyWarper .downloadBox .downloadTitle{
        font-size: .42rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #FFFFFF;
    }
    .technologyWarper .downloadBox .downloadText{
        margin-top: .3rem;
        font-size: .28rem;
        font-weight: 300;
        color: #FFFFFF;
    }
    .technologyWarper .downloadBox .downloadBtn{
        width: 5rem;
        height: 1rem;
        text-align: center;
        line-height: 1rem;
        border-radius: 10px;
        background: #C7212D;
        text-align: center;
        font-size: .42rem;
        color: #FFFFFF;
        margin: .5rem auto 0;
        cursor: pointer;
    }

    .ecosystemWarper{
        background: #101B2D;
        text-align: center;
    }
    .ecosystemWarper .title{
        font-size: .6rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .ecosystemWarper .text{
        font-size: .2rem;
        font-weight: 400;
        color: #FFFFFF;
        line-height: .35rem;
    }
    .ecosystemWarper .ecosystemBriefBox{
        padding-top: 1.25rem;
    }
    .ecosystemWarper .ecosystemBriefBox .ecosystemBriefTitle{
        font-size: 1rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .ecosystemWarper .ecosystemBriefBox .ecosystemBriefText{
        margin: .4rem auto 0;
        width: 6.1rem;
    }
    .ecosystemWarper .ecosystemBriefBox .ecosystemBriefTips{
        font-size: .2rem;
        font-weight: 500;
        color: #C7212D;
        margin-top: .14rem;
    }
    .ecosystemWarper .ecosystemWordsItem{
        margin-top: .5rem;
    }
    .ecosystemWarper .ecosystemWordsItem .ecosystemWordsTitle{
        color: #C7212D;
        font-size: .2rem;
    }
    .ecosystemWarper .ecosystemWordsItem .ecosystemWordsText{
        margin: .1rem auto 0;
        width: 6.1rem;
    }
    .ecosystemWarper .economyBox{
        margin-top: 1rem;
        padding-bottom: .75rem;
    }
    .ecosystemWarper .economyBox .economyTips{
        margin-top: .12rem;
    }
    .ecosystemWarper .economyBox .economyImg{
        width: 6.1rem;
        margin: .4rem auto 0;
    }
    .ecosystemWarper .economyBox .economyText{
        margin-top: .5rem;
    }
    .ecosystemWarper .openModelBox{
        margin-top: .82rem;
        padding-bottom: .75rem;
    }
    .ecosystemWarper .openModelBox .economyTips{
        margin-top: .3rem;
    }
    .ecosystemWarper .openModelBox .openModelImg{
        margin: .82rem auto 0;
        width: 6.1rem;
    }
    .ecosystemWarper .openModelBox .economyText{
        margin: .5rem auto 0;
        width: 6.1rem;
    }
    .ecosystemWarper .openProtocolBox{
        margin-top: 1rem;
        padding-bottom: .66rem;
    }
    .ecosystemWarper .openProtocolBox .openProtocolImg{
        margin: .42rem auto 0;
        width: 6.1rem;
    }
    .ecosystemWarper .openProtocolBox .openProtocolText{
        margin: .62rem auto 0;
    }
    .ecosystemWarper .ecosystemAnalysis{
        width: 6.33rem;
        margin: .42rem auto 1rem;
        position: relative;
    }
    .ecosystemWarper .ecosystemAnalysis .ecosystemAnalysisImg{
        width: 6.33rem;
    }
    .ecosystemWarper .ecosystemAnalysis .textTips{
        position: absolute;
        font-size: .15rem;
        line-height: .19rem;
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsTop{
        text-align: center;
        width: 100%;
        color: #0071BC;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsBottom{
        text-align: center;
        width: 100%;
        color: #65C8D0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsLeft{
        text-align: right;
        color: #29ABE2;
        left: 0;
        top: 50%;
        width: 1.15rem;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textTipsRight{
        text-align: left;
        color: #29ABE2;
        right: 0;
        top: 50%;
        width: 1.15rem;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMain{
        position: absolute;
        width: 1.06rem;
        height: 1.06rem;
        text-align: center;
        font-size: .17rem;
        color: #101B2D;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .ecosystemWarper .ecosystemAnalysis .textMainTop{
        top: .6rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMainBottom{
        bottom: .65rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: -webkit-translateX(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMainLeft{
        left: 1.38rem;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textMainRight{
        right: 1.38rem;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: -webkit-translateY(-50%);
    }
    .ecosystemWarper .ecosystemAnalysis .textContent{
        width: 2.44rem;
        position: absolute;
        font-size: .15rem;
        color: #FFFFFF;
        line-height: .25rem;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentTop{
        top: .7rem;
        text-align: right;
        right:4.1rem;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentBottom{
        top: 3.15rem;
        text-align: left;
        left:4.1rem;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentLeft{
        top: 3.15rem;
        text-align: right;
        right:4.1rem;
    }
    .ecosystemWarper .ecosystemAnalysis .textContentRight{
        top: .7rem;
        text-align: left;
        left:4.1rem;
    }

    .aboutWarper{
        background: #101B2D;
        text-align: center;
    }
    .aboutWarper .title{
        font-size: .6rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .aboutWarper .text{
        font-size: .2rem;
        font-weight: 400;
        color: #FFFFFF;
        line-height: .35rem;
    }
    .aboutWarper .teamBox{
        padding: .85rem .7rem .2rem;
    }
    .aboutWarper .teamBox .teamText{
        margin: .4rem auto 0;
        width: 5.7rem;
    }
    .aboutWarper .teamBox .teamItemBox{
        padding-top: 26px;
    }
    .aboutWarper .teamItemBox .teamItem{
        margin-bottom: .66rem;
        background: #1F2A40;
        padding: .53rem 0 .66rem;
    }
    .aboutWarper .teamItem .imgBox{
        width: 2.6rem;
        height: 3.5rem;
        border-radius: .3rem;
        margin:  0 auto;
        overflow: hidden;
    }
    .aboutWarper .teamItem .imgBox img{
        height: 100%;
        width: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    .aboutWarper .teamItem .itemContent{
        margin-top: .4rem;
        color: #FFFFFF;
        padding: 0 .46rem;
    }
    .aboutWarper .teamItem .itemContentTitle{
        font-size: .35rem;
    }
    .aboutWarper .teamItem .itemContentText{
        font-size: .2rem;
        line-height: .35rem;
        margin-top: .1rem;
        font-weight: 300;
    }
    .aboutWarper .partnersBox{
        padding-top: .84rem;
        padding-bottom: 1.24rem;
    }
    .aboutWarper .partnersBox .partnersText{
        margin: .26rem auto 0;
        width: 6.1rem;
    }
    .aboutWarper .partnersItemBox{
        padding-top: 1rem;
        margin-left: -.5rem;
        padding: 0 .7rem;
    }
    .aboutWarper .partnersItemBox .partnersItem{
        margin-top: .4rem;
        width: 2.8rem;
        height: 5rem;
        margin-left: .5rem;
        background: #1F2A40;
        padding: .36rem .3rem 0;
        box-sizing: border-box;
        text-align: left;
    }
    .aboutWarper .partnersItem .imgBox{
        width: 2.2rem;
        height: 2.2rem;
        border-radius: .1rem;
        overflow: hidden;
    }
    .aboutWarper .partnersItem .imgBox img{
        height: 100%;
        width: auto;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    .aboutWarper .partnersItem .name{
        font-size: .22rem;
        margin-top: .2rem;
        color: #FFFFFF;
    }
    .aboutWarper .partnersItem .from{
        font-size: .16rem;
        color: #C7212D;
        margin-top: .2rem;
    }
    .aboutWarper .partnersItem .itemText{
        font-size: .16rem;
        margin-top: .1rem;
        color: #FFFFFF;
        line-height: .3rem;
    }

    .tokenWarper{
        background: #101B2D;
        padding: 1.3rem 0 1.9rem;
        text-align: center;
    }
    .tokenWarper .tokenTitle{
        font-size: .4rem;
        font-family: "DIN Condensed";
        font-weight: bold;
        color: #C7212D;
    }
    .tokenWarper .tokenText{
        margin: .27rem auto 0;
        font-size: .2rem;
        font-weight: 400;
        color: #FFFFFF;
        line-height: .35rem;
        width: 5.9rem;
    }

    .tokenWarper .pieChart{
        width: 100%;
        height: 250px;
    }
    .tokenWarper .columnChartTitleBox{
        margin-top: 1rem;
        text-align: center;
    }
    .tokenWarper .columnChartTitleBox .titleText{
        font-size: .28rem;
        color: #FFFFFF;
    }
    .tokenWarper .columnChartTitleBox .titleTips{
        font-size: .28rem;
        color: #C7212D;
        margin-top: .2rem;
    }
    .tokenWarper .columnChart{
        margin-top: .6rem;
        width: 100%;
        height: 300px;
    }

    .roadmapWarper{
        background: #101B2D;
    }
    .roadmapWarper .roadmapBanner{
        position: relative;
    }
    .roadmapWarper .roadmapBannerBg{
        width: 100%;
    }
    .roadmapWarper .roadmapBanner .titleText{
        position: absolute;
        width: 100%;
        text-align: center;
        top: .45rem;
        color: #FFFFFF;
    }
    .roadmapWarper .roadmapBanner .titleText .text1{
        font-size: .76rem;
        font-weight: 200;
    }
    .roadmapWarper .roadmapBanner .titleText .text2{
        font-size: .6rem;
    }
    .roadmapWarper .courseBox{
        width: 6.47rem;
        box-sizing: border-box;
        margin: 0 auto;
        background: url(../img/roadmap/courseBoxBg.png) no-repeat top;
        background-size: 100% auto;
        padding: .1rem .1rem 1.5rem;
    }
    .roadmapWarper .courseBox .itemBox{
        margin-top: -.04rem;
        cursor: pointer;
    }
    
    .roadmapWarper .courseBox .itemBox,.roadmapWarper .courseBox .item{
        height: 1.34rem;
    }
    .roadmapWarper .courseBox .item .dateBox{
        width: 1.34rem;
        height: 1.34rem;
        background: url(../img/roadmap/courseDate.png) no-repeat center;
        background-size: 100% 100%;
        color: #1F2A40;
    }
    .roadmapWarper .courseBox .item .dateBox .month{
        font-size: .18rem;
    }
    .roadmapWarper .courseBox .item .dateBox .year{
        font-size: .35rem;
    }
    .roadmapWarper .courseBox .item .textBox{
        padding: 0 .4rem;
    }
    .roadmapWarper .courseBox .item .textBox.textRight{
        text-align: right;
    }
    .roadmapWarper .courseBox .item .textBox .titleText{
        font-size: .18rem;
        color: #808080;
    }
    .roadmapWarper .courseBox .item .textBox .text{
        font-size: .16rem;
        font-weight: 300;
        color: #808080;
        line-height: .26rem;
        margin-top: .12rem;
    }
    .roadmapWarper .courseBox .item.current .dateBox{
        color: #101B2D;
        background: url(../img/roadmap/courseDateActive.png) no-repeat center;
        background-size: 100% 100%;
    }
    .roadmapWarper .courseBox .item.current .textBox .titleText{
        color: #C7212D;
    }
    .roadmapWarper .courseBox .item.current .textBox .text{
        color: #FFFFFF;
    }

}

@keyframes goBig{
	0%{
		transform: scale(1);
		opacity: 1;
	}
	50%{
		transform: scale(2.5);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes goBig{
	0%{
		-webkit-transform: -webkit-scale(1);
		opacity: 1;
	}
	50%{
		-webkit-transform: -webkit-scale(2.5);
		opacity: .2;
	}
	100%{
		-webkit-transform: -webkit-scale(1);
		opacity: 1;
	}
}