@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background:#fff;
	white-space: nowrap;
    overflow-x: scroll;
	overflow-y: hidden;
}

@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:#c00;
}

a:hover{
	text-decoration: none;
	color: #e64048 !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;
}

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

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

#cover{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: 9999;
	background: url("images/cover.jpg") no-repeat center center;
	background-size: cover;
}

#cover p{
	position: absolute;
	width: 100%;
	left: 0%;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0, -50%);
	font-size: 2.4em;
	text-align: center;
}

.music{
	position: fixed;
	right: 1em;
	top: 1em;
	width: 2.8em;
	height: 2.8em;
	cursor: pointer;
	z-index: 999;
}
.music.on{background:url(images/music-on.png) no-repeat; background-size:100% 100%;}
.music.off{background:url(images/music-off.png) no-repeat;background-size:100% 100%;}
.music img{display: inline-block;}
@-moz-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-o-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@-webkit-keyframes music{from{ transform:rotate(-360deg); }to{ }}
@keyframes music{from{ transform:rotate(-360deg); }to{ }}
.music.on{
	animation:'music' 1.5s linear 0s infinite;
	-ms-animation:music 1.5s linear 0s infinite;
	-moz-animation:music 1.5s linear 0s infinite;
	-o-animation:'music' 1.5s linear 0s infinite;
	-webkit-animation:'music' 1.5s linear 0s infinite;
}

#page{
	position: relative;
	height: 100%;
}

#body-bg{
	max-width: none;
	height: 100%;
}

.body-bg{
	position: relative;
	display: inline-block;
	vertical-align: top;
	max-width: none;
	height: 100%;
	z-index: 9;
}

#box{
	position: absolute;
	height: 100%;
	left: 0px;
	top: 0px;
	overflow-y: hidden;
}

.video-bg{
	position: absolute;
	height: 100%;
	top: 0%;
	max-width: none;
}

#video1{
	left: 15.58%;
}

#video2{
	left: 28.34%;
}

#video3{
	left: 44.53%;
}

#video4{
	left: 58.58%;
}

#video5{
	left: 73.44%;
}

#video6{
	left: 87.79%;
}

.logo{
	width: 2.69%;
	height: 5.9%;
	left: 0.2%;
	top: 5%;
	background-image: url("images/logo.png");
}

.line{
	height: 100%;
	top: 0%;
}

.line1{
	left: 19.78%;
	width: 5.04%;
	background-image: url("images/line1.png");
}

.line2{
	left: 33.15%;
	width: 4.93%;
	background-image: url("images/line2.png");
}

.line3{
	left: 48.75%;
	width: 5.05%;
	background-image: url("images/line3.png");
}

.line4{
	left: 61.97%;
	width: 5.28%;
	background-image: url("images/line4.png");
}

.line5{
	left: 77.25%;
	width: 5.64%;
	background-image: url("images/line5.png");
}

.bird1{
	width: 0.58%;
	height: 20%;
	left: 0.29%;
	top: 27%;
	background-image: url("images/bird1.png");
}

.bird2{
	width: 0.47%;
	height: 10.4%;
	left: 3.28%;
	top: 12.9%;
	background-image: url("images/bird2.gif");
}

.bird3{
	width: 0.77%;
	height: 17%;
	left: 3.59%;
	top: 13.6%;
	background-image: url("images/bird2.gif");
}

.topic{
	width: 2.15%;
	height: 33.9%;
	left: 1.45%;
	top: 24.1%;
	background-image: url("images/topic.png");
}

.mouse{
	width: 0.64%;
	height: 3.5%;
	left: 2.07%;
	top: 64%;
	background-image: url("images/mouse.png");
}

.infor{
	width: 5.07%;
	height: 54.6%;
	left: 4.69%;
	top: 13.7%;
	background-image: url("images/infor.png");
}

.text1{
	width: 2.81%;
	height: 63.8%;
	left: 11.32%;
	top: 7.6%;
	background-image: url("images/text1.png");
}

.text2{
	width: 2.81%;
	height: 81.1%;
	left: 23.58%;
	top: 7.6%;
	background-image: url("images/text2.png");
}

.text3{
	width: 2.81%;
	height: 63.8%;
	left: 37.44%;
	top: 7.6%;
	background-image: url("images/text3.png");
}

.text4{
	width: 2.81%;
	height: 63.8%;
	left: 52.02%;
	top: 7.6%;
	background-image: url("images/text4.png");
}

.text5{
	width: 2.81%;
	height: 63.8%;
	left: 67.54%;
	top: 7.6%;
	background-image: url("images/text5.png");
}

.text6{
	width: 2.81%;
	height: 74.8%;
	left: 80.45%;
	top: 7.6%;
	background-image: url("images/text6.png");
}

.btn_pic{
	width: 0.54%;
	height: 16.2%;
	background-image: url("images/btn1.png");
	cursor: pointer;
}

.btn_video{
	width: 0.54%;
	height: 16.2%;
	background-image: url("images/btn2.png");
	cursor: pointer;
}

.btn1a{
	left: 15.54%;
	top: 32.4%;
}

.btn1b{
	left: 18.11%;
	top: 51.2%;
}

.btn2a{
	left: 28.06%;
	top: 29%;
}

.btn2b{
	left: 32.01%;
	top: 30.1%;
}

.btn3a{
	left: 41.62%;
	top: 33.4%;
}

.btn3b{
	left: 47.65%;
	top: 36.2%;
}

.btn4a{
	left: 57.51%;
	top: 34.1%;
}

.btn4b{
	left: 62.92%;
	top: 35.1%;
}

.btn5a{
	left: 71.64%;
	top: 33.4%;
}

.btn5b{
	left: 76.4%;
	top: 37.3%;
}

.btn6a{
	left: 84.57%;
	top: 23.1%;
}

.btn6b{
	left: 91.32%;
	top: 31.7%;
}

@keyframes btn{
	from{ }
	50%{ transform: scale(1.1,1.1); }
	to{  }
}
.btn_pic,.btn_video{
	animation:'btn' 2.0s linear 0s infinite;
	-ms-animation:btn 2.0s linear 0s infinite;
	-moz-animation:btn 2.0s linear 0s infinite;
	-o-animation:'btn' 2.0s linear 0s infinite;
	-webkit-animation:'btn' 2.0s linear 0s infinite;
}

.editor{
	width: 1.53%;
	height: 54.2%;
	left: 97.7%;
	top: 28.2%;
	background-image: url("images/editor.png");
}

.drop{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color:rgba(40,40,40,1);
	z-index: 9999;
}

.drop.hide{
	display: none;
}

.drop.show{
	display: block;
}

.drop .close{
	position: absolute;
	width: 4em;
	height: 4em;
	right: -2em;
	top: -2em;
	background: url("images/drop-close.png");
	background-size: 100% 100%;
	cursor: pointer;
	transition: transform 0.2s;
	z-index: 99;
}

.drop .close:hover{
	transform: scale(1.05, 1.05); 
}

.drop-pic{
	position: absolute;
	width: 114vh;
	height: 64vh;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.drop-pic .focus{
	border: 1px solid #fff;
	border-radius: 1em;
	overflow: hidden;
	background: #fff;
	position: relative;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
}

.drop-pic .focus li{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.drop-pic .focus img{
	width: 100%;
	height: 100%;
}

.drop-pic .focus p{
	position: absolute;
	width: 100%;
	height: 3em;
	line-height: 3em;
	left: 0px;
	bottom: 0px;
	text-align: center;
	color: #fff;
	font-size: 2em;
	text-shadow: 0px 0px 1em #000;
}

.drop-pic .arrow1,.drop-pic .arrow2{
	position: absolute;
	width: 3em;
	height: 6em;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	top: 50%;
	margin-top: -3em;
	cursor: pointer;
}

.drop-pic .arrow1:hover,.drop-pic .arrow2:hover{
	opacity: 0.8;
}

.drop-pic .arrow1{
	left: 2em;
	background-image: url("images/drop-arrow1.png");
}

.drop-pic .arrow2{
	right: 2em;
	background-image: url("images/drop-arrow2.png");
}

.drop-video{
	position: absolute;
	width: 113.77vh;
	height: 64vh;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background: #000;
	text-align: center;
}

.drop-video video{
	outline: none;
	height: 100%;
	width: 100%;
	background: #000;
}