* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration:none;
	
}
.load{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:100%; background:#000; z-index:1000000;}
        
		.circle_l1 {
			 width:80px; height:80px;
			 -moz-animation:reverseRotataZ 1s infinite ease-in-out; 
			 -webkit-animation:reverseRotataZ 1s infinite linear;
			 position:absolute;
			 top:50%; left:50%; margin-left:-40px; margin-top:-80px;}
	    .circle_l1 img {
			width:100%; height:auto;
			}
        .circle_text{
			color:#999;
			display:block;
			text-align:center;
			width:200px; height:50px;
			line-height:50px;
			position:absolute;
			top:50%; left:50%;
			margin-left:-100px;
			margin-top:20px;
			}
        @-moz-keyframes spinPulse {
            0% { -moz-transform:rotate(160deg); opacity:0; }
            50% { -moz-transform:rotate(145deg); opacity:1; }
            100% { -moz-transform:rotate(-320deg); opacity:0; }
        }
        @-moz-keyframes spinoffPulse {
            0% { -moz-transform:rotate(0deg); }
            100% { -moz-transform:rotate(360deg);  }
        }
        @-webkit-keyframes spinPulse {
            0% { -webkit-transform:rotate(160deg); opacity:0; }
            50% { -webkit-transform:rotate(145deg); opacity:1;}
            100% { -webkit-transform:rotate(-320deg); opacity:0; }
        }
        @-webkit-keyframes spinoffPulse {
            0% { -webkit-transform:rotate(0deg); }
            100% { -webkit-transform:rotate(360deg); }
        }
#menu {
	position:absolute;
	width:320px; height:30px;
	top:20px; left:20px;
	z-index:1000;
	}
#menu a {
	font-size:12px;
	color:#fff;
	display:inline-block;
	height:30px; line-height:30px;
	text-align:center;
	position:relative;
	}
#menu a:hover {
	}
#menu a:hover i {
	display:block;
	width:130px; height:1px;
	position:absolute;
	left:0px; bottom:0px;
	border-bottom:1px solid #fff;
	-webkit-animation: bottomline 1 0.3s;
	animation: bottomline 1 0.3s; 
	}
.pull-left {
	float:left;
	}
.pull-right {
	float:right;
	}
.pagebg {
	-webkit-animation: pbg 1 0.5s;
	background-size:100% auto; 
	height:100%;
	width:100%;
	padding-top:80px;
	
	}
.homelogo {
	width:700px;
	text-align:center;
	margin:auto;
	padding-top:90px;
	}
.hometext {
	width:900px;
	margin:100px auto auto auto;
	color:#fff;
	}
.hometext .title {
	font-size:45px;
	width:450px;
	text-align:center;
	padding-right:10px;
	}
.hometext .title span{font-size:30px;}
.hometext .titlebe {
	font-size:38px;
	font-weight:bold;
	width:450px;
	text-align:left;
	border-left:5px #fff solid;
	padding-left:10px;
	margin-top:13px;
	}
.wrap {
	display:block;
	width:1200px;
	height:600px;
	margin:auto auto auto auto;
	-webkit-animation: pwrap 1 1.5s;
	}
	
.wrap li {
	width:600px;
	height:600px;
	display:block;
	padding:50px 25px 50px 25px;
	}
.wrap .minout {
	width:550px;
	height:500px;
	padding-right:25px;
	}
.wrap .minout i {
	display:block;
	width:150px;
	font-size:35px;
	font-style:normal;
	color:#fff;
	border-bottom:5px solid #5677FC;
	
	}
.wrap .minout p {
	font-size:22px;
	color:#fff;
	padding-top:20px;
	line-height:40px;
	text-shadow:1px 1px rgba(0,0,0,.4);
	}

#my-nav{
	right:0px;
	top:0;
	color:#fff;
	width:180px;
	height:100%;
	background: rgba(0,0,0,.2);
	padding-top:50px;
	
	}
#my-nav span{
	display:block;
	float:left;
	width:90px;
	height:30px;
	line-height: 30px;
	font-size:12px;
	color:#fff;
	margin:5px 0;
	text-align: center;
	font-weight:normal;
	cursor:pointer;
	opacity: .6;
	position:relative;
	}
#my-nav span:hover {
	background: rgba(255,255,255,.2);
	}
#my-nav span i {
	display:block;
	width:0px; height:2px;
	position:absolute;
	top:13px; right:0px;
	border-bottom:2px solid #fff;
	}
#my-nav span.active{
	opacity: 1;
	-webkit-animation: text 1 0.8s;
	}
#my-nav span.active i {
	display:block;
	width:20px; height:2px;
	position:absolute;
	top:13px; right:0px;
	border-bottom:2px solid #fff;
	-webkit-animation: rightline 1 0.8s;
	animation: rightline 1 0.8s; 
	}
@-webkit-keyframes rightline {
	0% {
		width:0px; 
		}
	100% {
		width:20px;
		}
}
@-webkit-keyframes bottomline {
	0% {
		width:0px; 
		}
	100% {
		width:80px;
		}
}
@-webkit-keyframes text {
	0% {
		opacity: .6;
		}
	100% {
		opacity: 1;
		}
}
@-webkit-keyframes pbg {
	0% {
		opacity: 0;
		}
	100% {
		opacity: 1;
		}
}
@-webkit-keyframes pwrap {
	0% {
		opacity: 0;
		
		}
	60% {
		opacity: 0.5;
		
		}	
	100% {
		opacity: 1;
		
		}
}
@-webkit-keyframes intop {
	0% {
		margin-top:70px;
		opacity: 0;
		}
	100% {
		margin-top:0px;
		opacity: 1;
		}
}
@-webkit-keyframes inbottom {
	0% {
		margin-top:-70px;
		opacity: 0;
		}
	100% {
		margin-top:0px;
		opacity: 1;
		}
}

.pause {
	position: absolute;
	z-index: 10000;
	bottom: 20px;
	right: 20px;
}
.pause a {
	width: 30px;
	height: 30px;
	background: url("../images/units-icons.png") 0 0 no-repeat;
	display: block;
	background-size: 30px;
}
.pause a.on {
	-webkit-animation: reverseRotataZ 3.5s linear infinite
}
.pause a.off {} .pause span {
	color: #fff;
	font-size: 16px;
	;
	position: absolute;
	left: -40px;
	top: 5px;
	text-shadow: 1px 1px 1px #000;
	letter-spacing: 2px;
	-webkit-transition: all .2s linear;
	opacity: 0;
	-webkit-transform: translateX(-20px)
}
.pause span.z-show {
	opacity: 1;
	-webkit-transform: translateX(0px)
}
.coffee-steam-box {
	-webkit-transform: translate(-40px, -40px)
}
@-webkit-keyframes reverseRotataZ {
	0% {
		-webkit-transform: rotateZ(0deg)
	}
	100% {
		-webkit-transform: rotateZ(-360deg)
	}
}
.audio {
	position: absolute;
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 30px;
}
/*tab*/
.Tabout{
	width:70%;
	height:460px;
	padding:0px;
	margin:8% 0px 0px 14%;
}
.Tabout .Menubox {
height:10px;
position:relative;
width:1000px;
}
.Tabout .Menubox ul{
padding:0px; margin:0px; height:10px;
text-align:right;
}
.Tabout .Menubox li{
display:inline-block;  cursor:pointer; width:30px; height:5px; background-color:#fff; margin:0px 0px 0px 20px;
}
.Tabout .Menubox li.hover{
height:10px;
background-color:#0E4DA1;
}
.Tabout .Contentbox{
clear:both;
height:450px;
}
.Tabout ul{ list-style:none;}	
@-webkit-keyframes pageani {
	0% {
		
		opacity:0;
		}
	100% {
		
		opacity:1;
		 }
}
.timeimg {
	width:550px; height:370px;
	float:left;
	-webkit-animation: pageani 1 1.8s;
	animation: pageani 1 1.8s; 
	}
.timeimg img{
	display:block;
	margin:auto;
	}
.timetxt {
	width:450px; height:370px;
	float:left;
	padding-left:90px;
	-webkit-animation: pageani 1 1.8s;
	animation: pageani 1 1.8s; 
	}
.timetxt i {
	display:block;
	width:200px;
	font-size:35px;
	font-style:normal;
	color:#fff;
	border-bottom:5px solid #5677FC;
	}
.timetxt p {
	font-size:22px;
	color:#fff;
	padding-top:20px;
	line-height:40px;
	text-shadow:1px 1px rgba(0,0,0,.4);
	text-align:justify;
	}
/*w*/
.timewimg {
	width:1000px; height:390px;
	-webkit-animation: pageani 1 1.8s;
	animation: pageani 1 1.8s; 
	}
.timewimg img{
	display:block;
	margin:auto;
	}
.timewtxt {
	width:1000px; height:100px;
	-webkit-animation: pageani 1 1.8s;
	animation: pageani 1 1.8s; 
	}
.timewtxt i {
	display:block;
	width:200px;
	font-size:35px;
	font-style:normal;
	color:#fff;
	border-bottom:5px solid #5677FC;
	}
.timewtxt p {
	font-size:18px;
	color:#fff;
	padding-top:20px;
	line-height:40px;
	text-shadow:1px 1px rgba(0,0,0,.4);
	text-align:justify;
	}