@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/citygroup1.jpg);
		background-repeat:no-repeat;
		background-position: center;
		background-size:100%;
		position:fixed;
}

#Div1 { width:4vw;
	 height:4vw;
	 position:absolute;
	left: 39.2%;
	top: 40%;
	z-index: 2;}
    #Div1 a:link,a:visited{ display:block;
		width:100%;
		height:100%;
		background:url(img/dcg02.png);
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat}
    #Div1 a:hover{background:url(img/dcg01.png);background-size:cover;}
    #Div1 a:active{background:url(img/dcg01.png);background-size:cover;}


@media(max-width:1440px){.class1{width:100vw;height:178vw;background-size:cover;background-position: 34% 20%;}#Div1{width:8vw;height:8vw;top:40%;left:52%;}}