@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#333;
	background: #fff;
}

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#333;
}

a:hover{
	text-decoration: none;
	color: #c00 !important;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

img{
	display:block;
	max-height: 100%;
	max-width: 100%;
}

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}

table{
	font-size: 1em;
}

.photo{
	position: relative;
	overflow: hidden;
}

.photo img{
	width: 100%;
	height: 100%;
}

.photo p{
	position: absolute;
	left: 0px;
	bottom : 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#page{
	height: 100%;
	max-height: 1000px;
	white-space: nowrap;
    overflow-x: scroll;
	overflow-y: hidden;
}

#page .roll{
	position: relative;
	height: 100%;
	vertical-align: top;
    display: inline-block;
}

.reel-right2{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 2000px;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	max-height: 1000px;
	z-index: 995;
}

.reel-right2 img{
	height: 100%;
}

@-ms-keyframes reel{
	from{  }
	99%{ width: 2000px; }
	to{ width: 0px; left: 2000px; }
}
@-moz-keyframes reel{
	from{  }
	99%{ width: 2000px; }
	to{ width: 0px; left: 2000px; }
}
@-o-keyframes reel{
	from{  }
	99%{ width: 2000px; }
	to{ width: 0px; left: 2000px; }
}
@-webkit-keyframes reel{
	from{  }
	99%{ width: 2000px; }
	to{ width: 0px; left: 2000px; }
}
@keyframes reel{
	from{  }
	99%{ width: 2000px; }
	to{ width: 0px; left: 2000px; }
}

.reel-right2{
	animation:'reel' 1.2s linear 0.2s forwards;
	-ms-animation:reel 1.2s linear 0.2s forwards;
	-moz-animation:reel 1.2s linear 0.2s forwards;
	-o-animation:'reel' 1.2s linear 0.2s forwards;
	-webkit-animation:'reel' 1.2s linear 0.2s forwards;
}

.layout{
	display: inline-block;
    vertical-align: top;
	width: auto;
	top: 5.65%;
	height: 89.07%;
	position: absolute;
	white-space: normal;
}

.abs{
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.main-bg{
	max-width: none;
	width: auto;
	height: 100%;
	position: relative;
}

#video1{
	position: absolute;
	left: 0.91%;
	top: 5.65%;
	height: 89.07%;
	width: auto;
	overflow: hidden;
}

#video1 video{
	height: 100.2%;
}

.left-shadow{
	position: absolute;
	left: 0.91%;
	top: 5.65%;
	height: 89.07%;
	width: 0.53%;
	background: url("images/left-shadow.png");
	background-size: 100% 100%;
}

.header-text{
	width: 1.48%;
	height: 29.54%;
	left: 13.9%;
	top: 19.9%;
	background-image: url("images/header-text.png");
}

.move1{
	width: 0.64%;
	height: 5.56%;
	background-image: url("images/move1.png");
	left: 15.92%;
	top: 51.85%;
}

.move2{
	width: 4.85%;
	height: 32.87%;
	background-image: url("images/move2.png");
	left: 24.17%;
	top: 5.65%;
}

.move3{
	width: 2.11%;
	height: 17.87%;
	background-image: url("images/move3.png");
	left: 36.48%;
	top: 9.9%;
}

.move4{
	width: 3.47%;
	height: 81.02%;
	background-image: url("images/move4.png");
	background-position: center bottom;
	left: 53.4%;
	bottom: 5.27%;
	z-index: 9;
}

.move5a{
	width: 0.47%;
	height: 3.88%;
	background-image: url("images/move5a.png");
	left: 56.4%;
	top: 88.8%;
}

.move5b{
	width: 0.14%;
	height: 1.11%;
	background-image: url("images/move5b.png");
	left: 59.1%;
	top: 82%;
}

.move5c{
	width: 0.31%;
	height: 4.91%;
	background-image: url("images/move5c.png");
	left: 59.9%;
	top: 15.6%;
}

.move5d{
	width: 0.18%;
	height: 3.15%;
	background-image: url("images/move5d.png");
	left: 64.7%;
	top: 13.2%;
}

.move5e{
	width: 0.39%;
	height: 7.59%;
	background-image: url("images/move5e.png");
	left: 61%;
	top: 11.2%;
}

.move5f{
	width: 0.09%;
	height: 1.76%;
	background-image: url("images/move5f.png");
	left: 54.2%;
	top: 36.8%;
}

.move5g{
	width: 0.47%;
	height: 3.88%;
	background-image: url("images/move5a.png");
	left: 57.6%;
	top: 15.4%;
}

.move5h{
	width: 0.31%;
	height: 4.91%;
	background-image: url("images/move5c.png");
	left: 61%;
	top: 78%;
}

.move6{
	width: 5.34%;
	height: 80%;
	background-image: url("images/move6.png");
	background-position: center bottom;
	left: 78.6%;
	bottom: 5.27%;
	z-index: 1;
}

.cloud1{
	width: 20.4%;
	height: 31.6%;
	background-image: url("images/cloud1.png");
	background-position: center bottom;
	left: 15%;
	bottom: 5.27%;
}

.cloud2{
	width: 16.8%;
	height: 48.2%;
	background-image: url("images/cloud2.png");
	background-position: center bottom;
	left: 39.2%;
	bottom: 5.27%;
}

.cloud3{
	width: 16.6%;
	height: 42.3%;
	background-image: url("images/cloud3.png");
	background-position: center bottom;
	left: 63.5%;
	bottom: 5.27%;
	z-index: 2;
}

.cloud4{
	width: 8.6%;
	height: 58.8%;
	background-image: url("images/cloud4.png");
	background-position: center bottom;
	left: 72.9%;
	bottom: 18.2%;
	z-index: 0;
}

.cloud5{
	width: 9.58%;
	height: 26.4%;
	background-image: url("images/cloud5.png");
	background-position: center bottom;
	left: 82.5%;
	bottom: 5.27%;
	z-index: 3;
}

.topic{
	background-position: center top;
	width: 1.77%;
	top: 5.64%;
}

#topic1{ left: 25.46%; height: 57.7%; background-image: url("images/topic1.png"); top: 15.74% !important; }
#topic2{ left: 28.68%; height: 55.0%; background-image: url("images/topic2.png"); }
#topic3{ left: 41.80%; height: 54.2%; background-image: url("images/topic3.png"); }
#topic4{ left: 63.30%; height: 64.0%; background-image: url("images/topic4.png"); }
#topic5{ left: 65.64%; height: 53.5%; background-image: url("images/topic5.png"); }
#topic6{ left: 89.48%; height: 53.5%; background-image: url("images/topic6.png"); }

.topic i,.topic b{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	bottom: 0px;
	background: url("images/topic-cloud.png") no-repeat center bottom;
	background-size: 100% auto;
}

.topic i{
	opacity:0.25;
}

.border{
	position: absolute;
	width: 6.61%;
	height: 47.96%;
	top: 24.4%;
	background: url("images/border.png");
	background-size: 100% 100%;
	z-index: 8;
}

.border .photo{
	width: 92.6%;
	height: 86.4%;
	left: 3.7%;
	top: 6.8%;
}

.border .photo .play{
	position: absolute;
	width: 10.85%;
	height: 19.24%;
	left: 3%;
	bottom: 5%;
	background: url("images/video-play.png");
	background-size: contain;
}

#border1{ left: 18.44%; }
#border2{ left: 30.66%; }
#border3{ left: 45.26%; }
#border4{ left: 56.33%; }
#border5{ left: 68.03%; }
#border6{ left: 82.31%; }

.intro{
	position: absolute;
	width: 7.74%;
	height: 52.69%;
	top: 22.0%;
	z-index: 10;
	display: none;
}

#intro1{ left: 18.01%; background-image: url("images/intro1.png"); }
#intro2{ left: 30.23%; background-image: url("images/intro2.png"); }
#intro3{ left: 44.83%; background-image: url("images/intro3.png"); }
#intro4{ left: 56.40%; background-image: url("images/intro4.png"); }
#intro5{ left: 67.60%; background-image: url("images/intro5.png"); }
#intro6{ left: 81.88%; background-image: url("images/intro6.png"); }

.name{
	position: absolute;
	height: 2.5%;
	top: 75.5%;
	width: 1.44%;
	z-index: 9;
}

#name1{ left: 23.62%; background-image: url("images/name1.png"); }
#name2{ left: 30.66%; background-image: url("images/name2.png"); }
#name3{ left: 50.44%; background-image: url("images/name3.png"); }
#name4{ left: 61.5%; background-image: url("images/name4.png"); }
#name5{ left: 73.22%; background-image: url("images/name5.png"); }
#name6{ left: 87.49%; background-image: url("images/name6.png"); }

#footer{
	position: absolute;
	width: 5.84%;
	height: 68.79%;
	right: 2.2%;
	top: 19.5%;
	background-image: url("images/footer.png");
}