.index-box1{
    background-image:url("../images/banner_cp.png");
    position: relative;
}
.home-maintitle{
    position: absolute;
    width:600px;
    height: 250px;
    top:100px;
    left:12%;

    /* display:flex; */
    /* justify-content: center; */
    /* align-items: center;
    flex-direction: column; */
    color:#fff;
    /* text-align:center; */

}
.home-maintitle-top{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* text-align: center; */
    width:100%;
    margin:0 auto 50px;
}
.home-maintitle-top p{
    font-size:20px;
    margin:20px 0;
}
.home-maintitle-top p span{
    color:#FFCE70;
}
.home-maintitle-bottom button{
    height:40px;
    width:100px;
    border-radius:40px;
    border:none;
    color:#fff;
    font-size:16px;
    outline: none;
    margin-bottom:10px;
    background:#78A9FF;
    cursor:pointer;
}

.index-title1 span{
    font-size:35px;
}
.index-title1 p{
    font-size:16px;
}


.task-box1{
    /* height:550px; */
    width:100%;
    padding:70px 0;
    box-sizing:border-box;
    background:#fff;
    text-align:center;
}

.task-box11{
    /* height:550px; */
    width:100%;
    padding:70px 0;
    box-sizing:border-box;
    background:#f5f6f9;
    text-align:center;
}

.task-box1-content{
    margin-top:30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.task-box1-content img{
    margin: 50px auto;
}
/* .task-box1-content .content-left{
    margin-right:100px;
}
.task-box1-content .content-left li{
    line-height:60px;
    font-size:22px;

} 
.task-box1-content .content-left li img{
    vertical-align: text-bottom;
    margin-right:10px;
    width:26px;
    height:26px;
} */

.task-box2{
    box-sizing:border-box;
    height:750px;
    width:100%;
    padding-top:70px;
    background:#f7f7fc
}
.task-box2-content{
    margin-top:50px;
    justify-content: center;
    display:flex;
    align-items: center;
    height:500px;
}

@keyframes rtl{
    0%{
        right:-200px
    }
    100%{
        right:0;
    }
}
@keyframes ltr{
    0%{
        left:-200px
    }
    100%{
        left:0;
    }
}

.task-box2-content .content-left{
    width:850px;
    height:480px;
    margin-right:50px;
    
}
.task-box2-content .content-left .pic-box{
    width:100%;
    height:100%;
    background-size:auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    animation:ltr .8s ease-in-out;
    transform:scale(1.1)
}

.task-box2-content .content-left .pic-box:first-of-type,.task-box2-content .content-left .pic-box:last-of-type{
    transform: scale(1);
}

.task-box2-content .content-right{
    width:400px;
    height:480px;
}
.task-box2-content .content-right li{
    padding:5px 0;
    display:flex;
    margin-bottom:30px;
    position: relative;
    cursor:pointer;
}
.task-box2-content .content-right li .info p{
    color:#777;
    font-weight:700;
    font-size:20px;
    margin-bottom:12px;
}
.task-box2-content .content-right li .info span{
    color:#aaa;
    font-size:14px;
}
.task-box2-content .content-right li .order{
    margin-right:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:40px;
    /* justify-content: center; */
}
.task-box2-content .content-right li .order img{
    width:28px;
    height:25px;
}
.task-box2-content .content-right li:not(:last-of-type)::after{
    content:"";
    display: inline-block;
    width:0;
    height:0;
    border:6px solid transparent;
    border-top-color:#78A9FF;
    margin-top:20px;
    left: 12px;
    position: absolute;
    bottom:0;
}

.task-box2-content .content-right li:not(:first-of-type)::before{
    content:"";
    display: inline-block;
    width:0;
    height:0;
    border:6px solid transparent;
    border-top-color:#78A9FF;
    position: absolute;
    left:12px;
    top:-10px;
}
.task-box2-content .content-right li:nth-of-type(1)::after,.task-box2-content .content-right li:nth-of-type(2)::before{
    border-top-color:#78a9ff;
}
.task-box2-content .content-right li:nth-of-type(2)::after,.task-box2-content .content-right li:nth-of-type(3)::before{
    border-top-color:#7ca2f6;
}
.task-box2-content .content-right li:nth-of-type(3)::after,.task-box2-content .content-right li:nth-of-type(4)::before{
    border-top-color:#8690f0;
}
.task-box2-content .content-right li:nth-of-type(4)::after,.task-box2-content .content-right li:nth-of-type(5)::before{
    border-top-color:#9970e5;
}

.taskbox2-checked .order img{
    width:45px !important;
    height:41px !important;
}
.taskbox2-checked .info p{
    font-size:26px !important;
    font-weight:bolder;
}



.task-box3{
    /* height:550px; */
    background:#f7f7fc;
    padding-top:70px;
    box-sizing:border-box;
}

.taskbox3-content{
    display:flex;
    max-width:1200px;
    margin:50px auto;
    flex-wrap: wrap;
    justify-content: center;
}
.taskbox3-content li{
    width:300px;
    height:200px;
    box-sizing: border-box;

    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.taskbox3-content li img{
    width:44px;
    /* height:60px; */
    margin-bottom:10px;
}
.taskbox3-content li p{
    /* font-weight:bolder; */
    font-size:20px;
    margin:10px;
}
.taskbox3-content li span{
    color:#777;
    font-size:16px;
}


.task-box4{
    /* height:550px; */
    width:100%;
    padding:70px 0 50px 0;
}
.taskbox4-content{
    margin-top:50px;
    /* width:80%; */
    height:780px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.taskbox4-content .content-left,.taskbox4-content .content-right{
    width:280px;
    height:540px;
    background:#f7f7fc;
    display:flex;
    flex-direction: column;
}
.task-box4 .content-center{
    width:405px;
    height:780px;
    position: relative;
    margin:0 95px;
    padding:25px;
    box-sizing:border-box;
}
.phone-mask{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;    
}

.award-type{
    flex:1;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.award-type p{
    font-size:24px;
    margin-bottom:10px;
    color:#3b4b5b
}
.award-type p img{
    width:30px;
    height:30px;
    vertical-align: sub;
    margin-right:10px;
}
.award-type span{
    line-height:24px;

    color:#687d9f;
    font-size:16px;
}
.award-type-checked{
    background:#78A9FF
}
.award-type-checked *{
    color:#fff !important;
}



.task-box5{
    height:525px;
    background-image:url("../images/背景1@2x.png");
    background-size:100% 100%;
    margin-bottom:400px;
}
.task-box5-title{
    color:#fff;
    padding-top:50px;
    text-align:center;
    height:80px;
}
.task-box5-title span{
    font-size:37px;
}
.task-box5-title p{
    font-size:20px;
}

.taskbox5-content{
    display:flex;
    justify-content: center;
    align-items: center;
    height:650px;
    margin-top:30px;
}
.taskbox5-content .content-left{
    height:600px;
    width:350px;
    background-image:url("../images/box5bg.png");
    background-size:100% 100%;
}
.taskbox5-content .content-left ul{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    box-sizing:border-box;
    padding:30px 0;
    border-radius:10px;

}
.taskbox5-content .content-left ul>li{
    color:#fff;
    margin:20px 0;
    cursor:pointer;
}
.taskbox5-content .content-left ul .li-nav {
    padding-left:50px;
    box-sizing:border-box;
    height:40px;
    line-height:40px;
}
.taskbox5-content .content-left ul .li-nav img{
    width:30px;
    height:30px;
    vertical-align: text-bottom;

}
.taskbox5-content .content-left ul .li-nav span{
    font-size:20px;
    color:#fff;
}
.data{
    display:none;
}
.data li p{
    color:#78a9ff;
    font-size:16px;
}
.data li:first-of-type p{
    font-weight:500;
    color:#333;
}
.data li span{
    color:#777;
    font-size:12px;
}
.nav-wrap{
    height:auto;
    padding:10px 0;
}
@keyframes heightMove{
    0%{
        height:50px;
        opacity: 0.4;
    }
    100%{
        height:120px;
        opacity:1
    }
}

.li-check .nav-wrap{
    height:100px;
}
.li-check{
    box-sizing: border-box;
    border-left:5px solid purple;
    animation:heightMove .5s linear;
    overflow: hidden;
}
.li-check .data{
    display:flex;
    height:60px;
    align-items: center;
}
.li-check .data li{
    width:33.33%;
    text-align:center;
}
.li-check{
    background:#fff;
    color:#333 !important;
}
.li-check .li-nav span{
    color :#333 !important
}

.taskbox5-content .content-right{
    height:650px;
    width:851px;
    background:#fff;
    box-shadow:0px 0px 16px rgba(3,0,91,0.16);
    border-radius:10px;
    box-sizing:border-box;
    padding:45px;
}
.taskbox5-content .content-right>li:not(:first-of-type){
    display:none;
}
.taskbox5-content .content-right>li .content-head{
    align-items: center;
}
.taskbox5-content .content-right>li .content-head p{
    font-size:24px;
    font-weight:bold;
    text-align: center;
}
.taskbox5-content .content-right li>div{
    display:flex;
    margin:20px 0;
}
.taskbox5-content .content-right li>div .left{
    width:150px;
    text-align: right;
    margin-right:20px;
    font-weight:bold;
    color:#333;
}
.follow .left,.active-data .left{
    line-height:30px;
}
.follow .flex1,.active-data .flex1{
    font-size:14px;
    color:#777;
    line-height:30px;
}
.norm .left span,.count .left span{
    display:inline-block;
    text-align: center;
    width:122px;
    height:30px;
    line-height:30px;
    background-size:100% 100%;
    font-size:16px;
    font-weight:normal;
    color:#fff;
}
.norm .left span{
    background-image:url("../images/路径 522@2x.png");
}
.count .left span{
    background-image:url("../images/路径 522@2x.png");
}
.norm ol,.count ol{
    display:flex;
    justify-content: space-around;
}
.norm ol li,.count ol li{
    display:flex;
    flex-direction: column;
    align-items: center;
}
.norm ol li img,.count ol li img{
    margin-bottom:10px;
    width:30px;
    height:30px;
}
.norm ol li span,.count ol li span{
    font-weight:700;
    font-size:14px;
    line-height:30px;
}



/*盒子6服务支持*/
.task-box6{
    width:100%;
    height:550px;
    padding-top:0px;
}
.taskbox6-content{
    display:flex;
    justify-content: center;
    margin-top:50px;
}
.taskbox6-content li{
    width:250px;
    height:300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow:0px 0px 20px rgba(3,0,91,0.1);
    border-radius: 10px;
    margin-right:20px;
}
.taskbox6-content li img{
    width:85px;

    margin-bottom:50px;
}
.taskbox6-content li p{
    font-size:20px;
    line-height:50px;
}
.taskbox6-content li span{
    color:#777;
    font-size:16px;
}

.flex1{
    flex:1;
}





.home-maintitle-bottom button:nth-of-type(2){
    margin-left:30px;
    background:#fff;
    color:#409eff;
    position:relative;
}
.home-maintitle-bottom button:nth-of-type(2)::after{
    content:"微信扫码体验";
    position:absolute;
    border-radius:3px;
    right:-180px;
    top:-30px;
    width:150px;
    height:180px;
    color:#777;
    padding:150px 10px 0 10px;
    background:#fff;
    box-sizing:border-box;
    background-image:url("../images/task_code.png");
    background-size:150px 150px;
    background-repeat:no-repeat;
    transition:all .3s linear;
    opacity:0
}
.home-maintitle-bottom button:nth-of-type(2):hover::after{
    opacity:1;
}
.task-box6 {
    height: 800px;
    background: rgba(247,247,252,1);
    /* padding-top: 70px; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-box6 .content-left {
    /* width: 400px; */
    position: relative;
    width: 600px;
    height: 500px;
}
.task-box6 .content-right{
    /* margin-left: 100px; */
    width: 340px;
    margin-left: 0;
    margin-right: 170px;
}
.task-box6 .content-right strong{
    font-size: 25px;
    color: rgba(51,51,51,1);
}
.task-box6 .content-right p{
    margin: 50px auto 40px auto;
    font-size: 16px;
    line-height: 35px;
    color: rgba(119,119,119,1);
}
.task-box6 .content-right>span{
    font-size: 14px;
    color: rgba(170,170,170,1);
    display: flex;
    align-items: flex-start;
}
.task-box6 .content-right>span img{
    vertical-align: middle;
    margin-right: 5px;
}
.task-box6 .content-left img{
    position: absolute;
}









@media screen and (max-width: 750px){

.solution-list{ display: inline-block; }
.solution{ display: inline-block; width: 96%; margin: 2%; float: left; text-align: center; height: auto; padding:5% 2%; }
.solution:nth-of-type(odd){ bottom:0px; }
.solution::before{ display: none; }
.solution-list{ height:auto; }
.task-box1-content img{ width: 98%!important; margin:1%; }




.task-box4 .content-center{display: none}
.task-box6{ width: 90%; padding:5%; }
.task-box6 .content-left{display: none}
.task-box6{ height: auto; display: inline-block; padding:5% 5%;  }
.task-box5{ display: none }

.index5-menu1 li{ width: 50%; height: 280px; }

.index-box5{ height: 660px!important; }
.home-maintitle-bottom button:nth-of-type(2)::after{ display: none; }

}



@media screen and (max-width: 480px){
    .index-box1{background: url(../images/index-bg1.jpg) no-repeat;
    background-position: left;}
.taskbox4-content{ margin-top: 10px;  display: inline-block; }
.taskbox4-content .content-left, .taskbox4-content .content-right{ width: 100%; height: auto; display: inline-block;}
.award-type{ width: 96%; text-align:center; display: inline-block; padding:10% 2%; height: auto; flex: none}

.taskbox4-content .award-type:nth-child(4){background: #78A9FF;}
.task-box6 .content-right{ width: 90%; margin-right: 0px; }


.home-maintitle{ width: auto; left: 4%; width: 92%;}
.home-maintitle-bottom{ width: auto; left: 4%; width: 92%; text-align: center;}
.home-maintitle-top{ width: 100%; }
.home-maintitle-top img{ width: 100%;}
}