:root {
    --primary-color: #1e9fff ; /* 主交互色 */
    --light-primary-color: #999 ; /* 主交互色 */
    --icon-default-color: #777 ; /* 图标默认色 */
    --bg-color: #eceef5; /* 主背景色 */
    --border-color: #dedede ; /* 边框颜色 */
    --footer-bg: #333; /* 底部背景色 */
    --footer-text: #ffffff; /* 底部文字主色 */
    --footer-border: #464646; /* 底部边框色 */
}
body{
    background-color: var(--bg-color);
}
/*  start - 头部主菜单部分 */
.header-warp{position: fixed;left: 0;top: 0;z-index: 9;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content:
    flex-start;align-items: center;width: 100%;padding: 0 50px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);box-sizing: border-box;
    background: rgba(255, 255, 255, 0.5);}
a.header-logo{display: block;flex: none;}
.header-logo img{display: block;width: auto;height: 60px;}
.header-main{display: flex;flex-direction: row;flex-wrap: nowrap;flex: none;margin-left: auto;align-items: center;}
ul.header-menu{display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-evenly;}
ul.header-menu li{display: flex;flex: none;justify-content: center;align-items: center;width: 100px;height: 90px;
    transition: background-color 0.3s ease; /* hover过渡动画 */}
ul.header-menu li a{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%;color: inherit;}
ul.header-menu li a p:first-child{ height: 25px; line-height: 25px; font-size: 14px;}
ul.header-menu li a p:last-child{ height: 20px; line-height: 20px;font-size: 12px;}
.header-menu li:hover {color: var(--primary-color);background: rgba(255, 255, 255, 0.6);}
/*  end - 头部主菜单部分 */

.main-warp{ width: 100%; min-height: 100px; display: flex; flex-direction: column;}
.main{ display: flex; flex-direction: row; flex-wrap: nowrap; max-width: 1200px; margin: 25px auto;}

/* 侧边栏 */
.sidebar-wrap{ display: block; width: 260px; min-height: 500px; margin-right: 15px;}
.sidebar-item{ width: 100%; margin-bottom: 15px;}
.sidebar-item:last-child{ margin-bottom: 0;}
.sidebar-item-head{ width: 100%; height: 80px; background-color: var(--primary-color); border-top-left-radius: 10px;
    border-top-right-radius: 10px; padding: 15px 25px; box-sizing: border-box;}
.sidebar-item-tit{ height: 30px; line-height: 30px; font-size: 20px; font-weight: bold; color: #fff;}
.sidebar-item-tit-eng{ height: 25px; line-height: 25px; font-size: 16px; color: #fff;}
ul.sidebar-item-menu,dl.sideba-item-main{ width: 100%; height: auto; border: 1px solid var(--border-color);
    border-top: 0; box-sizing: border-box; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    background-color: #fff; box-sizing: border-box; overflow: hidden;}
ul.sidebar-item-menu li{ width: 100%; height: 50px; line-height: 50px; box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);}
ul.sidebar-item-menu li:first-child.selected_menu{ border-top: 1px solid #fff;}
ul.sidebar-item-menu li:last-child{ border-bottom: none;}
ul.sidebar-item-menu li a{ display: block; width: 100%; height: 100%;font-size: 16px; padding: 0 25px; box-sizing: border-box;
    transition: background-color 0.3s ease; /* hover过渡动画 */}
ul.sidebar-item-menu li a i{display: inline-block; font-size: 12px; font-style: normal; width: 15px; height:100%; color: var(--light-primary-color)}
ul.sidebar-item-menu li a:hover,
ul.sidebar-item-menu li.selected_menu a{ color: #fff; background-color: var(--primary-color);}
ul.sidebar-item-menu li a:hover i,
ul.sidebar-item-menu li.selected_menu a i{ color: #fff;}
dl.sideba-item-main{ padding: 10px;}
.sidebar-item-kefu{ width: 100%; height: 100px; border: 1px solid var(--border-color); border-top: none;
    box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.sidebar-item-kefu img{ width: 100%; max-height: 100%; object-fit: cover;}
dl.sideba-item-main dd{ min-height: 20px; line-height: 20px; padding: 5px 0; text-align: left;}
dl.sideba-item-main dd i{ display: inline-block; font-size: 18px; color: var(--icon-default-color); margin-right: 5px;}

/* 子页面样式 */
.sub-wrap{ display: flex; flex-direction: column; width: calc(1200px - 275px); min-height: 360px; border: 1px solid var(--border-color); border-radius: 10px;
    box-sizing: border-box; background-color: #ffffff;}
.path-warp{ display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; padding: 0 15px; box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);}
.path-title{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 50px; box-sizing: border-box;}
.path-title i{ display: inline-block; width: 5px; height:20px; background-color: var(--primary-color); text-align: center; align-items: center;
    font-style: normal; margin-right: 10px; border-radius: 2.5px}
.path-title span{ display: inline-block; height:50px; line-height: 50px ; font-size: 18px; font-weight: bold;}
.path-cn{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 50px; white-space: nowrap; margin-left: auto;box-sizing: border-box;}
.path-cn span.location{ display: inline-block; height:25px; line-height: 25px; font-size: 14px;}
.path-cn a{ display: inline-block; height:25px; line-height: 25px; font-size: 14px;}
.path-cn a i.home{ display: inline-block; height:25px; line-height: 25px; align-items: center; color: var(--icon-default-color); font-style: normal; margin-right: 3px;}
.path-cn a:hover{ color: var(--primary-color); text-decoration: underline;}
.path-cn a:hover i.home{ color: var(--primary-color);}
.path-cn i.line{ display: inline-block; height:25px; line-height: 25px; align-items: center; font-style: normal; margin: 0 8px;}
.sub-content{ display: flex; flex-direction: column;flex: 1; width: 100%; box-sizing: border-box; overflow: hidden;}

/* 内页样式 */
.detail-head{ margin:15px 15px 0 15px;}
.detail-title{ min-height: 25px; line-height: 25px; font-size: 16px; font-weight: bold; text-align: center; padding: 5px 0;}
.detail-bar{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start; padding: 0 5px; box-sizing: border-box;
    border-bottom: 1px solid var(--border-color); margin-top: 5px;}
.detail-bar-item{ height: 25px;line-height: 25px;margin-right: 25px;color: var(--light-primary-color);}
.detail-bar-date{ height: 25px;line-height: 25px;margin-left: auto;color: var(--light-primary-color);}
.detail-bar-item i,.detail-bar-date i{ height: 25px;line-height: 25px; font-size: 16px; margin-right: 5px;}
.detail-description{ min-height: 50px; line-height: 25px; font-size: 13px; color: var(--icon-default-color); background-color: var(--bg-color);
    padding: 10px; box-sizing: border-box;border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}

ul.article-list,ul.mix-list,ul.img-list,.detail-content{width: 100%;padding: 15px;box-sizing: border-box; overflow: hidden;}
.detail-content{ line-height: 21px;flex: 1; margin-bottom: 15px;}
.detail-content img,.detail-content *{ max-width: 100%;}
ul.article-list li{height: 35px;border-bottom: 1px solid var(--border-color);padding: 10px 0 0 10px;white-space: nowrap;overflow: hidden;}
ul.article-list li a{display: inline-block; width: 100%; box-sizing: border-box; height: 35px;line-height: 35px;}
ul.article-list li a i{ display: inline-block; font-size: 12px; font-style: normal; width: 15px; height:100%; color: var(--light-primary-color);}
ul.article-list li span{position: relative;z-index: 99;float: right;display: inline-block;height: 35px;line-height: 35px; font-size:13px;
    color:var(--light-primary-color); background-color: #fff;padding: 0 10px;}
ul.article-list li:hover{background-color: var(--bg-color);}
ul.article-list li:hover span{background-color: var(--bg-color);}

ul.mix-list li{width: 100%;margin-bottom: 15px;}
ul.mix-list a{display: flex;flex-direction: row;flex-wrap: nowrap;width: 100%;padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);box-sizing: border-box;overflow: hidden;}
ul.mix-list a:hover{box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.2);}
.mix-list-img{display: flex; flex-shrink: 0; position: relative; width: 160px;height: 120px; border-radius: 5px; margin-right: 10px;
    background-color: #fff;border: 1px solid var(--border-color); box-sizing: border-box;}
.mix-list-img img{position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;object-fit: cover;}
.mix-list-main{display: flex;flex-direction: column; width: calc(100% - 170px)}
.mix-list-tit{ width:100%;height: 35px;line-height: 35px;font-size: 16px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.mix-list-desc{line-height: 20px;max-height: 50px;color: var(--light-primary-color);overflow: hidden;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.mix-list-bar{display: flex;flex-direction: row;flex-wrap: nowrap;align-self: flex-end;align-items: stretch;width: 100%;margin-top: auto; padding-top: 5px;}
.mix-list-date,.mix-list-click{display: flex; height: 30px; line-height: 30px; color: var(--light-primary-color); font-size: 13px;
    margin-right: 25px;align-items: center;white-space: nowrap;overflow: hidden;}
.mix-list-btn{ height: 30px; line-height: 30px; font-size: 13px; border-radius: 5px; margin-left: auto; padding: 0 25px;background-color: var(--bg-color);}

ul.img-list li{float: left;width: calc((100% - 30px)/3); border-radius: 5px; margin-right: 15px;margin-bottom: 20px;
    border: 1px solid var(--border-color);box-sizing: border-box;}
ul.img-list li:nth-child(3n){margin-right: 0;}
ul.img-list li:hover{box-shadow:0px 0px 10px rgba(0,0,0,0.2);}
ul.img-list li dd{position: relative;padding-top: 75%;}
ul.img-list li img{position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%; border-top-left-radius: 5px;
    border-top-right-radius: 5px;object-fit: cover;}
ul.img-list li dt{height: 35px;line-height: 35px; border-top: 1px solid var(--border-color); background-color: var(--bg-color);
    border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-sizing: border-box;}
ul.img-list li dt a{display: block;width: calc(100% - 20px);height: 35px;line-height: 35px;text-align: center;white-space: nowrap;
    overflow:hidden;text-overflow: ellipsis;margin: 0 10px;box-sizing: border-box;}

/* 分页样式 */
.detail-page{ display: flex; flex-direction: column; padding-top: 15px; margin: auto 15px 15px 15px; border-top: 1px solid var(--border-color);}
.detail-page dl{ display: flex; flex-direction: row; flex-wrap: nowrap; margin: 10px 0;}
.detail-page dl dt{ font-weight: bold; white-space: nowrap;}
.detail-page dl dd{ overflow: hidden; white-space: nowrap;}

/* 网页底部 */
.footer-warp{ width: 100%; padding: 20px 0; background-color: var(--footer-bg); border-top: 5px solid var(--primary-color);}
.footer-warp *{color: var(--footer-text);}
.footer{max-width: 1200px;min-width: 768px;margin: auto;}
.footer-main{display: flex;flex-direction: row;flex-wrap: nowrap;padding-bottom: 20px;}
.footer-tip{display: flex;flex-direction: row;flex-wrap: nowrap;width: 300px;}
.footer-erweima{width: 90px; height: 90px; margin-right: 10px;}
.footer-erweima img{ width: 100%; height: 100%;}
.footer-erweima p{height: 25px;line-height: 25px;font-size: 12px;text-align: center;background-color: rgba(255, 255, 255, 0.4);}
dl.footer-tip-cn{width: 200px;}
dl.footer-tip-cn dt{height: 25px;line-height: 25px;}
dl.footer-tip-cn dd{min-height: 25px;line-height: 25px;}
dl.footer-tip-cn dd.footer-tip-tel{height: 30px;line-height: 30px;font-size: 24px;font-weight: bold;}
dl.footer-tip-cn dd:nth-child(2n){ margin-bottom: 10px;}
.footer-menu{display: flex;flex-direction: row;flex-wrap: nowrap;flex-grow: 1;}
.footer-menu dl{width: 18%;margin-left: 2%;}
.footer-menu dl dt{height: 35px;line-height: 35px;font-size: 16px;font-weight: bold;}
.footer-menu dl dd{height: 30px;line-height: 30px;}
.footer-menu dl dd a:hover{text-decoration: underline;}
.footer-menu dl.menu_link{ margin-left: auto;}
.footer-menu dl.menu_link dt,.footer-menu dl.menu_link dd{ text-align: right;}
.footer-copyright{width: 100%;height: 45px;line-height: 45px;border-top: 1px solid var(--footer-border);}

/* start - 默认分页样式 */
.page-row{ text-align: center;}
.pagination {display: inline-block; padding-left: 0; margin-bottom: 25px; border-radius: 4px;}
.pagination > li { display: inline;}
.pagination > li > a,
.pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143;
    color: var(--light-primary-color); text-decoration: none; background-color: #fff; border: 1px solid var(--border-color);}
.pagination > li:first-child > a,
.pagination > li:first-child > span { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.pagination > li:last-child > a,
.pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus { color: var(--primary-color); font-weight: bold; background-color: var(--bg-color); border-color: var(--border-color);}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { z-index: 2; font-weight: bold; color: #fff; cursor: default;
    background-color: var(--primary-color); border-color: var(--primary-color);}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus { color: var(--icon-default-color); cursor: not-allowed; background-color: #fff; border-color: var(--border-color);}
.clear{ clear: both;}
/* end - 默认分页样式 */