/*全局*/
*{ box-sizing: border-box;}
a{ color: #222;}
a:hover{ color: #000;}
.bgblack{background-color:#2f363c}
.bgblue{background-color:#3B4D7F}
.bgfff{ background-color: rgba(255, 255, 255, 0.98) !important;}
.bgsvg{ background: url(/static/my/img/banner-bg.svg) center 0 no-repeat;}
.bglv{background-image: linear-gradient(#e5eecc, #B9E9FD ); }
.mr20{margin-right:20px}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.ml10{margin-left:10px}
.mt15{margin-top:15px}
.p5{ padding: 5px;}
.p10{padding:10px}
.p35{padding:35px}
.pt0{padding-top:0}
.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{ padding-top: 30px;}
.pb10{padding-bottom: 10px;}
.center{text-align:center}
.yin{ display: none;}
.clear{ clear: both;}
textarea { resize: none !important; }
/*配色*/
.red{ color: #ff5722 ;}
.yellow{ color: #ffb800;}
.green{ color: #16baaa;}
.blue{ color: #1e9fff;}
.purple{ color: #a233c6;}
.black{ color: #2f363c;}

.bg-red{ background-color: #ff5722 ;}
.bg-yellow{background-color: #ffb800;}
.bg-green{ background-color: #16baaa;}
.bg-blue{ background-color: #1e9fff;}
.bg-purple{ background-color: #a233c6;}
.bg-black{ background-color: #2f363c;}


/*主站*/
body{ background-color: #F4F5F8; color: #222;}
main{ min-height: calc(100vh - 135px); margin-top: 10px;}
header{ height: 60px; padding: 0 10px; color: #222; background-color: #fff; box-shadow: 0 2px 6px 0 rgba(0,0,0,.05); }
header .layui-nav-item.logo { margin-left: 0;}
.logo a{ padding:0 10px 0 0 !important;  }
.layui-nav .layui-nav-item.user a{ padding: 0;}
header .layui-nav-item{ margin-left: 20px;}
footer{ height: 55px; background-color: #fff; box-shadow: 6px 2px 0 0 rgba(0,0,0,.05); margin-top: 10px; } 
footer .layui-container{ height: 100%;}
#left{ width: 250px; overflow-y: auto;}
#right{ background-color: #fff;}
.foter_left{width: 250px;  }
#zhuti{  min-height: calc(100vh - 145px);}
.website{ font-size: 24px; font-weight: 500; color: #000;}
.user{ float: right;}
.headersoft dd a span{ margin-left: 10px;}
.content img{ max-width: 100%; height: auto !important;}
.displayorder{ float: right;}

.wenqu{ padding: 10px; padding-top: 15px;}
.tuqu img{ border-radius: 3px 3px 0 0 ;}
.wenqu h3 a{ color: #0d6efd;  }
.hotsoft{border-radius: 4px;}

 
.tooltitle a{ display: block; background-color: #2f363c; color: #fff; padding: 10px;}


/*layui*/
.layui-nav.layui-nav-tree{ width: 100%; height: 100%;}
.breadcrumb{  height: 30px; line-height: 30px; margin-bottom: 10px;}
.layui-form-checkbox{ margin-right: 0;}
.layui-card{ border: 1px solid #eee;}
.layui-card-header{ border-bottom: 1px solid #eee;;}
.layui-input{ width: auto;}
.layui-table{ background-color: transparent;}
.layui-nav{ background-color: transparent; padding: 0;}
.layui-nav .layui-nav-item a{ color: #222; }
.layui-nav .layui-nav-item a:hover{ color: #000;}


/* 当屏幕宽度最大为 768px 时 */
@media (max-width: 768px) {
    .logo img{ height: 25px; width: auto;} 
    .website{ font-size: 18px;}   
    .layui-nav-item{ margin: 0 !important;}   
    .layui-container{ padding: 5px;}
    .website{ display: none;}
    header li.lr{ display: none;}
    header .layui-nav{justify-content:space-between;}
    header .layui-nav .user a{ padding: 0;}
    header .user img{ margin: 0;}
    .logo {  align-self: flex-start !important;}
    .layui-nav-img{ height: auto;}
}
  



/* 滚动条美化 */
::-webkit-scrollbar {  width: 10px; height: 10px;  }
::-webkit-scrollbar-track { background-color: #F4F5F8; /* 轨道背景色 */ }
::-webkit-scrollbar-thumb { background-color: #C1C1C1; /* 滑块背景色 */ }
::-webkit-scrollbar-thumb:hover {  background-color: #B1B1B1; /* 鼠标悬停时的滑块背景色 */}

.bghover:hover{
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}



*{ box-sizing: border-box; margin: 0; padding: 0; } 
body {font-size: 16px; font-family: 'Arial', sans-serif; line-height: 1.5; }
ul, ol { list-style: none; }
input, button, select { border: none; outline: none; }
img { max-width: 100%; max-height: 100%;}
.x { display: flex;  }
.x.wrap{flex-wrap: wrap;}
.x.gap { gap: 8px;}
.x.between { justify-content: space-between;}
.x.around { justify-content: space-around;}
.x.evenly { justify-content: space-evenly;}
.x.l { justify-content: flex-start;}
.x.c { justify-content: center;}
.x.r { justify-content: flex-end;}
.x.lr > * { flex-grow: 1;}
.x.t { align-items: flex-start;}
.x.m { align-items: center;}
.x.b { align-items: flex-end;}
.x.tb { align-items: stretch;}
.x > .tb { height: 100%;}
.x > .lr { flex-grow: 1;}
.x > .t { align-self: flex-start;}
.x > .m { align-self: center;}
.x > .b { align-self: flex-end;}
.y { display: flex; flex-direction: column;}
.y.gap { gap: 8px;}
.y.between { justify-content: space-between;}
.y.around { justify-content: space-around;}
.y.evenly { justify-content: space-evenly;}
.y.l { align-items: flex-start;}
.y.c { align-items: center;}
.y.r { align-items: flex-end;}
.y.lr { align-items: stretch;}
.y.t { justify-content: flex-start;}
.y.m { justify-content: center;}
.y.b { justify-content: flex-end;}
.y.tb > * { flex-grow: 1;}
.y > .tb { flex-grow: 1;}
.y > .lr { width: 100%;}
.y > .l { align-self: flex-start;}
.y > .c { align-self: center;}
.y > .r { align-self: flex-end;}
.nomin { flex-shrink: 0;} 
:root { --mb-cols: 12; --pd-cols: 12; --pc-cols: 12; --space:0px;}
.ph1 { --mb-cols: 1; }
.ph2 { --mb-cols: 2; }
.ph3 { --mb-cols: 3; }
.ph4 { --mb-cols: 4; }
.ph5 { --mb-cols: 5; }
.ph6 { --mb-cols: 6; }
.ph7 { --mb-cols: 7; }
.ph8 { --mb-cols: 8; }
.ph9 { --mb-cols: 9; }
.ph10 { --mb-cols: 10; }
.ph11 { --mb-cols: 11; }
.ph12 { --mb-cols: 12; }
.pd1 { --pd-cols: 1; }
.pd2 { --pd-cols: 2; }
.pd3 { --pd-cols: 3; }
.pd4 { --pd-cols: 4; }
.pd5 { --pd-cols: 5; }
.pd6 { --pd-cols: 6; }
.pd7 { --pd-cols: 7; }
.pd8 { --pd-cols: 8; }
.pd9 { --pd-cols: 9; }
.pd10 { --pd-cols: 10; }
.pd11 { --pd-cols: 11; }
.pd12 { --pd-cols: 12; }
.pc1 { --pc-cols: 1; }
.pc2 { --pc-cols: 2; }
.pc3 { --pc-cols: 3; }
.pc4 { --pc-cols: 4; }
.pc5 { --pc-cols: 5; }
.pc6 { --pc-cols: 6; }
.pc7 { --pc-cols: 7; }
.pc8 { --pc-cols: 8; }
.pc9 { --pc-cols: 9; }
.pc10 { --pc-cols: 10; }
.pc11 { --pc-cols: 11; }
.pc12 { --pc-cols: 12; } 
.sp1{ justify-content: space-between; --space: 4px;}
.sp2{ justify-content: space-between; --space: 8px;}
.sp3{ justify-content: space-between; --space: 12px;}
.sp4{ justify-content: space-between; --space: 16px;}
.sp5{ justify-content: space-between; --space: 24px;}
@media (max-width: 768px) { 
     .ph1,.ph2,.ph3,.ph4,.ph5,.ph6,.ph7,.ph8,.ph9,.ph10,.ph11,.ph12{ --kuan: var(--space) * (12 - var(--mb-cols)) / 12; flex-basis: calc(100% / 12 * var(--mb-cols, 12) - var(--kuan) ); max-width: calc(100% / 12 * var(--mb-cols, 12) - var(--kuan)); }
     .ph0{ display: none;}
}
@media (min-width: 769px) and (max-width: 1024px) {
      .pd1,.pd2,.pd3,.pd4,.pd5,.pd6,.pd7,.pd8,.pd9,.pd10,.pd11,.pd12{ --kuan: var(--space) * (12 - var(--pd-cols)) / 12; flex-basis: calc(100% / 12 * var(--pd-cols, 12) - var(--kuan)); max-width: calc(100% / 12 * var(--pd-cols, 12) - var(--kuan)); }
      .pd0{ display: none;}
    } 
@media (min-width: 1025px) { 
    .pc1,.pc2,.pc3,.pc4,.pc5,.pc6,.pc7,.pc8,.pc9,.pc10,.pc11,.pc12{ --kuan: var(--space,24px) * (12 - var(--pc-cols,12)) / 12; flex-basis: calc(100% / 12 * var(--pc-cols, 12) - var(--kuan)); max-width: calc(100% / 12 * var(--pc-cols, 12) - var(--kuan)); } 
    .pc0{ display: none;}
}