/* 页面整体框架-默认灰色背景 */

.box {
    box-sizing: border-box;
    padding-top: 44px;
    min-height: 100vh;
    background-color: #efefef;
    overflow: hidden;
}

/* 卡片样式-白底无阴影 */

.card {
    box-sizing: border-box;
    position: relative;
    width: 95%;
    padding: 2.5% 5%;
    margin: 2.5%;
    border-radius: 5px;
    background-color: #fff;
    transition: all .4s linear;
}

/* 卡片样式-灰底有阴影 */

.list-item {
    box-sizing: border-box;
    position: relative;
    z-index: 998;
    width: 95%;
    padding: 2.5%;
    margin: 2.5%;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 1px rgba(150, 150, 150, .3);
}

/* flex竖向排列 */

.item-column {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* flex横向排列 */

.item-row {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

/* 标题 */

.item-title {
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 标题2 */
.item-title-2 {
    font-size: 18px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 标题3 */
.item-title-3 {
    font-size: 20px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 加粗 */
.item-bold {
    font-weight: 600;
}

/* 头像 */

.item-avatar {
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
}

/* 头像小尺寸 */

.small {
    width: 10vw;
    height: 10vw;
}

/* 标签 */

.item-type {
    padding: 1px 5px;
    border: 1px solid #1cb4e6;
    color: #1cb4e6;
    font-size: 12px;
    border-radius: 5px;
    white-space: nowrap;
}

/* 图标 */

.item-icon {
    width: 25px;
    height: auto;
    object-fit: contain;
}

/* 省略文本 */

.item-des {
    font-size: 14px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 正文文本 */

.item-content {
    font-size: 14px !important;
    color: #3a3a3a;
}


/* 主题色 */

.theme-color {
    color: #C50D06 !important;
}

.theme-color-border {
    border-color: #C50D06 !important;
}

.theme-color-bg {
    background-color: #C50D06 !important;
}

/* 蓝色字体 */
.blue {
    color: #1cb4e6 !important;
    border-color: #1cb4e6 !important;
}

/* 红色字体 */
.red {
    color: #d9001b !important;
    border-color: #d9001b !important;
}


/* 黄色字体 */
.yellow {
    color: #faad14 !important;
    border-color: #faad14 !important;
}

/* 橘色字体 */
.orange {
    color: #d46b08 !important;
    border-color: #d46b08 !important;
}

/* 绿色字体 */
.green {
    color: #1fc21c !important;
    border-color: #1fc21c !important;
}

/* 灰色字体 */
.grey {
    color: #888888 !important;
    border-color: #888888 !important;
}

.grey-bg {
    background-color: #888888 !important;
}

/* 粉色字体 */
.pink {
    color: #ffadd2 !important;
    border-color: #ffadd2 !important;
}

/* 白色字体 */
.white {
    color: #fff !important;
    border-color: #fff !important;
}

/* 黑色字体 */
.black {
    color: #3a3a3a !important;
    border-color: #3a3a3a !important;
}


/* 按钮 */

.item-btn {
    padding: 5px 10px;
    border: 1px solid rgba(150, 150, 150, .3);
    border-radius: 2.5px;
    text-align: center;
    color: #3a3a3a;
    background-color: #f5f7fa;
    box-shadow: 2px 2px 5px 1px rgba(150, 150, 150, .3);
    cursor: pointer;
}

/* 按钮点击效果 */

.item-btn:active {
    box-shadow: 2px 2px 5px 1px rgba(100, 100, 100, .3) inset;
}

/* 扁平按钮 */

.plain {
    box-shadow: none;
}

/* 确认按钮-蓝色底 */

.primary {
    color: #fff !important;
    border-color: #1cb4e6 !important;
    background-color: #1cb4e6 !important;
}

/* 警告按钮-橘色底 */

.warning {
    color: #fff !important;
    border-color: #ff5722 !important;
    background-color: #ff5722 !important;
}

/* 危险按钮-红色底 */

.danger {
    color: #fff !important;
    border-color: #d9001b !important;
    background-color: #d9001b !important;
}



/* 
* 主题公共样式 V1.1
*/

/* 字体引入 */
@font-face {
    font-family: 'Source Han Sans CN';
    src: url('../fonts/SourceHanSans-VF.ttf');
}

@font-face {
    font-family: 'DIN-BLACK';
    src: url('../fonts/DINPRO-BLACK.OTF');
}

@font-face {
    font-family: 'DIN-BOLD';
    src: url('../fonts/DINPRO-BOLD.OTF');
}

@font-face {
    font-family: 'DIN-LIGHT';
    src: url('../fonts/DINPRO-LIGHT.OTF');
}

@font-face {
    font-family: 'DIN-MEDIUM';
    src: url('../fonts/DINPRO-MEDIUM.OTF');
}

@font-face {
    font-family: 'DIN-REGULAR';
    src: url('../fonts/DINPRO-REGULAR.OTF');
}


@font-face {
    font-family: 'template-font';
    src: url('../fonts/SOURCEHANSERIFCN-SEMIBOLD.OTF');
}

/* 全局使用 */
/* body {
    font-family: 'Source Han Sans CN' !important;
} */

/* 数字字体 */
.c-number-800 {
    font-family: 'DIN-BLACK' !important;
}

.c-number-700 {
    font-family: 'DIN-BLOD' !important;
}

.c-number-600 {
    font-family: 'DIN-MEDIUM' !important;
}

.c-number-500 {
    font-family: 'DIN-REGULAR' !important;
}

.c-number-400 {
    font-family: 'DIN-LIGHT' !important;
}

/* 在线图标库样式 */
.c-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

/* App端导航栏 */
.c-mobile-box {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    height: 100vh;
}

/* App端导航栏 */
.c-mobile-navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 45px;
}

/* App端导航栏返回按钮 */
.c-mobile-navbar>span:nth-child(1) {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    left: 10px;
}

/* App端导航操作栏 */
.c-mobile-navbar>span:nth-child(3) {
    color: #fff;
    font-size: 14px;
    position: absolute;
    right: 10px;
}

/* App端正文 */
.c-mobile-content {
    overflow: auto;
    flex: 1;
}

/* App端搜索框 */
.c-mobile-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 25px;
    padding: 5px;
    height: 25px;
    background-color: #f8f8f8;
}

.c-mobile-input>i {
    margin: 0 2.5px;
    font-size: 20px;
    color: #3a3a3a;
}

.c-mobile-input>input {
    flex: 1;
    width: 1px;
    height: 25px;
    background-color: unset;
    border: unset;
}

.c-mobile-input>span {
    margin: 0 2.5px;
    font-size: 14px;
    color: #3a3a3a;
}

/* 基础布局 */
.c-box {
    box-sizing: border-box;
    min-height: 100vh;
}

/* 横向布局 */
.c-row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
}

/* 竖向布局 */
.c-column {
    display: flex !important;
    flex-direction: column;
}

/* 均分 */
.c-around {
    justify-content: space-around;
}

/* 均分 */
.c-between {
    justify-content: space-between;
}

/* 居中 */
.c-center {
    align-items: center;
    justify-content: center;
}

/* 卡片 */
.c-card {
    position: relative;
    padding: 10px;
    background-color: #fff;
}

/* 圆角 */
.c-radius {
    border-radius: 5px;
}

/* 圆形 */
.c-circle {
    border-radius: 50%;
}

/* 阴影 */
.c-shadow {
    box-shadow: 2px 2px 5px 1px rgba(150, 150, 150, .3);
}

/* 下划线 */
.c-underline {
    text-decoration: underline;
}

/* 标题 */
.c-title {
    font-size: 16px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 二级标题 */
.c-title-2 {
    font-size: 20px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 二级标题 */
.c-title-3 {
    font-size: 24px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 三级标题 */
.c-title-4 {
    font-size: 28px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 四级标题 */
.c-title-5 {
    font-size: 32px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 五级标题 */
.c-title-6 {
    font-size: 36px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 六级标题 */
.c-title-7 {
    font-size: 38px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 七级标题 */
.c-title-8 {
    font-size: 40px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 八级标题 */
.c-title-9 {
    font-size: 42px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 九级标题 */
.c-title-10 {
    font-size: 44px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 十级标题 */
.c-title-11 {
    font-size: 48px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 十一级标题 */
.c-title-12 {
    font-size: 50px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 描述 */
.c-info {
    font-size: 12px;
    color: #3a3a3a;
    word-break: break-all;
}

/* 省略 */
.c-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2行省略 */
.c-ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 3行省略 */
.c-ellipsis-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 4行省略 */
.c-ellipsis-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* 5行省略 */
.c-ellipsis-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* 6行省略 */
.c-ellipsis-6 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}
/* 7行省略 */
.c-ellipsis-7 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}

/* 加粗 */
.c-bold {
    font-weight: 600;
}

/* 鼠标手势 */
.c-pointer {
    cursor: pointer;
}

.c-input {
    display: flex;
    flex-direction: row;
    height: 25px;
    padding: 2.5px 5px;
    border: 1px solid #eee;
    outline: none;
    background: #fff;
    transition: all .3s ease;
}

.c-input input {
    flex: 1;
    margin: 0 2.5px;
    border: none;
    background: unset;
}

.c-input:focus-within {
    border: 1px solid #3C6BFF !important;
}

.c-input:focus-within .iconfont {
    color: #3C6BFF !important;
}


/* 按钮 */
.c-btn {
    padding: 5px 10px;
    border: 1px solid rgba(150, 150, 150, .3);
    border-radius: 2.5px;
    text-align: center;
    color: #3a3a3a;
    background-color: #f5f7fa;
    box-shadow: 2px 2px 5px 1px rgba(150, 150, 150, .3);
    cursor: pointer;
}

/* 按钮点击效果 */
.c-btn:active {
    box-shadow: 2px 2px 5px 1px rgba(100, 100, 100, .3) inset;
}

/* 扁平按钮 */
.c-btn-plain {
    box-shadow: none;
}

/* 确认按钮-蓝色底 */
.c-btn-primary {
    color: #fff !important;
    border-color: #3C6BFF !important;
    background-color: #3C6BFF !important;
}

/* 警告按钮-橘色底 */
.c-btn-warning {
    color: #fff !important;
    border-color: #ff5722 !important;
    background-color: #ff5722 !important;
}

/* 危险按钮-红色底 */

.c-btn-danger {
    color: #fff !important;
    border-color: #DC2D10 !important;
    background-color: #DC2D10 !important;
}

/* 主题色 */
.c-theme-color {
    color: #DC2D10 !important;
}

.c-theme-bg {
    background-color: #DC2D10 !important;
}

.c-theme-border {
    border-color: #DC2D10 !important;
}

.c-theme-hover:hover {
    color: #DC2D10 !important;
}

/* 第二辅助色 */
.c-second-color {
    color: #3C6BFF !important;
}

.c-second-bg {
    background-color: #3C6BFF !important;
}

.c-second-border {
    border-color: #3C6BFF !important;
}

.c-second-hover:hover {
    color: #3C6BFF !important;
}

/* 灰色 */
.c-grey {
    color: #8c8c8c !important;
}

.c-grey-bg {
    background-color: #8c8c8c !important;
}

.c-grey-border {
    border-color: #8c8c8c !important;
}

.c-grey-hover:hover {
    color: #8c8c8c !important;
}

/* 橙色 */
.c-orange {
    color: #fa8c16 !important;
}

.c-orange-bg {
    background-color: #fa8c16 !important;
}

.c-orange-border {
    border-color: #fa8c16 !important;
}

.c-orange-hover:hover {
    color: #fa8c16 !important;
}

/* 白色 */
.c-white {
    color: #ffffff !important;
}

.c-white-bg {
    background-color: #ffffff !important;
}

.c-white-border {
    border-color: #ffffff !important;
}

.c-white-hover:hover {
    color: #ffffff !important;
}

/* 蓝色 */
.c-blue {
    color: #3C6BFF !important;
}

.c-blue-bg {
    background-color: #3C6BFF !important;
}

.c-blue-border {
    border-color: #3C6BFF !important;
}

.c-blue-hover:hover {
    color: #3C6BFF !important;
}

/* 绿色 */
.c-green {
    color: #389e0d !important;
}

.c-green-bg {
    background-color: #389e0d !important;
}

.c-green-border {
    border-color: #389e0d !important;
}

.c-green-hover:hover {
    color: #389e0d !important;
}

/* 红色 */
.c-red {
    color: #DC2D10 !important;
}

.c-red-bg {
    background-color: #DC2D10 !important;
}

.c-red-border {
    border-color: #DC2D10 !important;
}

.c-red-hover:hover {
    color: #DC2D10 !important;
}

/* 粉色 */
.c-pink {
    color: #f759ab !important;
}

.c-pink-bg {
    background-color: #f759ab !important;
}

.c-pink-border {
    border-color: #f759ab !important;
}

.c-pink-hover:hover {
    color: #f759ab !important;
}

/* 青色 */
.c-cyan {
    color: #36cfc9 !important;
}

.c-cyan-bg {
    background-color: #36cfc9 !important;
}

.c-cyan-border {
    border-color: #36cfc9 !important;
}

.c-cyan-hover:hover {
    color: #36cfc9 !important;
}

/* 金色 */
.c-gold {
    color: #FFEDBD !important;
}

.c-gold-bg {
    background-color: #FFEDBD !important;
}

.c-gold-border {
    border-color: #FFEDBD !important;
}

.c-gold-hover:hover {
    color: #FFEDBD !important;
}

/* 墨绿色 */
.c-jasper {
    color: #4A7904 !important;
}

.c-jasper-bg {
    background-color: #4A7904 !important;
}

.c-jasper-border {
    border-color: #4A7904 !important;
}

.c-jasper-hover:hover {
    color: #4A7904 !important;
}

/* 淡粉色 */
.c-lightpink {
    color: #f5f0f0 !important;
}

.c-lightpink-bg {
    background-color: #f5f0f0 !important;
}

.c-lightpink-border {
    border-color: #f5f0f0 !important;
}

.c-lightpink-hover:hover {
    color: #f5f0f0 !important;
}

/* 淡灰色 */
.c-lightgrey {
    color: #efefef !important;
}

.c-lightgrey-bg {
    background-color: #F5F0F0 !important;
}


.c-lightgrey-border {
    border-color: #efefef !important;
}

.c-lightgrey-hover:hover {
    color: #efefef !important;
}


/* 权限隐藏样式 */
.permissions-hide {
    display: none !important;
}

/* layui主题色更改 */
.layui-tab-brief>.layui-tab-title .layui-this {
    color: #DC2D10 !important;
}

.layui-tab-brief>.layui-tab-title .layui-this:after {
    border-bottom-color: #DC2D10 !important;
}

.layui-form-radio:hover *,
.layui-form-radioed,
.layui-form-radioed>i {
    color: #3C6BFF !important;
}

/* 字间距 */
.c-distance{
 letter-spacing: 1px;
}

/* 字体下边框颜色-红色 */
.bottom{
    border-bottom:2px solid #DC2D10 !important;
}

/* 下划线颜色-灰色 */
.bottom-grey{
    border-bottom:2px solid #f5f1ec !important;

}