@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;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	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;
}




#cover{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: #000;
    z-index: 10000;
}

#cover .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: url(images/cover-bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#cover .topic0{
    width: 68%;
	height: 21.1%;
	top: 35.2%;
	left: 16%;
	background-image: url("images/hd-topic.png");
}

#cover .logo0{
    width: 13.8%;
	height: 3.61%;
	top: 5%;
	left: auto;
	right: 3%;
	background-image: url("images/logo.png");
}

#cover .btn0{
	width: 12.2%;
	height: 6.5%;
	top: 75%;
	left: 43.9%;
	background-image: url("images/hd-btn0.png");
	transition: background 0.2s;
}

#cover .btn0:hover{
	background-image: url("images/hd-btn0b.png");
}

#cover .btn0 img{
	max-height: none;
	max-width: none;
	height: 140%;
	position: absolute;
	top: 50%;
	left: 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%);
	opacity: 0.4;
}

#cover p{
	width: 100%;
	height: 2em;
	line-height: 2em;
	text-align: center;
	left: 0%;
	top: 62%;
	font-size: 2em;
}

#cover video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    object-fit: cover;
    object-position: center center;
    background: #000;
}

#cover .video-btn {
    position: absolute;
    background: rgba(255,255,255,0.5);
    height: 2.4em;
    line-height: 2.4em;
    border-radius: 1.2em;
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    width: 10em;
    color: #c00;

}

#cover .btn4 {
    left: 50%;
    margin-left: -5em;
    bottom: 5%;
    font-size: 1.2em;
    background: rgba(255,255,255,0.8);
}





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

}

/*
::-webkit-scrollbar{
	display: none;
}
*/


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

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

.layout{
	position: absolute;
	top: 0px;
	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;
	z-index: 99;
}

.logo{
	position: fixed;
	width: 50%;
	height: 2.8em;
	left: auto;
	right: 6em;
	top: 1em;
	background-image: url("images/logo.png");
	background-position: right center;
	background-size: auto 80%;
	z-index: 998;
}

.phone-logo{ display: none;}

.mouse{
    width: 0.5%;
    height: 20%;
    left: 2.2%;
    top: 75%;
    opacity: 0.85;
}

.mouse img{
	position: absolute;
	top: 50%;
	left: 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%);
}

.header{
	width: 4.995%;
	height: 100%;
	opacity: 1 !important;
}

.header .tree{
	width: 71.8%;
	height: 34%;
	top: 0%;
	left: 0%;
	background-image: url("images/hd-tree.png");
	background-position: left top;
}

.header .bird{
	width: 16.2%;
	height: 13.9%;
	top: 16.3%;
	left: 68.7%;
	background-image: url("images/hd-bird.png");
}

.header .topic{
	width: 68%;
	height: 21.1%;
	top: 35.9%;
	left: 16%;
	background-image: url("images/hd-topic.png");
}

.people.people2{
	background-position: center bottom;
	z-index: 20;
}

.people2{
	background-position: center bottom;
	z-index: 20;
	opacity: 1 !important;
}


.people01{ width: 1.14%; height: 100%; left: 21.39%; top: 12%; background-image: url("images/people01.png"); }

.people02{ width: 1.22%; height: 29%; left: 25.6%; top: 65.5%; background-image: url("images/people02.png"); }

.people03{ width: 1.91%; height: 65.5%; left: 32.78%; top: 34.5%; background-image: url("images/people03.png"); }

.people04{ width: 1.55%; height: 54.9%; left: 54.5%; top: 45.1%; background-image: url("images/people04.png"); }

.people05{ width: 3.1%; height: 21.3%; left: 55.87%; top: 59.7%; background-image: url("images/people05.png"); }

.people06{ width: 6.34%; height: 21.9%; left: 70.31%; top: 78.1%; background-image: url("images/people06.png"); }

.people07{ width: 1.21%; height: 54.4%; left: 76.48%; top: 45.6%; background-image: url("images/people07.png"); }


.infor{ width: 1.92%; height: 66.3%; left: 5.73%; top: 11.9%; background-image: url("images/infor.png"); }

.text{
	top: 12.6%;
}

.text a{
	position: absolute;
}

.name{
	width: 0.15%;
	height: 14.6%;
}

.point{
	width: 0.13%;
	height: 4.44%;
	background-image: url("images/point.png");
}

.media01{ width: 0.92%; height: 11%; left: 13.04%; top: 44.4%; background-image: url("images/media01.png"); }

.text01{ width: 1.38%; height: 38.4%; left: 15.85%; background-image: url("images/text01.png"); }

.text01 .btn1{ width: 20.5%; height: 7.7%; left: 14.5%; top: 83%; }

.text01 .btn2{ width: 20.5%; height: 7.7%; left: 41.1%; top: 83%; }

.name01{ left: 17.37%; top: 35.2%; background-image: url("images/name01.png"); }

.name02{ left: 22.57%; top: 25.9%; background-image: url("images/name02.png"); }

.text02{ width: 1.07%; height: 26.6%; left: 22.84%; background-image: url("images/text02.png"); }

.text02 .btn1{ width: 26.5%; height: 12%; left: 17.7%; top: 73%; }

.text03{ width: 1.36%; height: 42.6%; left: 26%; background-image: url("images/text03.png"); }

.text03 .btn1{ width: 20.8%; height: 8.2%; left: 14.3%; top: 83.5%; }

.text03 .btn2{ width: 20.8%; height: 8.2%; left: 40%; top: 83.5%; }

.text04{ width: 1.52%; height: 35.4%; left: 31.9%; background-image: url("images/text04.png"); }

.text04 .btn1{ width: 18.6%; height: 9.2%; left: 12.3%; top: 80%; }

.text04 .btn2{ width: 18.6%; height: 9.2%; left: 35%; top: 80%; }

.name03{ left: 33.55%; top: 32.5%; background-image: url("images/name03.png"); }

.name04{ left: 36.4%; top: 11.3%; background-image: url("images/name04.png"); }

.text04{ width: 1.52%; height: 35.4%; left: 31.9%; background-image: url("images/text04.png"); }

.point01{ left: 37.68%; top: 42.5%; }

.text05{ width: 1.2%; height: 32%; left: 38.5%; background-image: url("images/text05.png"); }

.text05 .btn1{ width: 23.5%; height: 10%; left: 15.7%; top: 80.6%; }

.media02{ width: 1.41%; height: 14.8%; left: 40.04%; top: 56.1%; background-image: url("images/media02.png"); }

.text06{ width: 1.32%; height: 39%; left: 40.9%; background-image: url("images/text06.png"); }

.text07{ width: 1.27%; height: 38.7%; left: 43.17%; background-image: url("images/text07.png"); }

.text07 .btn1{ width: 22.3%; height: 9.2%; left: 11.4%; top: 79.6%; }

.text07 .btn2{ width: 22.3%; height: 9.2%; left: 38.2%; top: 79.6%; }

.name05{ left: 44.05%; top: 56%; background-image: url("images/name05.png"); }

.text08{ width: 1.73%; height: 32.2%; left: 49.47%; background-image: url("images/text08.png"); }

.media03{ width: 1.32%; height: 12%; left: 52.49%; top: 41.6%; background-image: url("images/media03.png"); }

.media04{ width: 1.13%; height: 10.1%; left: 56.7%; top: 16.8%; background-image: url("images/media04.png"); }

.text09{ width: 1.76%; height: 35.8%; left: 61.94%; background-image: url("images/text09.png"); }

.media05{ width: 1.32%; height: 10.1%; left: 67.19%; top: 22%; background-image: url("images/media05.png"); }

.media06{ width: 1.04%; height: 10.1%; left: 71.53%; top: 31.5%; background-image: url("images/media06.png"); }

.text10{ width: 1.18%; height: 40.6%; left: 74.35%; background-image: url("images/text10.png"); }

.text10 .btn1{ width: 24%; height: 8%; left: 14.8%; top: 78.8%; }

.name06{ left: 81.88%; top: 38.2%; background-image: url("images/name06.png"); }

.text11{ width: 1.37%; height: 40.6%; left: 83%; background-image: url("images/text11.png"); }

.text11 .btn1{ width: 20.7%; height: 8%; left: 14.8%; top: 84.5%; }

.text12{ width: 1.5%; height: 43.8%; left: 87.15%; background-image: url("images/text12.png"); }

.text12 .btn1{ width: 20.7%; height: 8%; left: 11.5%; top: 86%; }

.name07{ left: 87.78%; top: 61.3%; background-image: url("images/name07.png"); }

.media07{ width: 1.24%; height: 10.1%; left: 90.35%; top: 56.6%; background-image: url("images/media07.png"); }

.end-text{
	width: 2.2%;
	height: 4.44%;
	left: 94.44%;
	top: 33.3%;
	background-image: url("images/end-text.png");
}

.editor{
	width: 1.52%;
	height: 37%;
	left: 97.9%;
	top: 28%;
	background-image: url("images/editor.png");
	opacity: 1 !important;
}

.move i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	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;
}

#move01{ width: 5.099%; height: 100%; left: 7.99%; top: 0%; }

#move02{ width: 1.066%; height: 16.66%; left: 15.225%; top: 64.81%; }

#move03{ width: 1.446%; height: 58.79%; left: 18.44%; top: 0%; }

#move04{ width: 1.457%; height: 75.92%; left: 17.46%; top: 24.08%; }

#move05{ width: 1.56%; height: 31.48%; left: 19.16%; top: 68.52%; }

#move05b{ width: 0.718%; height: 16%; left: 19.25%; top: 57.22%; }

#move07{ width: 1.3%; height: 58.61%; left: 26.9%; top: 41.39%; }

#move08{ width: 0.65%; height: 38.89%; left: 28.38%; top: 41.85%; }

#move09{ width: 4.384%; height: 86.76%; left: 34.84%; top: 13.24%; }

#move10b{ width: 1.678%; height: 72.5%; left: 46.723%; top: 27.5%; }

#move10c{ width: 1.561%; height: 64.53%; left: 42.412%; top: 35.47%; }

#move11{ width: 1.295%; height: 41.66%; left: 56.52%; top: 38.7%; }

#move12b{ width: 2.601%; height: 84.26%; left: 69.3%; top: 15.74%; }

#move13{ width: 3.902%; height: 100%; left: 79.15%; top: 0%; }

#move15{ width: 1.347%; height: 81.85%; left: 29.31%; top: 18.15%; }

#move16{ width: 0.312%; height: 16.66%; left: 52.9%; top: 100%; }

#move17{ width: 0.374%; height: 9.81%; left: 59.3%; top: 70.5%; z-index: 9; }

#move18{ width: 0.895%; height: 27.4%; left: 58.53%; top: 71%; z-index: 10; }

#move80{ width: 2.732%; height: 60.18%; left: 11.5%; top: 35%; opacity: 0.9; }

#move82{ width: 3.33%; height: 66.6%; left: 56.7%; top: 35%; }

#move83a{ width: 3.33%; height: 66.6%; left: 94%; top: 37%; z-index: 8; }

#move83b{ width: 3.33%; height: 66.6%; left: 91.7%; top: 44%; z-index: 8; }

#move83c{ width: 3.33%; height: 66.6%; left: 96.6%; top: 48%; z-index: 8; }

#move99a{ width: 0.33%; height: 11.1%; left: 47.5%; top: 4.5%; }

#move99c{ width: 0.231%; height: 7.77%; left: 47%; top: 14%; }


#cloud1{ width: 7.2%; height: 15.3%; left: 90.4%; top: 29%; opacity: 0.8; z-index: 10; }
#cloud2{ width: 6.1%; height: 58.2%; left: 93.1%; top: 32%; opacity: 0.8; z-index: 10;}
#cloud3{ width: 10.6%; height: 68.7%; left: 85.5%; top: 25%; opacity: 0.8; z-index: 10;}

.uav{
	height: 100%;
	top: 0%;
	display: none;
}

.active.uav{
	display: block;
}

.uav01{ width: 5.724%; left: 22.426%; }

.uav02{ width: 2.474%; left: 39.339%; }

.uav03{ width: 4.337%; left: 49.907%; }

.uav04{ width: 3.960%; left: 72.175%; }

.uav05{ width: 8.296%; left: 90.454%; }


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

.drop .close{
	position: absolute;
	width: 2em;
	height: 2em;
	right: -1em;
	top: -1em;
	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: 110vh;
	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 img{
	width: 100%;
	height: 100%;
}

.drop-pic .shadow{
	position: absolute;
	width: 100%;
	height: 7.5em;
	left: 0px;
	bottom: 0px;
	background-color:rgba(0,0,0,0.6);
}

.drop-pic .txt{
	position: absolute;
	z-index: 9;
	left: 9em;
	bottom: 0em;
	width: calc(100% - 28em);
	height: 7.5em;
	font-size: 1em;
}

.drop-pic .txt td{
	font-size: 1.7em;
	line-height: 1.4em;
	white-space: normal;
}

.drop-pic .txt td a{
	cursor: pointer;
}

.drop-pic .num{
	position: absolute;
	z-index: 9;
	right: 9em;
	bottom: 0em;
	width: 7.5em;
	height: 7.5em;
	font-size: 1em;
	text-align: right;
	color: #a7a7a7;
}

.drop-pic .num td{
	font-size: 1.5em;
}

.drop-pic .num span{
	color: #fff;
	font-size: 2.4em;
}

.drop-pic .arrow1,.drop-pic .arrow2{
	position: absolute;
	width: 1em;
	height: 2.19em;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 2.655em;
	cursor: pointer;
}

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

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

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

.drop-xilan{
	position: absolute;
	width: 94%;
	height: 94%;
	left: 3%;
	top: 3%;
}

.drop-xilan iframe{
	width: 100%;
	height: 100%;
	border-radius: 1em;
}

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

.drop-voice{
	position: absolute;
	width: 88vh;
	height: 23vh;
	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-voice .audio{
	border: 1px solid #fff;
	border-radius: 1em;
	overflow: hidden;
	background: #fff;
	position: relative;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
}

.drop-voice .audio .bg{
	height: 80%;
	background: url("images/drop-voice.png") no-repeat center center;
	background-size: contain;
}

.drop-voice .audio audio{
	position: absolute;
	width: 100%;
	height: 20%;
	left: 0px;
	bottom: 0px;
}