/*******************************页面基础样式*******************************/
:root{
    --Active-Color: #3C64F5 !important;  /*rgb(198, 23, 34) c31721 */
    --Light-Active: #5d7be1 !important;
    --Font-Color: #374567 !important;
    --Mid-Font: #3f4559 !important;
    --Light-Font: rgba(178, 197, 255, .7) !important;
    --White-Color: #fff !important;
    --White-Bg: #fafaff !important;
    --Light-Bg: #fafaff80 !important;
    --Dark-Bg: #081A4F !important;
    --Red-Shadow: rgba(60, 100, 245, 0.09);  /*边框shadow*/
    --Tab-Shadow: rgba(48, 91, 244, 0.4);  /*选中tab下方的蓝色投影*/
    --Tab-Bg: #ffffff4D; /*tab未选中背景色*/
    --Black-Shadow: rgba(0, 0, 0, 0.09);
}
body {
    font-size: 14px;
    font-weight: normal;
    font-family: "Microsoft YaHei", serif;
    color: #333;
    padding: 0;
    margin: 0;
}
.head-body,.main-body,.footer-body {
    position: relative;
}
.safe-area {
    position: relative;
    width: 1200px;
    height: auto;
    margin: 0 auto;
    font-size: 14px;
    font-weight: normal;
}
.main-body a,.footer-body a {
    text-decoration: none;
    color: var(--Light-Font);
}
.main-body a:hover,.footer-body a:hover {
    color: var(--White-Color);
}
.head-body ul,.footer-body ul {
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
}
/*******************************头部导航栏样式*******************************/
.head-body {
    height: 36px;
    border-bottom: 1px #eee solid;
    background-color: #fff;
}
.head-body .head-left {
    float: left;
}
.head-body .head-right {
    float: right;
}
.head-body .head-left ul li,.head-body .head-right ul li {
    float: left;
    line-height: 36px;
}

/*******************************底部页脚样式*******************************/
.footer-body .footer-left {
    float: left;
    left: 0;
}
.footer-body .footer-right {
    display: flex;
    float: right;
    right: 0;
}
.footer-body .footer-left ul {
    list-style: none;
    margin-block-start: 0;
    margin-block-end: 0;
}
.footer-right a {
    display: inline-block;
    text-align: center;
    font-size: 12px;
}
.footer-right a div {
    width: 100px;
}
.footer-right a .img {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-body .copyright {
    font-size: 12px;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: var(--Dark-Bg);
    color: var(--Light-Font);
    opacity: 0.7;
}.footer-body {
     background-color: #293261;
 }
.footer-body .footer-left ul {
    padding-inline-start: 0;
}
.footer-body .footer-left ul li {
    margin-bottom: 6px;
    color: #B2C5FF;
    opacity: 0.5;
}
.footer-body .footer-right {
    width: auto;
}
.footer-body .safe-area {
    padding: 15px 0;
}
.footer-right .qr-code {
    position: relative;
    width: 160px;
    text-align: center;
}
.footer-right .qr-code img {
    width: 80px;
    height: auto;
}
.footer-right .qr-code .description {
    position: relative;
    width: 100%;
    text-align: center;
}
.footer-body .qr-box {
    width: 160px;
    text-align: center;
    font-size: 14px;
    color: var(--Light-Font);
    margin-right: 20px;
}

/* 弹窗样式覆盖 */
.layui-layer-dialog, .layui-layer-page, .layui-layer-iframe { border-radius: 10px; }
.layui-layer-page .layui-layer-title { border: none; background: #fafaff; font-size: 12px; color: var(--Light-Font); border-radius: 10px 10px 0 0; }
.layui-layer-iframe iframe { border-radius: 10px; }
.layui-layer-btn { padding: 0 15px 15px; }
.layui-layer-btn a { border-radius: 5px; font-size: 14px; }
.layui-layer-btn .layui-layer-btn0 { border-color: var(--Active-Color); background-color: var(--Active-Color); }
.layui-form-radio>i { font-size: 20px; }
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i { color: var(--Active-Color); }
.layui-form-checked[lay-skin=primary] i { border-color: var(--Active-Color) !important; background-color: var(--Active-Color); }
.layui-form-checkbox[lay-skin=primary]:hover i { border-color: var(--Active-Color) !important; }
.layui-form-checkbox span, .layui-form-radio div { font-size: 16px; }

/*******************************字体*******************************/
.font-size-12 {
    font-size: 12px;
}
.font-size-14 {
     font-size: 14px;
}
.font-size-16 {
    font-size: 16px;
}
.font-size-18 {
    font-size: 18px;
}
.font-size-20 {
    font-size: 20px;
}
.font-size-22 {
    font-size: 22px;
}

/*******************************外间距*******************************/
.mt5 {
    margin-top: 5px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb40 {
    margin-bottom: 40px;
}
.ml5 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}
.mr5 {
    margin-right: 5px;
}
.mr10 {
    margin-right: 10px;
}
.mr15 {
    margin-right: 15px;
}
.mr20 {
    margin-right: 20px;
}

/*******************************内间距*******************************/
.pt5 {
    padding-top: 5px;
}
.pt10 {
    padding-top: 10px;
}
.pt15 {
    padding-top: 15px;
}
.pt20 {
    padding-top: 20px;
}
.pb5 {
    padding-bottom: 5px;
}
.pb10 {
    padding-bottom: 10px;
}
.pb15 {
    padding-bottom: 15px;
}
.pb20 {
    padding-bottom: 20px;
}
.pl5 {
   padding-left: 5px;
}
.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}
.pl30 {
    padding-left: 30px;
}
.pr5 {
    padding-right: 5px;
}
.pr10 {
    padding-right: 10px;
}
.pr15 {
    padding-right: 15px;
}
.pr20 {
    padding-right: 20px;
}

/*******************************定位*******************************/
.clear {
    clear: both;
}
.fixed-top {
    position: fixed!important;
    width: 100%!important;
    top: 0!important;
    z-index: 666;
}
.fixed-bg {
    position: fixed!important;
    top: 36px!important;
}
.fixed-bottom {
    width: 100%!important;
}
/*左浮动*/
.fl {
    float: left;
}
/*右浮动*/
.fr {
    float: right;
}

/*******************************文本*******************************/
.center {
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.text-red {
    color: red;
}

/*******************************embed*******************************/
embed.page-component {
    /*设置成块级元素用于消除间隙*/
    display: block;
}

/*******************************鼠标样式*******************************/
/*手指光标*/
.mouse-style-hand {
    cursor: pointer;
}
/*文本光标*/
.mouse-style-text {
    cursor: text;
}
/*移动光标*/
.mouse-style-move {
    cursor: move;
}
/*等待光标*/
.mouse-style-wait {
    cursor: wait;
}
/*帮助光标*/
.mouse-style-help {
    cursor: help;
}
/*十字光标*/
.mouse-style-crosshair {
    cursor: crosshair;
}

/*******************************flex布局********************************/
.align-items-center {
    display: flex;
    align-items: center;
}
.justify-center {
    display: flex;
    justify-content: center;
}

/*******************************按钮********************************/
/*禁用按钮*/
button.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/*******************************页面面包屑*******************************/
.nav-bread {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #FFF;
    font-weight: bold;
}

/*******************************form表单基础样式*******************************/
form {
    box-sizing: border-box;
    position: relative;
}
/*form表单行元素*/
.form-group {
    position: relative;
    display: flex;
    width: 900px;
    margin: 20px auto;
    align-items: center;
}
.form-group.form-group-top-label {
    align-items: start;
}
/*标题*/
.form-group label {
    color: #666666;
    font-size: 14px;
    width: 150px;
    text-align: right;
    margin-right: 10px;
}
.form-group label::before {
    content: ' ';
}
/*文本框*/
.form-group input {
    width: 270px;
    height: 32px;
    line-height: 32px;
    text-indent: 5px;
    padding: 0;
    border: 1px solid rgba(159, 154, 154, 0.5);
    border-radius: 4px;
    outline: none;
    background: transparent;
}
.form-group input::placeholder {
    opacity: 0.5;
}
.form-group input:focus {
    border-color: rgba(183, 34, 26, .5);
}
.form-group input:focus::placeholder {
    color: rgba(183, 34, 26, .5);
}
/*图片外边框*/
.form-group-img {
    position: relative;
    display: inline-flex;
    width: 270px;
}
.form-group-img img {
    z-index: -1;
}
/*提示语*/
.form-group .form-group-tip {
    color: rgba(59, 130, 241, 0.76);
}
/*按钮*/
.btn {
    font-size: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
.primary-btn {
    padding: 8px 50px;
    color: #fff;
    background: rgb(191, 18, 18);
}
.disabled-btn {

}

/*******************************文本格式*******************************/
/*标题*/
.content-title {
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
}
/*必填标志*/
.star::before {
    content: '*'!important;
    color: #b7221a;
}