/* 头部 */
.HeadNavigationBar{
    color: #fdfbfb;
    width: 1280px;
    margin:0 auto;
    background: linear-gradient(to right, #646372,#646372, #363741);
    height: 50px;
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
}
body{
    background: linear-gradient(to bottom, #363640,#959598,#363640);
    font: 14px Microsoft Yahei, Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}
@media (min-width:1281px) {
    .HeadNavigationBar{
        width: 100%; 
    }
}

.hnbCenter{
    margin-right: 10px;
    -webkit-app-region: drag;
     flex-grow: 1;
}

.HeadNavigationBar .hnbLeft{

    display: flex;
    padding-left:10px;
    /* height: 50px;
    line-height: 50px; */
    
}
.HeadNavigationBar .hnbLeft div:first-child{
    text-align:center ;
    height: 50px; 
    
}
.hnbTitle{
    width: 160px;
    height:50px !important;
    line-height: 50px;
    color: #fa9108;
    font-size: 20px;
    text-align: center;
    /* height: 150px !important; */
    margin: 0 auto;
    /* background-color: #8f90b9; */
    border-radius: 10px 10px 0 0;
    position: relative;
    /* transform: perspective(70px) rotateX(30deg);
    transform-origin: center bottom; */
}
.active{
    background-image: url(../img/com/bk.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
  
}

.HeadNavigationBar .hnbLeft .hnbTitle a{
    color: #f38828;
    
}
.HeadNavigationBar .hnbLeft a{
    color: rgb(255, 252, 252);
}
.HeadNavigationBar .hnbLeft img{
    height:60px;
    margin-top: -5px;
    margin-right: 20px;
    margin-left: 10px;
}
.HeadNavigationBar .hnbRigth{

    display: flex;
}
/* 增加s */
.uimg{
    display: flex;
    line-height: 50px;
    margin-right: 15px;
}
/* 增加e */
.HeadNavigationBar .hnbRigth .user{
    position: relative;
    cursor: pointer;
    
}
.HeadNavigationBar .hnbRigth .user .userzx {
    position: absolute;
    background-color: rgba(121, 119, 156,1);
    border-radius: 5px;
    display: none;
    transition: all 0.7s ease;

}

.HeadNavigationBar .hnbRigth .user:hover .userzx{
    display: block;
}

.HeadNavigationBar .hnbRigth .user .userzx div a{
    color: #fdfbfb;
    display: block;
    padding: 10px 16px 10px 32px;
    position: relative;
    width:60px;
}

.HeadNavigationBar .hnbRigth .user .userimg{
    background-image: url(../img/com/user.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 15px;
    margin-right: 5px;
    cursor: pointer;
}
.HeadNavigationBar .hnbRigth .expand .eximg{
    background-image: url(../img/com/fangda.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 15px;
    margin-right: 10px;
    cursor: pointer;
}
.HeadNavigationBar .hnbRigth .reduce .rdimg{
    background-image: url(../img/com/suoxiao.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 15px;
    margin-right: 10px;
    cursor: pointer;
}
.HeadNavigationBar .hnbRigth .hnbFunction .funImg{
    background-image: url(../img/com/gn.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-top: 18px;
    margin-right: 10px;
    cursor: pointer;
}
.HeadNavigationBar .hnbRigth .close .closeimg{
    background-image: url(../img/com/close.png);
    background-size: 100% 100%;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-top: 12px;
    margin-right: 20px;
    cursor: pointer;
}
.search-box{
    height: 55px;
    width: 1200px;
    position: fixed;
    top:50px !important;
    z-index: 100;
    background-color: rgba(54, 54, 64,0.2);
    
}
.search-box .layui-row{
    padding-top: 5px;
}
/* area */
.server{
    margin-top: 50px !important;
    
}
.serverReturn{
    display: flex;
    justify-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgb(121, 121, 121);
}
.serverTitle{
    border: none !important;
}
.box{
    margin-top: 100px !important;
}
/* index */
.layui-form>.search{
    margin-top: 100px !important;
}
/* ranking */
.act4{
    margin-top: 150px;
}
/* 搜索框 */
.search-bj{
    margin-top: -5px;
    margin-right: 10px;
   
}

/*  */
/* 选项卡 */

.hnbLeft .tabs .label{
    /* 行内块元素 */
    display: inline-block;
    /* 相对定位 */
    position: relative;
    color: #fff2e8;
   
}
.hnbLeft .tabs .label label{
    width: 170px;
    height: 65px;
    margin-top: -15px;
    /* 块元素 */
    display: block;
    /* 定义自定义属性 通过var进行调用 */
    --color:#777780;
    background-color: var(--color);
    border-radius: 10px 10px 0 0;
    /* 设置旋转基点 */
    transform-origin: center bottom;
    /* 转换元素：视距100px 沿x轴旋转30度 */
    transform: perspective(100px) rotateX(30deg);
    cursor: pointer;
    z-index: 0;
}
/* 左右两侧弧边的统一样式 */
.hnbLeft .tabs .label label::before,
.hnbLeft .tabs .label label::after{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--color);
    bottom: 0;
    
}
/* 左侧弧边 */
.hnbLeft .tabs .label label::before{
    left: -10px;
    /* 通过径向渐变实现弧边 */
    background: radial-gradient(circle at 0 0,transparent 10px,var(--color) 10px);
}
/* 右侧弧边 */
.hnbLeft .tabs .label label::after{
    right: -10px;
    background: radial-gradient(circle at 10px 0,transparent 10px,var(--color) 10px);
}
/* 选项卡文本 */
.hnbLeft .tabs .label span{
    /* 绝对定位 */
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 26px;
    text-align: center;
    font-size: 20px;
    /* 元素不对鼠标事件做出反应（穿透元素） */
    pointer-events: none;
}
/* 选项卡面板 */
/* .hnbLeft .tabs .panels{
    margin-top: -4px;
    margin-left: -10px;
} */


/* 通过隐藏的单选按钮控制选项卡、面板的切换 */
/* #label1:checked ~ .label:nth-of-type(1) label,
#label2:checked ~ .label:nth-of-type(2) label,
#label3:checked ~ .label:nth-of-type(3) label{
    --color:#393a44;
    z-index:2;
}
#label1:checked ~ .label:nth-of-type(1) ,
#label2:checked ~ .label:nth-of-type(2) ,
#label3:checked ~ .label:nth-of-type(3) {
   
    z-index:5;
}
#label1:checked ~ .label:nth-of-type(1) span,
#label2:checked ~ .label:nth-of-type(2) span,
#label3:checked ~ .label:nth-of-type(3) span{
    color:#f38828;
    z-index: 3;
} */
/* #label1:checked ~ .panels .panel:nth-of-type(1),
#label2:checked ~ .panels .panel:nth-of-type(2),
#label3:checked ~ .panels .panel:nth-of-type(3){
    display: flex;
} */
 /* .tabs .panel{
    width: 475px;
    height: 300px;
    border: 2px solid #1fab89;
    border-radius: 4px;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 30px;
} */

/* 登录 */
/* .content-login{
    margin-top: 100px;
} */
 /* 增加菜单栏 */
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar{
    position: absolute;
    background-color: rgba(121, 119, 156,1);
    border-radius: 5px;
    margin-top: 10px;
    z-index: 10000;
    display: none;
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a{
    display: block;
    padding: 10px 15px 10px 32px;
    color: #ffffff;
    position: relative;
    /* border-bottom: 1px dashed rgb(156, 155, 155); */
}
.HeadNavigationBar .hnbRigth .hnbFunction:hover .menuBar{
    display: block;
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:hover,
.HeadNavigationBar .hnbRigth .user .userzx div a:hover{
    background-color: rgba(80, 72, 95, 0.3);
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a::before,.HeadNavigationBar .hnbRigth .user .userzx div a::before{
    content:'';
    position: absolute;
    left: 10px;
    top: 12px;
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:nth-child(1)::before{
    content: url('../img/mianBar/shz_icon.png');
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:nth-child(2)::before{
    content: url('../img/mianBar/kf_icon.png');
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:nth-child(3)::before{
    content: url('../img/mianBar/gw_icon.png');
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:nth-child(4)::before{
    content: url('../img/mianBar/jc_icon.png');
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:nth-child(5)::before{
    content: url('../img/mianBar/tp_icon.png');
}
.HeadNavigationBar .hnbRigth .hnbFunction .menuBar a:nth-child(6)::before{
    content: url('../img/mianBar/shx_icon.png');
}
.HeadNavigationBar .hnbRigth .user .userzx div:nth-child(1) a::before{
    content: url('../img/mianBar/gr_icon.png');
}
.HeadNavigationBar .hnbRigth .user .userzx div:nth-child(2) a::before{
    content: url('../img/mianBar/gb_icon.png');
    top:12px;
}