.wo-img{
    opacity: 0;
}
.wo-content_bg{
    position: absolute;
    left: 15px;
    top: 0;
    right: 15px;
    height: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.wo-w{
    pointer-events: none;
}
.wo-content1_bg{
    background-image: url(../images/img1/wo1.jpg);
}
.wo-content1_1_bg{
    background-image: url(../images/img1/wo2.jpg);
}
.wo-content2_bg{
    background-image: url(../images/img1/wo3.jpg);
}
.wo-content2_1_bg{
    background-image: url(../images/img1/wo6.jpg);
}
.wo-content3_bg{
    background-image: url(../images/img1/wo4.jpg);
}
.wo-content3_1_bg{
    background-image: url(../images/img1/wo5.jpg);
}


.runanimstart.left{
    animation: animdvstart_left_run 1s;
    -webkit-animation: animdvstart_left_run 1s; /* Safari 与 Chrome */
    -moz-animation:animdvstart_left_run 1s;
    -ms-animation:animdvstart_left_run 1s;
    -o-animation:animdvstart_left_run 1s;
}
.runanimstart.right{
    animation: animdvstart_right_run 1s;
    -webkit-animation: animdvstart_right_run 1s; /* Safari 与 Chrome */
    -moz-animation:animdvstart_right_run 1s;
    -ms-animation:animdvstart_right_run 1s;
    -o-animation:animdvstart_right_run 1s;
}
.runanimstart.up{
    animation: animdvstart_up_run 1s;
    -webkit-animation: animdvstart_up_run 1s; /* Safari 与 Chrome */
    -moz-animation:animdvstart_up_run 1s;
    -ms-animation:animdvstart_up_run 1s;
    -o-animation:animdvstart_up_run 1s;
}
.runanimstart.big{
    animation: animdvstart_big_run 1s;
    -webkit-animation: animdvstart_big_run 1s; /* Safari 与 Chrome */
    -moz-animation:animdvstart_big_run 1s;
    -ms-animation:animdvstart_big_run 1s;
    -o-animation:animdvstart_big_run 1s;
}
.play1.scale>.wo-content_bg:hover{
    animation: animdvstart_imgbig_run 1s;
    -webkit-animation: animdvstart_imgbig_run 1s; /* Safari 与 Chrome */
    -moz-animation:animdvstart_imgbig_run 1s;
    -ms-animation:animdvstart_imgbig_run 1s;
    -o-animation:animdvstart_imgbig_run 1s;
    -webkit-animation-fill-mode:forwards;
}
@keyframes animdvstart_imgbig_run{
    0% {background-size: 100% auto;}
    100% {background-size: 160% auto;}
}
@-webkit-keyframes animdvstart_imgbig_run
{
    0% {background-size: 100% auto;}
    100% {background-size: 160% auto;}
}

@keyframes animdvstart_up_run{
    0%{
        /*opacity: .1;*/
        -webkit-transform:translate3d(0,80%,0);
        -moz-transform:translate3d(0,80%,0);
        -ms-transform:translate3d(0,80%,0);
        -o-transform:translate3d(0,80%,0);
        transform:translate3d(0,80%,0);
    }
    100%{
        opacity: 1;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}
@-webkit-keyframes animdvstart_up_run
{
    0%{
        opacity: .1;
        -webkit-transform:translate3d(0,80%,0);
        -moz-transform:translate3d(0,80%,0);
        -ms-transform:translate3d(0,80%,0);
        -o-transform:translate3d(0,80%,0);
        transform:translate3d(0,80%,0);
    }
    100%{
        opacity: 1;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}
@keyframes animdvstart_left_run{
    0%{
        /*opacity: .1;*/
        -webkit-transform:translate3d(-100%,0,0);
        -moz-transform:translate3d(-100%,0,0);
        -ms-transform:translate3d(-100%,0,0);
        -o-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0);
    }
    100%{
        opacity: 1;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}
@-webkit-keyframes animdvstart_left_run
{
    0%{
        /*opacity: .1;*/
        -webkit-transform:translate3d(-100%,0,0);
        -moz-transform:translate3d(-100%,0,0);
        -ms-transform:translate3d(-100%,0,0);
        -o-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0);
    }
    100%{
        opacity: 1;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}

@keyframes animdvstart_right_run{
    0%{
        /*opacity: .1;*/
        -webkit-transform:translate3d(100%,0,0);
        -moz-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        -o-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
    }
    100%{
        opacity: 1;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}
@-webkit-keyframes animdvstart_right_run
{
    0%{
        /*opacity: .1;*/
        -webkit-transform:translate3d(100%,0,0);
        -moz-transform:translate3d(100%,0,0);
        -ms-transform:translate3d(100%,0,0);
        -o-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
    }
    100%{
        opacity: 1;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);
    }
}

@keyframes animdvstart_big_run{
    0%{
        /*opacity: .1;*/
        -webkit-transform:scale(0,0);
        -moz-transform:scale(0,0);
        -ms-transform:scale(0,0);
        -o-transform:scale(0,0);
        transform:scale(0,0);
    }
    100%{
        /*opacity: 1;*/
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        -ms-transform:scale(1,1);
        -o-transform:scale(1,1);
        transform:scale(1,1);
    }
}
@-webkit-keyframes animdvstart_big_run
{
    0%{
        /*opacity: .1;*/
        -webkit-transform:scale(0,0);
        -moz-transform:scale(0,0);
        -ms-transform:scale(0,0);
        -o-transform:scale(0,0);
        transform:scale(0,0);
    }
    100%{
        -webkit-transform:scale(1,1);
        -moz-transform:scale(1,1);
        -ms-transform:scale(1,1);
        -o-transform:scale(1,1);
        transform:scale(1,1);
    }
}


#videowrapper .video>div>video{
    border-radius: 4px;
    /*box-shadow: 2px 2px 14px #333333;*/

}
#videowrapper .video>div>p{
    text-align: right;
    color: #ffffff;
    font-size: 0.28rem;
}
#videowrapper .video>div:not(.mask){
    display: none;
    position: relative;
    width: 100%;

}
#videowrapper .video>div.active{
    display: block;
}
#videowrapper .videoList{
    width: 90%;
    height: 60%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-between;
}
#videowrapper .videoList >div>p{
    padding: 0;
    color:#ffffff;
    padding-top: 0.1rem;
    margin: 0;
    font-size: 0.2rem;
}
#videowrapper .videoList >div>div{
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}
@media screen and (min-width: 1024px){
    #videowrapper .videoList >div{

        width: 32%;
        height: auto;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        margin: 1% 0 1% 0;
    }
    #videowrapper .videoList >div .bhh{
        display: block;
    }
    #videowrapper .videoList >div .hh{
        display: none;
    }
    #videowrapper .videoList >div>p{
        font-size: 17px;
    }
    #videowrapper .video>div>p{
        font-size: 30px;
    }

    #videowrapper img.MB{
        display: none;
    }
    #videowrapper img.PC{
        display: block;
    }
}
@media screen and (max-width: 1024px){
    #videowrapper .videoList >div{
        width: 49%;
        height: auto;
        border-radius: 3px;
        overflow: hidden;
        position: relative;
        margin: 1% 0 1% 0;
    }
    #videowrapper .videoList >div  .bhh{
        display: none;
    }
    #videowrapper .videoList >div .hh{
        display: block;
    }
    #videowrapper img.MB{
        display: block;
    }
    #videowrapper img.PC{
        display: none;
    }
    #videowrapper .mask{
        display:none;
    }
}


#videowrapper .videoList .playimg_bottm{
    position: absolute;
    top: 0;
    left:0;
    right: 0;
}
#videowrapper .mask{
    width: 100%;
    height: 100%;
    position: absolute !important;
    top: 0;
    left: 0;
    background-image: url(../images/bigIcon.png);
    background-position: center;
    background-size: 200px;
    background-repeat: no-repeat;
    cursor: pointer;
}