@charset "UTF-8";
/**
 *  Author: ToDo Meng
 *  Date:   2017.7.12
 *  Time:   09:00
 *  Desc:   网站框架公共样式表
**/

/************       Common       ************/

* {
    margin: 0;
    padding: 0;}

html,
body {
    font-family: "微软雅黑", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;}

a {
    text-decoration: none;
    color: #333;}

ul,
ol {
    list-style-type: none;}

img {
    max-width: 100%;
    border: none;
    vertical-align: middle;
    object-fit: contain;}

button,
input {
    font-style: inherit;
    font-family: inherit;
    font-weight: inherit;}

i,
cite,
em,
var,
address,
dfn {
    font-style: normal;}

select,
textarea {
    resize: none;
    outline: none;}

input {
    outline: medium;
    -webkit-appearance: none;}

input[type='button'] {
    cursor: pointer;}

input[type='submit'] {
    cursor: pointer;}

input[type='text'] {
    text-indent: .725em;}

:-moz-placeholder {
    color: #ccc;}

/* Mozilla Firefox 4 to 18 */

::-moz-placeholder {
    color: #ccc;}

/* Mozilla Firefox 19+ */

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ccc;}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ccc;}

/************       Common       ************/

/************       Pages        ************/

.pages {
    text-align: center;
    margin: 10px auto 25px;}

/************       Pages        ************/

/************       Position     ************/

.center {
    margin-left: auto;
    margin-right: auto;}

.pos-r {
    position: relative;}

/* .pos-a {
    position: absolute;
} */

.pos-f {
    position: fixed;}

.left {
    float: left;}

.right {
    float: right;}

.return {
    display: block;}

/************       Position     ************/

/************       Margin       ************/

#mag-0,
.mag-0 {
    margin: 0 !important;}

.mt-10 {
    margin-top: 10px;}

.mb-10 {
    margin-bottom: 10px;}

.ml-10 {
    margin-left: 10px;}

.mr-10 {
    margin-right: 10px;}

.mt-15 {
    margin-top: 15px;}

.mb-15 {
    margin-bottom: 15px;}

.ml-15 {
    margin-left: 15px;}

.mr-15 {
    margin-right: 15px;}

.mt-20 {
    margin-top: 20px;}

.mb-20 {
    margin-bottom: 20px;}

.ml-20 {
    margin-left: 20px;}

.mr-20 {
    margin-right: 20px;}

.mt-30 {
    margin-top: 30px;}

.mb-30 {
    margin-bottom: 30px;}

.ml-30 {
    margin-left: 30px;}

.mr-30 {
    margin-right: 30px;}

.mt-40 {
    margin-top: 40px;}

.mb-40 {
    margin-bottom: 40px;}

.ml-40 {
    margin-left: 40px;}

.mr-40 {
    margin-right: 40px;}

.mt-50 {
    margin-top: 50px;}

.mb-50 {
    margin-bottom: 50px;}

.ml-50 {
    margin-left: 50px;}

.mr-50 {
    margin-right: 50px;}

/************       Margin       ************/

/************       Padding      ************/

#pad-0,
.pad-0 {
    padding: 0 !important;}

.pt-10 {
    padding-top: 10px;}

.pb-10 {
    padding-bottom: 10px;}

.pl-10 {
    padding-left: 10px;}

.pr-10 {
    padding-right: 10px;}

.pt-15 {
    padding-top: 15px;}

.pb-15 {
    padding-bottom: 15px;}

.pl-15 {
    padding-left: 15px;}

.pr-15 {
    padding-right: 15px;}

.pt-20 {
    padding-top: 20px;}

.pb-20 {
    padding-bottom: 20px;}

.pl-20 {
    padding-left: 20px;}

.pr-20 {
    padding-right: 20px;}

.pt-30 {
    padding-top: 30px;}

.pb-30 {
    padding-bottom: 30px;}

.pl-30 {
    padding-left: 30px;}

.pr-30 {
    padding-right: 30px;}

.pt-40 {
    padding-top: 40px;}

.pb-40 {
    padding-bottom: 40px;}

.pl-40 {
    padding-left: 40px;}

.pr-40 {
    padding-right: 40px;}

.pt-50 {
    padding-top: 50px;}

.pb-50 {
    padding-bottom: 50px;}

.pl-50 {
    padding-left: 50px;}

.pr-50 {
    padding-right: 50px;}

/************       Padding      ************/

/************       Display      ************/

.icons {
    display: block;}

.block {
    display: block;}

.none {
    display: none;}

.in-line {
    display: inline;}

.inl-block {
    display: inline-block;
    *display: inline;
    *zoom: 1;}

.op-0 {
    opacity: 0;}

/************       Display      ************/

/************       Width        ************/

.w100 {
    width: 100%;}

.w90 {
    width: 90%;}

.w80 {
    width: 80%;}

.w70 {
    width: 70%;}

.w60 {
    width: 60%;}

.w55 {
    width: 55%;}

.w50 {
    width: 50%;}

.w45 {
    width: 45%;}

.w40 {
    width: 40%;}

.w35 {
    width: 35%;}

.w34 {
    width: 34%;}

.w30 {
    width: 30%;}

.w25 {
    width: 25%;}

.w20 {
    width: 20%;}

.w19 {
    width: 19%;}

.w15 {
    width: 15%;}

.w10 {
    width: 10%;}

.w05 {
    width: 5%;}

/************       Width        ************/

/************       Height       ************/

.h100 {
    height: 100%;}

.h90 {
    height: 90%;}

.h80 {
    height: 80%;}

.h70 {
    height: 70%;}

.h60 {
    height: 60%;}

.h55 {
    height: 55%;}

.h50 {
    height: 50%;}

.h45 {
    height: 45%;}

.h40 {
    height: 40%;}

.h35 {
    height: 35%;}

.h34 {
    height: 34%;}

.h30 {
    height: 30%;}

.h25 {
    height: 25%;}

.h20 {
    height: 20%;}

.h19 {
    height: 19%;}

.h15 {
    height: 15%;}

.h10 {
    height: 10%;}

.h05 {
    height: 5%;}

/************       Height       ************/

/************       Border       ************/

#bor-0,
.bor-0 {
    border: none !important;}

.bor-1 {
    border: 1px solid;}

.bor-2 {
    border: 2px solid;}

/************       Border       ************/

/************       Line-height  ************/

.lh-25 {
    line-height: 25px;}

.lh-30 {
    line-height: 30px;}

.lh-35 {
    line-height: 35px;}

.lh-40 {
    line-height: 40px;}

.lh-45 {
    line-height: 45px;}

.lh-50 {
    line-height: 50px;}

.lh-55 {
    line-height: 55px;}

.lh-60 {
    line-height: 60px;}

.lh-65 {
    line-height: 65px;}

.lh-70 {
    line-height: 70px;}

.lh-75 {
    line-height: 75px;}

.lh-80 {
    line-height: 80px;}

.lh-85 {
    line-height: 85px;}

.lh-90 {
    line-height: 90px;}

.lh-95 {
    line-height: 95px;}

.lh-100 {
    line-height: 100px;}

/************       Line-height  ************/

/************       Font-size    ************/

.f-96 {
    font-size: 96px;}

.f-72 {
    font-size: 72px;}

.f-60 {
    font-size: 60px;}

.f-50 {
    font-size: 50px;}

.f-48 {
    font-size: 48px;}

.f-46 {
    font-size: 46px;}

.f-40 {
    font-size: 40px;}

.f-32 {
    font-size: 32px;}

.f-30 {
    font-size: 30px;}

.f-28 {
    font-size: 28px;}

.f-26 {
    font-size: 26px;}

.f-24 {
    font-size: 24px;}

.f-22 {
    font-size: 22px;}

.f-20 {
    font-size: 20px;}

.f-18 {
    font-size: 18px;}

.f-16 {
    font-size: 16px;}

.f-14 {
    font-size: 14px;}

.f-12 {
    font-size: 12px;}

/************       Font-size    ************/

/************       Font-weight  ************/

.f-w4 {
    font-weight: 400;}

.f-w6 {
    font-weight: 600;}

.f-w8 {
    font-weight: 800;}

/************       Font-weight  ************/

/************       Font-color   ************/

.f-000 {
    color: #000;}

.f-333 {
    color: #333;}

.f-999 {
    color: #999;}

.f-ddd {
    color: #ddd;}

.f-eee {
    color: #eee;}

.f-fff {
    color: #fff;}

.f-f00 {
    color: #f00;}

.f-f90 {
    color: #f90;}

.f-018 {
    color: #0180cf;}

.f-0a3 {
    color: #00aae3;}

.f-f08 {
    color: #f08519;}

.f-025 {
    color: #025ab3;}

.f-f1c {
    color: #f1c974;}

.f-b0b {
    color: #b0b1b3;}

.f-454 {
    color: #454851;}

.f-9a9 {
    color: #9a9a9a;}

.placeholder {
    color: #aaa;}

/************       Font-color   ************/

/************       Text-align   ************/

.text-c {
    text-align: center;}

.text-l {
    text-align: left;}

.text-r {
    text-align: right;}

.text-j {
    text-align: justify;
    text-justify: inter-ideograph;}

.text-in1 {
    text-indent: 1em;}

.text-in2 {
    text-indent: 2em;}

.text-in5 {
    text-indent: 5px;}

.text-in10 {
    text-indent: 10px;}

.ls-1 {
    letter-spacing: 1px;}

.ls-2 {
    letter-spacing: 2px;}

.ls-3 {
    letter-spacing: 3px;}

.ls-4 {
    letter-spacing: 4px;}

.ls-5 {
    letter-spacing: 5px;}

.ls-6 {
    letter-spacing: 6px;}

.ls-7 {
    letter-spacing: 7px;}

.ls-8 {
    letter-spacing: 8px;}

.ls-9 {
    letter-spacing: 9px;}

.ls-10 {
    letter-spacing: 10px;}

.nbsp {
    display: inline-block;}

.w14-5-3 {
    width: 14px;}

.w14-4-3 {
    width: 7px;}

.w14-5-4 {
    width: 4.6667px;}

.w15-4-2 {
    width: 30px;}

.w15-3-2 {
    width: 15px;}

.w15-5-4 {
    width: 5px;}

.w15-5-2 {
    width: 45px;}

/************       Text-align   ************/

/************       Text-over    ************/

.text-line {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;}

.line-2 {
    -webkit-line-clamp: 2;}

.line-3 {
    -webkit-line-clamp: 3;}

.line-4 {
    -webkit-line-clamp: 4;}

.text-o {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

/************       Text-over    ************/

/************       Cursor       ************/

.cur-p {
    cursor: pointer;}

.cur-m {
    cursor: move;}

/************       Cursor       ************/

/************       Clearfix     ************/

.over {
    overflow: hidden;
    _height: 1px;}

.clear,
.clear-fx {
    clear: both;}

.contain:after,
.clear,
.clearfix:after {
    content: " ";
    display: table;
    clear: both;}

/************       Clearfix     ************/

/************       TabCon       ************/

.tab-wrap {
    overflow: hidden;}

.tab-wrap .tab-nav-wrap {}

.tab-wrap .tab-nav-wrap .tab-nav-item {
    float: left;
    cursor: pointer;}

.tab-wrap .tab-nav-wrap .tab-nav-item.cur {
    border: 1px solid #e0e0e0;
    border-bottom: none;}

.tab-wrap .tab-nav-wrap .tab-nav-item:first-child {}

.tab-wrap .tab-nav-wrap .tab-nav-item.cur:after {
    position: absolute;
    content: " ";
    display: table;
    bottom: 0px;
    left: 0px;
    right: 1px;
    background: #fff;
    width: 100%;
    height: 1px;}

.tab-wrap .tab-con-wrap {
    overflow: hidden;}

.tab-wrap .tab-con-wrap .tab-con-item {
    display: none;}

.tab-wrap .tab-con-wrap .tab-con-item.cur {
    display: block;}

.tab-wrap .tab-con-wrap .tab-con-item:first-child {}

/************       TabCon       ************/

/************       Matrix       ************/

.matrix-img,
.animation-time {
    transition: all .5s ease-out 0s;
    -o-transition: all .5s ease-out 0s;
    -ms-transition: all .5s ease-out 0s;
    -moz-transition: all .5s ease-out 0s;
    -webkit-transition: all .5s ease-out 0s;}

.matrix-img:hover {
    transform: matrix(1.08, 0, 0, 1.08, 0, 0);
    -o-transform: matrix(1.08, 0, 0, 1.08, 0, 0);
    -ms-transform: matrix(1.08, 0, 0, 1.08, 0, 0);
    -moz-transform: matrix(1.08, 0, 0, 1.08, 0, 0);
    -webkit-transform: matrix(1.08, 0, 0, 1.08, 0, 0);}

/************       Matrix       ************/

/************       Flex         ************/

.flex {
    display: box;
    display: -ms-box;
    display: -webkit-box;
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;}

.flex-flow {
    flex-flow: row wrap;
    justify-content: space-between;}

.flex-fl-2 {
    width: 48%;}

.flex-fl-3 {
    width: 30%;}

.flex-fl-4 {
    width: 23%;}

.flex-1 {
    display: block;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    -ms-box-flex: 1;
    -webkit-box-flex: 1
;}

.flex-2 {
    display: block;
    flex: 2;
    -ms-flex: 2;
    -webkit-flex: 2;
    box-flex: 2;
    -ms-box-flex: 2;
    -webkit-box-flex: 2
;}

.flex-3 {
    display: block;
    flex: 3;
    -ms-flex: 3;
    -webkit-flex: 3;
    box-flex: 3;
    -ms-box-flex: 3;
    -webkit-box-flex: 3
;}

.flex-4 {
    display: block;
    flex: 4;
    -ms-flex: 4;
    -webkit-flex: 4;
    box-flex: 4;
    -ms-box-flex: 4;
    -webkit-box-flex: 4
;}

.flex-6 {
    display: block;
    flex: 6;
    -ms-flex: 6;
    -webkit-flex: 6;
    box-flex: 6;
    -ms-box-flex: 6;
    -webkit-box-flex: 6
;}

.flex-9 {
    display: block;
    flex: 9;
    -ms-flex: 9;
    -webkit-flex: 9;
    box-flex: 9;
    -ms-box-flex: 9;
    -webkit-box-flex: 9
;}

.flex-12 {
    display: block;
    flex: 12;
    -ms-flex: 12;
    -webkit-flex: 12;
    box-flex: 12;
    -ms-box-flex: 12;
    -webkit-box-flex: 12
;}

/************       Flex         ************/

/************       Background   ************/

.bg-fff {
    background: #fff;}

/************       Background   ************/

/************       Browser      ************/

.exp-browser-check-wrap {
    top: 0;
    width: 100%;
    left: 0;
    height: 100%;
    z-index: 9999;
    position: fixed;
    background: #e7ff00;}

.exp-browser-check-wrap .wrap-content {
    left: 50%;
    width: 435px;
    position: relative;
    margin-left: -217px;
    top: 50%;
    margin-top: -190px;}

.exp-browser-check-wrap .wrap-content .wrap-title {
    font-size: 25px;
    text-align: left;
    text-transform: uppercase;}

.exp-browser-check-wrap .wrap-content .logo-wrap {
    display: inline-block;
    vertical-align: middle;}

.exp-browser-check-wrap .wrap-content .logo-wrap img {
    width: 90px;
    float: left;}

.exp-browser-check-wrap .wrap-content .wrap-message {
    width: 320px;
    text-align: left;
    padding-left: 15px;
    vertical-align: top;
    display: inline-block;}

.exp-browser-check-wrap .wrap-content .btn-wrap {
    margin-top: 10px;
    text-align: right;}

.exp-browser-check-wrap .wrap-content .btn-wrap .btn-item {
    display: block;}

.exp-browser-check-wrap .wrap-content .btn-wrap .update-btn {
    font-size: 24px;}

.exp-browser-check-wrap .wrap-content .btn-wrap .help-btn {
    font-size: 12px;}

/************       Browser      ************/

.contain {
    width: 1200px;
    margin: 0 auto;}