@import url('base.css');

.mn{width: 1200px;margin: 0 auto;padding: 70px 0 100px 0;}
.mp-wrap{font-size: 24px;color: #fff;}
.mp-item{padding-bottom: 100px;}
.mp-item h2{font-size: 60px;font-weight: normal;height: 60px;position: relative;line-height: 60px;}
.mp-item h2 strong{color: #1B8FEB;text-shadow:10px 10px 5px rgba(27, 143, 235, 0.05);font-weight: normal;}
.mp-item h2 i{position: absolute;z-index: 2;top: -22px;width: 80px;border-top: 6px solid #1B8FEB;height: 0;}
.mp-item h3{color: #C7C7C7;font-size: 18px;font-weight: normal;margin: 10px 0 32px; }
.mp-item p{line-height: 36px;color: #666666;font-size: 18px;}
.mp-item .fl{margin-right: 70px;}
.mp-item .fl:nth-child(2){margin-right: 0;}
.mp-app{background: url(../images/mp-bg1.png) no-repeat;position: relative;}
.mp-app .fl{position: relative;}
.mp-app .fl:nth-child(1){position: relative;animation:myfirst 0.5s linear 0s 1;-webkit-animation:myfirst 0.5s linear 0s 1;}
.mp-app .fl:nth-child(2){position: relative;animation:myfirsted 0.5s linear 0s 1;-webkit-animation:myfirsted 0.5s linear 0s 1;}
.mp-app .mp-tit{position: absolute;z-index: 2;bottom:46px;left: 50%;margin-left: -236px;}
.mp-app h2{margin-bottom: 32px;}
.mp-app p{max-width: 436px;color: #fff;}
.mp-app .mp-icon{margin: 54px 0;}
.mp-icon{margin: 64px 0;}
.mp-icon span{display: block;font-size: 14px;color: #666;margin: 0 30px;}
.mp-icon img{box-shadow: 0px 0px 30px rgba(202,202,202,0.3);}
.mp-app .mp-icon span{color: #fff;}
.mp-app .fl{margin: 0 0 0 80px;}
.mp-app .fl:nth-child(2){margin: 0 0 0 20px;}
.mp-gpa{background: url(../images/mp-bg2.png) no-repeat;}
.mp-gpa .fl:nth-child(1){position: relative;animation:mytop 2s linear 0s 1;-webkit-animation:mytop 2s linear 0s 1;}
.mp-gpa .fl:nth-child(2){position: relative;animation:mytops 2s linear 0s 1;-webkit-animation:mytops 2s linear 0s 1;}
.mp-rank{background: url(../images/mp-bg3.png) no-repeat;text-align: right;}
.mp-rank .fl:nth-child(1){position: relative;animation:myfirst 2.5s linear 0s 1;-webkit-animation:myfirst 2.5s linear 0s 1;}
.mp-rank .fl:nth-child(2){position: relative;animation:myfirsted 2.5s linear 0s 1;-webkit-animation:myfirsted 2.5s linear 0s 1;}
.mp-hl{background: url(../images/mp-bg4.png) no-repeat;}
.mp-hl .fl:nth-child(1){position: relative;animation:mytop 3s linear 0s 1;-webkit-animation:mytop 3s linear 0s 1;}
.mp-hl .fl:nth-child(2){position: relative;animation:mytops 3s linear 0s 1;-webkit-animation:mytops 3s linear 0s 1;}
.mp-sale{background: url(../images/mp-bg5.png) no-repeat;text-align: right;}
.mp-sale .fl:nth-child(1){position: relative;animation:myfirst 4.5s linear 0s 1;-webkit-animation:myfirst 4.5s linear 0s 1;}
.mp-sale .fl:nth-child(2){position: relative;animation:myfirsted 4.5s linear 0s 1;-webkit-animation:myfirsted 4.5s linear 0s 1;}
.mp-map{background: url(../images/mp-bg6.png) no-repeat;}
.mp-map .fl:nth-child(1){position: relative;animation:mytop 4s linear 0s 1;-webkit-animation:mytop 4s linear 0s 1;}
.mp-map .fl:nth-child(2){position: relative;animation:mytops 4s linear 0s 1;-webkit-animation:mytops 4s linear 0s 1;}
.mp-app i,.mp-gpa i,.mp-hl i,.mp-map i{left:0;}
.mp-sale i,.mp-rank i{right: 0;}




@keyframes myfirst
{
	0%   {left:220px; top:0px;}
	100% {left:0px; top:0px;}
}
@keyframes myfirsted
{
	0%   {right: 260px; top:0px;}
	100% {right:0px; top:0px;}
}
@keyframes mytop
{
	0%   {left:0; top:200px;}
	100% {left:0px; top:0px;}
}
@keyframes mytops
{
	0%   {left:0; top:260px;}
	100% {left:0px; top:0px;}
}