body{
	font-family: "Microsoft Yahei";
}

.wrap{
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

.m-banner{
	width: 100%;
	height: 610px;
	background-image: url(../images/banner.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

h1.logo{
    position: absolute;
    top: 15px;
    left: 0;
    width: 123px;
    height: 84px;
    background: url(../images/logo.png);    
}

h1.logo a{
    display: block;
    width: 100%;
    height: 100%;
}


.title{
	height: 58px;
	margin-bottom: 30px;
	background-position: left center;
	background-repeat: no-repeat;	
}

.m-hero{
	width: 100%;
	height: 879px;
	padding-top: 65px;
	background-image: url(../images/bg-1.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

.m-hero .title{
	background-image: url(../images/title-1.png);
}

.m-hero .tab{
	overflow: hidden;
}

.m-hero .img{
	float: left;
	position: relative;
	width: 508px;
	height: 598px;
	background-image: url(../images/bg-border.png);
	background-position: center;
	background-repeat: no-repeat;	
}

.m-hero .view{
	position: absolute;
	left: 15px;
	top: 15px;
	width: 477px;
	height: 568px;
}

.m-hero .view img{
	display: block;
	width: 100%;
	height: 100%;
}

.m-hero .tab .tab-hd{
	position: absolute;
	left: 15px;
	bottom: 18px;
}

.m-hero .tab .u-mask{
	position: absolute;
	left: 4px;
	top: 4px;
	width: 141px;
	height: 91px;
	background-color: #000;
	opacity: 0.6;
	filter: alpha(opacity=60);
	z-index: 4;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.m-hero .tab .active .u-mask{
	opacity: 0;
	filter: alpha(opacity=0);	
}

.m-hero .tab .u-btn:hover .u-mask{
	opacity: 0;
	filter: alpha(opacity=0);	
}

.m-hero .tab .u-btn{
	position: relative;
	float: left;
	width: 149px;
	height: 99px;
	margin-left: 9px;
	_margin-left: 4px;
	background-image: url(../images/char/bg-btn.png);
	background-position: center;
	background-repeat: no-repeat;
	z-index: 3;
	cursor: pointer;	
}

.m-hero .tab-hd img{
	position: absolute;
	display: block;
	left: 4px;
	top: 4px;
}

.m-hero .detail{
	margin-left: 590px;
	color: #e8b586;
}

.m-hero .detail h3{
	line-height: 1;
	margin-bottom: 35px;
	font-size: 32px;
	font-weight: 400;
}

.m-hero .skill li{
	margin-bottom: 25px;
	overflow: hidden;
}

.m-hero .skill .pic{
	float: left;
	position: relative;
	width: 107px;
	height: 107px;
	background-image: url(../images/bg-skill.png);
	background-position: center;
	background-repeat: no-repeat;		
}

.m-hero .skill .icon{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	background-color: #040c1b;
	background-repeat: no-repeat;
	background-image: url(../images/skill-sprite.png);
}

.m-hero .hero_1 .skill .icon_1{
	background-position: 0 -112px;
}

.m-hero .hero_1 .skill .icon_2{
	background-position: -56px -112px;
}

.m-hero .hero_1 .skill .icon_3{
	background-position: -112px -112px;
}

.m-hero .hero_1 .skill .icon_4{
	background-position: -168px -112px;
}

.m-hero .hero_2 .skill .icon_1{
	background-position: 0 -55px;
}

.m-hero .hero_2 .skill .icon_2{
	background-position: -57px -55px;
}

.m-hero .hero_2 .skill .icon_3{
	background-position: -111px -55px;
}

.m-hero .hero_2 .skill .icon_4{
	background-position: -168px -57px;
}


.m-hero .hero_3 .skill .icon_1{
	background-position: 0 0;
}

.m-hero .hero_3 .skill .icon_2{
	background-position: -58px 0;
}

.m-hero .hero_3 .skill .icon_3{
	background-position: -110px 0;
}

.m-hero .hero_3 .skill .icon_4{
	background-position: -168px 0;
}

.m-hero .skill .text{
	margin-left: 120px;
}

.m-hero .detail h4{
	line-height: 1;
	margin-bottom: 17px;
	font-size: 20px;
	font-weight: 400;
}

.m-hero .detail .meta{
	font-size: 14px;
	color: #afc8f4;
}

.m-hero .meta p{
	margin-bottom: 5px;
}

.m-activity{
	width: 100%;
	height: 623px;
	padding-top: 165px;
	background-image: url(../images/bg-2.jpg);
	background-position: center;
	background-repeat: no-repeat;
}

.m-activity .title{
	background-image: url(../images/title-2.png);
}

.m-activity .sche{
	height: 350px;
	padding-left: 40px;
	background-image: url(../images/bg-line.png);
	background-position: left top;
	background-repeat: no-repeat;	
}

.m-activity .row{
	margin-bottom: 90px;
	overflow: hidden;
}

.m-activity .row .item{
	margin-bottom: 15px;
}

.m-activity .sche{
	float: left;
	width: 315px;
}

.m-activity .sche h4{
	line-height: 1;
	margin-bottom: 17px;
	font-size: 20px;
	font-weight: 400;
	color: #e8b586;
}

.m-activity .sche p{
	line-height: 23px;
	font-size: 14px;
	color: #859bc4;
}

.m-activity .view{
	margin-left: 450px;
}

.m-activity .row_2 .view{
	float: left;
	margin-left: 0;
	margin-right: 100px;
}

.m-activity .side{
	float: left;
	width: 235px;
	height: 342px;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(../images/bg-border_2.jpg);	
}

.m-activity .icon-list{
	width: 245px;
	margin-left: 240px;
	overflow: hidden;
}

.m-activity .icon-list li{
	position: relative;
	float: left;
	width: 107px;
	height: 77px;
	margin-left: 10px;
	margin-bottom: 10px;
	background-image: url(../images/bg-icon.png);
	background-position: left top;
	background-repeat: no-repeat;		
}

.m-activity .icon-list .icon{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 67px;
	height: 67px;
	margin: -34px 0 0 -34px;
	background-color: #232e42;
	background-position: center;
	background-repeat: no-repeat;
	
}

.m-activity .icon-list .icon.icon_1{
	background-image: url(../images/icon/icon_1.jpg);
}

.m-activity .icon-list .icon.icon_2{
	background-image: url(../images/icon/icon_2.jpg);
}

.m-activity .icon-list .icon.icon_3{
	background-image: url(../images/icon/icon_3.jpg);
}

.m-activity .icon-list .icon.icon_4{
	background-image: url(../images/icon/icon_4.jpg);
}