body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, hr, pre, form, fieldset, input, textarea, p, blockquoteth, td { margin: 0px; padding: 0px; }
fieldset, img { border: 0; }
ol, ul { list-style: none; }

/* 以下样式根据不同的网站可能需要改写 */
body { background: #f5f5f5; /*overflow:hidden;height:100%;*/ }
a { text-decoration: none; color: #000; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
 
/* 须改写样式结束*/
/**
 * @name	:常用原子类
 * @author	:chongzi(email:5654565@qq.com)
 * @version	:1.0
 * @type	:公共规则
 * @explain	:无
 */
/*字体排版*/
.f1 { font-size: 1px; }
.fb { font-weight: bold; }
.fn { font-weight: normal; }
.lh1 { line-height: 1%; }
.lh150 { line-height: 150%; }
.lh180 { line-height: 180%; }
.lh200 { line-height: 200%; }
/*定位*/
.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }
.bc { margin-left: auto; margin-right: auto; }
.fl { float: left; }
.fr { float: right; }
.cb { clear: both; }
.cl { clear: left; }
.cr { clear: right; } 
/*如果一个块级对象内部包含浮动对象，应该给该块级对象使用clearfix*/
.clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
*html .clearfix { height: 1%; }
.clearfix { display: block; }
.va-c { vertical-align: center; }
.pr { position: relative; }
.pa { position: absolute; }
.abs-right { position: absolute; right: 0; }
.zoom { zoom: 1; }
.hidden { visibility: hidden; }
.none { display: none; } 
/*长度高度*/
.w10 { width: 10px; }
.w { width: 100%; }
.h { height: 100%; }
.h10 { height: 10px; overflow: hidden; } 
/*边距*/ 
.m5{margin:5px;}
.m10{margin:10px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt120{margin-top:120px;}
.ml10{margin-left:10px;}
.mr10{margin-right:10px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb25{margin-top:25px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.pa0{padding:0px;}
.pa5{padding:5px;}
.pa10{padding:10px;}
.pa20{padding:20px;}
.pa30{padding:30px;}
.patb10{padding:10px 0;}
.pab30{padding-bottom:30px;}
.pab100{padding-bottom:100px;} 
html {   min-width: 320px; /*overflow:hidden;*/ }
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.fw-w{flex-wrap:wrap;}
.ai-c{align-items: center;}
.jc-c{justify-content: center;}
.jc-sb{justify-content: space-between;}
.jc-fe{justify-content: flex-end;}
.jc-fs{justify-content: flex-start;}

header {background: url("../images/nav.png") center 0 no-repeat;}
.header {height: 120px;display: flex;justify-content: space-between;align-items: center;padding: 0 80px;}
.header nav {position: relative;z-index: 1;}
.header nav ul {display: flex;justify-content: center;gap: 80px;list-style: none;}
.header nav ul li {position: relative;font-size: 16px;color: #bfd2f8;line-height: 42px;transition: 0.2s all linear;cursor: pointer;white-space: nowrap;}
.header nav ul li::before {content: "";position: absolute;top: 0;left: 100%;width: 0;height: 100%;border-bottom: 1px solid #bfd2f8;transition: 0.2s all linear;}
.header nav ul li a {display: block;color: #bfd2f8;}
.header nav li:hover::before {width: 100%;top: 0;left: 0;transition-delay: 0.1s;border-bottom-color: #bfd2f8;z-index: -1;}
.header nav li:hover~li::before {left: 0;}
.header nav li.active::before {position: absolute;left: 0;width: 100%;height: 100%;border-bottom: 1px solid #bfd2f8;}
.header h1.logo a {color: #fff;}

footer {height: 420px;background-color: #173399;text-align: center;}
footer .explain {display: flex;height: 265px;justify-content: center;align-items: center;border-bottom: 1px solid #bfd2f8;}
footer .explain .logo {color: #bfd2f8;}
footer .explain .p {text-align: left;padding: 0 18px 0 70px;}
footer .explain .p1 {line-height: 36px;padding-bottom: 3px;color: #fff;font-size: 24px;font-weight: 900;}
footer .explain .p2 {line-height: 21px;font-size: 14px;color: #fff;letter-spacing: 3.08px;}
footer .copyright {font-size: 14px;line-height: 1.8;color: #bfd2f8;padding: 40px 0;}
footer .copyright a {color: #bfd2f8;}
footer .copyright br {display: none;}

.totop {display: none;background: #fff url("../images/toTop.svg") center center/28px 29px no-repeat;border-radius: 4px;box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%);cursor: pointer;height: 48px;width: 48px;position: fixed;bottom: 20px;right: 20px;z-index: 9;}

@media screen and (min-width: 1280px) and (max-width: 1480px) {
}

@media screen and (max-width: 1280px) {
    .header {padding: 0 40px;}
    .header nav ul {gap: 40px;}
    .header h1.logo svg {width: auto;height: 50px;}
}

@media screen and (max-width: 960px) {
    .header {padding: 0 20px;}
    .header nav ul {gap: 20px;}
    .header h1.logo svg {width: auto;height: 40px;}
}


@media screen and (max-width: 768px) {
    header {background: url("../images/mNav.png") center 0/contain no-repeat;position: sticky;top: 0;z-index: 9;}
    .header {padding: 0 0.6rem;height: 1.2rem;}
    .header nav {display: none;}
    .header h1.logo {font-size: 0;}
    .header h1.logo svg {width: auto;height: 0.4rem;}
    .header .menu {width: 0.32rem;height: 0.21rem;background: url("../images/menu.svg") 0 0/contain no-repeat;}

    footer {height: auto;}
    footer .explain {width: 6.7rem;display: flex;height: 2.85rem;margin: auto;}
    footer .explain .logo {font-size: 0;}
    footer .explain .logo svg {width: auto;height: 0.6rem;}
    footer .explain .icon {display: none;}
    footer .explain .p {padding: 0 0 0 0.7rem;}
    footer .explain .p1 {line-height: 0.48rem;padding-bottom: 0.02rem;font-size: 0.32rem;}
    footer .explain .p2 {line-height: 0.3rem;font-size: 0.24rem;letter-spacing: 0.044rem;zoom: 0.83;}
    footer .copyright {font-size: 0.24rem;line-height: 1.8;padding: 0.32rem 0 0.5rem;zoom: 0.83;}
    footer .copyright br {display: block;}
    
    .totop {background: #fff url("../images/toTop.svg") center center/0.28rem 0.29rem no-repeat;border-radius: 0.04rem;box-shadow: 0 0 0.08rem 0 rgb(0 0 0 / 16%);height: 0.48rem;width: 0.48rem;position: fixed;bottom: 0.4rem;right: 0.2rem;}

    .menu-drawer {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 997;}
    .menu-drawer .menu-warpper-cover {width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);position: absolute;left: 0;top: 0;z-index: 998;}
    .menu-drawer .menu-warpper-close {width: 0.24rem;height: 0.24rem;background: url("../images/close.png") 0 0/contain no-repeat;position: absolute;right: 0.6rem;top: 0.8rem;z-index: 1000;}
    .menu-drawer .menu-warpper {width: 86.66%;height: 100%;background-color: #173399;position: absolute;right: 0;z-index: 999;padding: 1.76rem 0.6rem 0.8rem;}
    .menu-drawer .menu-warpper ul {}
    .menu-drawer .menu-warpper ul li {padding: 0.2rem 0.1rem;}
    .menu-drawer .menu-warpper ul li a {display: flex;justify-content: space-between;align-items: center;}
    .menu-drawer .menu-warpper ul li .name {line-height: 0.48rem;font-size: 0.32rem;font-weight: bold;color: #bfd2f8;}
    .menu-drawer .menu-warpper ul li .icon-right {width: 0.12rem;height: 0.24rem;background: url("../images/arrow-right.svg") 0 0/contain no-repeat;}
}