﻿/*通用模块容器css*/
/*2020/12/9wq*/
/*变量*/
:root {
    --colorprimary: #2594F6; /*英语主色调*/
    --colorminor1: #FE9900; /*次要橘色*/
    --colorminor2: #FF5555; /*次要红色*/
    --colorminor3: #92E083; /*次要绿色*/
    --fontcolor1: #333333; /*字体颜色1*/
    --fontcolor2: #526786; /*字体颜色*/
    --fontcolor3: #BAC2CC; /*字体颜色*/
    --size_12: 12px;
    --size_14: 14px;
    --size_16: 16px;
    --size_18: 18px;
    --size_20: 20px;
    --size_24: 24px;
    --size_26: 26px;
    --size_28: 28px;
    --size_34: 34px;
    --size_36: 36px;
    --size_48: 48px;
}
@media screen and (max-width:1280px) {
    :root {
        --size_12: 12px;
        --size_14: 12px;
        --size_16: 14px;
        --size_18: 16px;
        --size_20: 18px;
        --size_24: 22px;
        --size_26: 24px;
        --size_28: 26px;
        --size_36: 34px;
    }
}
@media screen and (max-width:960px) {
    :root {
        --size_12: 12px;
        --size_14: 12px;
        --size_16: 12px;
        --size_18: 14px;
        --size_20: 16px;
        --size_24: 20px;
        --size_26: 22px;
        --size_28: 24px;
        --size_36: 30px;
    }
}
/*color: var( --colorindex );语法*/
/*公共*/
body {
    font-family: "PingFang SC", "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
@font-face {
    font-family: 'DIN-Black';
    src: url('../fonts/DIN/DIN-Black.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DIN-Regular';
    src: url('../fonts/DIN/DIN-Regular.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'DIN-RegularAlternate';
    src: url('../fonts/DIN/DIN-RegularAlternate.otf');
    font-weight: normal;
    font-style: normal;
}
/*公共样式*/
.D_Regular {
    font-family: DIN-Regular!important;
}
.D_Black {
    font-family: DIN-Black!important;
}
/*颜色*/
.color_primary {
    color: #2594F6;
    color: var( --colorprimary );
}
.color_primary1 {
    color: #FE9900;
    color: var( --colorminor1 );
}
.font_color1 {
    color: var( --fontcolor1 );
}
.font_color2 {
    color: var( --fontcolor2 );
}
.font_color3 {
    color: var( --fontcolor3 );
}
/*文字*/
.ss_h3 {
    font-family: PingFangSC-Semibold;
    font-size: var( --size_16 );
    letter-spacing: 0;
    line-height: var( --size_20 );
}
/*文字英文*/
.ss_en_h1 {
    font-size: 36px;
    font-size: var( --size_36 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_en_h2 {
    font-size: 28px;
    font-size: var( --size_28 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_en_h3 {
    font-size: 26px;
    font-size: var( --size_26 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_en_h4 {
    font-size: 24px;
    font-size: var( --size_24 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_en_h5 {
    font-size: 20px;
    font-size: var( --size_20 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_en_h6 {
    font-size: 18px;
    font-size: var( --size_18 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}
/*文字中文*/
.ss_cn_h1 {
    font-size: 36px;
    font-size: var( --size_36 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_cn_h2 {
    font-size: 28px;
    font-size: var( --size_28 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_cn_h3 {
    font-size: 26px;
    font-size: var( --size_26 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_cn_h4 {
    font-size: 24px;
    font-size: var( --size_24 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_cn_h5 {
    font-size: 20px;
    font-size: var( --size_20 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_cn_h6 {
    font-size: 18px;
    font-size: var( --size_18 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_big_en_p { /*大一号样式*/
    font-size: 16px;
    font-size: var( --size_16 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_base_en_p { /*正常文字样式*/
    font-size: 14px;
    font-size: var( --size_14 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_small_en_p { /*小一号样式*/
    font-size: 12px;
    font-size: var( --size_12 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_big_cn_p { /*大一号样式*/
    font-size: 16px;
    font-size: var( --size_16 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_base_cn_p { /*正常文字样式*/
    font-size: 14px;
    font-size: var( --size_14 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

.ss_small_cn_p { /*小一号样式*/
    font-size: 12px;
    font-size: var( --size_12 );
    color: var( --fontcolor1 );
    letter-spacing: 0;
    line-height: 1.2;
}

/*按钮 基础*/
.ss_button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    border: 1px solid #DCDFE6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}
/*圆角按钮-主题色*/
.ss_round_primary {
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    color: var( --colorprimary );
    letter-spacing: 0;
    line-height: 20px;
    border-radius: 20px;
    padding: 8px 14px;
    border: 2px solid var( --colorprimary );
}
.ss_round_primary:hover {
    color:#fff;
    border: 2px solid rgba(0,0,0,0);
    border-left:2px solid #4CC6FB;
    border-right:2px solid #2594F6;
    background-image: linear-gradient(to right,#4CC6FB , #2594F6);
}
/*圆角按钮-警告色*/
.ss_round_danger {
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    color: var( --colorminor2);
    letter-spacing: 0;
    line-height: 20px;
    border-radius: 20px;
    padding: 8px 14px;
    border: 2px solid var( --colorminor2);
    background-color:#fff;
}
.ss_round_danger:hover{
    color:#fff;
    /*background-color: var( --colorminor2 );*/
    border: 2px solid rgba(0,0,0,0);
    border-left:2px solid #FDAAA6;
    border-right:2px solid #FF7874;
    background-image: linear-gradient(to right,#FDAAA6 , #FF7874);
}
/*控制文本只有一行*/
.text-clamp1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.sequence-c::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    background: #2594f6;
}
/*纯色按钮*/
/*蓝色*/
.or_round_primary {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    line-height: 20px;
    border-radius: 20px;
    padding: 8px 14px;
    background-color: var( --colorprimary );
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
}

    .or_round_primary:hover {
        color: #fff;
        transform: scale(1.02);
        background-image: linear-gradient(to right,#4CC6FB, #2594F6);
    }
/*淡橙色*/
.or_round_warning {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0;
    line-height: 20px;
    border-radius: 20px;
    padding: 8px 14px;
    background-color: #FEAD43;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
}

    .or_round_warning:hover {
        color: #fff;
        transform: scale(1.02);
        background-image: linear-gradient(to right,#FEAD43,#f99d26);
    }
/*淡色橙色按钮*/
.or_round_light {
    height: 40px;
    min-width: 100px;
    padding: 0 40px;
    font-size: 16px;
    color: #FEAD43;
    line-height: 20px;
    background: #FFEFE8;
    border-radius: 25px;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
}

    .or_round_light:hover {
        color: #fff;
        background: #FEAD43;
        transform: scale(1.02);
        background-image: linear-gradient(to right,#FEAD43,#f99d26);
    }
/*淡色主色按钮*/
.primary_round_light {
    height: 40px;
    min-width: 100px;
    padding: 0 40px;
    font-size: 16px;
    color: #009EFF;
    line-height: 20px;
    background: #E9F4FF;
    border-radius: 25px;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
}
 .primary_round_light:hover {
        color: #fff;
        background: #009EFF;
        transform: scale(1.02);
        background-image: linear-gradient(to right,#FEAD43,#f99d26);
 }
 