/* 中等屏幕（桌面显示器，大于1024小于1200） */
@import url(mpc.css) screen and (max-width:1500px);
@import url(pc.css) screen and (max-width:1200px);
/* 小屏幕（平板，大于640小于1024） */
@import url(pad.css) screen and (max-width: 1024px);
/* 超小屏幕（手机，小于 640px） */
@import url(mobile.css) screen and (max-width: 640px);


html {
	font-size: 10px
}

body {
	font: 15px/1.8 ' ',Arial,sans-serif
}

body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll
}

	body:after {
		display: block;
		height: 0;
		line-height: 0;
		overflow: hidden;
		visibility: hidden;
		content: 'Pc';
	}

.wrap {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	*width: 1500px;
}

.PcMode:after {
	content: 'Pc' !important;
}

.UnpcPush, .MobilePush {
	display: none;
}

/*
 * PcMode-min
 */
@media only screen and (min-width: 1200px) and (max-width: 1500px) {

	.wrap {
		max-width: 1500px
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1440px) {

	.wrap {
		max-width: 1200px
	}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {

	.wrap {
		max-width: 1002px
	}
}


/*
 * PadMode
 */
@media only screen and (min-width: 640px) and (max-width: 1024px) {

	body:after {
		content: 'Pad';
	}

	body, input, textarea, button, select {
		font-size: 14px;
	}

	.wrap {
		padding-left: 2%;
		padding-right: 2%;
		max-width: none;
	}

	.PcPush {
		display: none;
	}

	.UnpcPush {
		display: block;
	}
}

/*
 * MobileMode
 */
@media only screen and (max-width: 640px) {
	html {
		font-size: 8px;
	}

	body:after {
		content: 'Mobile';
	}

	body, input, textarea, button, select {
		font-size: 16px;
	}

	.wrap {
		padding-left: 4%;
		padding-right: 4%;
	}

	.UnmobilePush {
		display: none;
	}

	.MobilePush {
		display: block;
	}

	img[data-src] {
		opacity: 1;
	}
}

/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */
/* - Android tvdpi devices, including Google Nexus 7          */
/* - Chrome running on high DPI Macs and PCs                  */
/* - Opera running on high DPI Macs, PCs and mobile devices   */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/* A test for CSS pixel densites can be found here:           */
/* http://bjango.com/articles/min-device-pixel-ratio/         */
/*                                                            */
/*                                  @marcedwards from @bjango */
/*                                                            */
/* ---------------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),only screen and (-o-min-device-pixel-ratio: 13/10),only screen and (min-resolution: 120dpi) {
	/* Your code to swap higher DPI images */

}

/* ---------------------------------------------------------- */
/*                                                            */
/* A media query for iphone device                            */
/*                                                            */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/*                             hotone1985@sina.com from @tony */
/*                                                            */
/* ---------------------------------------------------------- */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {
	/*iphone4*/
	.ghost-center p {
		padding: 0;
		font-size: 0.9rem;
	}
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {
	/*iphone5*/
	.ghost-center p {
		padding: 0;
		font-size: 0.9rem;
	}
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2) {
	/*iphone6*/
	.join_step .join_step_c {
		height: 180px;
	}
}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2) {
	/*iphone6+*/

}

/* ---------------------------------------------------------- */
/*                                                            */
/* 专门针对ANDROID设备                                        */
/*                                                            */
/* 可解决安卓不同分辨率引起的页面重构问题                     */
/*                                                            */
/* ---------------------------------------------------------- */

@media only screen and (max-device-width:240px) {
	/* 240px的宽度Styles */
}

@media only screen and (min-device-width:241px) and (max-device-width:360px) {
	/* 360px的宽度Styles */
}

@media only screen and (min-device-width:361px) and (max-device-width:480px) {
	/* 480px的宽度Styles */
}


/*
 * 栅格
 */
.row {
	width: 102%;
}

	.row:after, .row:before {
		clear: both;
		display: table;
		content: " ";
	}

.full-row .row .span-1, .span-1 {
	float: left;
	margin-right: 2%;
	width: 6.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-2, .span-2 {
	float: left;
	margin-right: 2%;
	width: 14.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-3, .span-3 {
	float: left;
	margin-right: 2%;
	width: 23%;
	transition: .2s width ease;
}

.full-row .row .span-4, .span-4 {
	float: left;
	margin-right: 2%;
	width: 31.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-5, .span-5 {
	float: left;
	margin-right: 2%;
	width: 39.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-6, .span-6 {
	float: left;
	/*	margin-right: -11%;*/
	width: 46%;
	transition: .2s width ease;
}

.full-row .row .span-7, .span-7 {
	float: left;
	margin-right: 2%;
	width: 56.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-8, .span-8 {
	float: left;
	margin-right: 2%;
	width: 64.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-9, .span-9 {
	float: left;
	margin-right: 2%;
	width: 73%;
	transition: .2s width ease;
}

.full-row .row .span-10, .span-10 {
	float: left;
	margin-right: 2%;
	width: 81.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-11, .span-11 {
	float: left;
	margin-right: 2%;
	width: 89.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-12, .span-12 {
	float: left;
	margin-right: 2%;
	width: 98%;
	transition: .2s width ease;
}

.full-row .row .span-13, .span-13 {
	float: left;
	margin-right: 2%;
	width: 106.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-14, .span-14 {
	float: left;
	margin-right: 2%;
	width: 114.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-15, .span-15 {
	float: left;
	margin-right: 2%;
	width: 123%;
	transition: .2s width ease;
}

.full-row .row .span-16, .span-16 {
	float: left;
	margin-right: 2%;
	width: 131.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-17, .span-17 {
	float: left;
	margin-right: 2%;
	width: 139.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-18, .span-18 {
	float: left;
	margin-right: 2%;
	width: 148%;
	transition: .2s width ease;
}

.full-row .row .span-19, .span-19 {
	float: left;
	margin-right: 2%;
	width: 156.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-20, .span-20 {
	float: left;
	margin-right: 2%;
	width: 164.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-21, .span-21 {
	float: left;
	margin-right: 2%;
	width: 173%;
	transition: .2s width ease;
}

.full-row .row .span-22, .span-22 {
	float: left;
	margin-right: 2%;
	width: 181.33333333%;
	transition: .2s width ease;
}

.full-row .row .span-23, .span-23 {
	float: left;
	margin-right: 2%;
	width: 189.66666667%;
	transition: .2s width ease;
}

.full-row .row .span-24, .span-24 {
	float: left;
	margin-right: 2%;
	width: 198%;
	transition: .2s width ease;
}

.pull-right {
	float: right;
}

.pull-left {
	float: left;
}

.hide {
	display: none;
}

.center {
	position: relative;
	left: -1%;
	float: none;
	clear: both;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.pull-left-1 {
	position: relative;
	left: -8.33333333%;
}

.pull-left-2 {
	position: relative;
	left: -16.66666667%;
}

.pull-left-3 {
	position: relative;
	left: -25%;
}

.pull-left-4 {
	position: relative;
	left: -33.33333333%;
}

.pull-left-5 {
	position: relative;
	left: -41.66666667%;
}

.pull-left-6 {
	position: relative;
	left: -50%;
}

.pull-left-7 {
	position: relative;
	left: -58.33333333%;
}

.pull-left-8 {
	position: relative;
	left: -66.66666667%;
}

.pull-left-9 {
	position: relative;
	left: -75%;
}

.pull-left-10 {
	position: relative;
	left: -83.33333333%;
}

.pull-left-11 {
	position: relative;
	left: -91.66666667%;
}

.pull-left-12 {
	position: relative;
	left: -100%;
}

.pull-left-13 {
	position: relative;
	left: -108.33333333%;
}

.pull-left-14 {
	position: relative;
	left: -116.66666667%;
}

.pull-left-15 {
	position: relative;
	left: -125%;
}

.pull-left-16 {
	position: relative;
	left: -133.33333333%;
}

.pull-left-17 {
	position: relative;
	left: -141.66666667%;
}

.pull-left-18 {
	position: relative;
	left: -150%;
}

.pull-left-19 {
	position: relative;
	left: -158.33333333%;
}

.pull-left-20 {
	position: relative;
	left: -166.66666667%;
}

.pull-left-21 {
	position: relative;
	left: -175%;
}

.pull-left-22 {
	position: relative;
	left: -183.33333333%;
}

.pull-left-23 {
	position: relative;
	left: -191.66666667%;
}

.pull-left-24 {
	position: relative;
	left: -200%;
}

.pull-right-1 {
	position: relative;
	left: 8.33333333%;
}

.pull-right-2 {
	position: relative;
	left: 16.66666667%;
}

.pull-right-3 {
	position: relative;
	left: 25%;
}

.pull-right-4 {
	position: relative;
	left: 33.33333333%;
}

.pull-right-5 {
	position: relative;
	left: 41.66666667%;
}

.pull-right-6 {
	position: relative;
	left: 50%;
}

.pull-right-7 {
	position: relative;
	left: 58.33333333%;
}

.pull-right-8 {
	position: relative;
	left: 66.66666667%;
}

.pull-right-9 {
	position: relative;
	left: 75%;
}

.pull-right-10 {
	position: relative;
	left: 83.33333333%;
}

.pull-right-11 {
	position: relative;
	left: 91.66666667%;
}

.pull-right-12 {
	position: relative;
	left: 100%;
}

.pull-right-13 {
	position: relative;
	left: 108.33333333%;
}

.pull-right-14 {
	position: relative;
	left: 116.66666667%;
}

.pull-right-15 {
	position: relative;
	left: 125%;
}

.pull-right-16 {
	position: relative;
	left: 133.33333333%;
}

.pull-right-17 {
	position: relative;
	left: 141.66666667%;
}

.pull-right-18 {
	position: relative;
	left: 150%;
}

.pull-right-19 {
	position: relative;
	left: 158.33333333%;
}

.pull-right-20 {
	position: relative;
	left: 166.66666667%;
}

.pull-right-21 {
	position: relative;
	left: 175%;
}

.pull-right-22 {
	position: relative;
	left: 183.33333333%;
}

.pull-right-23 {
	position: relative;
	left: 191.66666667%;
}

.pull-right-24 {
	position: relative;
	left: 200%;
}

.full-row {
	width: 100%;
}

	.full-row:after, .full-row:before {
		clear: both;
		display: table;
		content: " ";
	}

	.full-row [class*=midd], .full-row [class*=smal], .full-row [class*=span] {
		margin-right: 0;
	}

	.full-row .span-1 {
		width: 8.33333333%;
	}

	.full-row .span-2 {
		width: 16.66666667%;
	}

	.full-row .span-3 {
		width: 25%;
	}

	.full-row .span-4 {
		width: 33.33333333%;
	}

	.full-row .span-5 {
		width: 41.66666667%;
	}

	.full-row .span-6 {
		width: 50%;
	}

	.full-row .span-7 {
		width: 58.33333333%;
	}

	.full-row .span-8 {
		width: 66.66666667%;
	}

	.full-row .span-9 {
		width: 75%;
	}

	.full-row .span-10 {
		width: 83.33333333%;
	}

	.full-row .span-11 {
		width: 91.66666667%;
	}

	.full-row .span-12 {
		width: 100%;
	}

	.full-row .span-13 {
		width: 108.33333333%;
	}

	.full-row .span-14 {
		width: 116.66666667%;
	}

	.full-row .span-15 {
		width: 125%;
	}

	.full-row .span-16 {
		width: 133.33333333%;
	}

	.full-row .span-17 {
		width: 141.66666667%;
	}

	.full-row .span-18 {
		width: 150%;
	}

	.full-row .span-19 {
		width: 158.33333333%;
	}

	.full-row .span-20 {
		width: 166.66666667%;
	}

	.full-row .span-21 {
		width: 175%;
	}

	.full-row .span-22 {
		width: 183.33333333%;
	}

	.full-row .span-23 {
		width: 191.66666667%;
	}

	.full-row .span-24 {
		width: 200%;
	}

	.full-row .center {
		left: auto;
	}

.span-3-1 {
	float: left;
	margin-right: 2%;
	width: 38%;
	transition: .2s width ease;
}

.span-3-2 {
	float: left;
	margin-right: 2%;
	width: 28%;
	transition: .2s width ease;
}

.span-3-3 {
	float: left;
	margin-right: 2%;
	width: 28%;
	transition: .2s width ease;
}



@media only screen and (max-width:64em) {
	.full-row .row .midd-1, .midd-1 {
		width: 6.33333333%;
	}

	.full-row .row .midd-2, .midd-2 {
		width: 14.66666667%;
	}

	.full-row .row .midd-3, .midd-3 {
		width: 23%;
	}

	.full-row .row .midd-4, .midd-4 {
		width: 31.33333333%;
	}

	.full-row .row .midd-5, .midd-5 {
		width: 39.66666667%;
	}

	.full-row .row .midd-6, .midd-6 {
		width: 48%;
	}

	.full-row .row .midd-7, .midd-7 {
		width: 56.33333333%;
	}

	.full-row .row .midd-8, .midd-8 {
		width: 64.66666667%;
	}

	.full-row .row .midd-9, .midd-9 {
		width: 73%;
	}

	.full-row .row .midd-10, .midd-10 {
		width: 81.33333333%;
	}

	.full-row .row .midd-11, .midd-11 {
		width: 89.66666667%;
	}

	.full-row .row .midd-12, .midd-12 {
		width: 98%;
	}

	.full-row .row .midd-13, .midd-13 {
		width: 106.33333333%;
	}

	.full-row .row .midd-14, .midd-14 {
		width: 114.66666667%;
	}

	.full-row .row .midd-15, .midd-15 {
		width: 123%;
	}

	.full-row .row .midd-16, .midd-16 {
		width: 131.33333333%;
	}

	.full-row .row .midd-17, .midd-17 {
		width: 139.66666667%;
	}

	.full-row .row .midd-18, .midd-18 {
		width: 148%;
	}

	.full-row .row .midd-19, .midd-19 {
		width: 156.33333333%;
	}

	.full-row .row .midd-20, .midd-20 {
		width: 164.66666667%;
	}

	.full-row .row .midd-21, .midd-21 {
		width: 173%;
	}

	.full-row .row .midd-22, .midd-22 {
		width: 181.33333333%;
	}

	.full-row .row .midd-23, .midd-23 {
		width: 189.66666667%;
	}

	.full-row .row .midd-24, .midd-24 {
		width: 198%;
	}

	.midd-hide {
		display: none !important;
	}

	.midd-center {
		position: relative;
		left: -1%;
		float: none;
		clear: both;
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.full-row .midd-1 {
		width: 8.33333333%;
	}

	.full-row .midd-2 {
		width: 16.66666667%;
	}

	.full-row .midd-3 {
		width: 25%;
	}

	.full-row .midd-4 {
		width: 33.33333333%;
	}

	.full-row .midd-5 {
		width: 41.66666667%;
	}

	.full-row .midd-6 {
		width: 50%;
	}

	.full-row .midd-7 {
		width: 58.33333333%;
	}

	.full-row .midd-8 {
		width: 66.66666667%;
	}

	.full-row .midd-9 {
		width: 75%;
	}

	.full-row .midd-10 {
		width: 83.33333333%;
	}

	.full-row .midd-11 {
		width: 91.66666667%;
	}

	.full-row .midd-12 {
		width: 100%;
	}

	.full-row .midd-13 {
		width: 108.33333333%;
	}

	.full-row .midd-14 {
		width: 116.66666667%;
	}

	.full-row .midd-15 {
		width: 125%;
	}

	.full-row .midd-16 {
		width: 133.33333333%;
	}

	.full-row .midd-17 {
		width: 141.66666667%;
	}

	.full-row .midd-18 {
		width: 150%;
	}

	.full-row .midd-19 {
		width: 158.33333333%;
	}

	.full-row .midd-20 {
		width: 166.66666667%;
	}

	.full-row .midd-21 {
		width: 175%;
	}

	.full-row .midd-22 {
		width: 183.33333333%;
	}

	.full-row .midd-23 {
		width: 191.66666667%;
	}

	.full-row .midd-24 {
		width: 200%;
	}
}

@media only screen and (max-width:40em) {
	.full-row .row .smal-1, .smal-1 {
		width: 6.33333333%;
	}

	.full-row .row .smal-2, .smal-2 {
		width: 14.66666667%;
	}

	.full-row .row .smal-3, .smal-3 {
		width: 23%;
	}

	.full-row .row .smal-4, .smal-4 {
		width: 31.33333333%;
	}

	.full-row .row .smal-5, .smal-5 {
		width: 39.66666667%;
	}

	.full-row .row .smal-6, .smal-6 {
		width: 48%;
	}

	.full-row .row .smal-7, .smal-7 {
		width: 56.33333333%;
	}

	.full-row .row .smal-8, .smal-8 {
		width: 64.66666667%;
	}

	.full-row .row .smal-9, .smal-9 {
		width: 73%;
	}

	.full-row .row .smal-10, .smal-10 {
		width: 81.33333333%;
	}

	.full-row .row .smal-11, .smal-11 {
		width: 89.66666667%;
	}

	.full-row .row .smal-12, .smal-12 {
		width: 98%;
	}

	.full-row .row .smal-13, .smal-13 {
		width: 106.33333333%;
	}

	.full-row .row .smal-14, .smal-14 {
		width: 114.66666667%;
	}

	.full-row .row .smal-15, .smal-15 {
		width: 123%;
	}

	.full-row .row .smal-16, .smal-16 {
		width: 131.33333333%;
	}

	.full-row .row .smal-17, .smal-17 {
		width: 139.66666667%;
	}

	.full-row .row .smal-18, .smal-18 {
		width: 148%;
	}

	.full-row .row .smal-19, .smal-19 {
		width: 156.33333333%;
	}

	.full-row .row .smal-20, .smal-20 {
		width: 164.66666667%;
	}

	.full-row .row .smal-21, .smal-21 {
		width: 173%;
	}

	.full-row .row .smal-22, .smal-22 {
		width: 181.33333333%;
	}

	.full-row .row .smal-23, .smal-23 {
		width: 189.66666667%;
	}

	.full-row .row .smal-24, .smal-24 {
		width: 198%;
	}

	.smal-hide {
		display: none !important;
	}

	.smal-center, .smal-show {
		display: block;
	}

	.smal-center {
		position: relative;
		left: -1%;
		float: none;
		clear: both;
		margin-right: auto;
		margin-left: auto;
	}

	[class*=pull-left-], [class*=pull-right-] {
		right: auto;
		left: auto;
	}

	.full-row .smal-1 {
		width: 8.33333333%;
	}

	.full-row .smal-2 {
		width: 16.66666667%;
	}

	.full-row .smal-3 {
		width: 25%;
	}

	.full-row .smal-4 {
		width: 33.33333333%;
	}

	.full-row .smal-5 {
		width: 41.66666667%;
	}

	.full-row .smal-6 {
		width: 50%;
	}

	.full-row .smal-7 {
		width: 58.33333333%;
	}

	.full-row .smal-8 {
		width: 66.66666667%;
	}

	.full-row .smal-9 {
		width: 75%;
	}

	.full-row .smal-10 {
		width: 83.33333333%;
	}

	.full-row .smal-11 {
		width: 91.66666667%;
	}

	.full-row .smal-12 {
		width: 100%;
	}

	.full-row .smal-13 {
		width: 108.33333333%;
	}

	.full-row .smal-14 {
		width: 116.66666667%;
	}

	.full-row .smal-15 {
		width: 125%;
	}

	.full-row .smal-16 {
		width: 133.33333333%;
	}

	.full-row .smal-17 {
		width: 141.66666667%;
	}

	.full-row .smal-18 {
		width: 150%;
	}

	.full-row .smal-19 {
		width: 158.33333333%;
	}

	.full-row .smal-20 {
		width: 166.66666667%;
	}

	.full-row .smal-21 {
		width: 175%;
	}

	.full-row .smal-22 {
		width: 183.33333333%;
	}

	.full-row .smal-23 {
		width: 191.66666667%;
	}

	.full-row .smal-24 {
		width: 200%;
	}

	.span-3-1 {
		float: left;
		margin-right: 2%;
		width: 98%;
		transition: .2s width ease;
	}

	.span-3-2 {
		float: left;
		margin-right: 2%;
		width: 48%;
		transition: .2s width ease;
	}

	.span-3-3 {
		float: left;
		margin-right: 2%;
		width: 48%;
		transition: .2s width ease;
	}
}