*{
    margin:0;padding:0;box-sizing: border-box;
}
.header{
    display:flex;
    align-items: center;
    /* background:rgba(255,255,255,0.2); */
    background:rgba(0,0,0,0.2);
    width:100%;
    padding:31px 0;
    position:fixed;
    z-index: 23;
    top:0;
    left:0;
    /* height:94px; */
    padding:22px 0;
}
.wrapbox{
    width:100%;
    /* max-width:1072px; */
    /* max-width:92vw; */
    max-width:67.48vw;
    margin:auto;
}
.header .headerBox{
    /* max-width:1420px; */
    max-width:92vw;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.header .headerBox .logo{
    background:url("../images/logo.png") no-repeat left center;
    background-size:50px;
    padding-left:58px;
    min-height:50px;
    /* line-height:60px; */
    /* font-size:32px; */
    /* color:#72A8E7; */
}
.header .headerBox .logo .logotitle{
    font-size:21px;
    color:#fff;
}
.header .headerBox .logo .subtitle{
    font-size:12px;
    color:#fff;
}
.header .headerBox .rightBox{
    display:flex;
    align-items: center;
}
.header .headerBox .rightBox .desc{
    font-size:0.6vw;
    color:#fff;
    margin-right:0.6vw
}
.header .headerBox .rightBox .qrcodeBox{
    padding:8px;
    background-color: #fff;
    border-radius: 8px;
    width:70px;
    height:70px;
    
}
.header .headerBox .rightBox .qrcodeBox img{
    width:100%;
    height:100%;
}

.logobox{
    background:url("../images/logo2.png") no-repeat left center;
    background-size:11.53vw 11.53vw;
    padding-left:14.3vw;
    margin-left:18.7vw;
    margin-bottom:5.8vh;
    width:100%;
    min-height:11.53vw;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}
.logobox .logotitle{
    font-size:4.1vw;
    color:#333;
    text-align: left;
}
.logobox .subtitle{
    font-size:3vw;
    color:#666;
    text-align: left;
}

.header .headerBox .btn{
    display:block;
    padding:0 40px;
    line-height:62px;
    color:#fff;
    border-radius: 8px;
    background:#72A8E7;
    font-size:20px;
    font-weight: bold;
    text-decoration: none;
    /* margin-right:52px; */
}
.mainWrap{
    background:url("../images/banner_bg.jpg") repeat;
    background-size:100% 100%;
    /* padding:96px 0 160px 0; */
}

/* mainWrap */
.mainWrap .mainBox{
    /* background:url("../images/bubbles.png") no-repeat center top; */
    background-size:100% auto;
    display:flex;
    align-items: center;
    justify-content: center;
    /* min-height:1080px; */
    min-height:100vh;

}
.mainWrap .mainBox .leftBox{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right:5.5vw;
}
.mainWrap .mainBox .rightBox img{
    height:84vh;
}
.mainWrap .mainBox .textpic{
    width:55.79vw;
    max-width:1020px;
    margin-bottom:24px;
}
.mainWrap .mainBox .feas{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:54px;
}
.mainWrap .mainBox.mobile .feas{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    padding: 0 12.5vw;
}
.mainWrap .mainBox.mobile .feas .fea{
    font-size:4.1vw;
    margin-right:0;
}
.mainWrap .mainBox .feas .fea{
    /* color:#141C28;
    font-size:24px; */
    /* font-size:1.5vw; */
    font-size:1.58vw;
    color:#fff;
    margin-right:34px;
}
.mainWrap .mainBox .feas .fea:last-child{
    margin:0;
}
.mainWrap .mainBox .download_phone{
    width:78.84vw;
}


/* functionWrap */
.functionWrap{
    position:relative;
    z-index: 22;
}
.functionWrap .functionWrapTitle{
    font-size:48px;
    color:#3D4357;
    text-align: center;
    margin-bottom:67px;
    padding-top:65px;
    /* background-color: #E5FBE5; */
}
.functionWrap .functionWrapTitle:after{
    content:" ";
    display:block;
    height:12px;
    width:60px;
    background:#B6ED5B;
    border-radius: 11px;
    margin:16px auto 0 auto;
}
.functionWrap .functionBox{
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:128px 0 124px 0;
}
.functionWrap .functionBox img.mobile{
    max-width:438px;
}
.functionWrap .functionBox .functionDescBox{
    margin-top:-140px;
    max-width:520px;
    position:relative;
}
.functionWrap .functionBox .functionDescBox .functionDescTitleShadow{
    position:absolute;
    left:-41px;
    top:-20px;
    z-index: 11;
    color:#D5EFEC;
    font-size:72px;
    opacity: 0.32;
}
.functionWrap .functionBox .functionDescBox .functionDescTitle{
    color:#126180;
    font-size:40px;
    margin-bottom:12px;
    font-weight: bold;
    position:relative;
    z-index: 22;
}
.functionWrap .functionBox .functionDescBox .functionDescSubTitle{
    color:#6BCBBA;
    font-size:30px;
    font-weight: bold;
    margin-bottom:12px;
    position:relative;
    z-index: 22;
}
.functionWrap .functionBox .functionDescBox p{
    color:#666;
    font-size:20px;
    line-height:37px;
    margin:0;
    /* position:relative;
    z-index: 22; */
}
.functionWrap2{
    position:relative;
    padding-top:24px;
    background-image:url("../images/bg_piece.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size:545px auto;
}
.functionWrap2:before{
    content:" ";
    display:block;
    width:644px;
    height:1357px;
    position:absolute;
    z-index: 11;
    right:0;
    top:287px;
    background-color: #E5FBE5;
    opacity: 0.55;
}
.functionWrap2 .functionBox:nth-child(1){
    margin-bottom:117px;
}
.functionWrap4{
    /* position:relative;
    padding:152px 0 114px 0; */
    background-image:url("../images/bg_piece2.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size:100% auto;
}

/* downloads */

.bodyWrap.agreementWrap{
    display:block;
    background: #FAFAFA;
    box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.25);
    padding-top:80px;
    height:auto;
    padding-bottom:72px;
}
.agreement{
    max-width: 1440px;
    margin: 0 auto;
    line-height:24px;
    padding:0 16px;
}
.agreement .title{
    text-align: center;
    font-size:32px;
    color:#30284F;
    font-weight: bold;
    margin-bottom:80px;
}
.agreement p{
    font-size:16px;
    color:#30284F;
    line-height:24px ;
    margin-bottom:24px;
    
    text-align: justify;
    word-break: break-all;
    
    word-wrap: break-word;
}
.agreement p a{
    color:#007AFF;
    
    text-align: justify;
    word-break: break-all;
}
.agreement .subtitle{
    font-size:24px;
    color:#30284F;
    margin-bottom:24px;
    font-weight: bold;
}
.downloads{
    display:flex;
    align-items: center;
    justify-content: center;
}
.downloads .btn{
    text-decoration: none;
    border-radius: 22px;
    background-color: #fff;
    /* padding:9px 20px; */
    padding:1.4vh 1.75vw;
    margin-right:30px;

    /* font-size:16px; */
    font-size:1.4vw;
    color:#000;
}
.downloads .btn:last-child{
    margin:0;
}
.downloads .btn.ios{
    background-image:url("../images/icon_ios.png");
    background-repeat: no-repeat;
    background-position:1.14vw center;
    background-size:2.63vw;
    padding-left:4.2vw;
}
.downloads .btn.android{
    background-image:url("../images/icon_android.png");
    background-repeat: no-repeat;
    /* background-position:13px center; */
    /* background-size:30px;
    padding-left:48px; */
    background-position:1.14vw center;
    background-size:2.63vw;
    padding-left:4.2vw;
}
.downloads .btn .subtitle{
    color:#fff;
    font-size:16px;
    text-align: left;
}
.downloads .btn .btntitle{
    color:#fff;
    font-size:20px;
    font-weight: bold;
    text-align: left;
} 

@media (max-width: 600px) {  
    .downloads .btn{
        text-decoration: none;
        border-radius: 16px;
        background-color: #000;
        padding:6.1vw 2.5vw;
        margin-right:3.8vw;
    }
    .downloads .btn:last-child{
        margin:0;
    }
    .downloads .btn.ios{
        background-image:url("../images/icon_ios.png");
        background-repeat: no-repeat;
        background-position:24px center;
        background-size:35px 43px;
        padding-left:75px;
    }
    .downloads .btn.android{
        background-image:url("../images/icon_android.png");
        background-repeat: no-repeat;
        background-position:6.1vw center;
        background-size:7.6vw auto;
        padding-left:15.7vw;
    }
    .downloads .btn .subtitle{
        color:#fff;
        font-size:3vw;
        text-align: left;
    }
    .downloads .btn .btntitle{
        color:#fff;
        font-size:4.1vw;
        font-weight: bold;
        text-align: left;
    }
    .mainWrap .mainBox{
        min-height:100vh;
    }
    .mainWrap .mainBox .textpic{
        margin-bottom:2.6vh;
    }
    .download_phone{
        margin-bottom:8vw;
    }
}

/* footer */
.footer{
    text-align: center;
    padding-top:88px;
    padding-bottom:77px;
    background: #333;
}
.footer .logo{
    display:inline-block;
    background:url("../images/logo.png") no-repeat left center;
    background-size:50px;
    padding-left:58px;
    min-height:50px;
    font-size:21px;
    color:#fff;
    line-height:50px;
    margin-bottom:62px;
    /* line-height:60px; */
    /* font-size:32px; */
    /* color:#72A8E7; */
}
.footer .downloads{
    margin-bottom:62px;
}
.footer .copyright{
    color:#fff;
    font-size:18px;
    text-align: center;
}
.footer .beian{
    color:#fff;
    font-size:18px;
    text-decoration: none;
}

/*下载页*/

.downloadBody{
    min-height:100vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.downloadBody .logo{
    /* display:flex;
    justify-content: center;
    flex-direction: column; */
}
.downloadBody .logo img{
    width:20vw;
    height:20vw;
}
.downloadBody .logo .txt{
    font-family: 5.333vw;
    font-weight: bold;
    text-align: center;
}
.downloadBody .downloadBox .btn{
    display:block;
    width:78.666vw;
    /* height:5.172vh; */
    height:11.2vw;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:4.53vw;
    border-radius: 60px;
    text-decoration: none;
}
.downloadBody .downloadBox .btn1{
    background: #7E96E9;
    color:#fff;
    margin-bottom:1.97vh;
}
.downloadBody .downloadBox .btn2{
    color:#7E96E9;
    background-color: #fff;;
    border:2px solid #7E96E9;
} 
.downloadBody .downloadBox .btn2.hide{
    display:none;
}
.downloadBody .descBox p{
    max-width:80.66vw;
    color:#979797;
    font-size:3.2vw;
    text-align: center;
}
.downloadBody.friend{
    background:url(../images/foam.png) no-repeat;
    background-size:100% auto;
    
    justify-content: space-evenly;
}
.downloadBody .friendTxt{
    font-size: 6vw;
    font-weight: bold;
    background: linear-gradient(to right, #ff0000, #ffff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    max-width:51.33vw;
}
.downloadBody .trBox{
    width:72.13vw;
    position:relative;
}
.downloadBody .trBox .trBg{
    width:100%;
}
.downloadBody .trBox .tr1{
    position:absolute;
    /* background:red; */
    width: 96.67%;
    height: 31.59%;
    right:0;
    top:0;
    /* padding: 10.89% 9.7%; */
    padding: 0 9.7%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    /* x51 y57 */
    font-size: 5.33vw;
    color:#393939;
}
.downloadBody .trBox .tr2{
    position:absolute;
    /* background:blue; */
    width: 96.67%;
    height: 33.33%;
    right:0;
    top:31.59%;
    padding: 0 9.7%;
    display:flex;
    /* justify-content: center; */
    align-items: center;
    font-size: 4.8vw;
    color:#000;
}
.wxtip{
    width:100%;
    background:#393939 url(../images/arrow.png) no-repeat right 5vw top 2.4vw;
    background-size:5.8vw auto;
    padding:6.666vw 11.6vw 8.53vw 5.46vw;
    color:#979797;
    font-size:4.266vw;
    display:none;
    top:0;
    left:0;
    position:fixed;
}
.wxtip.show{
    display:block;
}