/*
* 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%
    }
}