/**reset**/
:root { --primary: #003c7e; --top-bg: #01a3c9; --highlight: #5fbb5d; --gray-bg: #f5f5f5; --border-color: #e5e5e5; --text-color: #5a5a5a; --light-text: #a1a1a1; --white: #fff; --font-family: "Microsoft Yahei", "Helvetica Neue", Arial,sans-serif; overflow-y: auto;overflow-x: hidden;}
:root body {position: relative;}/*解决因滚动条导致的页面宽度变化*/
* { margin: 0; padding: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
*::-moz-selection {background: #202C4C;color: var(--white);}
html {overflow-y: scroll; font-size:62.5%;}/*这是为了兼容ie8，不支持:root, vw;浏览器默认16px,1rem = 1rem*/
body {min-width:100vw; background: var(--gray-bg);font-family: var(--font-family);color: var(--text-color); font-size:1.4rem;line-height:1.5;}
a { color: var(--text-color); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary); }
a:focus{outline: none;}
ul,ol{margin:0;padding:0;list-style: none outside none;}
em,i {font-style:normal;}
img{max-width: 100%;max-height:100%;border: 0 none;}

/**form**/
.input{border-radius: 0.6rem;border:1px solid #E4E7ED; }
.input:focus, .textarea:focus{border:1px solid #777883 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.06);background:var(--white);}
.input-prefix,.input-suffix{pointer-events:inherit !important;}
.layui-form-label{width:110px;}
.layui-form-label em{color:#f00}
/**layout*/
.container{position: relative;padding:0 1.5rem; width: 120rem;margin: 0 auto;}
.containe-full{width:100%; }
.layui-side{position: relative;}
.layui-body{left:0;padding-bottom:6rem;}
.layui-side.layui-padding-3{margin-top:-16px;} 
.layui-side + .layui-body{padding-left:3rem;}
.fr{float: right !important;}
.fl {float: left !important;}
.fn{float: none !important;}
.center{text-align: center;}
.layout-flex{display: -ms-flexbox;display: -webkit-box;display: flex;}
.layui-panel{box-shadow: none;color:inherit;border:0 none;}
.layui-panel-header .desc{margin:1rem 0;}
.layui-layer-title{text-align: left;}
.ml15{margin-left:1.5rem}
.mt5{margin-top:0.5rem}
.mt15{margin-top:1.5rem}
.mt30{margin-top:3rem}
.mb30{margin-bottom:3rem}
/**text**/
h1,.h1 {font-size: 3.2rem;font-weight: 700;}
h2,.h2 {font-size: 2.4rem;font-weight: 600;line-height: 1.6;}
h3,.h3 {font-size: 2rem;font-weight: 600;}
h4,.h4 {font-size: 1.8rem;font-weight: 500;}
.active,.active a,.active:hover ,.active a:hover{color:var(--primary);}
.desc{color:#718096;overflow: hidden;}
.line-clamp-3 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;  /* 控制显示的行数 */ overflow: hidden; min-height: 7.2rem; line-height: 1.5; }
/*swiper*/
.swiper-container{position:relative;width: 100%; height: 100%; margin:0 auto;padding:0;z-index:0;--swiper-theme-color: var(--white);--swiper-preloader-color: #777883;overflow: hidden;}
.swiper-slider{padding:0;height: 48rem;background-position: center bottom;}
.swiper-container .swiper-slide{background-position: center center;background-repeat: no-repeat;background-size: cover;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 1rem;}
.swiper-pagination-bullet{width: 3.6rem;height:0.8rem;border-radius: 1.6rem;border:1px solid var(--white);background-color: transparent;}
.swiper-pagination-bullet:only-child{display:none !important}
.reverse .swiper-pagination-bullet{width:3.6rem;height:0.8rem;margin:0 ;border:0 none;background-color: rgba(32,44,76,.5);}
.swiper-container-horizontal>.reverse.swiper-pagination-bullets {bottom:0;}
.swiper-container-horizontal>.reverse.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 0.5rem;}
.swiper-pagination-bullet-active{background-color:var(--highlight);}
.reverse .swiper-pagination-bullet-active{background-color: var(--primary);}
.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{width:6.4rem;height:6.4rem; opacity: 0;-webkit-transition:0.3s;-moz-transition:0.3s;transition:0.3s;}
.swiper-container:hover .swiper-button-next,.swiper-container:hover .swiper-button-prev{opacity:1;}
.swiper-container .swiper-button-next{right:3rem;}
.swiper-container .swiper-button-prev{left:3rem;}
.swiper-container:hover .swiper-button-next{right:1.5rem;}
.swiper-container:hover .swiper-button-prev{left:1.5rem;}
.swiper-button-disabled {display: none !important;}
.swiper-container .swiper-button-next:after, .swiper-container .swiper-button-prev:after{color:#777883;font-size: 3.6rem;}
.swiper-slider .slide-inner {top:30%; }
.swiper-slider .slide-inner .title{font-size:7.2rem;font-weight: 700;color: var(--primary);}
.swiper-slider .slide-inner .title_sub{font-size:3.6rem;color: var(--primary);;}
.swiper-slider .slide-inner .btn-buy{margin-top:4rem}
.swiper-slider .slide-inner.dark .title,.swiper-slider .slide-inner.dark .title_sub{color:var(--highlight);}

/**button**/
.layui-btn{padding:0 1.5rem;text-align: center;font-weight: 500;border: 0 none;font-size: 1.6rem; background: var(--white);color:#202C4C;} */
.layui-btn:hover{color:var(--primary);}
.layui-btn-lg{padding:0 3rem; height:4.8rem;font-size: 1.8rem; border-radius:8px;line-height:4.8rem;}
.layui-btn-sm{width:auto;vertical-align: 0.1em;font-size: 1.4rem;}
.layui-btn-block{width: 100%;}
.layui-btn-primary{background-color: var(--primary);color: var(--white) !important;}
.layui-btn-primary:hover{background-color: var(--highlight);background: linear-gradient(135deg, var(--primary), var(--highlight));color:var(--white) !important;}
.layui-btn-primary a,.layui-btn-primary:hover i{color:var(--highlight) !important;}
.layui-btn-primary.btn-disabled{color:#777883 !important;}
.layui-btn-primary .layui-icon{color: var(--white);}
.layui-btn-default{border:1px solid #4A4E5D;}
.layui-btn-default:hover{color: var(--primary);border-color:var(--primary);}
.layui-btn-default.btn-disabled{background-color: #F0F2F5;color: #B5B6BB !important;}
.btn-shadow{border-radius: 0.4rem;border:1px solid var(--text-color);box-shadow: 0.4rem 0.4rem 0 var(--text-color);}
.btn-shadow:hover{color: var(--primary);border-color:var(--primary);}
.btn-buy{background-color: var(--highlight);color:var(--highlight);}
.btn-buy:hover{background-color: #03a193;background: linear-gradient(to bottom right, var(--primary), var(--highlight));color:var(--highlight);}
/**nav**/
.layui-nav{background: transparent;}
.layui-nav.layui-nav-tree{width: 100%;}
.layui-nav .layui-nav-item a{color:#2d3748;}
.layui-nav .layui-nav-item a:hover{color:var(--primary) ;}
.layui-nav-child{border:0 none;top:6rem;}
.layui-nav-child dd{margin:0;}
.layui-nav .layui-nav-child a{display: block; margin:0.5rem 0;}
.layui-nav .layui-nav-child a:hover{background: inherit;}
.layui-nav .layui-this:after,.layui-nav-bar{display: none; height:0.4rem; background-color: var(--primary);}
.layui-nav-side .layui-nav{padding:0}
.layui-nav-side .layui-nav .layui-nav-item{display: block; padding:1rem 0;margin:0 0 1.5rem 0; height:auto;line-height: 1.6;}
.layui-menu-body-title{margin:0;}
.layui-menu-item-group>.layui-menu-body-title, .layui-menu-item-parent>.layui-menu-body-title{padding-right:0;}

/**form**/
.layui-input{border-color:#4A4E5D;border-radius: 0.4rem;}
input::-moz-placeholder, textarea::-moz-placeholder{color: #989AA1;opacity: 1;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #989AA1;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #989AA1;}
.layui-input-suffix{line-height:1;}
/*bg color*/
.layui-bg-black{background-color:var(--text-color)  !important;}

/**header**/
.header { background: var(--white); padding: 20px 0; }
.header .layui-layout-right{right:5rem;}
.header .logo { float: left; padding-right: 20px; margin-right: 20px; border-right: 1px solid #ddd; }
.header .logo img { height: 60px; display: block; }
.header .slogan { float: left; margin-top: 4px; line-height: 1.5; }
.header .slogan h2 { font-size: 20px; color: var(--primary); font-weight: 700; }
.header .slogan .sub { font-size: 14px; color: var(--light-text);margin-top: 2px; }
.header .slogan .sub span { display: inline-block; margin-right: 18px; color: var(--light-text); }
.header .slogan .sub .highlight { color: var(--primary); font-weight: 600; }
.header .form-search .layui-btn { padding: 0.5rem; margin: 4px auto auto -1.5rem; height: 3rem; line-height: 2rem; }
.header .form-search .layui-form-item .layui-input-inline { width: 24rem; margin-right: 0; }
.header .form-search .layui-input{border-radius: 20px;}
 
.nav-wrap { background: var(--top-bg); height: 52px; line-height: 52px; }
.nav-wrap .layui-nav { background: transparent; padding: 0; border-radius: 0; }
.nav-wrap .layui-nav .layui-nav-item { line-height: 52px; }
.nav-wrap .layui-nav .layui-nav-item a { color: var(--white); font-size: 15px; padding: 0 38px; }
.nav-wrap .layui-nav .layui-nav-item a:hover, .nav-wrap .layui-nav .layui-this a { background: var(--primary); color: var(--white); }
.nav-wrap .layui-nav .layui-nav-item a::after,.nav-wrap .layui-nav .layui-nav-item  i { display: none; }
.nav-wrap .layui-nav .layui-nav-child { background: var(--primary); border: none; z-index:9999;}
.nav-wrap .layui-nav .layui-nav-child a { border: none; line-height: 40px; padding: 0 20px; color: var(--white); }
.nav-wrap .layui-nav .layui-nav-child a:hover { background: var(--top-bg); }


/**product**/
.layout-product .item .desc{margin:1rem 0;}
.page-product .layout-product {padding-top:4.5rem;}
.page-product .layout-product .item{margin-bottom:3rem;text-align: center;}
.page-product .layout-product .item .product-pic{} 
.page-product .layout-product .item .title{padding:1.5rem;}
.page-product .layout-product .item .btn-group{margin:0 auto;width: auto;}
.page-product .layout-product .item .layui-btn{display: inline-block; margin:0 1rem;}
.page-product .layui-panel.layout-product .layui-layout-right{top:3rem;right:3.2rem;}
.page-product .layui-panel.layout-product:nth-child(even){background-color: var(--gray-bg);}
.page-product .layui-panel.layout-product:nth-child(even) .item .product-pic{padding:3rem;}
.page-product-detail .layout-related .layui-panel-header{margin-bottom:2rem;text-align: center;}
.page-product-detail .layout-related .title{margin-top:1rem;text-align: center;}
.page-product-detail .layout-related .layui-panel-body{margin-bottom:5rem;overflow: hidden;}
/**detail**/
.layui-breadcrumb{padding:1.5rem;}
.page-detail .layout-product-body .layout-product-body-text{padding-left:3rem}
.page-detail .layout-product-body .layui-panel-body{padding-bottom: 6rem !important; }
.page-detail .layout-product-body .layui-panel-body p{padding:0.5rem 0;line-height:2;font-size: 1.6rem;}
.page-detail .mod-qrcode{margin-top: 3rem ; text-align: center;}
.page-detail .mod-qrcode canvas{width: 18rem;border:0.6rem solid var(--white);}
.page-detail .mod-share{margin-top:0.5rem;}
.page-detail .mod-share a{margin-left:1rem;}
.page-detail .mod-share a i{font-size: 2rem;}
.showBigImg { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 10001;}
.showBigImg .closeBigImg {position: absolute; right: 3rem; top: 3rem;text-align: center;z-index: 10002;cursor: pointer;}
.showBigImg .closeBigImg .layui-icon{color: var(--white);font-size:2.4rem;}
.showBigImg .showBigImgWrap { position: relative;width: 100%; height: 100%; overflow: hidden;}
.showBigImg .showBigImgWrap .swiper-slide img {position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); vertical-align: middle;width:auto;}

.page-product-detail .layui-panel-body .layui-col-md6.layui-padding-3{padding-top:0 !important;}

.card-category .title{font-weight: 700;}
.card-category.this h4.title a{color:var(--primary)}
.card-category .cate-sub-items .title{font-weight: 400;}
.card-category .cate-sub-items .item{padding:0.5rem 0;}

/**about**/
.page-about .swiper-slider {height: 36rem;}
.page-about .swiper-slider .slide-inner{left:-10%;text-align: right;}
.page-about .swiper-slider .slide-inner .title{color:var(--white)}
.page-about .swiper-slider .slide-inner .title_sub{font-size:1.2rem;letter-spacing: 2rem; text-transform: uppercase;color:var(--white)}
.page-about .layui-body{padding-bottom: 0;} 
.page-about .layout-about .layui-panel-body{font-size: 1.6rem;}
.page-about .layout-about .layui-panel-body p{line-height:2;padding-bottom: 1.5rem;}

.stats { display: flex; gap: 0;  border-radius: 8px;overflow: hidden; margin:3rem auto; background-color: var(--white);}
.stat-item {flex: 1; text-align: center; padding: 18px 10px; border-right: 1px solid var(--border-color);}
.stat-item:last-child { border-right: none; }
.stat-item .item-icon{margin-bottom:1.5rem;font-size:3.6rem;color:var(--top-bg);}
.stat-item .num {font-size: 28px;font-weight: bold; color: var(--primary);}
.stat-item .label {font-size: 12px; color: var(--light-text); margin-top: 4px;}


.about-feature {margin-top:3rem;margin-bottom:3rem;}
.about-feature h4 { color: var(--green); font-size: 18px; margin-bottom: 4px; }
.about-items { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.feature-item {position: relative; min-height: 24rem; background: var(--white);border-radius: 8px; padding: 24px; transition: box-shadow .3s;overflow: hidden;}
.feature-item:hover { box-shadow: 0 4px 18px rgba(8,87,176,.1); }
.feature-item .item-icon {position: absolute;bottom:-2rem;right:-4rem; font-size: 9.6rem; color: var(--gray-bg);}
.feature-item .item-title { font-size: 18px;  color: var(--primary);  font-weight: bold;  margin-bottom: 4px; }
.feature-item .item-en { font-size: 11px; color: #ccc; text-transform: uppercase; margin-bottom: 8px; }
.feature-item p { font-size: 13px; color: var(--text-light); line-height: 1.75; }
/**news**/
.layout-news .item .text{ margin-top:1.5rem;}
.layout-news .item .desc{margin:1rem 0;}
.page-news .swiper-slider{height:50rem;}
.page-news .swiper-slider .swiper-slide{background-position: center top;}
.page-news-detail .layout-related .item{padding:1rem;margin-bottom: 0.5rem;background-color: var(--border-color); }
.page-news-detail .layout-related .item:nth-child(odd){background-color: var(--white);}
/**tags**/
.layout-tags{padding:3rem !important}
.layout-tags a {display: inline-block;margin:1rem 1rem 0 0;}
.mod-tags a{margin:0 0.5rem;}

/**contact**/
.page-contact .map{width:100%;height:36rem;}
.page-contact .layout-contact{padding:6rem 0 0; text-align: center;overflow: hidden;}
.page-contact .layout-contact .layui-panel-body{margin:6rem 0;}
.page-contact .layout-contact .layui-panel-body .item {padding:0 6rem;margin-bottom:6rem;}
.page-contact .layout-contact .layui-panel-body .layui-icon{display: block;margin:0 auto 1rem; width: 6rem;height:6rem;line-height: 6rem; border-radius: 50%; font-size:3rem;background-color: var(--top-bg);color: var(--white);}
.page-contact .layout-contact .layui-panel-body .label{display: block; margin-bottom:0.5rem;font-size: 1.6rem;font-weight: 400;}
.page-contact .layout-contact .layui-panel-body .text{font-size: 2rem;font-weight: 700;}

/**feedback**/
.page-feedback {padding:60px;}
.page-feedback .layui-panel-header{padding:60px;text-align: right;/* height:600px; background:url(../images/join_apply_bg.jpg) no-repeat;background-size: cover; */}
.page-feedback .layui-panel-header .title{font-size: 48px;line-height: 1.2;}
.page-feedback .layui-panel-header .desc{font-size: 18px;}
.page-feedback .layui-panel-body{padding:30px;background-color: var(--white);}
.page-feedback .layui-panel-body .layui-form-label{float:none;display: block;padding-left:0; width:100%;text-align: left;}
.page-feedback .layui-panel-body .layui-input-block{margin-left:0}
.page-feedback .layui-panel-body .layui-form-item{margin-bottom: 0;}
.page-feedback .layui-panel-body .layui-input, .page-feedback .layui-panel-body  .layui-textarea { border: 1px solid var(--text-color); border-radius: 3px; }
.page-feedback .layui-panel-body .btn-feedback{margin-top:15px;}


/**layui-laypage**/
#laypage-pn-hide{text-align: center;}
.layui-laypage,.pagination{margin:3.6rem auto;}
.pagination>li {display: inline-block; }
.pagination>li>a, .pagination>li>span{display:block;margin:0 0.5rem;padding:0 1.5rem;border-radius: 0.5rem;border:1px solid var(--text-color);line-height: 3.6rem;}
.pagination>li>a:hover,.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{background-color: var(--top-bg);color: var(--white);border:0 none;}

/**footer**/
.footer-top{height:72px;line-height:72px; background-color: var(--top-bg);color: var(--white);}
.footer-top .btn-feedback{background-color: transparent;border-color: var(--white);color: var(--white);}
.footer-top .btn-feedback i{margin-right:5px;font-size:1.6rem;}
.footer {background:#383c47 url(../images/footer_bg.jpg) no-repeat;background-size: cover; color: var(--white); padding: 40px 0 20px; }
.footer a,.footer .desc { color: rgba(255,255,255,0.7); }
.footer a:hover { color: var(--white); }
.footer .footer-info { font-size: 13px; line-height: 2;padding-right:3rem; }
.footer .footer-info .tel { font-size: 22px; font-weight: 700; color: var(--white); }
.footer .footer-info .contact-item { padding-left: 30px; background-repeat: no-repeat; background-position: left center; background-size: 18px; margin-bottom: 8px; }
.footer .footer-info .contact-item i{margin-right:5px;}
.footer .footer-qr { text-align: center; }
.footer .footer-qr .qr-placeholder { width: 120px; height: 120px;padding:4px; background: var(--white); margin: 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.footer .footer-qr p{margin-top:6px;text;letter-spacing: 4px;}
.footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; margin-top: 20px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); }

/**sideBar**/
.side-bar {position: fixed;z-index:9999;bottom: 40%;right: 1.5rem;padding:0; }
.side-bar .item {position: relative; margin:0 0 1px;font-size:2.4rem;text-align: center;cursor: pointer;}
.side-bar .item a {display:block;height:100%;width:100%; color: var(--white);}
.side-bar .item .title{line-height:1; font-size: 1.2rem;}
.side-bar .icon{font-size: 3rem;color:  rgba(0, 0, 0, 0.5);}