html,body{
    width: 100%;
    height: 100%;
}
.bg{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background: url("../images/bg.jpg") no-repeat top center;
    background-size: cover;
    overflow: hidden;
    z-index: 2;
}
.content{
    width: 100%;
    height: 100%;
    background: url("../images/bg2.jpg") no-repeat top center;
    background-size: cover;
    overflow: hidden;
}
.w1330{
    width: 1330px;
    margin: 0 auto;
}
.button{
    width: 165px;
    float: right;
    margin-top: 10px;
    cursor: pointer;
}
.pic{
    float: left;
    width: 250px;
    height: 306px;
    background: url("../images/wrapper.png") no-repeat;
    overflow: hidden;
    margin-right: 20px;
}
.pic .img{
    width: 244px;
    margin: 9px auto 0;
}
.pic .img.img1{
    width: 244px;
    height: 260px;
    background: url("../images/img1_1.jpg") no-repeat;
}
.pic .img.img1.select{
    background: url("../images/img1_2.jpg") no-repeat;
}
.pic .img.img2{
    width: 244px;
    height: 260px;
    background: url("../images/img2_1.png") no-repeat;
}
.pic .img.img2.select{
    background: url("../images/img2_2.png") no-repeat;
}
.pic .img.img3{
    width: 244px;
    height: 260px;
    background: url("../images/img3_1.png") no-repeat;
}
.pic .img.img3.select{
    background: url("../images/img3_2.png") no-repeat;
}
.pic .img.img4{
    width: 244px;
    height: 260px;
    background: url("../images/img4_1.png") no-repeat;
}
.pic .img.img4.select{
    background: url("../images/img4_2.png") no-repeat;
}
.pic .img.img5{
    width: 244px;
    height: 260px;
    background: url("../images/img5_1.png") no-repeat;
}
.pic .img.img5.select{
    background: url("../images/img5_2.png") no-repeat;
}
.pic .img.img6{
    width: 244px;
    height: 260px;
    background: url("../images/img6_1.png") no-repeat;
}
.pic .img.img6.select{
    background: url("../images/img6_2.jpg") no-repeat;
}
.pic .img.img7{
    width: 244px;
    height: 260px;
    background: url("../images/img7_1.png") no-repeat;
}
.pic .img.img7.select{
    background: url("../images/img7_2.png") no-repeat;
}
.pic .img.img8{
    width: 244px;
    height: 260px;
    background: url("../images/img8_1.jpg") no-repeat;
}
.pic .img.img8.select{
    background: url("../images/img8_2.jpg") no-repeat;
}
.pic .play{
    cursor: pointer;
    height: 24px;
    line-height: 24px;
    background: url("../images/play.png") no-repeat;
    background-size: 24px 24px;
    margin-left: 20px;
    padding-left: 50px;
    margin-top: 8px;
}
.nav{
    float: right;
    width: 250px;
    height: 685px;
    background: url("../images/right.png") no-repeat;
}
.list{
    cursor: pointer;
    width: 248px;
    height: 72px;
    overflow: hidden;
}
.list a{
    display: block;
    width: 194px;
    height: 31px;
    margin: 32px auto 0;
}
.list1{
    background: url("../images/name1.png") no-repeat;
}
.list2{
    background: url("../images/name2.png") no-repeat;
}
.list3{
    background: url("../images/name3.png") no-repeat;
}
.list4{
    background: url("../images/name4.png") no-repeat;
}
.list5{
    background: url("../images/name5.png") no-repeat;
}
.list6{
    background: url("../images/name6.png") no-repeat;
}
.list1.sel{
    background: url("../images/select1.png") no-repeat;
}
.list2.sel{
    background: url("../images/select2.png") no-repeat;
}
.list3.sel{
    background: url("../images/select3.png") no-repeat;
}
.list4.sel{
    background: url("../images/select4.png") no-repeat;
}
.list5.sel{
    background: url("../images/select5.png") no-repeat;
}
.list6.sel{
    background: url("../images/select6.png") no-repeat;
}
.top{
    width: 100%;
    height: 60px;
    background: #12141c;
    overflow: hidden;
}
.w1300{
    width: 1300px;
    margin: 0 auto;
}
.logo{
    width: 90px;
    float: left;
    margin-top: 10px;
}
.title{
    width: 27px;
    float: left;
    margin-top: 16px;
    margin-left: 70px;
}
.title2{
    width: 205px;
    float: right;
}
.wrap{
    width: 930px;
    height: 636px;
    background: url("../images/wrap.png") no-repeat;
    position: absolute;
    top:51%;
    left:50%;
    margin-top: -318px;
    margin-left: -465px;
}
.arrow{
    width: 48px;
    height: 388px;
    margin: -50px auto 0;
    animation: rotate 4s linear;
    transform-origin: 24px 388px;
}
.nian_20{
    visibility: hidden;
    visibility: visible \9;
    width: 125px;
    height: 35px;
    background: url("../images/2020.png") no-repeat;
    position: absolute;
    top:-90px;
    left:410px;
    animation: showIn12 .1s 4s linear;
    animation-fill-mode: forwards;
}
.nian_09{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/09_1.png") no-repeat;
    position: absolute;
    top:41px;
    right:13px;
    animation: showIn1 .6s 0.6s linear;
    animation-fill-mode: forwards;
}
.nian_09.select{
    background: url("../images/09_2.png") no-repeat;
}
.nian_10{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/10_1.png") no-repeat;
    position: absolute;
    top:171px;
    right:-80px;
    animation: showIn2 .6s 0.8s linear;
    animation-fill-mode: forwards;
}
.nian_10.select{
    background: url("../images/10_2.png") no-repeat;
}
.nian_11{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/11_1.png") no-repeat;
    position: absolute;
    top:301px;
    right:-115px;
    animation: showIn3 .6s 1s linear;
    animation-fill-mode: forwards;
}
.nian_11.select{
    background: url("../images/11_2.png") no-repeat;
}
.nian_12{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/12_1.png") no-repeat;
    position: absolute;
    top:430px;
    right:-96px;
    animation: showIn4 .6s 1.2s linear;
    animation-fill-mode: forwards;
}
.nian_12.select{
    background: url("../images/12_2.png") no-repeat;
}
.nian_13{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/13_1.png") no-repeat;
    position: absolute;
    top:561px;
    right:13px;
    animation: showIn5 .6s 1.4s linear;
    animation-fill-mode: forwards;
}
.nian_13.select{
    background: url("../images/13_2.png") no-repeat;
}
.nian_14{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/14_1.png") no-repeat;
    position: absolute;
    bottom:-30px;
    left:420px;
    animation: showIn6 .6s 2s linear;
    animation-fill-mode: forwards;
}
.nian_14.select{
    background: url("../images/14_2.png") no-repeat;
}
.nian_15{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/15_1.png") no-repeat;
    position: absolute;
    top:561px;
    left:59px;
    animation: showIn7 .6s 2.6s linear;
    animation-fill-mode: forwards;
}
.nian_15.select{
    background: url("../images/15_2.png") no-repeat;
}
.nian_16{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/16_1.png") no-repeat;
    position: absolute;
    top:431px;
    left:-30px;
    animation: showIn8 .6s 2.8s linear;
    animation-fill-mode: forwards;
}
.nian_16.select{
    background: url("../images/16_2.png") no-repeat;
}
.nian_17{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/17_1.png") no-repeat;
    position: absolute;
    top:301px;
    left:-72px;
    animation: showIn9 .6s 3s linear;
    animation-fill-mode: forwards;
}
.nian_17.select{
    background: url("../images/17_2.png") no-repeat;
}
.nian_18{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/18_1.png") no-repeat;
    position: absolute;
    top:171px;
    left:-30px;
    animation: showIn10 .6s 3.2s linear;
    animation-fill-mode: forwards;
}
.nian_18.select{
    background: url("../images/18_2.png") no-repeat;
}
.nian_19{
    visibility: hidden;
    visibility: visible \9;
    width: 95px;
    height: 26px;
    background: url("../images/19_1.png") no-repeat;
    position: absolute;
    top:41px;
    left:59px;
    animation: showIn11 .6s 3.4s linear;
    animation-fill-mode: forwards;
}
.nian_19.select{
    background: url("../images/19_2.png") no-repeat;
}

@keyframes rotate{
    from {transform: rotate(0)}
    to {transform: rotate(360deg)}
}
@keyframes showIn1{
    0% {
        visibility: hidden;
        background: url("../images/09_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/09_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/09_1.png");
    }
}
@-webkit-keyframes showIn1{
    0% {
        visibility: hidden;
        background: url("../images/09_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/09_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/09_1.png");
    }
}
@keyframes showIn2{
    0% {
        visibility: hidden;
        background: url("../images/10_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/10_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/10_1.png");
    }
}
@-webkit-keyframes showIn2{
    0% {
        visibility: hidden;
        background: url("../images/10_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/10_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/10_1.png");
    }
}
@keyframes showIn3{
    0% {
        visibility: hidden;
        background: url("../images/11_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/11_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/11_1.png");
    }
}
@-webkit-keyframes showIn3{
    0% {
        visibility: hidden;
        background: url("../images/11_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/11_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/11_1.png");
    }
}
@keyframes showIn4{
    0% {
        visibility: hidden;
        background: url("../images/12_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/12_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/12_1.png");
    }
}
@-webkit-keyframes showIn4{
    0% {
        visibility: hidden;
        background: url("../images/12_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/12_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/12_1.png");
    }
}
@keyframes showIn5{
    0% {
        visibility: hidden;
        background: url("../images/13_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/13_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/13_1.png");
    }
}
@-webkit-keyframes showIn5{
    0% {
        visibility: hidden;
        background: url("../images/13_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/13_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/13_1.png");
    }
}
@keyframes showIn6{
    0% {
        visibility: hidden;
        background: url("../images/14_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/14_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/14_1.png");
    }
}
@-webkit-keyframes showIn6{
    0% {
        visibility: hidden;
        background: url("../images/14_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/14_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/14_1.png");
    }
}
@keyframes showIn7{
    0% {
        visibility: hidden;
        background: url("../images/15_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/15_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/15_1.png");
    }
}
@-webkit-keyframes showIn7{
    0% {
        visibility: hidden;
        background: url("../images/15_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/15_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/15_1.png");
    }
}
@keyframes showIn8{
    0% {
        visibility: hidden;
        background: url("../images/16_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/16_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/16_1.png");
    }
}
@-webkit-keyframes showIn8{
    0% {
        visibility: hidden;
        background: url("../images/16_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/16_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/16_1.png");
    }
}
@keyframes showIn9{
    0% {
        visibility: hidden;
        background: url("../images/17_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/17_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/17_1.png");
    }
}
@-webkit-keyframes showIn9{
    0% {
        visibility: hidden;
        background: url("../images/17_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/17_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/17_1.png");
    }
}
@keyframes showIn10{
    0% {
        visibility: hidden;
        background: url("../images/18_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/18_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/18_1.png");
    }
}
@-webkit-keyframes showIn10{
    0% {
        visibility: hidden;
        background: url("../images/18_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/18_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/18_1.png");
    }
}
@keyframes showIn11{
    0% {
        visibility: hidden;
        background: url("../images/19_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/19_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/19_1.png");
    }
}
@-webkit-keyframes showIn11{
    0% {
        visibility: hidden;
        background: url("../images/19_1.png");
    }
    50%{
        visibility: visible;
        background: url("../images/19_2.png");
    }
    100% {
        visibility: visible;
        background: url("../images/19_1.png");
    }
}
@keyframes showIn12{
    from {
       visibility: hidden;
    }
    to {
        visibility: visible;
    }
}
@-webkit-keyframes showIn12{
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}
.myvideo{
    display: none;
    width: 1000px;
    height: 564px;
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -282px;
    margin-left: -500px;
}
video{
    display: block;
}
.close{
    width: 30px;
    height: 30px;
    position: absolute;
    right: 15px;
    top:10px;
    background: url("../images/close.png") no-repeat;
    z-index: 3;
   position: static\9;
}
.the_wrap{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    right: 0;
    background: url(../images/theWrap.png) no-repeat top center;
    background-size: cover;
    z-index: 3;
    overflow: hidden;
}
.themewrap{
    width: 723px;
    height: 422px;
    position: absolute;
    left:50%;
    top:60%;
    margin-left: -361.5px;
    margin-top: -211px;
}
.theme{
    width: 723px;
    height: 422px;
}
.theme.scaleIn{
    animation: scaleIn 1s linear;
}
@keyframes scaleIn{
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@-webkit-keyframes scaleIn{
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.code{
    width: 100px;
    height: 101px;
    margin: 70px auto 0;
}
.last{
    width: 153px;
    height: 42px;
    margin: 14px auto 0;
}