#page{min-width: 1200px;}
.header-bar{width: 100%;height: 72px;background: rgba(255,255,255,.45);position: fixed;left: 0;top: 0;z-index: 99;}
.header-bar.isFixed{background: rgba(255,255,255,1);z-index: 99;box-shadow: 0 0 15px rgba(0,0,0,.15);}
.header-bar .logo{width: 158px;height: 30px;float: left;padding-top:21px;}
.header-bar .logo img{width: 158px;height: 30px;}
.nav-list{float: right;}
.nav-list>ul{text-align: right; height: 72px;}
.nav-list>ul>li{display: inline-block;margin-left: 100px;height: 72px;position: relative;}
.nav-list>ul>li .sub-menu{position: absolute;left:50%;top:72px;transform:translate(-50%); background:#fff url(../images/menu_bj.jpg) bottom no-repeat;width: 262px;box-shadow: 0 0 20px rgba(34,99,233,.3);display: none;}
.nav-list>ul>li .sub-menu li{text-align: left;height:60px;border-bottom: 1px solid #ececec;}
.nav-list>ul>li .sub-menu li:last-child{border-bottom: 0;}
.nav-list>ul>li .sub-menu li a{font-size: 16px; color: #333333;display: block;height: 60px;padding:0 15px 0 25px;line-height: 60px;}
.nav-list>ul>li .sub-menu li a:hover{color: #fff;background-image: linear-gradient(to right, #2e76fc , #7958ed);}
.nav-list>ul>li .sub-menu li a i{display: none;width: 18px;height: 16px;background: url(../images/menu-narrow.png);float: right;margin-top:22px}
.nav-list>ul>li .sub-menu li a:hover i{display: block;}
.nav-list>ul>li:hover .sub-menu{display: block;}

.nav-list>ul>li>a{ display: block;line-height: 72px;font-size: 16px;color: #333;}
.nav-list>ul>li:hover>a,.nav-list>ul>li>a.active{font-size: 16px;font-weight: bold;color: #1341e6}
.nav-list>ul>li a .arrow-d {
    position: relative;
    line-height: 20px;
    padding-right: 14px;
}
.arrow-d:after {
    content: "";
    position: absolute;
    top: -4px;
    right: 0;
    bottom: 0;
    margin: auto 0;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(0,4,26,.7);
    border-width: 1px 1px 0 0;
    transition: all .2s ease;
    transform: rotate(135deg);
}
.nav-list>ul>li:hover>a .arrow-d:after {
    top: 6px;
    transform: rotate(-45deg)
}
.nav-list>ul>li a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 2px;
    margin: 0 auto;
    background-color: #2c68ff;
    transform: scale(0);
    transform-origin: center center;
    transition: all .2s ease;
}
.pc-page{overflow-x: hidden;position: relative;min-width: 1200px;}
.home-title{position: relative;height: 100px;}
.home-title .en{font-size: 64px;font-weight: bold;color: #efefef;font-family: "Microsoft Yahei";line-height: 80px;}
.home-title .cn{font-size: 40px;color: #333;position: absolute;left: 0;top:36px; line-height:48px;width:100%;}
.home-title .cn span{font-weight: bold;}
.scroll-box .home-title .cn{font-weight: bold;}
.home-title-profile{color: #666666;font-size: 16px;line-height: 30px;}

.news-bottom{font-size: 14px; color: #999999;}
.news-foot .news-bottom{margin-top:50px;}
.news-bottom-left{float: left;}
.news-bottom-right{float: right;}
.news-show-more{color: #999;display: flex;align-items: center;}
.news-show-more i{display:block;width: 19px;height: 19px;background:url(../images/icon_show_more_gray.png);margin-left: 10px;}
.news-show-more:hover{color: #277ede;}
.news-show-more:hover i{background:url(../images/icon_show_more.png);}

#footer{height: 480px;background: #21242c;padding-top:45px}
.footer-contact{border-bottom: 1px solid rgba(255,255,255,.1);padding-bottom: 45px;}
.footer-contact .contact-item{float: left;padding-left: 62px;width: 300px;}
.footer-contact .contact-item article{float: left;width: 50px;height: 51px;margin-left: -62px;}
.footer-contact .contact-item:first-child{width: 200px;}
.footer-contact .contact-item:last-child{width: 495px;}
.icon-foot-tel{background:url(../images/foot_tel.png)}
.icon-foot-mail{background:url(../images/foot_mail.png)}
.icon-foot-address{background:url(../images/foot_address.png)}
.footer-contact .contact-item h5{font-size: 18px;line-height: 24px;color:#fff;margin-bottom: 5px;}
.footer-contact .contact-item p{font-size: 16px;line-height: 24px;color:#909090}

.foot-help{padding:25px 0 5px;height: 200px;}
.foot-help ul{display: flex;justify-content: space-between;}
.foot-help li{font-size: 18px;color: #fff; position: relative;}
.foot-help li:first-child{width:300px}
.foot-help li:last-child{width:120px;text-align: center;}
.foot-help li a{color: #fff;}
.foot-help li a:hover{text-decoration: underline;}
.footer-submenu {
    position: absolute;
    width: 468px;
    left: 0;
    top: 40px;
}
.foot-help li .footer-submenu .submenu-item {
    display: block;
    font-size: 14px;
    line-height: 32px;
    color: #909090;
    width:156px;
    float:left;
}
.foot-help li .footer-submenu .submenu-item:hover{text-decoration: underline;}
.footer-code{position: absolute;
    width: 120px;
    height: 120px;
    right: 0;
    top: 40px;
}
.foot-link{border-bottom:1px solid rgba(255,255,255,.1);padding:10px 0 25px;font-size: 14px;color: #909090;}
.foot-link a{color: #909090;margin-right: 10px;}
.foot-link a:hover{ text-decoration: underline;}
.foot-copyright{text-align: center;font-size: 14px;color: #909090;line-height: 28px;padding-top:14px}


@-webkit-keyframes lights {
    0% {
        opacity: .2;
        transform: translateY(50px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes lights {
    0% {
        opacity: .2;
        transform: translateY(50px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@-webkit-keyframes lights2 {
    0% {
        opacity: .2;
        transform: translateX(50px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes lights2 {
    0% {
        opacity: .2;
        transform: translateX(50px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}



@media screen and (max-width: 1200px){
    @media only screen and (min-width: 320PX) and (max-width:359PX) {
        html {
            font-size:32PX !important
        }
      }
      
      @media only screen and (min-width: 360PX) and (max-width:374PX) {
        html {
            font-size:36PX !important
        }
      }
      
      @media only screen and (min-width: 375PX) and (max-width:389PX) {
        html {
            font-size:37.5PX !important
        }
      }
      
      @media only screen and (min-width: 390PX) and (max-width:413PX) {
        html {
            font-size:39PX !important
        }
      }
      
      @media only screen and (min-width: 414PX) and (max-width:639PX) {
        html {
            font-size:41.4PX !important
        }
      }
      
      @media screen and (min-width: 640PX) and (max-width:749PX){
        html {
            font-size:64PX !important
        }
      }
      @media screen and (min-width: 750PX) {
        html {
            font-size:75px !important;
        }
      }
      
      .mnav-menu{position: fixed;width: 100%;top: 1.2rem;left: 0;z-index: 99;box-shadow: 0 0 15px rgba(0,0,0,.2);display: none;}
      .mnav-menu.active{display: block;}
      .mnav-menu-narrow{
        position: absolute;
        right:0.48rem;
        top:-0.16rem;
        width: 0;
        height: 0;
        border-left: 0.16rem solid transparent;
        border-right: 0.16rem solid transparent;
        border-bottom: 0.16rem solid #fff;
      }
      .mnav-menu li{border-bottom: 1px solid #eeeeee;background:#fff;}
      .mnav-menu li:last-child{border-bottom: none;}
      .mnav-menu li>a{display: block;height: 1.12rem;display: flex;justify-content: space-between;align-items: center;color: #333333;padding-left: 0.4rem;font-size: 0.373rem;}
      .mnav-menu li .mnav-submenu{background:#f7f5f5;padding:0.2rem 0;display: none;}
      .mnav-menu li .mnav-submenu a{display: block;line-height: 0.88rem;color: #333333;padding-left: 0.92rem;}
      .mnav-menu li>a i{   
        display: block; 
        content: "";
        position: relative;
        right: 0.64rem;
        width: 7px;
        height: 7px;
        border: 1px solid #999999;
        border-width: 1px 1px 0 0;
        transition: all .2s ease;
        transform: rotate(135deg);
      }
      
      .mnav-menu li.active>a i{   
        transform: rotate(-45deg)
      }
      .mnav-menu li.active .mnav-submenu{display: block;}
      
      .mtop-nav{position: fixed;width: 100%;height: 1.2rem;background: rgba(255,255,255,.4);padding:0.3rem 0.4rem;box-sizing:border-box;left: 0;top: 0;z-index: 99;display: flex; justify-content: flex-end;}
      .mtop-nav.isFixed{background:#fff;box-shadow: 0 0 15px rgba(0,0,0,.15);}
      .mtop-nav-logo{width: 2.96rem;height: 0.56rem;margin-right:auto;}
      .mtop-nav-logo img{width: 2.96rem;height: 0.56rem;display: block;}
      .mtop-nav-menu{width: 0.6rem;height: 0.6rem;background:url(../images/m/icon_menu.png);background-size: 0.6rem 0.6rem;}
      .muser{width:0.56rem;height:0.56rem;background:url(../images/m/icon_user.png);background-size: 0.56rem 0.56rem;margin-right:0.24rem;}
      .mpublic-footer{background:#21242c;padding:0.4rem;color: #fff;}
      .mfooter-menu li{border-bottom: 1px solid rgba(255,255,255,.15);}
      .mfooter-menu li>a{color: #fff;font-size: 0.373rem;display: flex;justify-content: space-between;align-items: center;height: 1.12rem;}
      .mfooter-menu li>a i{   
          display: block; 
          content: "";
          position: relative;
          right: 3px;
          width: 7px;
          height: 7px;
          border: 1px solid #fff;
          border-width: 1px 1px 0 0;
          transition: all .2s ease;
          transform: rotate(135deg);
      }
      .mfooter-menu li.active>a i{   
          
          transform: rotate(-45deg)
      }
      .mfooter-submenu{display: none;margin-top:0.12rem;background:#000828;padding:0.2rem 0 0.2rem 0.64rem;width: 10rem;position: relative;left: -0.4rem;box-sizing: border-box;}
      .mfooter-menu li.active{border-bottom: 0;}
      .mfooter-menu li.active .mfooter-submenu{display: block;}
      .mfooter-submenu a{display: block;color: #fff;line-height: 0.8rem;font-size: 0.373rem;}
      .mfooter-contact{padding:0.6rem 0; display: flex;justify-content: space-between;border-bottom:1px solid rgba(255,255,255,.15);}
      .mcontact-left{width: 1.64rem;}
      .mcode-pic{width: 1.6rem;height: 1.6rem;padding:0.04rem;}
      .mcode-pic img{width: 100%;}
      .mcontact-left p{font-size: 0.32rem;padding-top:0.12rem}
      .mcontact-right{width: 7.2rem;display: flex;justify-content: space-between;flex-wrap: wrap;}
      .mcontact-right .mcontact-items{padding-left: 0.92rem;width: 100%;}
      .mcontact-right .mcontact-items i{width: 0.72rem;height: 0.72rem;background-size: 0.72rem 0.72rem;float: left;margin-left: -0.92rem;}
      .mcontact-right .mcontact-items.tel i{background-image: url(../images/m/home_tel.png);}
      .mcontact-right .mcontact-items.mail i{background-image: url(../images/m/home_mail.png);}
      .mcontact-right .mcontact-items.address i{background-image: url(../images/m/home_address.png);}
      .mcontact-right .mcontact-items h5{line-height: 0.4rem;display: flex;align-items: center;height: 0.72rem;}
      .mfooter-copyright{text-align: center;color: #999999;line-height: 0.56rem;padding-top:0.4rem}
      
      @-webkit-keyframes lights {
        0% {
            opacity: .2;
            transform: translateY(50px)
        }
      
        to {
            opacity: 1;
            transform: translateY(0)
        }
      }
      
      @keyframes lights {
        0% {
            opacity: .2;
            transform: translateY(50px)
        }
      
        to {
            opacity: 1;
            transform: translateY(0)
        }
      }
      @-webkit-keyframes lights2 {
        0% {
            opacity: .2;
            transform: translateX(50px)
        }
      
        to {
            opacity: 1;
            transform: translateX(0)
        }
      }
      
      @keyframes lights2 {
        0% {
            opacity: .2;
            transform: translateX(50px)
        }
      
        to {
            opacity: 1;
            transform: translateX(0)
        }
      }

}