﻿/* 定义全局颜色变量 */
:root {
    --black-color: #000;
    --gray-color: #333;
    --light-gray-color: #fafafa;
    --white-color: #fff;
    --red-color: #e60012;
    --green-color: #007f6a;
    --blue-color: #006bea;
    --orange-color: #ef931a;
    --placeholder-color: #858585;
}
/* 背景颜色 */
.bg_gray {
    background: var(--light-gray-color);
}
/* 文本对齐 */
.tx_left {
    text-align: left;
}
/* 清除浮动并设置布局 */
.clearfix {
    display: flex;
    flex-wrap: wrap;
}
/* 字体大小定义 */
.fs12 {
    font-size: 12px;
}
.fs14 {
    font-size: 14px;
}
.fs15 {
    font-size: 15px;
}
.fs16 {
    font-size: 16px;
}
.fs18 {
    font-size: 18px;
}
.fs20 {
    font-size: 20px;
}
.fs21 {
    font-size: 21px;
}
.fs22 {
    font-size: 22px;
}
.fs24 {
    font-size: 24px;
}
.fs25 {
    font-size: 25px;
}
.fs26 {
    font-size: 26px;
}
.fs27 {
    font-size: 27px;
}
.fs28 {
    font-size: 28px;
}
.fs30 {
    font-size: 30px;
}
.fs32 {
    font-size: 32px;
}
.fs34 {
    font-size: 34px;
}
.fs36 {
    font-size: 36px;
}
.fs38 {
    font-size: 38px;
}
.fs40 {
    font-size: 40px;
}
.fs42 {
    font-size: 42px;
}
.fs45 {
    font-size: 45px;
}
.fs46 {
    font-size: 46px;
}
.fs48 {
    font-size: 48px;
}
.fs50 {
    font-size: 50px;
}
.fs56 {
    font-size: 56px;
}
.fs60 {
    font-size: 60px;
}
.fs80 {
    font-size: 80px;
    line-height: 80px;
}
.clearfix li {
    position: relative;
    min-height: 1px;
    height: 100%;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Flexbox 布局 */
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 竖排文字 */
.fontS {
    writing-mode: vertical-rl;
}
/* 颜色定义 */
.f0 {
    color: var(--black-color);
}
.f3 {
    color: var(--gray-color);
}
.f6 {
    color: #666;
}
.f8 {
    color: #888;
}
.f9 {
    color: #999;
}
.fa3 {
    color: #a3a3a3;
}
.fd6 {
    color: #d6d6d6;
}
.fe6 {
    color: var(--red-color);
}
.fw {
    color: var(--white-color);
}
.fc {
    color: #ccc;
}
.f12 {
    color: #12957f;
}
.red {
    color: #a01e27;
}
.green {
    color: var(--green-color);
}
.blue {
    color: var(--blue-color);
}
.orange {
    color: var(--orange-color);
}
/* 行高定义 */
.line24 {
    line-height: 24px;
}
.line26 {
    line-height: 26px;
}
.lineh28 {
    line-height: 28px;
}
.line30 {
    line-height: 30px;
}
.line36 {
    line-height: 36px;
}
.line48 {
    line-height: 48px;
}
/* 外边距顶部定义 */
.mt5 {
    margin-top: 5px;
}
.m-top10 {
    margin-top: 10px;
}
.m-top15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mt25 {
    margin-top: 25px;
}
.mt30 {
    margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
.m-top50 {
    margin-top: 50px;
}
.mt60 {
    margin-top: 60px;
}
.mt70 {
    margin-top: 70px;
}
.mt80 {
    margin-top: 80px;
}
.mt90 {
    margin-top: 90px;
}
.m-top100 {
    margin-top: 100px;
}
.m-top110 {
    margin-top: 110px;
}
.m-top120 {
    margin-top: 120px;
}
.m-top130 {
    margin-top: 130px;
}
.m-top160 {
    margin-top: 160px;
}
/* 显示与隐藏 */
.none {
    display: none;
}
.block {
    display: block;
}
.bgnone {
    background: none;
}
.bw {
    background: var(--white-color);
}
.center {
    text-align: center;
}
.border_c {
    border: 1px solid #ccc;
}
.shadow {
    box-shadow: 0 0 10px #e4e2e2;
}
.opc5 {
    opacity: 0.5;
}
.upp {
    text-transform: uppercase;
}
.bold {
    font-weight: bold;
}
.radio10 {
    border-radius: 10px;
}
/* 相对与绝对定位 */
.relative {
    position: relative;
}
.absolute {
    position: absolute;
}
/* 文本对齐方式 */
.text-jus {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: center;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
/* 垫层高度 */
.par50 {
    padding: 50px 0;
}
.par60 {
    padding: 60px 0;
}
.par70 {
    padding: 70px 0;
}
.p-top {
    padding: 80px 0;
}
.par90 {
    padding: 90px 0;
}
.par100 {
    padding: 100px 0;
}
/* 字间距定义 */
.space0 {
    letter-spacing: 0;
}
.space1 {
    letter-spacing: 1px;
}
.space2 {
    letter-spacing: 2px;
}
.space3 {
    letter-spacing: 3px;
}
.space4 {
    letter-spacing: 4px;
}
.space8 {
    letter-spacing: 8px;
}
.text-left-justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: left;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
button {
    cursor: pointer;
}
.text-right-justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: right;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}
.tab li {
    cursor: pointer;
}
#tabCon {
    position: relative;
}
#tabCon .tab_cell {
    display: none;
}
.gray {
    filter: grayscale(100%);
}
#tabCon .tab_cell:first-child {
    display: block;
}
/* 响应式设计 */
@media screen and (max-width: 767px) {
    .line36, .line48 {
        line-height: 28px;
    }
    .fs20, .fs21, .fs22, .fs24, .fs25, .fs26, .fs27, .fs32, .fs45, .fs46, .fs50 {
        font-size: 16px;
    }
    .fs30, .fs34, .fs36, .fs38, .fs40, .fs48, .fs60 {
        font-size: 22px;
    }
    .mt30, .mt40, .m-top50, .mt60 {
        margin-top: 20px;
    }
    .mt70, .mt80, .mt90, .m-top100, .m-top110, .m-top120, .m-top130 {
        margin-top: 25px;
    }
    .m-top160 {
        margin-top: 35px;
    }
}
input::placeholder,
textarea::placeholder {
    color: var(--placeholder-color);
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .fs20, .fs21, .fs22, .fs24, .fs25, .fs27, .fs45 {
        font-size: 16px;
    }
    .fs30, .fs32, .fs34, .fs38, .fs40, .fs46, .fs48, .fs50, .fs60 {
        font-size: 28px;
    }
    .mt30, .mt40, .m-top50, .mt60 {
        margin-top: 20px;
    }
    .mt70, .mt80, .mt90, .m-top100, .m-top110, .m-top120, .m-top130 {
        margin-top: 25px;
    }
}
/* 动画定义 */
@keyframes mymove2 {
    0% {
        right: -50px;
    }
    100% {
        right: -55px;
    }
}
@keyframes mymove {
    0% {
        margin-top: 0;
    }
    100% {
        margin-top: 10px;
    }
}
@keyframes mymove3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#animat {
    animation: mymove 0.5s infinite alternate ease-in-out;
}
#animat2 {
    animation: mymove2 0.5s infinite alternate ease-in-out;
}
#animat3 {
    animation: mymove3 10s linear infinite;
}
html,
body {
    padding: 0;
    margin: 0;
    font-family: 'SourceHanSansCN-Regular', "Microsoft YaHei", "微软雅黑", "arial", "tahoma", "MicrosoftJhengHei", "sans-serif";
    font-size: 14px;
    color: #666666;
    line-height: 1.3;
    /* font-family: "fontR"; */
    overflow-x: hidden;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-youjiantou:before {
    content: "\e622";
}
.icon-down:before {
    content: "\e649";
}
.fontM {
    font-family: "fontM";
}
.fontR {
    font-family: "fontR";
}
.page-container {
    width: 1400px;
    margin: 0 auto;
}
.page-container-b {
    margin: 0 5%;
    min-width: 1400px;
}
.page-container-c {
    width: 1300px;
    margin: 0 auto;
}
.view-box {
    display: none;
}
.clearfixed {
    clear: both;
}
a {
    color: #666;
}
ul {
    padding: 0;
    margin: 0;
}
ul li {
    list-style: none;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.arrow-bottom {
    font-size: 0;
    line-height: 0;
    border-width: 10px;
    border-color: red;
    border-bottom-width: 0;
    border-style: dashed;
    border-top-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
}
/* 向右的箭头 */
.arrow-right {
    font-size: 0;
    line-height: 0;
    border-width: 10px;
    border-color: #f7f7f7;
    border-right-width: 0;
    border-style: dashed;
    border-left-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
    outline: none;
    text-decoration: none;
}
p {
    padding: 0;
    margin: 0;
}
a:hover {
    color: #0b86ea;
}
img {
    max-width: 100%;
}
.img-box {
    overflow: hidden;
}
.img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    transition: all 0.5s;
}
.mask:hover .img-box img {
    transform: scale(1.1);
}
input:focus,
button:focus,
textarea:focus {
    outline: none;
}
.title-n {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.title-n-b {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.title-n-c {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.title-n4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}