@charset "utf-8";
/* CSS Document */
@import 'cssreset.css';

/*common*/
*:focus {outline: none;}

/* display */
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; } /* if the element is block level(eg. div, li), using 'inline-any' instead */


.fl{float:left;}
.fr{float:right;}

/* 块状元素水平居中 */
.auto { margin-left: auto; margin-right: auto; }

/* overflow */
.ovh { overflow: hidden; }

/* position */
.rel { position: relative; }
.abs { position: absolute; }

/* font-family */
.fw { font-family: 'Microsoft Yahei'; }
.fs { font-family: "宋体", Helvetica, Arial, sans-serif;  }


/* font-style */
.n { font-weight: normal; font-style: normal; }
.b { font-weight: bold; }
.i { font-style: italic; }

/* text-align */
.tc { text-align: center; }
.tr { text-align: right; }
.tl { text-align: left; }
.tj { text-align: justify; }

/* 清除浮 动*/
.fix { *zoom:1; }
.fix:after { content:" "; display:block; height:0; clear:both; visibility:hidden; font-size:0;}

/*table*/
table {
    width: 100%;
    border-collapse: collapse;
}


/* vertical-align */
.vm { vertical-align: middle; }
.vtb { vertical-align: text-bottom; }
.vb { vertical-align: bottom; }
.vt { vertical-align: top; }
.vn { vertical-align: -2px; }

.bgnone{background:none !important;}
.bnone{border:none !important;}


.middle-box {
    font-size: 0;
    letter-spacing: -1.5em;
}

.middle-box:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.middle-cont {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    letter-spacing: 0;
}

/*-------------------------------- font -------------------------------------*/
.h16 {
    font-size: 16px
}

.h18 {
    font-size: 18px
}

.h20 {
    font-size: 20px
}

.h22 {
    font-size: 22px
}

.h24 {
    font-size: 24px
}

.h26 {
    font-size: 26px
}

.h28 {
    font-size: 28px
}

.h30 {
    font-size: 30px
}

.h32 {
    font-size: 32px
}

.h34 {
    font-size: 34px
}

.h36 {
    font-size: 36px
}

.h38 {
    font-size: 38px
}

.h40 {
    font-size: 40px
}

.h72 {
    font-size: 72px
}

@media (max-width: 1440px) {
    .h72 {
        font-size: 52px
    }

    .h38 {
        font-size: 36px
    }

    .h40 {
        font-size: 38px
    }

}

@media (max-width: 1199px) {
    .h72 {
        font-size: 40px
    }
    .h38 {
        font-size: 34px
    }

    .h28 {
        font-size: 24px
    }
    .h40 {
        font-size: 36px
    }
}
@media (max-width: 1023px) {

    .h16 {
        font-size: 14px
    }

    .h18 {
        font-size: 16px
    }

    .h20 {
        font-size: 18px
    }

    .h22 {
        font-size: 20px
    }
    .h24 {
        font-size: 20px
    }

    .h28 {
        font-size: 22px
    }
    .h30 {
        font-size: 26px
    }
    .h32 {
        font-size: 28px
    }

    .h36 {
        font-size: 30px
    }
    .h38 {
        font-size: 32px
    }
    .h40 {
        font-size: 34px
    }

}


@media (max-width: 767px) {
    .h30 {
        font-size: 22px
    }

    .h40 {
        font-size: 26px
    }

}


.middle-box {
    font-size: 0;
    letter-spacing: -1.5em;
}

.middle-box:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.middle-cont {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    letter-spacing: 0;
}

.middle-img {
    position: relative;
    overflow: hidden;
}
.middle-img img {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}



/* 5列 栅格*/
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}
































