@charset "utf-8";	

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

#world {width: 3.2vw;height: 3.2vw;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.2vw;height: 3.2vw;float: left;margin-bottom: 1.2vw;background-image: url(../img/history1.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
	#history:hover{background-image: url(../img/history2.png);}
#history2{width: 3.2vw;height: 3.2vw;float: left;margin-bottom: 1.2vw;background-image: url(../img/history2.png);background-position:center;background-size:cover;background-repeat: no-repeat;display: none;} 
#historybox {width: 85vw;height: 46vw;left: 5vw; top: 6vw;border-radius: 4px;position: fixed;background-color: #1E1E1E;opacity: 0.9;display: none;z-index: 929;}

.mhistory {width: 3vw;height: 3vw;}
  .mhistory a:link,a:visited{ display:block;	width:100%;height:100%;background: url(../img/mhistory1.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
    .mhistory a:hover{background:url(../img/mhistory2.png);background-size:cover;}
    .mhistory a:active{background:url(../img/mhistory2.png);background-size:cover;}
.line1{position: absolute;margin: 1vw 0 0 0.6vw;}
.Htextbox{height: 44vw;width: 72vw;position: absolute;top: 1vw;left: 12vw;display: flex;flex-direction: column;overflow-y: scroll;}.Htextbox::-webkit-scrollbar {display: none;}
.text1{width: 100%;display: flex;}
h1{color: #DDDDDD;font-size: 2em;}
h5{color: #D52F31;}
.t1{height: 6vw;width: 6vw;}
.t1 h2{color: #FFFFFF;line-height: 0.6em;}
.text2{display: flex;flex-direction: column;}
.t2{display: flex;}
.t3{width: 2vw;}
.t3 h3{color: #FFFFFF;line-height: 1em;}
.t4{width: 56vw;}
.t4 p{color: #FFFFFF;line-height: 1.4em;}

.personage {height: 3.2vw;width: 11vw;right: 1vw;top: 2vw;position: fixed;z-index: 912;}
#personage1 {width: 3.2vw;height: 3.2vw;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: 6.8vw;height:1.5vw;float: left;margin-left: 0.2vw;margin-top: 0.6vw;background: url(../img/shurukuang.png);background-position:center;background-size:cover;background-repeat: no-repeat;}
input {width: 5.6vw;height: 0.8vw;margin: 0.3vw 0 0 0.6vw;font-size: 0.8vw;font-weight: lighter;border: none;outline: none;color:#DADADA;background-color:transparent;padding: 0 0;}


.personageul {position: fixed;right: 0vw;top: 5vw;width: 8vw;height: 11vw;list-style: none;padding:0;z-index: 910;overflow-x: hidden;overflow-y: scroll;}
.personageul::-webkit-scrollbar {display: none;}
.personageli {width: 100%;height: 3.2vw;margin: 0;display: flex;align-items: center;}
.px {height: 3.2vw;width: 3.2vw;position:absolute;z-index: 920;}
	.px a:link,a:visited{ display:block;width:100%;height:100%;background:url(../img/0.png);background-position:center;background-size:cover;background-repeat: no-repeat}
    .px a:hover{background:url(../personage/img/head2r.png);background-size:cover;}
	.px a:active{background:url(../personage/img/head2r.png);background-size:cover;}
.phead{width:3.2vw;height: 3.2vw;margin-left: 0; background-size: cover;z-index: 919;}
.personageli h1{margin: 0 0 0 0.2vw;color:#DDDDDD;font-size: 0.48vw;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/p003a.png);}
#p005 {background-image: url(../personage/img/p001a.png);}
#p006 {background-image: url(../personage/img/head001.png);}
#p007 {background-image: url(../personage/img/head001.png);}

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

.the7thera1 {}
#top1 {height: 1.5vw;width: 2.8vw;margin: auto;	z-index: 902;}
    #top1 a:link,a:visited{ display:block;width:100%;height:100%;background-image:url(../img/beforeThe7thera2.png);background-position:center;background-size:contain;background-repeat: no-repeat;}
    #top1 a:hover{background-image:url(../img/beforeThe7thera3.png);}
    #top1 a:active{background-image:url(../img/beforeThe7thera3.png);}
#top2 {height: 1.2vw;width:  6.8vw;background: url(../img/The7thera.png);background-position:center;background-size:contain;background-repeat: no-repeat;}

.the7thera2  {margin-left: 4vw;display: flex; flex-direction: column;}
.Divbox{display: flex;margin-left: 0.4vw;}
#Div01 {width:1.8vw;height:1.8vw;margin-left: 0.6vw;background:url(../img/year3.png);background-size:cover;}
.Div02 { width:1.8vw;height:1.8vw;margin-left: 0.6vw;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: 11vw;height: 0.42vw;margin-top: 0.2vw;background: url(../img/year4.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;top: 4vw;}#world{height: 7.2vw;width: 7.2vw;margin-bottom: 2.4vw;}#history{height: 7.2vw;width: 7.2vw;margin-bottom: 2.4vw;}#history2{height: 7.2vw;width: 7.2vw;}#historybox{width: 96vw;height: 140vw;border-radius: 0.5vw;top: 12vw;left: 1vw;}.mhistory{height: 6vw;width: 6vw;}.line1{left: 8vw; top: 2vw;}.top{top: 6vw;}.Htextbox{height: 88vw;width: 86vw;top: 4vw;left: 5vw;}h1{text-align: center;}H5{text-align: center;}.t1{width: 10vw;}.t3{width: 4vw;}.t4{width: 70vw;}
	#top1{height: 3vw;width: 5.6vw;}#top2{height: 2.4vw;width: 13.6vw;}.Divbox{margin-left: 0.8vw;}#Div01{height: 3.6vw;width: 3.6vw;margin-left: 1.2vw;}.Div02{height: 3.6vw;width: 3.6vw;margin-left: 1.2vw;}#Div06{height: 0.84vw;width: 22vw;margin-top: 0.4vw;}.the7thera2  {margin-right: 12vw;}.the7thera1  {}
	.personageul{height: 24vw;width: 16vw;top:12vw;right: 2vw;}.personageli{height: 8vw;}.px{height: 8vw;width: 8vw;}.phead{width:8vw;height: 8vw;}.personageli h1{font-size: 1.2vw;}.personage{width: 27vw;height: 7.2vw;top:4vw;}#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: 99vw;
		height: 56.25vw;
}
.class1 {
		height: 56.25vw;
		width: 99vw;	
		background-image: url(../img/bg0.jpg);
		background-repeat:no-repeat;
		background-position: center;
		background-size:100%;
		position:absolute;
}


@media(max-width:1440px){.class01{height:174vw;width: 98vw;position: relative; overflow-x:scroll;}.class01::-webkit-scrollbar {display: none;}.class1{height:174vw;width: 309vw;background-size:contain;}}