@charset "utf-8";
/* CSS Document */

body{
	background-image: url(../img/bgp.png);
	background-size: 100vw;
	background-repeat: no-repeat;
	background-color: #262626;
	
}
.menu {
	
	position: fixed;
	top: 2.4vw;
	left: 2vw;
	width: 3.2vw;
	z-index: 910;
}
.menuright {
	position: fixed;
	top: 2.4vw;
	right: 2vw;
	z-index: 910;
}

.boxleft {
	width: 40.6vw;
	height: 50vw;
	left: 9.4vw;
	top: 2vw;
	position: fixed;
}

.boxright {
	width: 40.6vw;
	height: 50vw;
	right: 9.4vw;
	top:2vw;
	position: fixed;
	
}

.boxlefttop {
	width: 100%;
	height: 12.5%;
	position:absolute;
}

.boxleftmid {
	width: 100%;
	height: 35.5%;
	top:12.5%;
	position:absolute;
}

.boxleftbottom {
	width: 100%;
	height: 52%;
	top:48%;
	position:absolute;
	
}

.boxbottom1{
	height: 84.4%;
	width: 90%;
	margin-left: 10%;
	position: absolute;
	overflow-y: scroll;
}
   .boxbottom1::-webkit-scrollbar {
        display: none;
    }


.box1{
	width: 100%;
	float: left;
	
}
.boxa{
	width: 14%;
	float: left;
	height: 1.875vw;
}

.boxbottom1 h2{
	font-family: "arial";
	font-size: 0.6vw;
	letter-spacing:0.05vw;
	text-align: center;
	margin-top:12%;
	color: #FFFFFF;
}

.boxb{
	width: 56%;
	float: left;
}

.boxbottom1 p{
	letter-spacing:0.03vw;
	line-height:0.8vw;
	font-size: 0.6vw;
	color: #DADADA;
	
	margin-top: 3%;
	margin-right: 2%;
	margin-bottom: 0;
}

.boxc{
	width: 30%;
	float: left;
}

.mid2 input[type="radio"] {
  width: 0;
  height: 0;
  opacity: 0;
	margin: 0;
}

.mid2 label {
  	position: absolute;
  	width: 6vw;
	height: 6vw;
  	background: url(../img/0.png);
	background-size: contain;
}

.mid2 input:checked+label {
  	background: url(../img/head8b.png);
	background-size: contain;
}

.mid2 input:checked+label::after {
  position: absolute;
}


.boxbottom1 input[type="radio"] {
  width: 0;
  height: 0;
  opacity: 0;
	margin: 0;
}

.boxbottom1 label {
  	position: absolute;
  	width: 1.875vw;
	height: 1.875vw;
  	border-radius: 50%;
  	background: url(../img/0.png);
	background-size: contain;
}

.boxbottom1 input:checked+label {
  	background: url(../img/piconb.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.boxbottom1 input:checked+label::after {
  position: absolute;
}

.boxc-t{
	width: 1.875vw;
	height: 1.875vw;
	float: left;
	background-image: url(../img/texticon.png);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
}

.boxc-i{
	width: 1.875vw;
	height: 1.875vw;
	float: left;
	background-image: url(../img/imgicon.png);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
}

.boxc-c{
	width: 1.875vw;
	height: 1.875vw;
	float: left;
	background-image: url(../img/comicicon.png);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
}

.boxc-v{
	width: 1.875vw;
	height: 1.875vw;
	float: left;
	background: url(../img/videoicon.png);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
}

#head1 {
	width: 50%;
	height: 28%;
	position: absolute;
	margin: 5% 25% 0% 25%;
}

.boxlefttop h1 {font-family:arial;color:#FFFFFF;text-align: center;font-size: 1.6vw;background-image:-webkit-linear-gradient(right,hsla(200,100%,60%,1.00),hsla(160,100%,60%,1.00)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.boxlefttop h3 {font-family:arial;color: #FFFFFF;font-size:0.8vw;letter-spacing:0.02vw;font-weight:lighter;text-align: center;}

#head2 {
	width: 50%;
	height: 14%;
	position: absolute;
	margin: 9.8% 25% 0% 25%;
}

.mid1 {
	width: 60%;
	height: 100%;
	left:25%;
	position: absolute;
}

.mid2 {
	top:50%;
	transform: translate(0, -50%);
	position: absolute;
}

.mid1-1 {
	width: 100%;
	height: 6vw;
	margin: 1.2% 0;
}

.boxleftmid h4{
	line-height:0.8vw;
	color: #FFFFFF;
	font-size: 0.6vw;
	font-family:"Microsoft YaHei";
	font-weight:lighter;
	text-align:left;
	margin:14% 0 0 6%;
}

.mid1a{
	height: 6vw;
	width: 6vw;
	border-radius: 50%;
	float: left;
}

.mid1a-h{
	height: 4.8vw;
	width: 4.8vw;
	border-radius: 50%;
	position: absolute;
	margin: 0.6vw 0.6vw;
}

.mid1b{width:18vw;;height: 6vw;float: left;}

#mid1-1-a {background:url(../../personage/img/Lalac.png);background-repeat: no-repeat;background-size: contain;}
#mid1-2-a {background-repeat: no-repeat;background:url(../img/head.png);background-size: contain;}
#mid1-3-a {background-repeat: no-repeat;background:url(../img/head.png);background-size: contain;}


h5{
	line-height:0.8vw;
	color:#C0C0C0;
	font-size: 0.5vw;
	font-family:"Microsoft YaHei";
	font-weight:lighter;
	letter-spacing:0.02vw;
	margin: 1vw 0.2vw;
	text-align:left;
}

#personage-p{
	width: 40.6vw;
	height: 50vw;
	right: 9.4vw;
	top:2vw;
	position: fixed;
	z-index: 18;
	display: block;
}

#personage-p1{
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
}

#personage-p1-img{
	height: 92%;
	width: 86%;
	position: absolute;
	top: 4%;

	background:url(img/Lalat.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#personage-t{
	display: block;
	width: 40.6vw;
	height: 50vw;
	right: 9.4vw;
	top:2vw;
	position: fixed;
	z-index: 18;
	display: none;
}
.personage-t1{
	height: 96%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 2%;
}

.personage-text{
	height: 100%;
	width: 76%;
	position: absolute;
	left: 0.5%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	overflow-y: scroll;
}
   .personage-text::-webkit-scrollbar {
        display: none;
    }

.personage-text img{width: 100%;}

.personage-text p{
	font-family: "SimSun";
	font-size: 0.7vw;
	color: #EEEEEE;
	margin: 4% 0.2%;
	line-height: 1vw;
}

.personage-text h3{
	font-family: "SimSun";
	font-size: 0.6vw;
	color:#777777;
	margin: 6% 4%;
	text-align:left;
	line-height: 1vw;
}

.personage-text h1 {
	
	color: #FFFFFF;
	text-align: center;
	font-size:1vw;
	letter-spacing:0.02vw;
	margin: 4% 4% 1% 4%;
}

.personage-text h2 {
	color: #777777;
	text-align: center;
	font-size:0.6vw;
	
	margin: 0.2% 2% 6% 50%;
}


.personage-tp{
	height: 100%;
	width: 23%;
	position: absolute;
	right: 0;
}

.personage-tp-1{
	width: 90%;
	height: 30%;
	top: 12%;
	position: absolute;
	right: 0;
	overflow-y: scroll;
}
   .personage-tp-1::-webkit-scrollbar {
        display: none;
    }

.personage-pp{
	width: 100%;
	height: 3vw;
	margin-bottom: 4%;
	background:url(img/);
	background-size: contain;
	background-repeat: no-repeat;
}

.pp-h{
	width: 2.8vw;
	height: 2.8vw;
	float: left;
	background-size: contain;
	background-repeat: no-repeat;
}
.pp-h a{
	height: 2.8vw;
	width: 2.8vw;
	position: absolute;
	border-radius: 50%;
}

.pp-t{
	height: 2.8vw;
	width: 5.4vw;
	float: left;
	margin: 0 0;
}

.ph-1{background-image: url(../img/head.png);}
.ph-AIJ{background-image: url(../img/headai.png)}

#personage-i{
	display: block;
	width: 40.6vw;
	height: 50vw;
	right: 9.4vw;
	top:2vw;
	position: fixed;
	z-index: 16;
	display: none;
}
.personage-i1{
	height: 81.2%;;
	width: 100%;
	position: absolute;
	top: 12%;
	
}

#personage-i1-img{
	height: 100%;
	width: 100%;
	background-image: url(../img/0.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#personage-i2-img{height: 100%;width: 100%;background-image: url(../img/0.png);background-size: contain;background-repeat: no-repeat;background-position: center;}

#personage-i2{
	height: 6%;
	width: 100%;
	position: absolute;
	bottom: 0;
}

#personage-c{
	display: block;
	width: 40.6vw;
	height: 50vw;
	right: 9.4vw;
	top:2vw;
	position: fixed;
	z-index: 14;
	display: none;
}

.personage-c1{
	height: 86%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 7%;}

.personage-c1-img{
	height: 100%;
	width: 74%;
	position: absolute;
	left: 2%;
	background-color:#FFFFFF;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	overflow-y: scroll;
}
   .personage-c1-img::-webkit-scrollbar {
        display: none;
    }
.personage-c1-img img{
	width: 100%;
	margin-bottom: 0.6vw;
}

.personage-cp{
	height: 100%;
	width: 23%;
	position: absolute;
	right: 0;
}

.personage-cp-1{
	width: 90%;
	height: 30%;
	top: 12%;
	position: absolute;
	right: 0;
	overflow-y: scroll;
}
   .personage-cp-1::-webkit-scrollbar {
        display: none;
    }

.personage-cp-2{
	width: 100%;
	background:url(img/);
	background-size: contain;
	background-repeat: no-repeat;
	margin-top: 6%;
}

#personage-v{
	display: block;
	width: 40.6vw;
	height: 50vw;
	right: 9.4vw;
	top:2vw;
	position: fixed;
	z-index: 12;
	display: none;
}
#personage-v1{
	height: 100%;
	width: 77%;
	position: absolute;
	left: 0;
}

#personage-v1-img{
	height: 42.36vw;;
	width: 30vw;
	position: absolute;
	top: 7%;
	left: 2.3%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#personage-v2{
	height: 100%;
	width: 23%;
	position: absolute;
	right: 0;
}
#world {
		width: 3.2vw;
		height: 3.2vw;
		float: left;
}
  #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;}

#back {
	width: 0vw;
	height: 0vw;
	float: left;
	margin-top: 20%;
	background: url(../img/back1.png);
	background-position:center;
	background-size:cover;
	background-repeat: no-repeat;
	display: none;
}
#back:hover{background: url(../img/back2.png);
			background-position:center;
			background-size:cover;
			background-repeat: no-repeat;	
}

#personage {
		width: 3.2vw;
		height: 3.2vw;
		float: left;
}
  #personage 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;}
    #personage a:hover{background:url(../img/personage2.png);background-size:cover;}
    #personage a:active{background:url(../img/personage2.png);background-size:cover;}

#large-c1{position: fixed;top: 10vw;right: 12vw;z-index: 920;}
.large {
	width: 3.2vw;
	height: 3.2vw;
	background: url(../img/back1.png);
	background-position:center;
	background-size:cover;
	background-repeat: no-repeat;
	display: block;
}
.large:hover{background: url(../img/back2.png);
			background-position:center;
			background-size:cover;
			background-repeat: no-repeat;	
}


@media(max-width:1440px){.boxleft{position: absolute;width: 98vw;height: 120vw;left:0;}.boxlefttop h1 {font-size: 3.8vw;}.boxlefttop h3 {font-size:1.6vw;letter-spacing:0.04vw;}.mid1{width: 60%;left: 20%;}.mid2 label {width: 16vw;height: 16vw;}.mid1a{height: 16vw;width: 16vw;margin: 0 0;}.mid1a-h{height: 12vw;width: 12vw;margin: 2vw 2vw;}.mid1b{height: 16vw;width: 40vw;margin: 0.8% 0;}.boxleftmid h4{line-height:2.2vw;font-size: 1.4vw;letter-spacing:0.04vw;margin:16% 6% 0 6%;}
	.boxbottom1 label{width: 5vw;height: 5vw;}.boxc-i{width: 5vw;height: 5vw;}.boxc-t{width: 5vw;height: 5vw;}.boxc-c{width: 5vw;height: 5vw;}.boxc-v{width: 5vw;height: 5vw;}.boxa{height: 5vw;}.boxbottom1 h2{font-size: 1.6vw;letter-spacing:0.1vw;}.boxbottom1 p{line-height:2.4vw;font-size: 1.6vw;}
	#personage-p{position: absolute;width: 100vw;height: 160vw;background: rgba(38,38,38, 0.98);display: none;right:0;}#personage-p1{width:90%; left: 6%;height: 90%;top: 2%;}#personage-p2-1{right: 0%;bottom: 0%;}.personage-p2-w{width: 6vw;height: 6vw;}#personage-p1-img{height: 100%;width: 100%;}
	#personage-t{position: absolute;width: 100vw;height: 160vw;background: rgba(38,38,38, 0.98);display: none;right:0;}.personage-text{width: 86%;left: 8%;}.personage-tp{width: 9%;}.pp-t{display: none;}
	.personage-text p{line-height:2vw;font-size: 1.6vw;}.personage-text h3{line-height:2vw;font-size: 1.6vw;}.personage-text h1 {font-size:2vw;letter-spacing:0.04vw;}.personage-text h2 {font-size:1.6vw;}	
	
	.personage-pp{height: 6vw;}.pp-h{height: 6vw;width: 6vw;}.pp-h a{height: 6vw;width: 6vw;}.pp-t{height: 2.4vw;width: 10.8vw;margin: 1.8vw 0;}h5{line-height:0.8vw;font-size: 1.2vw;letter-spacing:0.02vw;margin: 0.8vw;}
	#personage-i{position: absolute;width: 100vw;height: 110.7vw;background: rgba(38,38,38, 0.98);display: none;right:0;}.personage-i1{width: 80%;height: 80%;  top: 7%;left: 12%}
	#personage-c{position: absolute;width: 100vw;height: 110.7vw;background: rgba(38,38,38, 0.98);display: none;right:0;}.personage-c1-img{width: 68%;left: 12%;}.personage-cp{width: 20%;}
	#personage-v{position: absolute;width: 98vw;height: 120vw;background: rgba(38,38,38, 0.98);display: none;right:0;}
	.menu{width: 6.4vw;}#back{height: 6.4vw;width: 6.4vw;}#world{height: 6.4vw;width: 6.4vw;}#personage{height:6.4vw;width: 6.4vw;}.large{height:6.4vw;width: 6.4vw;}
}

@media(min-width:1440px) and (max-width:2559px){}