@charset "utf-8";
body,div,li,ul,ol,dl,dd,dt,span,b,strong,p,h1,h2,h3,h4,h5,input{margin:0;padding:0;}
ul,li,dl,dt,dd,ol{list-style:none;list-style-type:none;}
a img,a,a:hover,a:active,a:visited{border:none;text-decoration:none; outline:none;}
body{font-size:14px;}
*{box-sizing: border-box;}
input,body,textarea,pre,code{ font-family:"PingFang SC", "Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB",Arial,sans-serif;}
:root {
    --padding--left: 13.4%;
    --padding--right: 13.4%;
}

/* 可以对选中文本进行自定义样式设计 */
::selection{background:#0167bb;color:#fff;}
::-moz-selection{background:#0167bb;color:#fff;}

/* 可以为输入框的占位符文本设置特定的样式，例如颜色、字体、大小 */
::-webkit-input-placeholder{text-overflow:ellipsis}
/* 设置滚动条 */
::-webkit-scrollbar{width:8px;height:8px;overflow:auto}
::-webkit-scrollbar-thumb{background-color:#e6e6e6;min-height:25px;min-width:25px;border:1px solid #e0e0e0}
::-webkit-scrollbar-track{background-color:#f7f7f7;border:1px solid #efefef}


/* 双伪元素清除法 */
.clearfix::before,.clearfix::after {content: "";display: table;}
.clearfix::after {clear: both;}
/* 显示一行超出省略号 */
.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}


/* 列表分页 */
.ui-bhpage{ width:auto; height:auto; overflow:hidden; clear:both; text-align:center;  margin:20px auto 20px auto;}
.ui-bhpage li{ min-width:32px; height:32px;text-align:center; display:inline-block; line-height:32px; margin-right:4px;border:solid 1px #d9d9d9; border-radius:4px;}
.ui-bhpage li:first-child a,.ui-bhpage li:last-child a{box-sizing: border-box;padding: 0 10px;}
.ui-bhpage li a{ width:100%; height:32px; text-align:center; line-height:32px; display:block; font-size:14px; color:#666; box-sizing: border-box; }
.ui-bhpage li:hover,.ui-bhpage li.active{ background:#0167bb; color:#fff; border:solid 1px #0167bb; }
.ui-bhpage li:hover a{ color: #fff;}

/* 新闻内容 */
.ui-article {padding: 50px 0;}
.ui-article h2 {line-height: 40px;font-size: 25px;text-align: center;font-weight: normal;}
.ui-art-tags{ text-align: center; line-height: 35px; font-size: 13px; color: #999; border-top: solid 1px #efefef;  border-bottom: solid 1px #efefef; margin: 15px auto;}
.ui-art-tags i {font-style: normal;}
.ui-art-tags span{ margin: 0 5px;}
.ui-content{ width: 100%; min-height: 350px; margin: 10px auto; overflow: hidden;line-height:180%;word-wrap:break-word}
.ui-content p{ line-height: 32px; font-size: 14px;word-wrap:break-word;}
.ui-content img{ max-width: 100%;  border-radius: 3px; cursor: pointer; display: inline-block;}
.ui-content table{ width: 100%; border-collapse: collapse; margin: 10px auto;}
.ui-content table th{ padding:8px 12px; text-align: center; vertical-align: middle; background-color: #fafafa; border: solid 1px #dcdcdc;}
.ui-content table td{ padding:8px 12px; border: solid 1px #dcdcdc; font-size: 14px;}
.ui-content table tr:hover td{background-color: #fafafa;}
.ui-content table th:hover td{background-color: #efefef;}
.ui-content video{border:solid 1px #dcdcdc; overflow:hidden; padding:5px; border-radius:4px;}
.ui-content pre{ background-color: #f6f8fa; border: solid 1px #dcdcdc; border-radius: 4px; line-height: 160%; padding: 10px 12px; font-size: 13px; color: #666;}
.ui-content pre code{ padding: 0; border: 0;}
.ui-content code{background-color: #f6f8fa; border: solid 1px #dcdcdc; border-radius: 4px; padding: 4px 6px; font-size: 12px; margin:0 2px;}
.ui-content input{ margin-right: 5px;}


/* 详情下一页 */
.article-pager{  width:100%; height:38px; margin:15px auto 15px auto; clear:both; text-align:center;}
.article-pager li{  width:128px; height:38px;border:solid 1px #efefef; text-align:center; display:inline-block; 
line-height:38px; box-sizing:border-box; border-radius:4px; background:#fff; margin-right:7px;}
.article-pager li a{ width:100%; height:38px; display:block; color:#333; font-size: 13px;}
.article-pager li a span{ font-size: 13px;}
.article-pager li:hover{  border:solid 1px #0167bb;}
.article-pager li:hover a{ color:#23438c;}

/* 没有数据 */
.ui-nodata{ text-align: center; padding: 20px; box-sizing: border-box; overflow: hidden;}
.ui-nodata img{ display:block; margin: 0 auto;}
.ui-nodata p{ font-size: 13px; color: #666; line-height: 38px;}

/* 设置版心 */
.w {width:100%;background-color: transparent;overflow: hidden;box-sizing: border-box;padding-left: var(--padding--left);padding-right: var(--padding--right);}

/* 设置头部 */
.header {position: fixed;box-sizing: border-box;top: 0px;width: 100%;height: 100px;display: flex;align-items: center;
justify-content: space-between;z-index: 9999;background-color: transparent;padding-left: var(--padding--left);padding-right: var(--padding--right);}
.header .logo {width: 101px;height: 49px;overflow: hidden;font-size: 0;display: block;}
.header .logo img {width: 100%;height: 100%;object-fit: contain;}
.header #logo1 {display: none;}
.header .nav {flex: 1;display: flex;justify-content: space-between;align-items: center;height: 49px;margin-left: 20%;}
.header .nav li {position: relative;height: 49px;text-align: center;line-height: 49px;}
.header .nav li a{line-height: 20px;font-size:18px;color: #fff;font-weight: normal;}
.header .nav li a:hover{color: #0167bb;}
.header .nav li.active a {color: #0167bb;}
.header .classify {display: none;position: absolute;right: 15px;height: 44px;width: 44px;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s; z-index: 999;}
.header .classify:hover {cursor: pointer;background-color: rgba(255, 255, 255, 0.2);}
.header .classify span {position: absolute;left: calc((100% - 25px) / 2);top: calc((100% - 2px) / 2);width: 25px;height: 2px;
background-color: #fff;}
.classify span:nth-child(1) {transform: translateY(10px) rotate(0deg);}
.classify span:nth-child(2) {opacity: 0;}
.classify span:nth-child(3) {transform: translateY(-10px) rotate(0deg);}
.classify-active span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clickfirst;}
.classify-active span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clicksecond;}
.classify-active span:nth-child(3) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clickthird;}
/*第一条线旋转动画*/
@keyframes clickfirst {0% {transform: translateY(8px) rotate(0deg);}100% {transform: translateY(0) rotate(45deg);}}
/*第二条线淡入淡出动画动画*/
@keyframes clicksecond {0% {opacity: 1;}100% {opacity: 0;}}
/*第三条线旋转动画*/
@keyframes clickthird {0% {transform: translateY(-8px) rotate(0deg);}100% {transform: translateY(0) rotate(-45deg);}}
.classify-out span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outfirst;}
.classify-out span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outsecond;}
.classify-out span:nth-child(3) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outthird;}
@keyframes outfirst {0% {transform: translateY(0) rotate(-45deg);}100% {transform: translateY(-8px) rotate(0deg);}}
@keyframes outsecond {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes outthird {0% {transform: translateY(0) rotate(45deg);} 100% {transform: translateY(8px) rotate(0deg);}}

/* 设置头部其他样式 */
.fade-in {background-color: #fff;background: #fff;}
.fade-in #logo {display: none;}
.fade-in #logo1{display: block;}
.fade-in .nav li a {color: #333;}
.fade-in .classify span {background-color: #333;}

/* 底部 */
.footer {background-color: #323232;}
.footer .main {border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 50px 0;}
.footer .main .w {display: flex;justify-content: space-between;}    
.footer .main .left {width: 300px;}
.footer .main .left h2 {font-size: 18px;color: #fff;margin-bottom: 30px;}
.footer .main .left p {font-size: 18px;color: #cecece;margin-bottom: 30px;}
.footer .main .left p span {font-size: 20px;color: #ababab;margin-right: 10px;}
.footer .main .nav {flex: 1;display: flex;justify-content: space-between;padding-left: 12%;padding-right: 8%;}
.footer .main .nav dl dt {font-size: 18px;color: #fff;margin-bottom:15px;}
.footer .main .nav dl dd a {color: #cecece;font-size: 16px;line-height: 40px;}
.footer .main .nav dl dd a:hover{color: #0167bb;}
.footer .main .code {width: 140px;display: flex;flex-direction: column;align-items: center;overflow: hidden;}
.footer .main .code img  {width: 100%;object-fit: contain;}
.footer .main .code p {font-size: 16px;color: rgba(255, 255, 255, 0.48);margin-top: 10px;text-align: center;}
.footer .foot {padding: 30px 0;}
.footer .foot .w {display: flex;justify-content: space-between; align-items: center;flex-wrap: wrap;}
.footer .foot a {color: #cecece; font-size: 16px;line-height: 30px;}
.footer .foot a:hover {color: #0167bb;}
.footer .foot .left {display: flex;align-items: center;flex-wrap: wrap;}
.footer .foot .left  span {font-size: 16px;color: #cecece;margin-right: 5px;}
.footer .foot .left a {margin-right: 5px;display: flex;align-items: center;}
.footer .foot .left a img {margin-right: 5px;}

/* 分类容器 */
.asidewrap {position: fixed;top: 0px; left: 0;  right: 0;  bottom: 0; z-index: 999;display: none;background-color: #f5f5f5;padding: 0 3%; padding-top: 64px;}
.asidewrap ul {width: 100%;overflow-y: auto;height: calc(100vh - 110px);}
.asidewrap li {border-bottom: 1px solid #dcdcdc;font-size: 16px;}
.asidewrap li .asideheader {display: flex;justify-content: space-between;align-items: center;height: 60px;}
.asidewrap li .asideheader .tit {flex: 1;font-size: 16px;color: #333;line-height: 60px;}
.asidewrap li .asideheader .kz {width: 60px;font-size: 35px;font-style: normal;font-weight: normal;text-align: right;color: #666;}
.asidewrap li .asideheader .tit:hover {color: #23438c;}
.asidewrap li .asidecontent {padding: 0 15px;display: none;}
.asidewrap li .asidecontent a {display: block;position: relative;line-height: 44px;color: #666;font-size: 14px;padding-left: 15px;}
.asidewrap li .asidecontent a:hover {color: #23438c;}

/* banner */
.banner {
    position: relative;
    margin-top: 100px;
    height: 500px;
    width: 100%;
    overflow: hidden;
}
.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .mask{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.banner .mask h2 {
    font-size: 40px;
    line-height: 42px;
    color:rgba(255, 255, 255, 0.5);
}
.banner .mask h3 {
    margin-top: 30px;
    font-size: 40px;
    line-height: 42px;
    color: #fff;
    font-weight: normal;
}

/* 导航 */
.othernav {
    border-bottom: 1px solid #f5f5f5;
}
.othernav .w {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.othernav .left {
    display: flex;
}
.othernav .left a {
    display: flex;
    align-items: center;
    height: 80px;   
    line-height: 80px;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
}
.othernav .left a:hover {
    color: #0167bb;
}
.othernav .left a:not(:last-child)::after {
    content: '';
    margin: 0 25px;
    height: 22px;
    width: 1px;
    background-color: #9f9f9f;
}
.othernav .left a.active {
    color: #0167bb;
}

.othernav .right {
    display: flex;
    align-items: center;
    height: 80px;
}
.othernav .right a {
    font-size: 16px;
    color: #666;
}
.othernav .right a:hover {
    color: #0167bb;
}
.othernav .right span {
    padding: 0 10px;
}



/* 对于小屏幕设备（手机等） */
@media only screen and (max-width: 600px) {
    /* 版心 */
     :root {
        --padding--left: 15px;
        --padding--right: 15px;
    }
    /* 
    /* 头部 */
    .header {position: fixed;padding: 0 15px;height: 64px;}
    .header .logo {width: auto;height: 44px;}
    .header .nav {display: none;}
    .header .classify {display: block;}

    /* 设置底部 */
    .footer .main  {padding: 25px 0;}
    .footer .main .w {flex-direction: column;}
    .footer .main .left h2 {margin-bottom: 15px;}
    .footer .main .left p {margin-bottom: 15px; font-size: 14px;}
    .footer .main .left p span {font-size: 16px;}
    .footer .main .left {width: 100%;}      
    .footer .main .nav{display: none;}
    .footer .main .code {width: 70px;}
    .footer .main .code p {font-size: 12px;}
    .footer .foot{padding: 15px 0;} 
    .footer .foot a {font-size: 14px;}
    .footer .foot .left  span {font-size: 14px;}
    

    /* 详情分页 */
    .article-pager li{ height:38px; border:solid 1px #efefef; text-align:center;  line-height:38px; box-sizing:border-box; border-radius:4px; background:#fff;  clear: both; width:calc((100% - 30px)/3);}
    .article-pager li:nth-child(3n){ margin: 0;}

    .banner {
        margin-top: 64px;
        width: 100%;
        height: 250px;
    }
    .banner .mask h2 {
        font-size: 20px;
    }
    .banner .mask h3 {
        margin-top: 0px;
        font-size: 20px;
    }
    .othernav .w {
        flex-direction: column;
        align-items: flex-start;
    }
    .othernav .left a {
        height: 40px;
        line-height: 40px;
        font-size: 15px;
    }   
    .othernav .right {
        height: 40px;
    }

    
}
/* 对于中等屏幕设备（平板等） */
@media only screen and (min-width: 601px) and (max-width: 1199px) {
    /* 版心 */
    :root {
        --padding--left: 15px;
        --padding--right: 15px;
    }
    /* 头部 */
    .header {position: fixed;padding: 0 15px;height: 64px;}
    .header .logo {width: auto;height: 44px;}
    .header .nav {display: none;}
    .header .classify {display: block;}

    /* 设置底部 */
    .footer .main .nav{display: none;}

    .banner {
        margin-top: 64px;
        width: 100%;
        height: 250px;
    }
    .banner .mask h2 {
        font-size: 20px;
    }
    .banner .mask h3 {
        margin-top: 0px;
        font-size: 20px;
    }

}
@media only screen and (min-width: 1200px) and (max-width: 1440px) { 
    :root {
        --padding--left: 8%;
        --padding--right: 8%;
    }
}