@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;display: flex;align-items: center;}
.px {height: 4vw;width: 4vw;position:absolute;z-index: 920;}
	.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;}
.phead{width:3.9vw;height: 3.9vw;margin-left: 0.04vw; background-size: cover;z-index: 919;}
.personageli h1{margin: 0;color:#DDDDDD;font-size: 0.6vw;font-family:arial;font-weight:lighter;text-align:left;}
#p001 {background-image: url(../../personage/img/headai.png);}
#p002 {background-image: url(../../personage/img/headai0.png);}
#p003 {background-image: url(../../personage/img/p002a.png);}
#p004 {background-image: url(../../personage/img/p001a.png);}
#p005 {background-image: url(../../personage/img/p003a.png);}
#p006 {background-image: url(../../personage/img/p003a.png);}
#p007 {background-image: url(../../personage/img/p003a.png);}

.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;}

.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;}

@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;}.phead{width:7.8vw;height: 7.8vw;margin-left: 0.08vw;}.personageli h1{font-size: 1.2vw;}.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;}}


.class01 {
		width: 100vw;
		height: 56.25vw;
}
.class1 {
		height: 56.25vw;
		width: 100vw;	
		background-image: url(../../img/bglandmass.jpg);
		background-repeat:no-repeat;
		background-position: center;
		background-size:100%;
		position:absolute;
}
		
#Div2 { width:4vw;
	 height:4vw;
	 position:absolute;
	left: 47.96%;
	top: 32.8%;
	z-index: 2;
	display:none;
		background:url(img/d011.png);
		background-position:center;
		background-size:cover;
		background-repeat: no-repeat}
    #Div2:hover{background:url(img/d011a.png);background-size:cover;}


 #Divinform{ 
  position:absolute; 
  top: 21.6%;
  left: 46.40%;
  width: 6.3vw;
  height: 8.24vw;
  background-image: url(img/TA01.png);
	 background-size:cover;
  z-index: 0; 
	display:none;}
   /* 默认隐藏 */ 

#ceng {
		height: 20.26vw;
		width: 21.56vw;
		left: 39.82%;
		top: 21.22%;
		position: absolute;
		background: url(img/KA01.png);
		background-size:cover;
	display:block;}

#Diva1 { 
	width:3vw;
	 height:3vw;
	 position:absolute;
	left: 39%;
	top: 26.8%;
	z-index: 2;}
    #Diva1 a:link,a:visited{ display:block;
		width:100%;
		height:100%;
		background:url(img/d017.png);
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat}
    #Diva1 a:hover{background:url(img/d017a.png);background-size:cover;}
    #Diva1 a:active{background:url(img/d017a.png);background-size:cover;}

#Diva2 { 
	width:3vw;
	 height:3vw;
	 position:absolute;
	left: 66.6%;
	top: 41.2%;
	z-index: 2;}
    #Diva2 a:link,a:visited{ display:block;
		width:100%;
		height:100%;
		background:url(img/d018.png);
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat}
    #Diva2 a:hover{background:url(img/d018a.png);background-size:cover;}
    #Diva2 a:active{background:url(img/d018a.png);background-size:cover;}

 #Divi01{ 
  position:absolute; 
  top: 16.8%;
  left: 46.24%;
  width: 5.46vw;
  height: 10vw;
  background-image: url(img/TA02.png);
	 background-size:cover;
  z-index: 0; 
	display:none;}
   /* 默认隐藏 */ 

#Div3 { width:4vw;
	 height:4vw;
	 position:absolute;
	left: 66.6%;
	top: 75%;
	z-index: 2;
		background:url(img/d012.png);
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat}
    #Div3:hover{background:url(img/d012a.png);background-size:cover;}
    
#Dbox3 {
		height: 13.24vw;
		width: 19.8vw;
		left: 57.6%;
		top: 65.48%;
		position: absolute;
		background: url(img/KA02.png);
		background-size:cover;
	display:none;}

#Diva3 { 
	width:3vw;
	 height:3vw;
	 position:absolute;
	left: 47.8%;
	top: 44%;
	z-index: 2;}
    #Diva3 a:link,a:visited{ display:block;
		width:100%;
		height:100%;
		background:url(img/d017.png);
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat}
    #Diva3 a:hover{background:url(img/d017a.png);background-size:cover;}
    #Diva3 a:active{background:url(img/d017a.png);background-size:cover;}

@media(max-width:1440px){.class01{height:174vw;width: 98vw;position: relative; overflow-x:scroll;}.class01::-webkit-scrollbar {display: none;}.class1{height:168.75vw;width: 300vw;background-size:contain;}
	#Div2{width: 12vw;height: 12vw;}#Divinform{  width: 18.9vw;height: 24.72vw;}#ceng {height: 60.78vw;width: 64.68vw;}#Diva1{width: 9vw;height: 9vw;}#Diva2{width: 9vw;height: 9vw;}#Divi01{  width: 16.38vw;height: 30vw;}#Div3{width: 12vw;height: 12vw;}#Dbox3 {height: 39.72vw;width: 59.4vw;}#Diva3{width: 9vw;height: 9vw;}
}