﻿@font-face {
    font-family: 'bahnschrift';
    src: url('../fonts/bahnschrift.eot');
    src: url('../fonts/bahnschrift.eot?#iefix') format('embedded-opentype'), url('../fonts/bahnschrift.ttf') format('truetype'), url('../fonts/bahnschrift.svg') format('svg'), url('../fonts/bahnschrift.woff2') format('woff2'), url('../fonts/bahnschrift.woff') format('woff');
}


    /*common=====================*/
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, table, p, span {
    margin: 0px auto;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Microsoft YaHei',Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4;
    color: #000;
    background: #fff;
    vertical-align: middle;
    text-align: left;
    margin: 0px auto;
    letter-spacing: 1px;
    word-wrap: break-word
}

img {
    border: none;
    vertical-align: top;
    margin: 0 auto;
}

dl, dt, dd, p {
    margin: 0;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none;
    cursor:pointer;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
}

    a:focus {
        outline: none;
    }

    a:hover, a:active {
        outline: none;
    }
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

ol, ul, li {
    list-style: none;
}

.clearfix {
    zoom: 1;
}

    .clearfix:after {
        clear: both;
    }

.clear {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
    visibility: hidden;
}

article, footer, header, main, nav {
    display: block;
}


@media only screen and (max-width: 1240px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 500px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
}
/*common css style*/
.content-center {
    text-align: center;
}

.content-left {
    text-align: left;
}

.content-right {
    text-align: right;
}

/* ================================
   container
   ================================ */
columns,
.column {
    margin: 0;
}

.container {
    position: relative;
    width: 96%;
    padding: 0;
    margin: 0 auto;
}
    .container img{
        max-width:100%;
    }
    .container .columns.one,
    .container .columns.two,
    .container .columns.three,
    .container .columns.four,
    .container .columns.five,
    .container .columns.six,
    .container .columns.seven,
    .container .columns.eight,
    .container .columns.nine,
    .container .columns.ten,
    .container .columns.eleven,
    .container .columns.twelve {
        width: 100%;
    }

/* Offsets */
    .container .offset-by-half,
    .container .offset-by-one,
    .container .offset-by-two,
    .container .offset-by-three,
    .container .offset-by-four,
    .container .offset-by-five,
    .container .offset-by-six,
    .container .offset-by-seven,
    .container .offset-by-eight,
    .container .offset-by-nine,
    .container .offset-by-ten,
    .container .offset-by-eleven {
        padding-left: 0;
    }


/*@media (min-width:576px) {
    .container {
        position: relative;
        width: 540px;
        padding:  0;
        margin: 0 auto;
    }
}*/
@media only screen and (min-width: 720px) {
    .container {
        position: relative;
        width: 720px;
        padding: 0;
        margin: 0 auto;
    }

    .column,
    .columns {
        display: block;
        float: left;
    }

    .container .columns.half {
        width: 4.333333%;
    }
    .container .columns.one {
        width: 8.333333%;
    }

    .container .columns.two {
        width: 16.666667%
    }

    .container .columns.three {
        width: 25%
    }

    .container .columns.four {
        width: 33.333333%
    }

    .container .columns.five {
        width: 41.666667%
    }

    .container .columns.six {
        width: 50%
    }

    .container .columns.seven {
        width: 58.333333%
    }

    .container .columns.eight {
        width: 66.666667%
    }

    .container .columns.nine {
        width: 75%
    }

    .container .columns.ten {
        width: 83.333333%
    }

    .container .columns.eleven {
        width: 91.666667%
    }

    .container .columns.twelve {
        width: 100%
    }
    .container .offset-by-half {
        margin-left: 4.333333%;
    }
    .container .offset-by-one {
        margin-left: 8.333333%;
    }

    .container .offset-by-two {
        margin-left: 16.666667%
    }

    .container .offset-by-three {
        margin-left: 25%
    }

    .container .offset-by-four {
        margin-left: 33.333333%
    }

    .container .offset-by-five {
        margin-left: 41.666667%
    }

    .container .offset-by-six {
        margin-left: 50%
    }

    .container .offset-by-seven {
        margin-left: 58.333333%
    }

    .container .offset-by-eight {
        margin-left: 66.666667%
    }

    .container .offset-by-nine {
        margin-left: 75%
    }

    .container .offset-by-ten {
        margin-left: 83.333333%
    }

    .container .offset-by-eleven {
        margin-left: 91.666667%
    }
    .row {
        margin-bottom: 6.666666666666667px;
    }
}

@media only screen and (min-width: 940px) {
    .container {
        position: relative;
        width: 936px;
        padding: 0;
        margin: 0 auto;
    }

    .column,
    .columns {
        display: block;
        float: left;
    }

    .row {
        margin-bottom: 8.703703703703704px;
    }
}
@media only screen and (min-width: 1024px) {
    .container {
        position: relative;
        width: 1010px;
        padding: 0;
        margin: 0 auto;
    }

    .column,
    .columns {
        display: block;
        float: left;
    }


}
@media only screen and (min-width: 1240px) {
    .container {
        position: relative;
        width: 1204px;
        padding: 0;
        margin: 0 auto;
    }

    .column,
    .columns {
        display: block;
        float: left;
    }

    .row {
        margin-bottom: 11.481481481481481px;
    }
}





