/*从下到上的动画*/
.topActive{
    animation: fadeInUp 0.8s both;
}
.leftActive{
    animation: fadeInLeft 2s both;
}
.rightActive{
    animation: fadeInRight 2s both;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0 , 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0 , 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}
@media only screen and (max-width: 500px) {
    .box1{
        opacity: 1;
    }

    .box2{
        opacity: 1;
    }

    .box3{
        opacity: 1;
    }

    .box4{
        opacity: 1;
    }

    .box5{
        opacity: 1;
    }

    .box6{
        opacity: 1;
    }

    .box7{
        opacity: 1;
    }

    .box8{
        opacity: 1;
    }

    .index_section{
        display: none;
    }
    .dialog-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 90%;
        height: 280px;
        background: #FFFFFF;
    }
    .dialog-top{
        width:90%;
        height: 60px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .dialog-content{
         width:90%;
         height: 180px;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
     }
}
@media only screen and (min-width: 501px) and (max-width: 860px) {
    .box1{
        opacity: 1;
    }

    .box2{
        opacity: 1;
    }

    .box3{
        opacity: 1;
    }

    .box4{
        opacity: 1;
    }

    .box5{
        opacity: 1;
    }

    .box6{
        opacity: 1;
    }

    .box7{
        opacity: 1;
    }

    .box8{
        opacity: 1;
    }

    .index_section{
        display: none;
    }


}
@media only screen and (min-width: 861px)and (max-width: 1023px){
    .box1{
        opacity: 1;
    }

    .box2{
        opacity: 1;
    }

    .box3{
        opacity: 1;
    }

    .box4{
        opacity: 1;
    }

    .box5{
        opacity: 1;
    }

    .box6{
        opacity: 1;
    }

    .box7{
        opacity: 1;
    }

    .box8{
        opacity: 1;
    }

    .index_section{
        display: none;
    }
}
@media only screen and (min-width: 1024px)and (max-width: 1280px){
    .box1{
        opacity: 1;
    }

    .box2{
        opacity: 1;
    }

    .box3{
        opacity: 1;
    }

    .box4{
        opacity: 1;
    }

    .box5{
        opacity: 1;
    }

    .box6{
        opacity: 1;
    }

    .box7{
        opacity: 1;
    }

    .box8{
        opacity: 1;
    }

    .index_section{
        display: none;
    }
    .dialog-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 1007px;
        height: 629px;
        background: #FFFFFF;
    }
    .dialog-top{
        width: 925px;
        height: 95px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }.dialog-content{
         width: 925px;
         height: 498px;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
     }
}
@media only screen and (min-width: 1281px) and (max-width: 1500px){
    .box1{
        opacity: 0;
    }
    .box1_active{
        opacity: 1;
    }
    .box1_item2{
        opacity: 0;
    }
    .box2{
        opacity: 0;
    }
    .box2_active{
        opacity: 1;
    }
    .box3{
        opacity: 0;
    }
    .box3_active{
        opacity: 1;
    }
    .box4{
        opacity: 0;
    }
    .box4_active{
        opacity: 1;
    }
    .box5{
        opacity: 0;
    }
    .box5_active{
        opacity: 1;
    }
    .box6{
        opacity: 0;
    }
    .box6_active{
        opacity: 1;
    }
    .box7{
        opacity: 0;
    }
    .box7_active{
        opacity: 1;
    }
    .box8{
        opacity: 0;
    }
    .box8_active{
        opacity: 1;
    }

    .index_section{
        position: fixed;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
        z-index: 1000;
    }
    .index_section li{
        display: block;
        width: 14px;
        height: 13px;
        margin: 7px;
        list-style: none;
        position: relative;
        cursor: pointer;
    }
    .index_section_item_yuan{
        width: 4px;
        height: 4px;
        background: #000000;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .index_section_item_active .index_section_item_yuan{
        width: 12px;
        height: 12px;
    }
    li:hover .index_section_item_yuan{
        width: 12px;
        height: 12px;
    }
    .index_section_item_active .index_section_item_text{
          transition: opacity 0.5s ease-in;;
        width: auto;
        opacity:1
    }
    li:hover .index_section_item_text{
          transition: opacity 0.5s ease-in;;
        width: auto;
        opacity:1
    }
    li:nth-child(1)>.index_section_item_text{
        right: -38px;
    }
    li:nth-child(6)>.index_section_item_text{
        right: -79px;
    }
    .index_section_item_text{
        box-sizing: border-box;
        color: #282828;
        font-size: 14px;
        opacity: 0;
        position: absolute;
        right: -65px;
        top:-4px
    }
    .dialog-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 1007px;
        height: 629px;
        background: #FFFFFF;
    }
    .dialog-top{
        width: 925px;
        height: 95px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }.dialog-content{
         width: 925px;
         height: 498px;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
     }
}
@media only screen and (min-width: 1501px) and (max-width: 1700px){
    .box1{
        opacity: 0;
    }
    .box1_active{
        opacity: 1;
    }
    .box1_item2{
        opacity: 0;
    }
    .box2{
        opacity: 0;
    }
    .box2_active{
        opacity: 1;
    }
    .box3{
        opacity: 0;
    }
    .box3_active{
        opacity: 1;
    }
    .box4{
        opacity: 0;
    }
    .box4_active{
        opacity: 1;
    }
    .box5{
        opacity: 0;
    }
    .box5_active{
        opacity: 1;
    }
    .box6{
        opacity: 0;
    }
    .box6_active{
        opacity: 1;
    }
    .box7{
        opacity: 0;
    }
    .box7_active{
        opacity: 1;
    }
    .box8{
        opacity: 0;
    }
    .box8_active{
        opacity: 1;
    }

    .index_section{
        position: fixed;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
        z-index: 1000;
    }
    .index_section li{
        display: block;
        width: 14px;
        height: 13px;
        margin: 7px;
        list-style: none;
        position: relative;
        cursor: pointer;
    }
    .index_section_item_yuan{
        width: 4px;
        height: 4px;
        background: #000000;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .index_section_item_active .index_section_item_yuan{
        width: 12px;
        height: 12px;
    }
    li:hover .index_section_item_yuan{
        width: 12px;
        height: 12px;
    }
    .index_section_item_active .index_section_item_text{
          transition: opacity 0.5s ease-in;;
        width: auto;
        opacity:1
    }
    li:hover .index_section_item_text{
          transition: opacity 0.5s ease-in;;
        width: auto;
        opacity:1
    }
    li:nth-child(1)>.index_section_item_text{
        right: -38px;
    }
    li:nth-child(6)>.index_section_item_text{
        right: -79px;
    }
    .index_section_item_text{
        box-sizing: border-box;
        color: #282828;
        font-size: 14px;
        opacity: 0;
        position: absolute;
        right: -65px;
        top:-4px
    }
    .dialog-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 1007px;
        height: 629px;
        background: #FFFFFF;
    }
    .dialog-top{
        width: 925px;
        height: 95px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }.dialog-content{
         width: 925px;
         height: 498px;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
     }
}
@media only screen and (min-width: 1701px){
    .box1{
        opacity: 0;
    }
    .box1_active{
        opacity: 1;
    }
    .box1_item2{
        opacity: 0;
    }
    .box2{
        opacity: 0;
    }
    .box2_active{
        opacity: 1;
    }
    .box3{
        opacity: 0;
    }
    .box3_active{
        opacity: 1;
    }
    .box4{
        opacity: 0;
    }
    .box4_active{
        opacity: 1;
    }
    .box5{
        opacity: 0;
    }
    .box5_active{
        opacity: 1;
    }
    .box6{
        opacity: 0;
    }
    .box6_active{
        opacity: 1;
    }
    .box7{
        opacity: 0;
    }
    .box7_active{
        opacity: 1;
    }
    .box8{
        opacity: 0;
    }
    .box8_active{
        opacity: 1;
    }

    .index_section{
        position: fixed;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
        z-index: 1000;
    }
    .index_section li{
        display: block;
        width: 14px;
        height: 13px;
        margin: 7px;
        list-style: none;
        position: relative;
        cursor: pointer;
    }
    .index_section_item_yuan{
        width: 4px;
        height: 4px;
        background: #000000;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .index_section_item_active .index_section_item_yuan{
        width: 12px;
        height: 12px;
    }
    li:hover .index_section_item_yuan{
        width: 12px;
        height: 12px;
    }
    .index_section_item_active .index_section_item_text{
          transition: opacity 0.5s ease-in;;
        width: auto;
        opacity:1
    }
    li:hover .index_section_item_text{
          transition: opacity 0.5s ease-in;;
        width: auto;
        opacity:1
    }
    li:nth-child(1)>.index_section_item_text{
        right: -38px;
    }
    li:nth-child(6)>.index_section_item_text{
        right: -79px;
    }
    .index_section_item_text{
        box-sizing: border-box;
        color: #282828;
        font-size: 14px;
        opacity: 0;
        position: absolute;
        right: -65px;
        top:-4px
    }
    .dialog-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 1007px;
        height: 629px;
        background: #FFFFFF;
    }
    .dialog-top{
        width: 925px;
        height: 95px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }.dialog-content{
         width: 925px;
         height: 498px;
         margin: 0 auto;
         position: relative;
         overflow: hidden;
     }
}