@charset "utf-8";	

.menu {width: 3.6vw;position: fixed;top: 4vw;left: 2vw;height: 100%;z-index: 910;}

#world {width: 3.6vw;height: 3.6vw;float: left;margin-bottom: 1.2vw;}
	#world a:link,a:visited{ display:block;	width:100%;height:100%;background: url(img/world1.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
    #world a:hover{background:url(img/world2.png);background-size:cover;}
    #world a:active{background:url(img/world2.png);background-size:cover;}

#history {width: 3.6vw;height: 3.6vw;float: left;margin-bottom: 1.2vw;background: url(img/history1.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
	#history:hover{background: url(img/history2.png);background-size:cover;}
#historybox {width: 30vw;height: 40vw;left: 6vw; top: 10vw;border-radius: 4px;position: fixed;background-color: #1E1E1E;opacity: 0.9;display: none;z-index: 909;}


.personage {height: 3.6vw;width: 13.5vw;right: 1.2vw;top: 4vw;position: fixed;z-index: 912;}
#personage1 {width: 3.6vw;height: 3.6vw;float: left;}
  #personage1 a:link,a:visited{ display:block;width:100%;height:100%;background: url(img/personage1.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
  #personage1 a:hover{background:url(img/personage2.png);background-size:cover;}
#personage2 {width: 8.1vw;height:1.8vw;float: left;margin-left: 0.4vw;margin-top: 0.8vw;background: url(img/shurukuang.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
input {width: 7.2vw;height: 1.08vw;margin: 0.34vw 0 0 0.6vw;font-size: 1vw;border: none;outline: none;color:#DADADA;background-color:transparent;padding: 0 0;}


.personageul {position: fixed;right: 2.4vw;top: 8vw;width: 8vw;height: 12vw;list-style: none;padding:0;z-index: 910;overflow-x: hidden;overflow-y: scroll;}
.personageul::-webkit-scrollbar {display: none;}
.personageli {width: 100%;height: 4vw;margin: 2px 0px;}
.px {height: 4vw;width: 4vw;position:absolute;z-index: 919;}
	.px a:link,a:visited{ display:block;width:100%;height:100%;background:url(img/0132.png);background-position:center;background-size:cover;background-repeat: no-repeat}
    .px a:hover{background:url(img/px.png);background-size:cover;}
	.px a:active{background:url(img/px.png);background-size:cover;}
#p001 {height: 100%;width: 100%;background: url(img/p001a.png);background-size:cover;z-index: 919;}
#p002 {height: 100%;width: 100%;background: url(img/p002a.png);background-size:cover;z-index: 919;}
#p003 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p004 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p005 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p006 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p007 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p008 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p009 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}
#p010 {height: 100%;width: 100%;background: url(img/p003a.png);background-size:cover;z-index: 919;}


.top {top: 3vw;left:0;position:fixed;width: 100%;z-index: 900;display: -webkit-flex; /* Safari */display: flex;justify-content:center;}

.the7thera1 {}
#top1 {height: 1.5vw;width: 1.5vw;margin: auto;	z-index: 902;}
    #top1 a:link,a:visited{ display:block;width:100%;height:100%;background:url(img/The7thera2.png);background-position:center;background-size:cover;background-repeat: no-repeat}
    #top1 a:hover{background:url(img/The7thera3.png);background-size:cover;}
    #top1 a:active{background:url(img/The7thera3.png);background-size:cover;}
#top2 {height: 1.2vw;width:  10.8vw;background: url(img/beforeThe7thera.png);background-position:center;background-size:cover;background-repeat: no-repeat;}

.the7thera2  {margin-left: 4vw;}
#Div01 {width:2vw;height:2vw;margin-left: 0.62vw;float: left;background:url(img/year3.png);background-size:cover;}
#Div02 { width:2vw;height:2vw;margin-left: 2.08vw;float: left;z-index: 910;}
  	#Div02 a:link,a:visited{ display:block;	width:100%;height:100%;background:url(img/year1.png);background-position:center;background-size:cover;background-repeat: no-repeat}
    #Div02 a:hover{background:url(img/year2.png);background-size:cover;}
    #Div02 a:active{background:url(img/year2.png);background-size:cover;}
#Div06 {width: 7.2vw;height: 0.4vw;position: absolute;bottom: 0;background: url(img/year5.png);background-repeat: no-repeat;background-size:cover;}



@media(max-width:1440px){.menu{width: 7.2vw;}#world{height: 7.2vw;width: 7.2vw;}#history{height: 7.2vw;width: 7.2vw;}#historybox{width: 60vw;height: 80vw;border-radius: 2px;top: 16vw;left: 12vw;}#top1{height: 3vw;width: 3vw;}#top2{height: 2.4vw;width: 21.6vw;}#Div01{height: 4vw;width: 4vw;margin-left: 1.24vw;}#Div02{height: 4vw;width: 4vw;margin-left: 4.16vw;}#Div06{height: 0.8vw;width: 14.4vw;}
	.personageul{height: 24vw;width: 16vw;top:12vw;}.personageli{height: 8vw;}.px{height: 8vw;width: 8vw;}.personage{width: 27vw;height: 7.2vw;}#personage1{height: 7.2vw;width: 7.2vw;}#personage2{height: 3.6vw;width: 16.2vw;margin-left: 0.8vw;margin-top: 1.6vw;}input {width: 14.4vw;height: 2.16vw;margin: 0.68vw 0 0 1.2vw;font-size: 2vw;}}



.the7th {bottom: 10px;font-size: 12px;left: 0;position: fixed;text-align: center;width: 100%;color: #fff;opacity: 0.4; z-index: 900;}
    .the7th a {color: #fff;cursor: pointer;display: inline-block;text-decoration: none;margin-top: 5px;width: auto;}


.class1 {height: 56.25vw;width: 100vw;background-image: url(../../../../img/bgcity01.jpg);background-repeat:no-repeat;background-position: center;background-size:100%;position:fixed;}

#Divd01{height:3.6vw;left: 32%;top: 34%;position:absolute;z-index: 30;display: none;}
#Divd02{height:3.6vw;left: 42%;top: 58%;position:absolute;z-index: 30;}
#Divd03{height:3.6vw;left: 48%;top: 34%;position:absolute;z-index: 30;}
#Divd04{height:3.6vw;left: 46.4%;top: 18%;position:absolute;z-index: 30;}


.Divd { width:3.6vw;height:3.6vw;position:absolute;background:url(img/d01.png);background-position: center;background-size:cover;background-repeat: no-repeat}

#Dbox01{position:absolute; width: 29.6vw;height: 26vw;top: 12.8%;left: 15.66%;background: url(img/c01.png);background-size:contain;background-repeat:no-repeat;z-index: 20;}
#Divm01{height: 3vw;left: 58%;top: 34%;position:absolute;}
#Divm02{height: 3vw;left: 62%;top: 66%;position:absolute;}
#Divm03{height: 3vw;left: 52%;top: 50%;position:absolute;}
#Divm04{height: 3vw;left: 10%;top: 14%;position:absolute;}

#Dbox02{position:absolute; width: 30.84vw;height: 27vw;top: 46.2%;left: 33.3%;background: url(img/c02.png);background-size:contain;background-repeat:no-repeat;z-index: 20;display: none;}
#Divm21{height: 3vw;left: 20%;top: 24%;position:absolute;}
#Divm22{height: 3vw;left: 44%;top: 12%;position:absolute;}
#Divm23{height: 3vw;left: 34%;top: 42%;position:absolute;}
#Divm24{height: 3vw;left: 48%;top: 70%;position:absolute;}

#Dbox03{position:absolute; width: 17.88vw;height:10vw;top: 32.1%;left: 42.18%;background: url(img/c03.png);background-size:contain;background-repeat:no-repeat;z-index: 20;display: none;}
#Divm31{left: 34%;top: 14%;position:absolute;}
#Divm32{left: 48%;top: 44%;position:absolute;}

#Dbox04{position:absolute; width: 15.52vw;height:12vw;top: 17.16%;left: 42.28%;background: url(img/c04.png);background-size:contain;background-repeat:no-repeat;z-index: 20;display: none;}
#Divm41{left: 30%;top: 8%;position:absolute;}


.Divm { width:3vw;height:3vw;position: absolute;}
    .Divm a:link,a:visited{ display:block;width:100%;height:100%;background:url(img/d02.png);background-position: center;background-size:cover;background-repeat: no-repeat;}
    .Divm a:hover{background:url(img/d03.png);background-size:cover;}
    .Divm a:active{background:url(img/d03.png);background-size:cover;}
.Divw{top:2.5vw;position:absolute;}
.Divw2{top:2.5vw;position:absolute;width: 6vw;}
.Divw h1{font-family:arial;color: #FFFFFF;text-align:left;font-size:0.56vw;font-weight:900;margin:0;line-height:1;}
.Divw2 h2{font-family:arial;color: #FFFFFF;text-align:left;font-size:0.56vw;font-weight:lighter;margin:0.05vw 0 0 0.5vw;line-height: 1;letter-spacing:0.02vw;}
.Divh{margin:1.36vw 0 0 2.6vw;position:absolute;}
.Divh h1{font-family:arial;color: #FFFFFF;text-align:left;font-size:0.56vw;letter-spacing:0.02vw;font-weight:900;margin:0;float:left;line-height: 0;}
.Divh h2{font-family:arial;color: #FFFFFF;text-align:left;font-size:0.56vw;letter-spacing:0.02vw;font-weight:lighter;float:left;line-height: 0;margin-left: 0.56vw;margin-top: 0.05vw}

@media(max-width:1440px){.class1{width:100vw;height:178vw;background-size:cover;background-position: 34% 20%;}
#Divd01{height:7.2vw;left: 10%;top: 32%;}#Divd02{height:7.2vw;left: 14%;top: 38%;}#Divd03{height:7.2;left: 22%;top: 44%;}#Divd04{height:7.2vw;left: 34%;top: 50%;}.Divd { width:7.2vw;height:7.2vw;}
#Dbox01{ width: 59.2vw;height: 52vw;left: 20%;top: 20%;}#Dbox02{width: 61.68vw;height: 54vw;left: 20%;top: 20%;}#Dbox03{ width: 35.76vw;height:20vw;left: 40%;top: 30%;}#Dbox04{ width: 31.04vw;height:24vw;left: 40%;top: 30%;}
.Divm {width:6vw;height:6vw;}
.Divw{top:5vw;}.Divw2{top:5vw;}.Divw h1{font-size:1.12vw;line-height: 1;}.Divw2 h2{font-size:1.12vw;width: 12vw;margin:0.1vw 0 0 1vw;letter-spacing:0.04vw;}
.Divh{margin:2.72vw 0 0 5.2vw;}.Divh h1{font-size:1.12vw;letter-spacing:0.04vw;}.Divh h2{font-size:1.12vw;letter-spacing:0.04vw;margin-left: 1.12vw;margin-top: 0.1vw}
}