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

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

* {
    margin: 0;
    padding: 0;
}

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

a {
    text-decoration: none;
    color: #333;
}
input[type="checkbox"]{
    -webkit-appearance: checkbox;
}

.f-666 {
    color: #666;
}

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;
    border: none;
    outline: none;
}
textarea{
    border: none;
    outline: none;
    font-family: "微软雅黑";
    text-indent: .725em;
}

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-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.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;
    /* padding: 20px 20px 20px 0; */
}

.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      ************/