@charset "utf-8";

@media only screen and (max-width: 767px) {
	
	.mn-one summary h3,
	.mn-two summary h3,
	.mn-three summary h3,
	.mn-three-other summary h3,
	.mn-four summary h3,
	.mn-four-other summary h3,
	.mn-dianji summary h3,
	.mn-light summary h3,
	.mn-web summary h3,
	.mn-gn summary h3,
	.mn-sanre summary h3,
	.mn-gn-other summary h3,
	.mn-gn-other2 summary h3{
		font-size: 20px;
		line-height: 24px;
	}
	.mn-one summary span,
	.mn-two summary span,
	.mn-three summary span,
	.mn-three-other summary span,
	.mn-four summary span,
	.mn-four-other summary span,
	.mn-dianji summary span,
	.mn-light summary span,
	.mn-web summary span,
	.mn-gn summary span,
	.mn-sanre summary span,
	.mn-gn-other summary span,
	.mn-gn-other2 summary span{
		font-size: 12px;
		line-height: 16px;
	}
	.mn-three summary{ top: 80px; }
	.mn-three .mn-item-box{ top: 40px; }
	.mn-three .mn-item-box img{
		max-width: 120px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}
	.mn-three-other summary{ top: 100px; }
	.mn-four summary{ top: 40px;}
	.mn-four .mn-item-box{ top: 40px;}
	.mn-four .mn-item-box img{ 
		max-width: 120px;
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
	}
	.mn-four h4{ top: 100px;}
	.mn-four .third{ top: 100px;}
	.mn-four-other summary{ top: 60px;}
	.mn-four-other h4{ top: 80px;}
	.mn-four-other .third{ top: 80px;}
	.mn-web .icon-img{ max-width: 120px; margin: 20px auto;}
	.mn-gn-moudle .first{ left: 0px;}
	.mn-gn-moudle .third{ right: 0px;}
}

@media only screen and (min-width: 768px) {
	.cmn-text{
		top: 10%;
    	width: 400px;
	}
	.mmn-text{
		top: 10%;
    	width: 500px;
	}
	.rmn-text{
		top: 10%;
    	width: 450px;
	}
	.umn-text{
		top: 10%;
    	width: 450px;
	}
	.grmn-text{
		top: 10%;
    	width: 450px;
	}
	.nmn-text{
		top: 10%;
    	width: 450px;
	}
	.hmn-text{
		top: 8%;
    	width: 450px;
	}
	.ymn-text{
		top: 10%;
    	width: 400px;
	}
	.mn-one summary h3,
	.mn-two summary h3,
	.mn-three summary h3,
	.mn-three-other summary h3,
	.mn-four summary h3,
	.mn-four-other summary h3,
	.mn-dianji summary h3,
	.mn-light summary h3,
	.mn-web summary h3,
	.mn-gn summary h3,
	.mn-sanre summary h3,
	.mn-gn-other summary h3,
	.mn-gn-other2 summary h3{
		font-size: 25px;
		line-height: 30px;
	}
	.mn-one summary span,
	.mn-two summary span,
	.mn-three summary span,
	.mn-three-other summary span,
	.mn-four summary span,
	.mn-four-other summary span,
	.mn-dianji summary span,
	.mn-light summary span,
	.mn-web summary span,
	.mn-gn summary span,
	.mn-sanre summary span,
	.mn-gn-other summary span,
	.mn-gn-other2 summary span{
		font-size: 12px;
		line-height: 20px;
	}
	.mn-three summary{ top: 100px;}
	.mn-three .mn-item-box{ top: 80px;}
	.mn-three .mn-item-box img{ margin: 0 auto;}
	.mn-three-other summary{ top: 200px; }
	.mn-four summary{ top: 40px;}
	.mn-four .mn-item-box{ top: 40px;}
	.mn-four .mn-item-box img{ margin: 0 auto;}
	.mn-four h4{ top: 100px;}
	.mn-four .third{ top: 100px;}
	.mn-four-other summary{ top: 80px;}
	.mn-four-other h4{ top: 100px;}
	.mn-four-other .third{ top: 100px;}
	.mn-web .icon-img{ max-width: 120px; margin: 20px auto;}
	.mn-gn-moudle .first{ left: -20px;}
	.mn-gn-moudle .third{ right: -20px;}
}

@media only screen and (min-width: 992px) {
	.cmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.mmn-text{
		left: 15%;
		top: 20%;
		width: 300px;
	}
	.rmn-text{
		left: 15%;
		top: 20%;
		width: 300px;
	}
	.umn-text{
		left: 15%;
		top: 15%;
		width: 300px;
	}
	.nmn-text{
		left: 15%;
		top: 20%;
		width: 300px;
	}
	.grmn-text{
		left: 15%;
		top: 25%;
		width: 300px;
	}
	.hmn-text{
		left: 15%;
		top: 20%;
		width: 300px;
	}
	.ymn-text{
		left: 10%;
		top: 15%;
		width: 300px;
	}
	.mn-one summary h3,
	.mn-two summary h3,
	.mn-three summary h3,
	.mn-three-other summary h3,
	.mn-four summary h3,
	.mn-four-other summary h3,
	.mn-dianji summary h3,
	.mn-light summary h3,
	.mn-web summary h3,
	.mn-gn summary h3,
	.mn-sanre summary h3,
	.mn-gn-other summary h3,
	.mn-gn-other2 summary h3{
		font-size: 28px;
		line-height: 40px;
	}
	.mn-one summary span,
	.mn-two summary span,
	.mn-three summary span,
	.mn-three-other summary span,
	.mn-four summary span,
	.mn-four-other summary span,
	.mn-dianji summary span,
	.mn-light summary span,
	.mn-web summary span,
	.mn-gn summary span,
	.mn-sanre summary span,
	.mn-gn-other summary span,
	.mn-gn-other2 summary span{
		font-size: 14px;
		line-height: 24px;
	}
	.mn-three summary{ top: 150px; }
	.mn-three .mn-item-box{ top: 120px; }
	.mn-three-other summary{ top: 200px; }
	.mn-four summary{ top: 60px;}
	.mn-four .mn-item-box{ top: 60px;}
	.mn-four h4{ top: 100px;}
	.mn-four .third{ top: 100px;}
	.mn-four-other summary{ top: 100px;}
	.mn-four-other h4{ top: 100px;}
	.mn-four-other .third{ top: 100px;}
	.mn-web .icon-img{ max-width: 100%; margin: 0 auto;}
	.mn-gn-moudle .first{ left: -20px;}
	.mn-gn-moudle .third{ right: -20px;}
}

@media only screen and (min-width: 1200px) {
	.cmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.mmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.rmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.umn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.grmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.nmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.hmn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.ymn-text{
		left: 20%;
		top: 25%;
		width: 300px;
	}
	.mn-one summary h3,
	.mn-two summary h3,
	.mn-three summary h3,
	.mn-three-other summary h3,
	.mn-four summary h3,
	.mn-four-other summary h3,
	.mn-dianji summary h3,
	.mn-light summary h3,
	.mn-light-other summary h3,
	.mn-web summary h3,
	.mn-gn summary h3,
	.mn-sanre summary h3,
	.mn-gn-other summary h3,
	.mn-gn-other2 summary h3{
		font-size: 30px;
		line-height: 40px;
	}
	.mn-one summary span,
	.mn-two summary span,
	.mn-three summary span,
	.mn-three-other summary span,
	.mn-four summary span,
	.mn-four-other summary span,
	.mn-dianji summary span,
	.mn-light summary span,
	.mn-light-other summary span,
	.mn-web summary span,
	.mn-gn summary span,
	.mn-sanre summary span,
	.mn-gn-other summary span,
	.mn-gn-other2 summary span{
		font-size: 14px;
		line-height: 24px;
	}
	.mn-three summary{ top: 250px;}
	.mn-three .mn-item-box{ top: 150px;}
	.mn-three-other summary{ top: 250px; }
	.mn-four summary{ top: 80px;}
	.mn-four .mn-item-box{ top: 80px;}
	.mn-four h4{ top: 140px;}
	.mn-four .third{ top: 140px;}
	.mn-four-other summary{ top: 120px;}
	.mn-four-other h4{ top: 140px;}
	.mn-four-other .third{ top: 140px;}
	.mn-gn-moudle .first{ left: -20px;}
	.mn-gn-moudle .third{ right: -20px;}
}

@media only screen and (min-width: 1441px) {
	.cmn-text{
		left: 20%;
		top: 25%;
		width: 486px;
	}
	.mmn-text{
		left: 20%;
		top: 25%;
		width: 436px;
	}
	.rmn-text{
		left: 20%;
		top: 25%;
		width: 436px;
	}
	.umn-text{
		left: 20%;
		top: 25%;
		width: 439px;
	}
	.grmn-text{
		left: 20%;
		top: 25%;
		width: 436px;
	}
	.nmn-text{
		left: 20%;
		top: 25%;
		width: 403px;
	}
	.hmn-text{
		left: 20%;
		top: 25%;
		width: 400px;
	}
	.ymn-text{
		left: 20%;
		top: 25%;
		width: 403px;
	}
	.mn-one summary h3,
	.mn-two summary h3,
	.mn-three summary h3,
	.mn-three-other summary h3,
	.mn-four summary h3,
	.mn-four-other summary h3,
	.mn-dianji summary h3,
	.mn-light summary h3,
	.mn-light-other summary h3,
	.mn-web summary h3,
	.mn-gn summary h3,
	.mn-sanre summary h3,
	.mn-gn-other summary h3,
	.mn-gn-other2 summary h3{
		font-size: 35px;
		line-height: 50px;
	}
	.mn-one summary span,
	.mn-two summary span,
	.mn-three summary span,
	.mn-three-other summary span,
	.mn-four summary span,
	.mn-four-other summary span,
	.mn-dianji summary span,
	.mn-light summary span,
	.mn-light-other summary span,
	.mn-web summary span,
	.mn-gn summary span,
	.mn-sanre summary span,
	.mn-gn-other summary span,
	.mn-gn-other2 summary span{
		font-size: 16px;
		line-height: 26px;
	}
	.mn-three summary{ top: 250px; }
	.mn-three .mn-item-box{ top: 190px; }
	.mn-three-other summary{ top: 250px; }
	.mn-four summary{ top: 80px;}
	.mn-four .mn-item-box{ top: 80px;}
	.mn-four h4{ top: 140px;}
	.mn-four .third{ top: 140px;}
	.mn-four-other summary{ top: 120px;}
	.mn-four-other h4{ top: 140px;}
	.mn-four-other .third{ top: 140px;}
	.mn-gn-moudle .first{ left: -20px;}
	.mn-gn-moudle .third{ right: -20px;}
}

.mn-banner{
	position: relative;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.mn-banner .banner-text{
	position: absolute;
	vertical-align: middle;
	-webkit-animation:gdownIn .5s .5s both; 
	-moz-animation:gdownIn .5s .5s both; 
	animation:gdownIn .5s .5s both;
}
.mn-one{
	display: block;
	position: relative;
	background: #fff;
	padding: 100px 0 0;
}
.mn-one summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
	margin-bottom: 30px;
}
.mn-one summary h3{
	color: #000;
	display: block;
	margin-bottom: 20px;
}
.mn-one summary span{
	color: #757575;
	display: block;
}
.mn-two{
	display: block;
	position: relative;
	background: #fff;
	padding: 50px 0 100px;
}
.mn-two summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
	margin-bottom: 50px;
}
.mn-two summary h3{
	color: #000;
	display: block;
	margin-bottom: 20px;
}
.mn-two summary span{
	color: #757575;
	display: block;
}
.mn-two .mn-item-box p{
	font-size: 16px;
	margin-top: 10px;
}
.mn-three{
	display: block;
	position: relative;
	background: #2F2F2F;
	filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#191919,endcolorstr=#474747,gradientType=0);	
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#191919,endcolorstr=#474747,gradientType=0);	
    background:-moz-linear-gradient(top, #191919, #474747);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#191919), to(#474747));  
	padding: 0 0 50px;
}
.mn-three summary{
	display: block;
	position: relative;
	text-align: left;
	opacity: 0;
}
.mn-three summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-three summary span{
	color: #757575;
	display: block;
}
.mn-three .mn-item-box{
	opacity: 0;
	position: relative;
}
.mn-three-other{
	display: block;
	position: relative;
	background: #2F2F2F;
	filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#191919,endcolorstr=#474747,gradientType=0);	
    -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#191919,endcolorstr=#474747,gradientType=0);	
    background:-moz-linear-gradient(top, #191919, #474747);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#191919), to(#474747));  
	padding: 0 0 50px;
}
.mn-three-other summary{
	display: block;
	position: relative;
	text-align: left;
	opacity: 0;
	margin-bottom: 50px;
}
.mn-three-other summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-three-other summary span{
	color: #757575;
	display: block;
}
.mn-four{
	display: block;
	position: relative;
	background: #fff;
	padding-bottom: 100px;
}
.mn-four summary{
	display: block;
	position: relative;
	text-align: left;
	opacity: 0;
}
.mn-four summary h3{
	color: #000;
	display: block;
	margin-bottom: 20px;
}
.mn-four summary span{
	color: #757575;
	display: block;
}
.mn-four .mn-item-box{
	opacity: 0;
	position: relative;
}
.mn-four h4{
	display: block;
	position: relative;
	font-weight: 600;
	font-size: 20px;
}
.mn-four .third{
	display: block;
	position: relative;
}

.mn-four-other{
	display: block;
	position: relative;
	background: #fff;
	padding-bottom: 100px;
}
.mn-four-other summary{
	display: block;
	position: relative;
	text-align: left;
	opacity: 0;
}
.mn-four-other summary h3{
	color: #000;
	display: block;
	margin-bottom: 20px;
}
.mn-four-other summary span{
	color: #757575;
	display: block;
}
.mn-four-other h4{
	display: block;
	position: relative;
	font-weight: 600;
	font-size: 20px;
}
.mn-four-other .third{
	display: block;
	position: relative;
}
.mn-dianji{
	display: block;
	position: relative;
	background: #fff;
	padding-bottom: 100px;
}
.mn-dianji summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
	margin-bottom: 50px;
}
.mn-dianji summary h3{
	color: #000;
	display: block;
	margin-bottom: 20px;
}
.mn-dianji summary span{
	color: #757575;
	display: block;
}
.mn-light{
	display: block;
	position: relative;
	background: #000;
	overflow: hidden;
	padding-bottom: 50px;
}
.mn-light summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
}
.mn-light summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-light summary span{
	color: #757575;
	display: block;
}
.mn-light-other{
	display: block;
	position: relative;
	background: #000;
	overflow: hidden;
	padding-top: 50px;
}
.mn-light-other summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
	margin-bottom: 50px;
}
.mn-light-other summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-light-other summary span{
	color: #757575;
	display: block;
}
.mn-web{
	display: block;
	position: relative;
	padding: 100px 0;
	background: #fff;
	overflow: hidden;
}
.mn-web summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: left;
}
.mn-web summary h3{
	color: #000;
	display: block;
	margin-bottom: 20px;
}
.mn-web summary span{
	color: #757575;
	display: block;
}
.mn-gn{
	display: block;
	position: relative;
	padding: 100px 0 680px;
	background: url(../images/CMN/C03.jpg) no-repeat top center;
	overflow: hidden;
}
.mn-gn summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
}
.mn-gn summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-gn summary span{
	color: #757575;
	display: block;
}
.mn-gn .icon-box{
	margin: 50px auto;
	max-width: 800px;
}
.mn-gn .icon-box img{
	margin-bottom: 10px;
	opacity: 0;
}
.mn-gn-other{
	display: block;
	position: relative;
	/*padding: 100px 0 240px;*/
	height: 759px;
	padding-top: 100px;
	background: url(../images/GRMN/GR03.jpg) no-repeat top center;
	overflow: hidden;
}
.mmn-gn{
	background: url(../images/MMN/M03.jpg) no-repeat top center;
}
.rmn-gn{
	background: url(../images/RMN/R03.jpg) no-repeat top center;
}
.umn-gn{
	background: url(../images/UMN/U03.jpg) no-repeat top center;
}
.nmn-gn{
	background: url(../images/NMN/N03.jpg) no-repeat top center;
}
.mn-gn-other summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
	top: 80px;
}
.mn-gn-other summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-gn-other summary span{
	color: #757575;
	display: block;
}
.mmn-gn summary span{
	color: #fff;
	display: block;
}
.mn-gn-other .icon-box{
	margin: 50px auto;
	max-width: 800px;
	position: relative;
	top: 50px;
}
.mn-gn-other .icon-box img{
	margin-bottom: 10px;
	opacity: 0;
}
.mn-gn-other2{
	display: block;
	position: relative;
	height: 759px;
	padding-top: 50px;
	background: url(../images/HMN/H03.jpg) no-repeat top center;
	overflow: hidden;
}
.ymn-gn{
	background: #EDEDED;
	height: 750px;
}
.mn-gn-other2 summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
}
.mn-gn-other2 summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.ymn-gn summary h3{
	color: #000;
}
.mn-gn-other2 summary span{
	color: #757575;
	display: block;
}
.mn-gn-other2 .icon-box{
	margin: 50px auto;
	max-width: 800px;
}
.mn-gn-other2 .icon-box img{
	margin-bottom: 10px;
	opacity: 0;
}

.mn-sanre{
	display: block;
	position: relative;
	overflow: hidden;
	padding: 100px 0 50px;
	background: #282F37;
}
.mn-sanre summary{
	display: block;
	position: relative;
	opacity: 0;
	text-align: center;
	margin-bottom: 40px;
}
.mn-sanre summary h3{
	color: #fff;
	display: block;
	margin-bottom: 20px;
}
.mn-sanre summary span{
	color: #757575;
	display: block;
}
.mn-gn-moudle{
	display: block;
	position: relative;
	background: #fff;
	padding: 100px 0;
}
.mn-gn-moudle img{
	display: block;
	position: relative;
	margin-bottom: 10px;
}