.main{background: url(../img/index-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center top; background-color: #F5E5CC; height: 100vh; width: 640px; margin-right: auto; margin-left: auto; position: relative; display: block;}
.persent{position: absolute;z-index: 10;  top: 86.8vh; left: 140px; }
.pgv{font-size: 26px; text-align: center; margin-bottom: 20px; color: #fff;}
.pg{width: 360px; height: 5px; background: #fff;}
::-ms-fill{
    background:#fff;
}
::-moz-progress-bar{
    background:#fff;
 }
::-webkit-progress-bar{
    background:#000;
 }
::-webkit-progress-value{
    background:#000;
 }
video{
	object-fit: fill;
}
.jump{position: absolute;z-index: 10;  bottom: 3vh; right: 250px; font-size: 36px; color: #fff;width: 140px; height: 50px; text-align: center;}
.dunpai{position: absolute;z-index: 10;  top: 19vh; right: 106px; opacity: 0; animation:mymove .5s ease-in .1s 1 forwards;-webkit-animation:mymove .5s ease-in .1s 1 forwards; /*Safari and Chrome*/}
@keyframes mymove
{
from {top: 19vh; opacity:0;}
to {top: 13vh; opacity: 1;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {top: 19vh; opacity:0;}
to {top: 13vh; opacity: 1;}
}
.saohei{position: absolute;z-index: 10;  top: 20vh; opacity: 0; animation:mymove2 .5s ease-in 1s 1 forwards;-webkit-animation:mymove2 .5s ease-in .6s 1 forwards; /*Safari and Chrome*/}
@keyframes mymove2
{
from { opacity:0;}
to { opacity: 1;}
}

@-webkit-keyframes mymove2 /*Safari and Chrome*/
{
from { opacity:0;}
to { opacity: 1;}
}

.index-btn{position: absolute;z-index: 10; opacity: 0;  top:-20vh; right: 118px;animation:mymove3 .5s ease-in 1s 1 forwards;-webkit-animation:mymove3 .8s ease-in 1s 1 forwards; /*Safari and Chrome*/}
@keyframes mymove3
{
0% { top:-10vh; opacity:0;}
60%{ top:57vh; opacity: 1;}
80%{ top:55vh; opacity: 1;}
100% { top:57vh; opacity: 1;}

}

@-webkit-keyframes mymove3 /*Safari and Chrome*/
{
0% { top:-10vh; opacity:0;}
60%{ top:57vh; opacity: 1;}
80%{ top:55vh; opacity: 1;}
100% { top:57vh; opacity: 1;}
}
.index-hand{position: absolute;z-index: 10; opacity: 0;  top:64vh; right: 295px;}
.hand2{animation:mymove4 .5s ease-in .1s 1 forwards;-webkit-animation:mymove4 .5s ease-in .1s 1 forwards; /*Safari and Chrome*/}
@keyframes mymove4
{
from { opacity:0;}
to { opacity: 1;}
}

@-webkit-keyframes mymove4 /*Safari and Chrome*/
{
from { opacity:0;}
to { opacity: 1;}
}

.main2{ background-color: #F5E5CC; height: 100vh; width: 640px; margin-right: auto; margin-left: auto; position: relative; display: none;}
.main3{ background-image: url(../img/mapbg.jpg); background-size: 100% 100%; height: 1026px; width: 1731px; margin-right: auto; margin-left: auto; position: relative; display: block;}
.cla{width: 443px; height: 83px;}
.cla1{position: absolute;z-index: 10;  top:150px; left: 705px; }
.cla2{position: absolute;z-index: 10;   top:300px; left: 612px;}
.cla3{position: absolute;z-index: 10;   top:330px; left: 1079px;}
.cla4{position: absolute;z-index: 10;   top:458px; left: 728px;}
.cla5{position: absolute;z-index: 10;   top:620px; left: 668px; background:url(../img/fabuhui.gif); background-size: 100% 100%; width: 200px ; height: 200px;}
.cla6{position: absolute;z-index: 10;   top:488px; left: 1187px;}

.huadong{position: absolute;z-index: 10;   top:862px; left: 81px; background:url(../img/huadong.gif); background-size: 100% 100%; width: 510px ; height: 140px;}
.lingqu{position: absolute;z-index: 10;   top:50px; right: 50px; background:url(../img/lingqu.png); background-size: 100% 100%; width: 250px ; height: 157px;}
.main4{background-color: #F5E5CC; height: 100vh; width: 640px; margin-right: auto; margin-left: auto; position: relative;}

.main-hei{ background-image:url(../img/hei-bg.jpg); height: 1026px; width: 1154px; margin-right: auto; margin-left: auto; position: relative;}

/**list**/
.main-list{width: 640px; margin-right: auto; margin-left: auto; position: relative;}
.back{position: absolute;z-index: 10;   top:240px; right: 35px; width: 100px; height: 100px;
animation:backmove .5s ease-in 0s  alternate infinite forwards;-webkit-animation:backmove .5s ease-in 0s alternate infinite forwards; /*Safari and Chrome*/
}
@keyframes backmove
{
from { top:240px;}
to { top: 258px;}
}

@-webkit-keyframes backmove /*Safari and Chrome*/
{
from { top:240px;}
to { top: 258px;}
}

.list-content{width: 520px; margin: 0 auto; margin-bottom: 50px;}
.news-title{display: block;}
.news-title h2{font-size: 24px; float: right; width: 440px; padding-top: 10px; display: block;}
.title-num{float: left; display: block;}
.news-content p {margin-top: 26px; font-size: 15px; text-align: justify; text-indent: 4em;}
.news-detail{float: right; margin-top: 14px;}
.news-list{border-bottom: 2px solid #eeb567; padding-bottom: 28px; margin-top: 20px;}
.list2{border: 0px!important;}
.list-foot{margin: 0 auto; width: 155px; height: 149px; margin-left: 192px; margin-top: 30px;}
.menu{width: 370; height: 600px; position: fixed; top: 300px; left:-370px; background:url(../img/menu.png); z-index: 11; padding: 10px; padding-top: 0;
}
.menu1{width: 370px; height: 600px; position: fixed; top: 300px; left: -370px; background:url(../img/menu.png) no-repeat;  z-index: 11; padding: 10px; padding-top: 0;
animation:menumove1 .3s ease-in .1s 1 forwards;-webkit-animation:menumove1 .3s ease-in .1s 1 forwards; /*Safari and Chrome*/
}
@keyframes menumove1
{
from { left: -370px;}
to { left: 0px;}
}

@-webkit-keyframes menumove1 /*Safari and Chrome*/
{
from { left: -370px;}
to { left: 0px;}
}

.menu2{width: 370; height: 600px; position: fixed; top: 300px; left: 0px; background:url(../img/menu.png) no-repeat;z-index: 11; padding: 10px; padding-top: 0px;
animation:menumove .3s ease-in 0s 1 forwards;-webkit-animation:menumove .3s ease-in 0s 1 forwards; /*Safari and Chrome*/
}
@keyframes menumove
{
from { left: 0px;}
to { left: -370px;}
}

@-webkit-keyframes menumove /*Safari and Chrome*/
{
from { left: 0px;}
to { left: -370px;}
}


#menu ul li{font-size: 30px; color: #fff; padding-left: 60px; line-height: 74px;  display: block;}
.menu-btn{position: fixed; top: 340px; left:-300px; width:70px; height: 278px; background: url(../img/xuanfu-btn.png); background-size: cover; z-index: 15; font-size: 30px; line-height: 40px; padding-left: 10px;  color:rgba(0,0,0,0);}

/**hei.html**/
.qt{position: absolute; padding:30px; animation:qtmove .5s linear .1s alternate infinite forwards;-webkit-animation:qtmove .5s linear .1s alternate infinite forwards; /*Safari and Chrome*/}
@keyframes qtmove
{
from { opacity:.1;}
to { opacity: 1;}
}

@-webkit-keyframes qtmove /*Safari and Chrome*/
{
from { opacity:.1;}
to { opacity: 1;}
}
.qt1{left: 215px; top: 235px;}
.qt2{left: 464px; top: 338px;}
.qt3{left: 606px; top: 433px;}
.qt4{left: 390px; top: 440px;}
.qt5{left: 831px; top: 474px;}
.qt6{left: 383px; top: 510px;}
.qt7{left: 660px; top: 625px;}
.qt8{left: 530px; top: 698px;}

.daquan{position: absolute; z-index: 20; background: url(../img/daquan.png); background-size: 100% 100%; padding:0px; width: 120px; height: 120px; animation:daquanmove .5s linear .1s alternate infinite forwards;-webkit-animation:daquanmove .5s linear .1s alternate infinite forwards; /*Safari and Chrome*/}
@keyframes daquanmove
{
from { opacity:.1;}
to { opacity: 1;}
}

@-webkit-keyframes daquanmove /*Safari and Chrome*/
{
from { opacity:.1;}
to { opacity: 1;}
}
.daquan1{top:146px; left: 735px;}
.daquan2{top:300px; left: 642px;}
.daquan3{top:330px; left: 1120px;}
.daquan4{ top:458px; left: 748px;}
.daquan5{top:480px; left: 1187px;}




/**乱象**/
.main-luanxiang{background-image:url(../img/luanxiang.jpg); height: 1026px; width: 1154px; margin-right: auto; margin-left: auto; position: relative;}
.lx{position: absolute; z-index: 50;}
.lx1{left: 42px; top: 42px; width: 234px; height: 160px;}
.lx2{left: 47px; top: 222px; width: 262px; height: 173px;}
.lx3{left: 50px; top: 404px; width: 202px; height: 213px;}
.lx4{left: 248px; top: 592px; width: 224px; height: 160px;}
.lx5{left: 485px; top: 654px; width: 221px; height: 160px;}
.lx6{left: 723px; top: 669px; width: 383px; height: 150px;}
.lx7{left: 924px; top: 453px; width: 210px; height: 190px;}
.lx8{left: 895px; top: 297px; width: 262px; height: 178px;}
.lx9{left: 918px; top: 18px; width: 167px; height: 279px;}
.lx10{left: 438px; top: 377px; width: 360px; height: 230px;}

.lxgif{position: absolute; z-index: 21;}