div.MenuRegin{
	position: absolute;
    left: 2%;
    top: 2%;
    z-index: 9999; }
div#PageRegin{height: 100%;min-width:1000px;overflow: hidden}
ul.IndexMain{ width: 100%;height: 100%; margin: 0 auto; overflow: hidden; position: relative; }
ul.IndexMain li{ float: left; width: 25%; height: 100%; background: url("DX.png") right center repeat-y; position: relative;}

.XRegin{ width: 100%; position: absolute; left: 0; top:43%; z-index: 9; display: block; }

.XRegin h2{
    color: #4a4a4a;
    text-align: center;
    font-size: 34px;
    font-weight: 200;
    /* border-bottom: solid 1px #4a4a4a; */
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 20px 40px;
}
.en_US .XRegin h2{font-family:'DINCond-Regular';}
.pt_BR .XRegin h2{font-family:'DINCond-Regular';}
.pt_PT .XRegin h2{font-family:'DINCond-Regular';}
.de_DE .XRegin h2{font-family:'DINCond-Regular';}
.fr_FR .XRegin h2{font-family:'DINCond-Regular';}
.ja .XRegin h2{font-family:'DINCond-Regular';}

div.XRegin h3 {
    color: #4a4a4a;
    text-align: center;
    font-size: 16px;
    font-weight: lighter;
}

div.YRegin{transition: all 0.4s linear 0s; width: 100%; position: absolute; left: 0; right: 0; bottom: -100%; z-index: 999; display: none }
div.YRegin div.RowNX{overflow:hidden;background: url("XBg.png") repeat left center; display: block; padding-left: 10px; padding-right: 10px; height: 50px; }
div.YRegin div.RowNX a{ float: left; width: 33.33%; color: #e3e3e3; text-align: center; padding-top: 10px; padding-bottom: 10px; display: inline; }
div.YRegin div.RowNX img{width: 30px;}
div.YRegin div.RowNX p{ padding-top: 5px; font-size: 14px;line-height: 20px}

.trans-screen{
	position: relative;width: 100%;height:100%;top:0;
	/*transition: top 1.1s ease 0s;*/
	transition :transform 1.1s ease 0s, -webkit-transform 1.1s ease 0s;
	-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)
}


.scrolled .trans-screen{
	-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)
/*top:-100%;*/
}


#IndexNews{
height: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
font-weight: lighter;
}
.news-item{
float: left;
height: 100%;
position: relative;
text-align: center;
width: 33.333%;
}
.news-item .inner{
position: relative;
border-right:1px solid #444;
height: 100%;
}
.news-item.last .inner{border:0}
.logoimg{width: 240px;}
.newscenter{
background: url('bg-indexnews.jpg') center center no-repeat;background-size: cover;
}
.ERegion{position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;height: 300px;}
.ERegion .tit{
color: #fff;
font-size: 32px;font-weight: lighter;
margin: 0 auto 30px;
}
.ERegion .content{margin:0 30px}
.ERegion .content img{width: 100%;}
.pop_video{color:#fff;position:relative;display: block;max-width: 320px;margin:0 auto;transition: box-shadow 0.4s linear 0s;}
.pop_video .n-tit{background:#1f1f1f;background:rgba(31,31,31,.9);display: block;position: absolute;bottom:0;left:0;right:0;padding:0 5px;line-height: 30px;height: 30px;overflow: hidden; text-overflow:ellipsis;transition: background 0.4s linear 0s;white-space:nowrap;}
.pop_video:hover{box-shadow:0 0 15px #111}
.pop_video:hover .icon-play{-webkit-transform:scale(1.1);transform:scale(1.1)}
.pop_video:hover .n-tit{background:rgba(31,31,31,0.95);}
.ERegion .other{margin:25px 0 0}
.ERegion .link{color:#fff}
.ERegion .link:hover{text-decoration: underline}
.en_US .ERegion .tit{font-family: "DINCond-Regular"}




/*首页 渐变色*/

html,body,.mm-page{height: 100%}


.mm-menu{
	/*transition :transform .4s ease 0s, -webkit-transform .4s ease 0s, -ms-transform .4s ease 0s;
	-webkit-transform:translate3d(-240px,0,0);transform:translate3d(-240px,0,0);
	-ms-transform:translateX(-240px); */
	transition: left .4s ease 0s;
	left:-240px;
}
.mm-opening .mm-menu{
	/*-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
 -ms-transform:translateX(0); IE 9 */
	left:0;
}

.index-memu.animation-1 .mm-menu{
	transition :all 2s ease 0s;
}

#IndexMain{
	transition:opacity 2s ease 2s;
	opacity: 0;
	z-index: -999;
    background: url("HotPixel.png") repeat left top;
}
.section-arrow{
	position: absolute;left:0;right:0;cursor: pointer;margin:0 auto;display: block;
	width: 80px;text-align: center;
	transition:opacity 1s ease 2s;
	opacity: 0;
	z-index: -999;
}
.section-arrow .txt{
	transition:opacity 1s ease 0s;opacity: 0;
	color: #fff;line-height: 30px;font-weight: normal;
}
.section-arrow .arrow{
	position: relative;
	animation-name: section-arrow;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-play-state: running;
	animation-iteration-count:infinite
}

.section-arrow.down{bottom:15px;}
.section-arrow.up{top:20px;}

.section-arrow:hover .txt{
	opacity: 1;
}
.section-arrow:hover .arrow{
	animation-play-state: paused;
}


#loading-logo{
 position: fixed;
 margin:auto;
 width: 280px; 
 left:0;
 right:0;
 top: 32%;
 opacity: 1;
 z-index: 1000;
 transition:opacity 1.5s ease;
}

#loading-cloud{
	position: fixed;width:80%;left:0;right:0;bottom:0;
	margin:0 auto -50%;
	opacity: 0;
	display: none\0;*display:none;
}

#MenuReginTrigger{
	transition:opacity 2s ease;
	opacity: 0;
}


@keyframes loading-menu
{
	/*from{-webkit-transform:translate3d(-240px,0,0);transform:translate3d(-240px,0,0)}
	50%  {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
	to{-webkit-transform:translate3d(-240px,0,0);transform:translate3d(-240px,0,0)}*/
	from{left:-240px}
	50%  {left:0}
	to{left:-240px}
}

@keyframes loading-cloud
{
	from{opacity:0;-webkit-transform: rotateZ(120deg);transform: rotateZ(120deg);}
	50%{-webkit-transform: rotateZ(170deg);transform: rotateZ(170deg);}
	57%{opacity: 1;}
	85%{opacity: 1;}
	to{opacity:0;-webkit-transform:rotateZ(220deg);transform: rotateZ(220deg);}
}

@keyframes section-arrow
{
	from{top:-7px;}
	50%{top:5px;}
	to{top:-7px;}
}


/*首页 自动执行的animation*/
.animation-1 #MenuRegin{
	animation-name: loading-menu;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 1.5s;
	animation-direction: alternate;
	animation-play-state: running;
	animation-fill-mode: none;
	display: none;
}
.animation-1 #loading-logo{
	opacity: 0;
}
/*
.animation-1 #loading-cloud{
	animation-name: loading-cloud;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 1.5s;
	animation-direction: alternate;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
*/

/*收起的动画*/
.animation-2 #MenuReginTrigger{  opacity: 1; display: block; }
.animation-2 #IndexMain{  opacity: 1; z-index: 9 }
.animation-2 .section-arrow{z-index: 9}
.animation-2 .section-arrow.down{  opacity: 1;  }
.animation-2.scrolled .section-arrow.up{  opacity: 1;  }
.animation-2.scrolled .section-arrow.down{opacity: 0; }
.animation-2 #loading-logo{display: none}





/*#canvas-halo{display: none}.MenuRegin*/



.canvas-background{
background: #1c93a8;

 background: -moz-linear-gradient(top left, #e4e4e3 0%, #FFFFFF 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#996f51), color-stop(100%,#FFFFFF));
 background: -webkit-linear-gradient(top left, #e4e4e3 0%,#FFFFFF 100%);
 background: -o-linear-gradient(top left, #e4e4e3 0%,#FFFFFF 100%);
 background: -ms-linear-gradient(top left, #e4e4e3 0%,#FFFFFF 100%);
 background: linear-gradient(to right bottom, #e4e4e3 0%,#FFFFFF 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e3', endColorstr='#FFFFFF',GradientType=0 );


}

.fullscreen{
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.canvas-halo{
	position: absolute;
	transition: top 0.1s linear 0s;
	margin-left: -50%;/*居中*/
	margin-top: -50%;
	/*background: -webkit-radial-gradient(circle, rgba(28, 147, 168, .9) 0, rgba(28, 147, 168, 0) 70%);*/
	background: radial-gradient(circle, rgba(28, 147, 168, .9) 0, rgba(28, 147, 168, 0) 70%);
}




.gradient-modal{
	transition: opacity 0.3s linear 0s;
	position: absolute;top:0;left:0;width: 100%;height: 100%;opacity: .7;
	background-image: linear-gradient(to bottom, #00162a 0%,  #000d19 100%);
}

.IndexMain .img-modal{
	position: absolute;top:0;left:0;width: 100%;height: 100%;
	background-size: cover;
	background-position: center center;
	transition: opacity 0.3s linear 0s;
	opacity: 0;
	filter:alpha(opacity=0);
}
.IndexMain .link{
	position: absolute;top:0;left:0;width: 100%;height: 100%;
	z-index: 99;
}
.IndexMain .joinus .img-modal{
	background-image: url(index-bg-hr.jpg);
	 
}
.IndexMain .csr .img-modal{
	background-image: url(index-bg-crs.jpg);
}
.IndexMain .chn .img-modal{
	background-image: url(index-bg-chn.jpg);
 
}
.IndexMain .fin .img-modal{
	background-image: url(index-bg-fin.jpg);
	 
}
.IndexMain .log {
	
	display: none;
}


.ZRegin{opacity: 0;display: block}
.IndexMain li:hover .ZRegin{opacity: 1}
.IndexMain li:hover .XRegin h2{ color: #fff; border-color: #fff; }
.IndexMain li:hover .XRegin h3{ color: #fff; }

.IndexMain li.totop .XRegin{transition: all 0.4s linear 0s;}

.IndexMain li.anim.totop:hover .XRegin{
	top:0;opacity: 0;
}

#loading-span {
    position: fixed;
    margin: auto;
    width: 550px;
    height: 26px;
    left: 0;
    right: 0;
    top:63%;
    opacity: 0; 
    z-index: 1000;
	font-size: 28px;
	font-weight: 100;
	color: #4a4a4a;
}

.IndexMain li.anim:hover .YRegin{
	bottom:0!important;
}

.IndexMain li:hover .img-modal{
	opacity: 1;
	filter:alpha(opacity=100);
}

.IndexMain li:hover .gradient-modal{
	opacity: 0;
}

.IndexMain li h2{
 transition: all 0.5s linear
}
.IndexMain li h3{
 transition: all 0.5s linear
}

.IndexMain li:hover h2{
 color: #333;
 border-bottom-color: #333;
}
.IndexMain li:hover h3{
 color: #333;
}

 
#menu-sign{visibility: visible;}
@media (max-width:990px){
	#loading-logo {
		 
		width: 180px;
		left: 0;
		right: 0;
		top:30%;
		opacity: 1;
		z-index: 1000;
		transition: opacity 1.5s ease;
	}


	ul.IndexMain li {
	 
		width: 100%;
		height: 20%; 
		position: relative;
		border-bottom: 1px #fff solid;
	}
	.XRegin {
		 
		top:22%;
	 
	}
	div#PageRegin {
		height: 100%;
	  min-width: 300px;  
		overflow: hidden;
	}
	#loading-span {
		position: fixed;
		margin: auto;
		width: 300px;
		height: 26px;
		left: 0;
		right: 0;
		top: 60%;
		opacity: 0;
		z-index: 1000;
		font-size: 18px;
		font-weight: 100;
		 
	}
	.XRegin h2 {
		color: #4a4a4a;
		text-align: center;
		font-size: 26px;
		font-weight: lighter; 
		padding-top: 0;
		padding-bottom: 0;
		margin: 20px 40px;
	}
	.logoimg {
		width: 200px;
	}
 
	.IndexMain .log {
	
		display: block;
		text-align: center;
	}
	.animation-2 #MenuReginTrigger {
		 
		display: none;
	}
	
	.IndexMain .joinus .img-modal{
		background-image: url(index-bg-hr.jpg);
		background-position-y: 200px;
	}
	.IndexMain .csr .img-modal{
		background-image: url(index-bg-crs.jpg);
	}
	.IndexMain .chn .img-modal{
		background-image: url(index-bg-chn.jpg);
		background-position-y: 230px;
	}
	.IndexMain .fin .img-modal{
		background-image: url(index-bg-fin.jpg);
		background-position-y: 240px;
	}
}