.index-box1{

    background-image:url("../images/banner.html");

    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:#404040;

    font-size:16px;

    outline: none;

    margin-bottom:10px;

    background:#fff;

    cursor:pointer;

}

.home-maintitle-bottom button:hover{

    color:#333;

    background:#fff;

}

.index-title1 span{

    font-size:35px;

}

.index-title1 p{

    font-size:16px;

}

.scan-box1{

    height:600px;

    display:flex;

    align-items: center;

    justify-content:center;

}

.scan-box1 img{

    width:650px;

    margin-right:50px;

}

.scan-box1 .content-right{

    width:300px;

}

.scan-box1 .content-right p{

    height:120px;

    line-height:120px;

    background-image:url("../images/%c3%a6%c2%96%c2%87%c3%a5%c2%ad%c2%97%c3%a8%c2%83%c2%8c%c3%a6%c2%99%c2%af%402x.html");

    background-size:100% 100%;

    font-size:30px;

}

.scan-box1 .content-right span{

    font-size:16px;

    color:#777;

    line-height:50px;

}

.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:700px;

    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;

    transform: scale(1.2);

    animation:ltr .8s ease-in-out;

}

.task-box2-content .content-right{

    width:500px;

    height:480px;

    display:flex;

    flex-direction: column;

    justify-content: center;

}

.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:16px;

    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:20px !important;

    font-weight:500;

    color:#333 !important

}

.info i{

    font-style: normal;

}

.taskbox2-checked .info p i{

    color:#78a9ff !important

}

.task-box3{

    /* height:550px; */

    background:#f7f7fc;

    padding-top:70px;

    box-sizing:border-box;

}

.taskbox3-content{

    display:flex;

    width:1200px;

    margin:50px auto;

    flex-wrap: wrap;

    justify-content: center;

}

.taskbox3-content li{

    width:300px;

    height:240px;

    box-sizing: border-box;

    display:flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}

.taskbox3-content li img{

    width:44px;

    margin-bottom:20px;

}

.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;

    margin:0 95px;

}

.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;

}

.flex1{

    flex:1;

}

.scan-box6{

    padding:70px 0;

}

.scanbox6-content{

   

    height:720px;

    background-image:url("../images/%c3%a7%c2%bb%c2%84823%402x.html");

    background-position:center center;

    background-repeat: no-repeat;

    background-size:100% 300px;

   

}

.scanbox6-content .tab{

    width:1200px;

    height:720px;

    margin:50px auto;

    background:rgba(255,255,255,1);

    box-shadow:0px 0px 16px rgba(3,0,91,0.1);

    opacity:1;

    border-radius:10px;

    padding:50px 200px 0;

    box-sizing: border-box;

    display:flex;

    align-items: center;

    flex-direction: column;

}

.scanbox6-content .tab .nav{

    height:50px;

    box-shadow:0px 0px 16px rgba(3,0,91,0.1);

    display:flex;

    border-radius:10px;

}

.scanbox6-content .tab .nav li{

    width:400px;

    font-size:22px;

    line-height:50px;

    cursor:pointer;

    text-align:center;

    position: relative;

}

.scanbox6-content .tab .nav li:first-of-type{

    border-radius:10px 0 0 10px;

}

.scanbox6-content .tab .nav li:last-of-type{

    border-radius:0px 10px 10px 0px;

}

.scanbox6-content .tab .nav li::after{

    content:"";

    position:absolute;

    border:10px solid transparent;

    border-top-color:#78a9ff;

    top:100%;

    left:50%;

    display:none;

}

.scanbox6-content .tab .nav li.check{

    background:#78a9ff;

    color:#fff;

}

.scanbox6-content .tab .nav li.check::after{

    display:block;

}

.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/scan_code.html");

    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;

}