@charset "utf-8";
/*-------------------------
公共样式表
包括了头部、底部、菜单、广告、在线客服、边栏等功能
编辑：20230318，黄灿平
--------------------------*/

/* CSS Document */
*{ margin:0; padding:0;}
body{ font:normal 14px/20px "微软雅黑"; background:#fafafa;}
img { vertical-align:middle; border:none; display:inline-block; }
ul, ol ,ul, li,dl,dt,dd{ list-style:none; }
a {text-decoration:none; color:#454545; vertical-align:baseline; transition:all 0.3s linear;}
a:hover { text-decoration:none; color:#000; }
/*chrome滚动条*/
::-webkit-scrollbar-track-piece{-webkit-border-radius:0; background:none;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{-webkit-border-radius:4px; outline-offset:-2px; height:50px; background-color:rgba(0,0,0,0.6);}
::-webkit-scrollbar-thumb:hover{-webkit-border-radius:4px; height:50px; background-color:rgba(0,0,0,1);}
.clear::after{ content:""; display:block; clear:both; overflow:hidden; width:0; height:0;}

/*-------------------------
头部
编辑：20230318，黄灿平
--------------------------*/
.wrap { position:relative; margin-left: auto; margin-right: auto; max-width: 1280px; height:100%;}
/*-----头部-----*/
.headerbox { height: 120px;}
.header { background: #fff; position:fixed; width:100%; z-index:9999; top:0px;}
.header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #dcdcdc;}
.header .head-top { height: 46px; border-bottom: 1px solid #e6e6e6;}
.header .head-top .wrap {  display:flex; justify-content:space-between; align-items:center;}
.header .head-top .l-text { font-size: 12px; color: #8a8a8a;}
.header .head-top .l-text a{ color: #8a8a8a;}
.header .head-top .r-search { display: flex;}
.header .head-top .r-search .teldiv { display: flex; font-size: 14px; color: #C70000; font-weight: bold; align-items: center; }
.header .head-top .r-search .teldiv .telIcon { width: 27px; height: 27px; line-height:27px; margin-right: 8px; text-align:center; border-radius:50%; background:#C70000;
    -webkit-animation: msClock2 1.5s linear infinite;
  animation: msClock2 1.5s linear infinite;
}
.header .head-top .r-search .teldiv .telIcon:before{ color:#fff;}
.header .head-top .r-search .search-box { position: relative; width: 213px;}
.header .head-top .r-search .search-box input { width: 100%; height: 45px; border: none; padding: 0 48px 0 15px; font-size: 14px; box-sizing: border-box; background-color: #f5f5f5;  outline:none;}
.header .head-top .r-search .search-box input::placeholder { color: #b2b2b2;}
.header .head-top .r-search .search-box button { position: absolute; top: 0; right: 0; width: 48px; height: 100%;
  background-image: url(../img/public/icon_02.png);
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  background-color: #f5f5f5;
  cursor: pointer;
}
.header .head-nav { display: flex; height: 74px; align-items: center; justify-content: space-between;}
/*logo*/
.header .head-nav a.logo{ display:block;}
.header .head-nav a.logo img{ width:70px; height:auto; vertical-align:middle;}
.header .head-nav a.logo span{ margin-left:10px; font-size:24px; font-weight:bold; color:#333; font-family:"微软雅黑"; vertical-align:middle;}
/*menu*/
.topmenu>li { position: relative; display: inline-block; margin: 0 15px;}
.topmenu li .nav-link{ display:block; height:74px; line-height:74px; font-size:15px; color: #000000; font-weight: bold;}
.topmenu li .nav-link::after { position: absolute; left: 0px; bottom: -2px; content: ""; display: block; clear: both; height: 5px; width: 0px; opacity: 0; z-index: 1; background:#C70000; transition: all 0.5s ease 0s;}
.topmenu li.active .nav-link,
.topmenu li:hover .nav-link { color:#C70000;}
.topmenu li.active .nav-link::after,
.topmenu li:hover .nav-link::after { width: 100%; opacity: 1;}
.header .head-nav .r-control { display: none;}
@media only screen and (max-width: 1023px) {
  .headerbox,
  .header .head-nav { height: 55px;}
  .topmenu,
  .header .head-top { display: none;}
  .header .head-nav .logo { width: 220px;}
  .header .head-nav .r-control { display: flex;}
  .phonesearch { display: flex; flex-direction: column; justify-content: center; padding: 0 10px;}
  .phonesearch .sicon { width: 17px; height: 16px; background-image: url(../img/public/icon_19.png); background-size: contain; cursor: pointer;}
  .phonesearch .search-box { position: fixed; top: 55px; left: 0; display: flex; width: 100%; height: 60px; padding: 12px 3%; opacity: 0; visibility: hidden; background-color: #f0f0f0;
      transform: translateY(-10px);
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      -o-transform: translateY(-10px);
  }
  .phonesearch.on .search-box {
      transform: translateY(0);
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      opacity: 1;
      visibility: visible;
  }
  .phonesearch .search-box input {flex: 1; width: 100%; height: 36px;line-height: 36px; font-size: 14px; padding: 0 10px; border: none; border-radius: 0;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      -o-border-radius: 0;
  }
  .phonesearch .search-box button { width: 50px; height: 36px; border: none;
      background-image: url(../img/public/icon_19.png);
      background-repeat: no-repeat;
      background-size: 17px auto;
      background-position: center;
      background-color: #ffffff;
      cursor: pointer;
  }
  .header .head-nav .menubtn { display: inline-block; height: 48px; padding: 18px 10px 15px; font-size: 0;line-height: 48px; text-align: center; cursor: pointer;
      -webkit-transition: -webkit-transform .3s;
      transition: -webkit-transform .3s;
      transition: transform .3s;
      transition: transform .3s, -webkit-transform .3s;
  }
  .header .head-nav .menubtn>div {
      display: block; width: 18px; height: 2px; margin-bottom: 3px; border-radius: 3px; background: #252b3a;
      -webkit-transform-origin: 20px;
      transform-origin: 16px;
      -webkit-transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
      transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
      transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s;
      transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
      -moz-transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
      -ms-transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
      -o-transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s, -webkit-transform .5s cubic-bezier(.77, .2, .05, 1);
  }
  .header .head-nav .menubtn.menushow>div {
      opacity: 1;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  .header .head-nav .menubtn.menushow>div:nth-child(2) {
      width: 0;
      opacity: 0;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      -webkit-transition: width .5s;
      transition: width .5s;
  }
  .header .head-nav .menubtn.menushow>div:nth-child(1) {
      opacity: 1;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
}

/*-------------------------
底部
编辑：20230318，黄灿平
--------------------------*/
.footer{ width:100%; height:440px; background:#222; overflow:hidden;}
.linkCont{ padding-top:20px; text-align:left; background: linear-gradient(45deg, #C70000, #ef2525);}
.linkCont h4{ width:1280px; margin:0 auto; font-size:16px; font-weight:normal; color:#fff;}
.linkCont h4 span{ color:#fff;}
.linkCont h4 em{ font-size:14px; font-style:normal; color:#e6e6e6; }
.linkCont h4 i, .linkCont h4 span, .linkCont h4 em{ display:inline-block; margin-right:5px; vertical-align:middle;}
.linkCont h4 i{ width:4px; height:20px; background:#ffc600}
.linkCont ul{  width:1280px; margin:0 auto; padding:10px 0 20px 0; overflow:hidden;}
.linkCont li{ line-height:30px;}
.linkCont li a{ float:left; margin-right:20px; color:#e6e6e6;  text-decoration:none;}
.linkCont li a:hover{ color:#fff;}
/**/
.footer-content{ text-align:center;}
.ab-footer .fter{ height:65px; line-height:65px;}
.ftcont{ width:1280px; margin:0 auto; padding-top:20px;}
.ftcont .ftnav{ float:left; padding:0 100px 0 0;}
.ftcont .ftnav h4{ padding-left:30px; line-height:20px; font-size:18px; font-weight:normal; background:url(../img/public/footer-icon.png) left center no-repeat;}
.ftcont .ftnav h4 a{ color:#fff; text-decoration:none;}
.ftcont .ftnav p{ overflow:hidden; padding-top:20px; line-height:25px;}
.ftcont .ftnav p a{ display:block; line-height:30px; color:#808080;}
.ftcont .ftnav p a::before{ content:"-"; padding-right:5px; color:#666;}
.ftcont .ftnav p a:hover{ color:#b7b7b7;}
.footer-content .ftnav.w300{ width:300px; text-align:left; color:#808080;}
.footer-content .ftnav.w300 p{
    /* 两列网格布局：平均弹性，可自动换行（超过两列后自然向下跑） */
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0px 10px;         /* 行间距12px，列间距16px，视觉舒适 */
}
.footer-content .ftnav.w300 p a{ 
    /* 关键：强制单行 + 溢出省略号 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 保证内部任何长单词或连续字符也不会破坏布局 */
            word-break: keep-all;       /* 对于纯英文长字符串有效，但配合nowrap无影响 */}
.ftcont>.container{ padding-bottom:20px; overflow:hidden;}
/*微信二维码*/
.ftcont .wx{ float:right; text-align:left;}
.ftcont .wx img{ display:inline-block; width:170px; height:170px; margin-left:20px; box-sizing:border-box; vertical-align:top;}
.ftcont .wx p{ display:inline-block; vertical-align:top;}
.ftcont .wx p span{ display:block; line-height:30px; font-size:14px; color:#fff;}
.ftcont .wx p span.t1{ color:#808080;}
.ftcont .wx p em{ display:block; padding:30px 0 10px 0; font-style:normal; font-size:40px; font-weight:bold; color:#fff;}
.ftcont .wx p i{ font-size:20px; font-style:normal; color:#fff;}
/*底部信息条*/
.fter{ height:46px; line-height:46px; border-top:1px solid #313131}
.fter .container{ overflow:hidden;}
.fter span, .fter a{ color:#555;}
.fter span em{ margin-left:20px; font-style:normal;}

/*-------------------------
网站边栏
编辑：20230405，黄灿平
--------------------------*/
/*-----在线客服-----*/
.Rnav{ position:fixed; right:0; top:30%; z-index:9999;}
/*.nav{ position:fixed; right:0; top:325px; z-index:9999;}*/
.nav a{ display:block; width:75px; height:60px; margin-top:1px; padding:7.5px 0; color:#fff; text-align:center; background:rgba(255,132,132,0.6);}
.nav a:hover{ background:rgba(199,0,0,1);}
.nav a i{ display:block; width:32px; height:32px; margin:0 auto; padding-bottom:5px;}
.nav a.nav-icon1 i{ background:url(../img/public/nav-1.png) no-repeat center;}
.nav a.nav-icon2 i{ background:url(../img/public/nav-2.png) no-repeat center;}
/*协会公众号*/
.wm-gzha{ position:relative;}
.wm-gzha .wm-gzh{ display:none;}
.wm-gzha:hover .wm-gzh{ display:block; position:absolute; right:88px; top:0;}
.wm-gzha:hover .wm-gzh img{ width:200px; height:200px;}

/*--返回顶部按钮--*/
#goToTop{ display:none; }
#goToTop a{ display:block; width:75px; height:60px; margin-top:1px; padding:7.5px 0; color:#fff; text-align:center; background:rgba(203,203,203,0.7);}
#goToTop a:hover{ background:rgba(51,51,51,1);}
#goToTop a i{ display:block; width:40px; height:40px; margin:0 auto; background:url(../img/public/top.png) no-repeat center;}

@keyframes msClock2 {
  0%,
  70%,
  100% {
    transform: rotate(0) scale(1);
  }
  10%,
  30% {
    transform: rotate(-15deg) scale(1);
  }
  20%,
  40% {
    transform: rotate(15deg) scale(1);
  }
}

/*-------------------------
PWA渐进式Web应用
编辑：20260728，黄灿平
--------------------------*/
.navBtn {
    position:fixed; z-index:99; bottom:100px; right:30px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navBtn2{ 
    bottom:180px;
    animation: bounceBasic 2s infinite ease-in-out;/* 基础跳动动画 */
}
.navBtn2 .tooltip{ width:100px; left:50%; margin-left:-58px;}
.navBtn:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}
.navBtn:hover .tooltip,
.navBtn:hover .tooltip::before {
  background-color: #c70000;
  color: #ffffff;
}
.tooltip {
  position: absolute;
  top: 0;
  z-index:999;
  width:90px;
  text-align:center;
  font-size: 14px;
  background-color: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background-color: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navA {
    display:block;
    transition: all 300ms ease-out;
    border: none;
    width: 60px;
    height: 60px;
    line-height:48px;
    text-align:center;
    border-radius: 15%;
    opacity:.6;
    --i: var(--light, 0);
    --not-i: calc(1 - var(--i));
    --j: var(--press, 0);
    --not-j: calc(1 - var(--j));
    z-index: var(--i);
    transform: scale(calc(1 - var(--j)*.02));
    box-shadow: calc(var(--not-j)*-0.25em) calc(var(--not-j)*-0.25em) 0.25em rgba(252, 252, 252, var(--not-j)), calc(var(--not-j)*0.25em) calc(var(--not-j)*0.25em) 0.25em rgba(210, 218, 230, var(--not-j)), inset calc(var(--j)*0.25em) calc(var(--j)*0.25em) 0.25em rgba(210, 218, 230, var(--j)), inset calc(var(--j)*-0.25em) calc(var(--j)*-0.25em) 0.25em rgba(252, 252, 252, var(--j));
    background: #e8e8e8;
    font-size: 2.5em;
    transition: box-shadow 0.3s, transform 0.3s cubic-bezier(0.2, 4, 1, 3);
    cursor: pointer;
    transition: all 0.3s ease;
}
.navA:before{ font-size:26px; opacity:.5;
    filter: Contrast(0) Sepia(var(--i)) Hue-Rotate(calc(var(--hue) - 50deg)) Saturate(5) Opacity(calc(var(--i) + .21*var(--not-i))) Drop-Shadow(1px 1px hsla(0, 0%, 100%, var(--not-i)));
    transition: filter 0.3s;
}
.navA:hover::before{ color:#c70000; opacity:1}
.navA:focus {
    outline: none;
}
.navA:hover, .navA:focus {
    --light: 1 ;
    opacity:1;
}
.navA:active {
    --press: 1 ;
}
/* 基础跳动动画 */
@keyframes bounceBasic {
    0%, 100% {
    transform: translateY(0);
    }
    50% {
    transform: translateY(-15px);
    }
}