/*
* name: Grid System
* version: v1.0.0
* update: 使用max-device-width代替max-width
* date: 2016-06-21
*/

.row {
	width: 102%;
	transition: .2s width ease;
	*zoom: 1
}

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

.row>[class*="span-"] {
	float: left;
	margin-right: 2%;
	*margin-right: 1.89%
}

.row>.span-1 {
	width: 6.33333333%
}

.row>.span-2 {
	width: 14.66666667%
}

.row>.span-3 {
	width: 23%
}

.row>.span-4 {
	width: 31.33333333%
}

.row>.span-5 {
	width: 39.66666667%
}

.row>.span-6 {
	width: 48%
}

.row>.span-7 {
	width: 56.33333333%
}

.row>.span-8 {
	width: 64.66666667%
}

.row>.span-9 {
	width: 73%
}

.row>.span-10 {
	width: 81.33333333%
}

.row>.span-11 {
	width: 89.66666667%
}

.row>.span-12 {
	width: 98%
}

.row>.span-13 {
	width: 106.33333333%
}

.row>.span-14 {
	width: 114.66666667%
}

.row>.span-15 {
	width: 123%
}

.row>.span-16 {
	width: 131.33333333%
}

.row>.span-17 {
	width: 139.66666667%
}

.row>.span-18 {
	width: 148%
}

.row>.span-19 {
	width: 156.33333333%
}

.row>.span-20 {
	width: 164.66666667%
}

.row>.span-21 {
	width: 173%
}

.row>.span-22 {
	width: 181.33333333%
}

.row>.span-23 {
	width: 189.66666667%
}

.row>.span-24 {
	width: 198%
}

.full-row {
	width: 100%;
	transition: .2s width ease;
	*zoom: 1
}

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

.full-row>[class*='span'] {
	float: left
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.row>.pull-right,
.full-row>.pull-right {
	float: right
}

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

.full-row>.center {
	display: block;
	float: none;
	clear: both;
	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%
}

@media only screen and (max-device-width:1024px) {
	.row>.midd-1 {
		width: 6.33333333%
	}
	.row>.midd-2 {
		width: 14.66666667%
	}
	.row>.midd-3 {
		width: 23%
	}
	.row>.midd-4 {
		width: 31.33333333%
	}
	.row>.midd-5 {
		width: 39.66666667%
	}
	.row>.midd-6 {
		width: 48%
	}
	.row>.midd-7 {
		width: 56.33333333%
	}
	.row>.midd-8 {
		width: 64.66666667%
	}
	.row>.midd-9 {
		width: 73%
	}
	.row>.midd-10 {
		width: 81.33333333%
	}
	.row>.midd-11 {
		width: 89.66666667%
	}
	.row>.midd-12 {
		width: 98%
	}
	.row>.midd-13 {
		width: 106.33333333%
	}
	.row>.midd-14 {
		width: 114.66666667%
	}
	.row>.midd-15 {
		width: 123%
	}
	.row>.midd-16 {
		width: 131.33333333%
	}
	.row>.midd-17 {
		width: 139.66666667%
	}
	.row>.midd-18 {
		width: 148%
	}
	.row>.midd-19 {
		width: 156.33333333%
	}
	.row>.midd-20 {
		width: 164.66666667%
	}
	.row>.midd-21 {
		width: 173%
	}
	.row>.midd-22 {
		width: 181.33333333%
	}
	.row>.midd-23 {
		width: 189.66666667%
	}
	.row>.midd-24 {
		width: 198%
	}
	.midd-hide {
		display: none
	}
	.midd-center {
		position: relative;
		left: -1%;
		display: block;
		float: none;
		clear: both;
		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-device-width:769px) {
	.row>.smidd-1 {
		width: 6.33333333%
	}
	.row>.smidd-2 {
		width: 14.66666667%
	}
	.row>.smidd-3 {
		width: 23%
	}
	.row>.smidd-4 {
		width: 31.33333333%
	}
	.row>.smidd-5 {
		width: 39.66666667%
	}
	.row>.smidd-6 {
		width: 48%
	}
	.row>.smidd-7 {
		width: 56.33333333%
	}
	.row>.smidd-8 {
		width: 64.66666667%
	}
	.row>.smidd-9 {
		width: 73%
	}
	.row>.smidd-10 {
		width: 81.33333333%
	}
	.row>.smidd-11 {
		width: 89.66666667%
	}
	.row>.smidd-12 {
		width: 98%
	}
	.row>.smidd-13 {
		width: 106.33333333%
	}
	.row>.smidd-14 {
		width: 114.66666667%
	}
	.row>.smidd-15 {
		width: 123%
	}
	.row>.smidd-16 {
		width: 131.33333333%
	}
	.row>.smidd-17 {
		width: 139.66666667%
	}
	.row>.smidd-18 {
		width: 148%
	}
	.row>.smidd-19 {
		width: 156.33333333%
	}
	.row>.smidd-20 {
		width: 164.66666667%
	}
	.row>.smidd-21 {
		width: 173%
	}
	.row>.smidd-22 {
		width: 181.33333333%
	}
	.row>.smidd-23 {
		width: 189.66666667%
	}
	.row>.smidd-24 {
		width: 198%
	}
	.smidd-hide {
		display: none
	}
	.smidd-center {
		position: relative;
		left: -1%;
		display: block;
		float: none;
		clear: both;
		margin-right: auto;
		margin-left: auto
	}
	.full-row>.smidd-1 {
		width: 8.33333333%
	}
	.full-row>.smidd-2 {
		width: 16.66666667%
	}
	.full-row>.smidd-3 {
		width: 25%
	}
	.full-row>.smidd-4 {
		width: 33.33333333%
	}
	.full-row>.smidd-5 {
		width: 41.66666667%
	}
	.full-row>.smidd-6 {
		width: 50%
	}
	.full-row>.smidd-7 {
		width: 58.33333333%
	}
	.full-row>.smidd-8 {
		width: 66.66666667%
	}
	.full-row>.smidd-9 {
		width: 75%
	}
	.full-row>.smidd-10 {
		width: 83.33333333%
	}
	.full-row>.smidd-11 {
		width: 91.66666667%
	}
	.full-row>.smidd-12 {
		width: 100%
	}
	.full-row>.smidd-13 {
		width: 108.33333333%
	}
	.full-row>.smidd-14 {
		width: 116.66666667%
	}
	.full-row>.smidd-15 {
		width: 125%
	}
	.full-row>.smidd-16 {
		width: 133.33333333%
	}
	.full-row>.smidd-17 {
		width: 141.66666667%
	}
	.full-row>.smidd-18 {
		width: 150%
	}
	.full-row>.smidd-19 {
		width: 158.33333333%
	}
	.full-row>.smidd-20 {
		width: 166.66666667%
	}
	.full-row>.smidd-21 {
		width: 175%
	}
	.full-row>.smidd-22 {
		width: 183.33333333%
	}
	.full-row>.smidd-23 {
		width: 191.66666667%
	}
	.full-row>.smidd-24 {
		width: 200%
	}
}

@media only screen and (max-device-width:640px) {
	.row>.smal-1 {
		width: 6.33333333%
	}
	.row>.smal-2 {
		width: 14.66666667%
	}
	.row>.smal-3 {
		width: 23%
	}
	.row>.smal-4 {
		width: 31.33333333%
	}
	.row>.smal-5 {
		width: 39.66666667%
	}
	.row>.smal-6 {
		width: 48%
	}
	.row>.smal-7 {
		width: 56.33333333%
	}
	.row>.smal-8 {
		width: 64.66666667%
	}
	.row>.smal-9 {
		width: 73%
	}
	.row>.smal-10 {
		width: 81.33333333%
	}
	.row>.smal-11 {
		width: 89.66666667%
	}
	.row>.smal-12 {
		width: 98%
	}
	.row>.smal-13 {
		width: 106.33333333%
	}
	.row>.smal-14 {
		width: 114.66666667%
	}
	.row>.smal-15 {
		width: 123%
	}
	.row>.smal-16 {
		width: 131.33333333%
	}
	.row>.smal-17 {
		width: 139.66666667%
	}
	.row>.smal-18 {
		width: 148%
	}
	.row>.smal-19 {
		width: 156.33333333%
	}
	.row>.smal-20 {
		width: 164.66666667%
	}
	.row>.smal-21 {
		width: 173%
	}
	.row>.smal-22 {
		width: 181.33333333%
	}
	.row>.smal-23 {
		width: 189.66666667%
	}
	.row>.smal-24 {
		width: 198%
	}
	.smal-hide {
		display: none
	}
	.smal-show {
		display: block
	}
	.smal-center {
		position: relative;
		left: -1%;
		display: block;
		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%
	}
}