@charset "UTF-8";

/* 基础重置 */
*{box-sizing: border-box}
html, body {color: #333;font-size: .16rem;margin-left: auto !important;margin-right: auto !important;text-align: left;overflow-x: hidden;font-family: '微软雅黑','Microsoft Yahei',Arial,-apple-system,"PingFang SC", "Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p,b,section,nav{padding: 0;margin: 0;font-weight: normal;box-sizing: border-box}
i,em,b{font-style: normal;}
ol,ul {list-style: none;}
li{list-style-type: none;}
a{text-decoration: none;color:inherit;}
a:focus,div:focus{border: none;outline: none;}
img, input {border: 0;}
input,button{border: none;outline: none;color:inherit;background-color: transparent;}
input[type='text']:focus-visible{outline: none;}
.clear:after{content: '';display: block;clear: both;}

/* 图片效果 */
.icon img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;max-width: 100%;max-height: 100%;margin: auto;transition: all 0.3s ease-in;}
.aniI:hover .aniIco{animation: beat 0.5s 1;}
.pic {position: relative;overflow: hidden;}
.pic:before {content: '';position: absolute;top: 0;left: -86%;z-index: 2;display: block;width: 50%;height: 100%;-webkit-transform: skewX(-25deg);transform: skewX(-25deg);background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.1));background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.1));}
.pic .a{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-position: 50%;background-repeat: no-repeat;background-size: cover;transition: all 0.3s ease-in;}
.bg-mask:hover .pic .a {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}
.bg-mask:hover .pic:before {-webkit-animation: shine .5s;animation: shine .5s;}
@keyframes shine { 100% {left: 115%;} }

/* Flex布局 */
.fl{float: left;}
.fr{float: right;}
.flex{display:flex;justify-content:space-between;flex-wrap:wrap}
.flex-left{display:flex;flex-wrap:wrap}
.flex-center{display:flex;flex-wrap:wrap;justify-content: center;}
.flex-right{display:flex;flex-wrap:wrap;justify-content: flex-end;}
.flex-v-center{display:-webkit-flex;display:flex;flex-direction:column;justify-content:center}
.flex-v{display:-webkit-flex;display:flex;align-items:center;justify-content:space-between;}

/* 文本省略 */
.eclip {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.l2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

/* 通用类 */
.pore{position:relative}
.zi3{position: relative;z-index: 3}
.wp{width: 16rem;margin: 0 auto;max-width: 96%;}
.none{display: none;}

/* 滚动条 */
html::-webkit-scrollbar {width:4px;height: 8px;background-color: #F5F5F5;}
html::-webkit-scrollbar-track {border-radius: 10px;background-color: #E2E2E2;}
html::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #0066cc;}

/* 响应式字体 */
@media screen and (max-width:1024px){  html{font-size: 90px!important;}}
@media screen and (max-width:900px){  html{font-size: 85px!important;}}
@media screen and (max-width:640px){  body{font-size: .18rem}  }
@media screen and (max-width:480px){  html{font-size: 80px!important;}}
@media screen and (max-width:375px){  html{font-size: 80px!important;}}
@media screen and (max-width:360px){  html{font-size: 70px!important;}}

/* ========== PC端导航 ========== */
.header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    padding: .3rem 0;
    transition: .3s;
}
.header.scl{
    background: #0066cc;
    padding: 0.1rem 0;
}

/* 滚动后导航样式 */

/* 左侧Logo区域 */
.logo a{display: flex;align-items: center;}
.logo img{display: block;margin-top: 0.2rem;max-height: 0.84rem;}

/* 右侧区域 */
.header-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 右上方搜索区域 */
.header-top{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .15rem;
}
.header-top .home-link{
    font-size: .20rem;
    color: #fff;
    transition: .3s;
    margin-right: 0.25rem;
}
.header-top .search-form .search_btn{
    display: inline-block;
    width: .22rem;
    height: .22rem;
    background:url('../images/submit.svg') no-repeat center center;
    border: none;
    cursor: pointer;
    transition: .3s;
}

/* 右下方导航菜单 */
#nav ul{gap: 0;justify-content: flex-start;}
#nav>ul>li{position: relative;padding: 0 .22rem;}
#nav>ul>li>a{
    display: block;
    font-size: .24rem;
    color: #fff;
    padding: .08rem 0;
    position: relative;
    transition: .3s;
}
/* 悬停下划线动画 */
#nav>ul>li>a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .3s ease;
}
#nav>ul>li:hover>a::after,
#nav>ul>li.active>a::after{
    width: 100%;
}

/* 下拉菜单 */
#nav ul li .sub {
    position: absolute;
    top: 100%;
    min-width: 1.4rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%) scaleY(0);
    visibility: hidden;
    opacity: 0;
    transition: transform .3s;
    transform-origin: top;
    padding-top: .1rem;
}
#nav ul li .sub .box {
    text-align: center;
    position: relative;
    background: #fff;
    padding: .1rem 0;
    box-shadow: 0 .05rem .15rem rgba(0,0,0,.15);
    border-radius: .05rem;
    overflow: hidden;
}
#nav ul li .sub a {
    display: block;
    padding: .08rem .2rem;
    line-height: 1.8;
    transition: .3s;
    font-size: .14rem;
    color: #666666;
    text-align: center;
    white-space: nowrap;
}
#nav ul li .sub a:hover {color: #fff;background: #0066cc;}
#nav ul li:hover .sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scaleY(1);
}

/* ========== 搜索弹窗 ========== */
.search-dialog-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
}
.search-dialog-box:before {
    content: "";
    position: absolute;
    top: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: .6s;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: .8;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    visibility: hidden;
}
.search-dialog-box.on:before {height: 100%}
.search-dialog-box .search-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    transition: height .6s 
ease;
}
.search-dialog-box .wrap-inner {transform: translateY(100%);transition: .6s;}
.search-dialog {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2;
}
.search-dialog .search-input {
    width: 8rem;
    margin: 0 auto;
    padding: 0 0.08rem 0 .24rem;
    background-color: rgba(255,255,255,.1);
    box-sizing: border-box;
    transition: all .3s;
    max-width: 94%;
    overflow: hidden;
}
.search-dialog .search-input input[type=text] {
    float: left;
    height: .72rem;
    width: calc(100% - .56rem);
    background-color: transparent;
    font-size: .2rem;
    line-height: .08rem;
    color: #fff;
    transition: all .3s;
}
.search-dialog .search-input input[type=text]::-webkit-input-placeholder {color: rgba(255,255,255,0.5);}
.search-dialog .search-input input[type=submit] {
    float: right;
    height: .72rem;
    width: .56rem;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: .24rem;
    background-image: url('../images/submit.svg');
}
.search-dialog .f-cb h3 {font-size: .3rem;color: #fff;text-align: center;margin-bottom: .3rem;}
.search-dialog-box.on {opacity: 1;visibility: visible;}
.search-dialog-box.on .search-bg {height: 100vh;}
.search-dialog-box.on .wrap-inner {transform: translateY(0)}
.pub-close {
    position: absolute;
    width: .48rem;
    height: .48rem;
    z-index: 10;
    right: .24rem;
    top: .24rem;
    background: rgba(255, 255, 255, .1) url(../images/close.png) center no-repeat;
    border-radius: 100%;
}
.pub-close i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: .22rem;
    background-repeat: no-repeat;
    background-image: url('../images/close.png');
    transition: .6s;
}
.pub-close i:hover {transform: rotate(180deg)}

/* ========== 页脚 ========== */
.foot{position: relative;background: url('../images/footer.png') no-repeat bottom center/cover;}

/* 页脚主体区域 */
.ft-main{
    padding: .5rem 0;
    position: relative;
}
.ft-main .wp{align-items: center;position: relative;}

/* 左侧Logo区域 */
.ft-left{flex-shrink: 0;}
.ft-logo{display: flex;align-items: center;}
.ft-logo img{display: block;max-height: .84rem;}
.ft-logo .divider{
    display: block;
    width: 1px;
    height: .3rem;
    background: rgba(255,255,255,.4);
    margin: 0 .15rem;
}
.ft-logo-txt{font-size: .24rem;color: #fff;font-weight: bold;}

/* 中间信息区域 */
.ft-center{margin-left: .6rem;}
.ft-center p{font-size: .18rem;line-height: 2;color: rgba(255,255,255,.8);}

/* 右侧信息区域 */
.ft-right{margin-left: .6rem;}
.ft-right p{font-size: .18rem;line-height: 2;color: rgba(255,255,255,.8);}

/* 二维码（超出页脚顶部） */
.ft-qrcode{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -1.4rem;
}
.ft-qrcode img{
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* 底部版权 */
.bq{padding: .22rem 0;border-top: 1px solid rgba(255,255,255,.1);}
.bq p{display: block;font-size: .16rem;line-height: 1.6;color: rgba(255,255,255,.5);text-align: center;}

.totop{
    position: fixed;
    right: .2rem;
    bottom: .2rem;
    z-index: 999;
    width: .5rem;
    height: .5rem;
    background: #0066cc;
    border-radius: .05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.totop.show{opacity: 1;visibility: visible;}
.totop:hover{background: #004c99;}
.totop img{display: block;width: .2rem;filter: brightness(0) invert(1);}

.ar_wap {display: none}

/* ========== 移动端导航 ========== */
.m_header_box {transition: .6s;display: none;height: .75rem;position: relative;z-index: 100000;}
.m_header_box header{padding: 0 0 0 15px;height: .75rem;background: #0066cc;box-shadow: 0 3px 5px rgba(0,0,0,.05);position: fixed;top: 0;left: 0;right: 0;z-index: 100;display:flex;justify-content:space-between;align-items: center;}
.m_header_box header #logo a{display: flex;align-items: center;}
.m_header_box header #logo img{height: .45rem;display: block}
.m_header_box header #logo span{font-size: .2rem;color: #0066cc;font-weight: bold;margin-left: .1rem;}
.m_header_box header #logo{padding:0;width: 100%;}

#nav_btn_box{position:relative;width: .85rem;height: .75rem;display: flex;align-items: center;justify-content: center;z-index: 1;min-width: .85rem;background: #0066cc;}
#nav_btn { cursor: pointer; text-align: center; z-index: 99999; transition: .5s; outline: none; box-shadow: none; }
#nav_btn .point {display: inline-block;width: .34rem;height: 18px;position: relative;outline: none;}
#nav_btn .navbtn {position: absolute;top: 50%;left: 0;display: inline-block;width: 100%;height: 2px;transition: all .3s ease-out 0s;background: #fff;margin-top: -1px;}
#nav_btn .navbtn::after, #nav_btn .navbtn::before {position: absolute;left: 0;display: inline-block;width: 100%;height: 2px;content: '';transition: all .3s ease-out 0s;background: #fff;}
#nav_btn .navbtn::after {top: -8px;}
#nav_btn .navbtn::before {top: 8px;}
#nav_btn .point.on .navbtn {background: transparent;}
#nav_btn .point.on .navbtn::after { transform: rotate(45deg); top: 0px; }
#nav_btn .point.on .navbtn::before { transform: rotate(-45deg); top: 0px; }

#m_nav {z-index: 99999;position: fixed;width: 100%;height: 100vh;right: -105vw;top: 0;display: none;padding: 64px 0px 30px;overflow: hidden;pointer-events: none;transition: all 0.3s ease-out;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;background: #0066cc;opacity: 0;visibility: hidden;-webkit-backdrop-filter: blur(15px);backdrop-filter: blur(15px);}
#m_nav .close{position:absolute;top: 7px;right: 15px;left: 15px;font-size: 30px;color: #fff;z-index: 10000;width: auto;height: 35px;border-radius: 0;display: flex;align-items: center;justify-content: flex-end;padding: 0 0;}
#m_nav.act {pointer-events: auto;right: 0;opacity: 1;visibility: visible;}

.list_box_nav_mobile{width:100%;height: 100%;padding: 0 0 10px;overflow: hidden;overflow-y: scroll;margin: 0;flex: 1;}
.list_box_nav_mobile>li{width: 100%;overflow: hidden;padding: 0;position: relative;margin: 0 auto;padding: 0 20px;}
.list_box_nav_mobile>li .con{ position:relative}
.list_box_nav_mobile>li .a{width: 100%;border-bottom: 1px solid rgba(255,255,255,.15);line-height: .64rem;color: rgba(255,255,255,.8);padding: 0;font-size: .2rem;display: flex;position: relative;transition:.5s;}
.list_box_nav_mobile>li i{opacity: 1;display: inline-block;width: .64rem;height: .64rem;background: url(../images/nav-icon.png) center no-repeat;background-size: .15rem !important;position: absolute;display: block;right: 0;top: 0;}
.list_box_nav_mobile>li.on1 i{transform: rotate(-90deg);}
.list_box_nav_mobile>li.on .a{color: rgba(255,255,255,1);}
.list_box_nav_mobile>li .list{padding:10px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.1); display:none}
.list_box_nav_mobile>li .list a{display:block;font-size:13px;color: rgba(255,255,255,.6);line-height: 2.5;}
.nav_mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 888; background-color: rgba(0,0,0,0.4); display: none; }

.wap_search{font-size:16px;border-radius: 5px;color:#fff;text-align:center;letter-spacing:2px;overflow:hidden;width: 100%;height: 60px;display: block;padding: 0 20px;}
.wap_search .header-search{height: 44px;border-radius: 0;background: rgb(255 255 255);position:relative;width: 100%;margin: 10px auto;border-radius: 50vw;}
.wap_search .input{font-size: 14px;color: #646464;height: 44px;line-height: 44px;padding: 0 .24rem;box-shadow:none;-webkit-appearance: none;float:left;border-right: 0;background:none;width: calc(100% - 40px);}
.wap_search .btn_blue{position:absolute;cursor:pointer;top:0;right:-0.1rem;width: 44px;height: 44px;line-height: 44px;border:0;background: url(../images/submit.svg) center no-repeat #0066cc;background-size: .24rem;border-radius: 50vw;}

/* ========== 通用标题 ========== */
.section-title{margin-bottom: .3rem;}
.section-title .title-box{display: flex;align-items: center;}
.section-title .title-box .line{display: block;width: .04rem;height: .28rem;background: #0066cc;margin-right: .12rem;}
.section-title .title-box h2{font-size: .26rem;color: #333;font-weight: bold;}
.section-title .title-box em{font-size: .14rem;color: #999;margin-left: .1rem;text-transform: uppercase;}
.section-title .more{font-size: .14rem;color: #999;transition: .3s;}
.section-title .more:hover{color: #0066cc;}

/* ========== 响应式 ========== */
@media (max-width: 1199px){
    html,body{overflow-x: hidden !important;}
    .ar_web{display: none}
    .ar_wap{display: block}
    .wp {width: 100%;padding: 0 15px;max-width: 100%;}
    .m_header_box{display: block;}
}

@media (max-width: 1025px){
    .ft-top{flex-wrap: wrap;padding: .4rem 0 .3rem;}
    .ft-left{width: 100%;justify-content: center;margin-bottom: .3rem;}
    .ft-left img{max-width:100%;}
    .ft-logo{justify-content: center;}
    .ft-center{width: 100%;padding: 0;margin-bottom: .3rem;}
    .ft-info{text-align: center;}
    .ft-info p{justify-content: center;}
    .ft-right{width: 100%;justify-content: center;}
    .bq{padding: .1rem 0;}
}

@media (max-width: 769px){
    .m_header_box header #logo span{font-size: .18rem;}
}

@media (max-width: 481px) {
    .m_header_box header #logo span{font-size: .16rem;}
}

/* 动画 */
@keyframes beat{
    from,to{transform:scale(1,1)}
    25%{transform:scale(.9,1.1)}
    50%{transform:scale(1.1,.9)}
    75%{transform:scale(.95,1.05)}
}
