

.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 .largetext{
    font-size:4.5em;
    background: linear-gradient(#8DD9CC, #44A2C6);
    font-weight: bold;
    /* 关键属性：将背景裁剪为文字形状 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 将文字设为透明，露出背景 */
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    
    /* 防止渐变重复 */
    background-size: 100%;
    background-repeat: repeat;
}
.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.29em;
    color:#fff;
    margin-right:34px;
    letter-spacing: 0.5em;

}
.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:3.4em;
    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{
    display:flex;
    align-items: center;
    justify-content: center;
}
.downloads .btn{
    text-decoration: none;
    border-radius: 22px;
    background-color: #fff;
    /* padding:9px 20px; */
    padding:0.6em 0.86em;
    margin-right:30px;

    /* font-size:16px; */
    font-size:1.14em;
    color:#000;
}
.downloads .btn:last-child{
    margin:0;
}
.downloads .btn.ios{
    background-image:url("../images/icon_ios.png");
    background-repeat: no-repeat;
    background-position:0.86em center;
    background-size:2.14em;
    padding-left:3.5em;
}
.downloads .btn.android{
    background-image:url("../images/icon_android.png");
    background-repeat: no-repeat;
    background-position:0.86em center;
    background-size:2.14em;
    padding-left:3.5em;
}
.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) {  
    .mainWrap{
        padding:7em 0;
    }
    .mainWrap .mainBox {
        flex-direction: column-reverse;
    }
    .mainWrap .mainBox .largetext{
        font-size:3em;
        margin-bottom:0.5em;
    }
    body{
        font-size: 3.7vw;
    }
    .mainWrap .mainBox .leftBox{
        margin-right:0;
    }
    .wrapbox{
        max-width: unset;
    }
    .mainWrap .mainBox .feas .fea{
        word-break: normal;
        word-break: break-all;
        word-break: keep-all;
        word-break: break-word;
    }
    .downloads{
        flex-direction: column;
    }
    .downloads .btn{
        margin-right:0;
        margin-bottom:1em;
        width: 80vw;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .functionWrap{
        padding: 0 1em;
    }
    
    .functionWrap .functionBox{
        flex-direction: column;
    }
    .functionWrap:nth-child(even) .functionBox{
        flex-direction: column-reverse;
    }
    .functionWrap .functionBox .functionDescBox{
        margin-top:0;
    }
    .functionWrap .functionBox img.mobile{
        width:100%;
    }
    .functionWrap .functionWrapTitle{
        font-size:2.5em
    }
    
}
