body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}
#header,#footer,.stars{display: none;}
.hr2,.fr2,.ss2{display: block;}
body.active{
	background:#000 url(imagesbanner.jpg) center no-repeat;
	 /*background-attachment: fixed;*/
	background-size:100% 98%;
}
.gefbody{background:#000 url(imagesbanner.jpg) center no-repeat;
	 /*background-attachment: fixed;*/
		background-size:100% 98%;
  		overflow: hidden;
  }
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}

.htmleaf-container{
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
.bgcolor-7 { background: #d0d6d6; }/*White tea*/
.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
/* Header */
.htmleaf-header{
	padding: 1em 190px 1em;
	letter-spacing: -1px;
	text-align: center;
}
.htmleaf-header h1 {
	color: #fff;
	font-weight: 600;
	font-size: 2em;
	line-height: 1;
	margin-bottom: 0;
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
.htmleaf-header h1 span {
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
	display: block;
	font-size: 60%;
	font-weight: 400;
	padding: 0.8em 0 0.5em 0;
	color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #1d7db1;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 1.5em;
	text-align: center;
}

.htmleaf-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #dbdbdb;
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}

.htmleaf-icon span {
	display: none;
}

.htmleaf-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/****/
.related {
	color: #fff;
	background: #333;
	text-align: center;
	font-size: 1.25em;
	padding: 0.5em 0;
	overflow: hidden;
}

.related > a {
	vertical-align: top;
	width: calc(100% - 20px);
	max-width: 340px;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
.related a {
	display: inline-block;
	text-align: left;
	margin: 20px auto;
	padding: 10px 20px;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
	opacity: 1;
}

.related a img {
	max-width: 100%;
	opacity: 0.8;
	border-radius: 4px;
}
.related a:hover img,
.related a:active img {
	opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;}
.related a h3 {
	font-weight: 300;
	margin-top: 0.15em;
	color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
	content: "\e5000";
}

.icon-htmleaf-arrow-forward-outline:before {
	content: "\e5001";
}

/*头部文件*/

img{border: none;}
.cls{clear: both;}
#header{margin: 0 auto; width: 1200px;height: 80px;position: relative;}
#header ul li{list-style: none;}
#header ul .logo{float: left;padding-top: 35px;}
#header ul .fh{float: right;padding-top:28px;}
#header ul .fh a{color: #fff; font-size: 14px; padding-right: 20px;font-family: '微软雅黑';}


.header{margin: 0 auto; width: 1200px;height: 80px;position: relative;}
.header ul li{list-style: none;}
.header ul .logo{float: left;padding-top: 35px;}
.header ul .fh{float: right;padding-top:28px;}
.header ul .fh a{color: #fff; font-size: 14px; padding-right: 20px;font-family: '微软雅黑';}


.syqcbj{position: absolute;right: -60px;top:150px;opacity: 0;}
.syqcbj.active{
	opacity: 1;
	/*animation:qcbj 0.9s;
	-moz-animation:qcbj 0.9s;
	-webkit-animation:qcbj 0.9s;
	-ms-animation:qcbj 0.9s;*/
}

.gefgs{position: absolute; right: 40px;top:155px;
		animation:gefgs 2s;
		-moz-animation:gefgs 2s;
		-webkit-animation:gefgs 2s;
		-ms-animation:gefgs 2s;
		display: none;
}
@keyframes gefgs
{
from {right:-100px;opacity: 0}
to {right: 40px;opacity: 1}
}

@-moz-keyframes gefgs /* Firefox */
{
from {right:-100px;opacity: 0}
to {right: 40px;opacity: 1}
}

@-webkit-keyframes gefgs /* Safari and Chrome */
{
from {right:-100px;opacity: 0}
to {right: 40px;opacity: 1}
}

@-ms-keyframes gefgs /* Opera */
{
from {right:-100px;opacity: 0}
to {right: 40px;opacity: 1}
}
		

.gefgssy{position: absolute; left: 87px;top:190px;opacity: 0;}
.gefgssy.active{
	opacity: 1;
	animation:myfirst 0.5s;
	-moz-animation:myfirst 0.5s;
	-webkit-animation:myfirst 0.5s;
	-ms-animation:myfirst 0.5s;
}
@keyframes myfirst
{
from {left: -100px;opacity: 0}
to {left: 87px;opacity: 1}
}

@-moz-keyframes myfirst /* Firefox */
{
from {left: -100px;opacity: 0}
to {left: 87px;opacity: 1}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {left: -100px;opacity: 0}
to {left: 87px;opacity: 1}
}

@-ms-keyframes myfirst /* Opera */
{
from {left: -100px;opacity: 0}
to {left: 87px;opacity: 1}
}
.sygs{position: absolute; left: 109px;top:566px;z-index: 9;opacity: 0;}

.sygs.active{
		opacity: 1;
		animation:my2 0.5s;
		-moz-animation:my2 0.5s;
		-webkit-animation:my2 0.5s;
		-ms-animation:my2 0.5s;
		backface-visibility:hidden;
		-webkit-backface-visibility:hidden;	
		-moz-backface-visibility:hidden; 
		-ms-backface-visibility:hidden; 
}
.sygs .sy-next{font-size: 24px;}
@keyframes my2
{
0% {top:581px;opacity: 0}
100% {top:566px;opacity: 1}
}

@-moz-keyframes my2 /* Firefox */
{
0% {top:581px;opacity: 0}
100% {top:566px;opacity: 1}
}

@-webkit-keyframes my2 /* Safari and Chrome */
{
0% {top:581px;opacity: 0}
100% {top:566px;opacity: 1}
}

@-ms-keyframes my2 /* Opera */
{
0% {top:581px;opacity: 0;}
100% {top:566px;opacity: 1;}
}

.syxt{
	opacity: 0;
	position: absolute;
	transform:rotate(-44deg);
	-ms-transform:rotate(-44deg); /* Internet Explorer */
	-moz-transform:rotate(-44deg); /* Firefox */
	-webkit-transform:rotate(-44deg);
	z-index: 3;
	right: 3%;
	top:165px;
}
.syxt.active{
	opacity: 1;	
	animation:syxt 1s ease-in-out;
	-moz-animation:syxt 1s ease-in-out;
	-webkit-animation:syxt 1s ease-in-out;
	-ms-animation:syxt 1s ease-in-out;
}

@keyframes syxt
{
0% {right: -50%; opacity: 0;transform:translateX(200px) rotate(-44deg);}
100% {right: 3%; opacity: 1;transform:translateX(0) rotate(-44deg);}
}

@-moz-keyframes syxt /* Firefox */
{
0% {right: -50%; opacity: 0;-moz-transform:translateX(200px) rotate(-44deg);}
100% {right: 3%; opacity: 1;-moz-transform:translateX(0) rotate(-44deg);}
}

@-webkit-keyframes syxt /* Safari and Chrome */
{
0% {right: -50%; opacity: 0;-webkit-transform:translateX(200px) rotate(-44deg);}
100% {right: 3%; opacity: 1;-webkit-transform:translateX(0) rotate(-44deg);}
}
@-ms-keyframes syxt /* Opera */
{
0% {right: -50%; opacity: 0;-ms-transform:translateX(200px) rotate(-44deg);}
100% {right: 3%; opacity: 1;-ms-transform:translateX(0) rotate(-44deg);}
}

.syst{position:absolute;opacity: 0;z-index: 4;top:80px;right: 22%;
	transform:rotate(46.5deg);
	-ms-transform:rotate(46.5deg);
	-moz-transform:rotate(46.5deg);
	-webkit-transform:rotate(46.5deg);
}
.syst.active{
	opacity: 1;
	animation:syst 1s;
	-moz-animation:syst 1s;
	-webkit-animation:syst 1s;
	-ms-animation:syst 1s;
}

@keyframes syst
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:22%; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

@-moz-keyframes syst /* Firefox */
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:22%; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

@-webkit-keyframes syst /* Safari and Chrome */
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:22%; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

@-ms-keyframes syst /* Opera */
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:22%; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}
.syst img{max-width: 95%; max-height: 95%;}


.syqc{
	opacity: 0;
	position: absolute;
	z-index: 6;
	right: 2%;
	top:300px;
}
.syqc.active{
	opacity: 1;
	animation:syqc 1s;
	-moz-animation:syqc 1s;
	-webkit-animation:syqc 1s;
	-ms-animation:syqc 1s;
}

@keyframes syqc
{
0% {opacity: 0.8; transform: perspective(1500px) translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {opacity: 1; transform: perspective(1500px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}

@-moz-keyframes syqc /* Firefox */
{
0% {opacity: 0.8; -moz-transform: perspective(1500px) translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {opacity: 1; -moz-transform: perspective(1500px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}

@-webkit-keyframes syqc /* Safari and Chrome */
{
0% {opacity: 0.8; -webkit-transform: perspective(1500px) translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {opacity: 1; -webkit-transform: perspective(1500px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}

@-ms-keyframes syqc /* Opera */
{
0% {opacity: 0.8; -ms-transform: perspective(1500px) translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {opacity: 1; -ms-transform: perspective(1500px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
}
.sydy{position: absolute;}
.sycd{
	opacity: 0;
	position: absolute;
	z-index: 6;
	right: -115px;
	top:175px;
	animation:sycd 1.5s infinite;
	-moz-animation:sycd 1.5s infinite;
	-webkit-animation:sycd 1.5s infinite;
	-ms-animation:sycd 1.5s infinite;
}


@keyframes sycd
{
0% {opacity: 0.5}
50%{opacity: 1}
100% {opacity: 0.5}
}

@-moz-keyframes sycd /* Firefox */
{
0% {opacity: 0.5}
50%{opacity: 1}
100% {opacity: 0.5}
}

@-webkit-keyframes sycd /* Safari and Chrome */
{
0% {opacity: 0.5}
50%{opacity: 1}
100% {opacity: 0.5}
}

@-ms-keyframes sycd /* Opera */
{
0% {opacity: 0.5}
50%{opacity: 1}
100% {opacity: 0.5}
}

#footer{position:absolute; bottom: 0;width: 100%; text-align: center; color: #0de4ff; font-size: 14px; height:70px; line-height: 55px;font-family: '微软雅黑';}
.footer{position:absolute; bottom: 0;width: 100%; text-align: center; color: #0de4ff; font-size: 14px; height:70px; line-height: 55px;font-family: '微软雅黑';}

/*鼠标*/
.player-scroll {
    z-index:17;
    position: fixed;
    bottom:9%;
    left: 50%;
    margin-left: -25px;
    cursor: pointer;
  }
  .player-scroll img {
    width: 50px;
  }

.player-scroll .dot {
    position: fixed;
    bottom: 12.5%;
    left: 50%;
    margin-left: -3px;
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -webkit-animation-name: playerScroll;
    animation-name: playerScroll;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: liner;
    animation-timing-function: liner;
    -webkit-animation-delay: 1;
    animation-delay: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@keyframes playerScroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}

@-webkit-keyframes playerScroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}

.close_btn {
    position: absolute;
    right:-5%!important;
    top: -13%!important;
    z-index: 999!important;
    width: 39px;
    height: 39px;
    background: url(imagesbtn_close.png) no-repeat 50% 50%;
    cursor: pointer;
    margin-left: 50px;
    opacity: .4;	
}	



/*首页我和格尔发的故事文字*/
.button--moema {
	outline: none;
	background: none;
	border: 3px solid #fff;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	padding: 17px 61px;
	color: #fff;
	-webkit-transition: background-color 0.3s, color 0.3s;
	transition: background-color 0.3s, color 0.3s;
	font-family:"Microsoft YaHei";
	background: url(imagesshub.png) 150px 40px no-repeat;
}

.button--moema::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	bottom: -20px;
	right: -20px;
	background: inherit;
	z-index: -1;
	opacity: 0.4;
	-webkit-transform: scale3d(0.8, 0.5, 1);
	transform: scale3d(0.8, 0.5, 1);
}
.button--moema:hover {
	-webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
	transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
	color: #023d52;
	background:#fff;
	-webkit-animation: anim-moema-1 0.3s forwards;
	animation: anim-moema-1 0.3s forwards;
}

.button--moema:hover::before {
	-webkit-animation: anim-moema-2 0.3s 0.3s forwards;
	animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
	60% {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
	85% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes anim-moema-1 {
	60% {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
	85% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes anim-moema-2 {
	to {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes anim-moema-2 {
	to {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
/*首页我和格尔发的故事文字结束*/
@media screen and (max-width: 1500px) {
	#depthmode-wrapper img{max-height: 50%; max-width: 50%;}
	.gefgs{position: absolute; right: 40px;top:90px;}

	#footer{ height:50px;}
	.fr2{height: 50px;}
	#header .syqcbj{right: -65px; top:80px;}
	#header .sydh img{width: 70%;height: 70%;}
	#header .sydh .syqcbj img{width: 80%;height: 80%;}

	.syqc{
	opacity: 0;
	position: absolute;
	z-index: 6;
	right: 2%;
	top:180px;
}
.gefgssy{top:130px; left: 137px;}


@keyframes myfirst
{
from {left: -100px;opacity: 0}
to {left: 137px;opacity: 1}
}

@-moz-keyframes myfirst /* Firefox */
{
from {left: -100px;opacity: 0}
to {left: 137px;opacity: 1}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {left: -100px;opacity: 0}
to {left: 137px;opacity: 1}
}

@-ms-keyframes myfirst /* Opera */
{
from {left: -100px;opacity: 0}
to {left: 137px;opacity: 1}
}

.sygs{position: absolute; left: 150px;top:425px;z-index: 9;opacity: 0;}

.sygs.active{
		opacity: 1;
		animation:my2 1s;
		-moz-animation:my2 1s;
		-webkit-animation:my2 1s;
		-ms-animation:my2 1s;
}

@keyframes my2
{
0% {top:445px;opacity: 0}
100% {top:425px;opacity: 1}
}

@-moz-keyframes my2 /* Firefox */
{
0% {top:445px;opacity: 0}
100% {top:425px;opacity: 1}
}

@-webkit-keyframes my2 /* Safari and Chrome */
{
0% {top:445px;opacity: 0}
100% {top:425px;opacity: 1}
}

@-ms-keyframes my2 /* Opera */
{
0% {top:445px;opacity: 0;}
100% {top:425px;opacity: 1;}
}

.syst{top:95px;right:200px;}

@keyframes syst
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:200px; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

@-moz-keyframes syst /* Firefox */
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:200px; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

@-webkit-keyframes syst /* Safari and Chrome */
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:200px; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

@-ms-keyframes syst /* Opera */
{
0% {right: -100%; opacity: 0; transform:translateX(200px) rotate(46.5deg);}
100% {right:200px; opacity: 1; transform:translateX(0) rotate(46.5deg);}
}

.syxt{right: 5%; top:110px;}

@keyframes syxt
{
0% {right: -50%; opacity: 0;transform:translateX(200px) rotate(-44deg);}
100% {right: 5%; opacity: 1;transform:translateX(0) rotate(-44deg);}
}

@-moz-keyframes syxt /* Firefox */
{
0% {right: -50%; opacity: 0;-moz-transform:translateX(200px) rotate(-44deg);}
100% {right: 5%; opacity: 1;-moz-transform:translateX(0) rotate(-44deg);}
}

@-webkit-keyframes syxt /* Safari and Chrome */
{
0% {right: -50%; opacity: 0;-webkit-transform:translateX(200px) rotate(-44deg);}
100% {right: 5%; opacity: 1;-webkit-transform:translateX(0) rotate(-44deg);}
}
@-ms-keyframes syxt /* Opera */
{
0% {right: -50%; opacity: 0;-ms-transform:translateX(200px) rotate(-44deg);}
100% {right: 5%; opacity: 1;-ms-transform:translateX(0) rotate(-44deg);}
}

.sycd {right: -91px;top: 140px;width: 126%;}
.close_btn{top:6%!important;right:13%!important;}

#depthmode-wrapper .content_group .pic-nrk img{max-width: 70%; max-height: auto;}

}

@media screen and (max-width: 1300px) {


}