@charset "utf-8";
html,
body{ overflow-x: hidden;}

.ell { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; text-align: justify; overflow: hidden;}

.wrapper{ background: url('../img/bg.png') center bottom 200px no-repeat white; background-size: 100% auto;}
.header{ width: 100%; background: url('../img/header.png') center no-repeat #0237D8; background-size: auto 100%;}

.head{ width: 100%; max-width: 1290px; padding: 30px 0; margin: auto; display: flex; justify-content: space-between; align-items: center;}
.head .logo img{ width: auto; height: 100px;}
.head .search{ display: flex; align-items: center; width: 240px; height: 40px;}
.head .search input{ border: 1px solid #fff; background: none;}
.head .search input[type=text]{ width: 200px; height: 40px; padding: 0 20px; border-right: none; border-radius: 20px 0 0 20px; font-size: 14px; line-height: 40px; color: white;}
.head .search input[type=text]::placeholder{ color: white; opacity: 0.2;}
.head .search input[type=submit]{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-left: none; border-radius: 0 20px 20px 0; font-size: 20px; font-family: 'neko'; line-height: 40px; color: white; cursor: pointer;}

.nav{ width: 100%; max-width: 1290px; margin: auto; display: grid; grid-template-columns: repeat(8,1fr); height: 60px;}
.nav>li{ position: relative; list-style: none;}
.nav>li>a{ display: block; width: 100%; height: 60px; font-size: 18px; line-height: 60px; text-align: center; color: white;}
.nav>li:not(:last-child):after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 20px; margin: auto; background: white; opacity: 0.2;}

.nav .subnav{ display: none;position: absolute;	width: 100%; border-top: 2px solid var(--secondary); left: 0; top: 60px; text-align: center; background: rgba(0,54,214,0.7); z-index: 9; padding: 5px 0;}
.nav .subnav li{padding:0;margin: 0px; display: block;height: 45px;line-height: 45px;position: relative;}
.nav .subnav li:before{position: absolute; left: 10px; bottom: 0; z-index: 9; content: ''; width: calc(100% - 20px); height: 1px; background: white; opacity: 0.2;}
.nav .subnav li:hover{background: var(--secondary);}
.nav .subnav li:hover:before{background: var(--secondary);}
.nav .subnav li>a{ display: block; width: 100%; height: 100%; font-size: 16px; color: white; cursor: pointer;}

.grid{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 30px; align-items: start; width: 100%; max-width: 1290px; margin: auto; padding: 30px 0;}

.slideshow{ position: relative; grid-column: span 12; width: 100%; height: 450px; max-width: 1290px; margin: auto; overflow: hidden;}
.slideshow .swiper-wrapper{ position: relative; z-index: 0;}
.slideshow .itm{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.slideshow .itm .cover{ width: 100%; height: 100%; overflow: hidden;}
.slideshow .itm .cover img{ width: 100%; height: 100%; object-fit: cover;}
.slideshow .prev,
.slideshow .next{ position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; margin: auto; cursor: pointer;}
.slideshow .prev{ left: 0; right: auto;}
.slideshow .prev i,
.slideshow .next i{ font-size: 48px; line-height: 1; color: white;}

.box{ grid-column: span 4; display: grid; grid-gap: 10px; width: 100%; overflow: hidden;}
.box .box-tit{ position: relative; display: flex; align-items: center;}
.box .box-tit .ico{ width: 40px; height: 40px; }
.box .box-tit .ico img{ width: 100%; height: 100%;}
.box .box-tit .cn{ font-size: 24px; font-weight: bold; color: var(--primary);}
.box .box-tit a.more{ position: absolute; right: 0; font-size: 14px; color: var(--desc);}
.box .box-tit a.more:hover{ color: var(--primary);}
.box .box-con{ overflow: hidden;}

.xwdt{ grid-column: span 8; grid-row: span 2;}
.tzgg .box-tit .cn{ color: var(--secondary);}
.banner{ grid-column: span 12;}
.zgzs{ grid-column: span 12;}

.slide-news{ position: relative; width: 100%; overflow: hidden; margin-bottom: 15px;}
.slide-news .swiper-wrapper{ position: relative; z-index: 0;}
.slide-news .itm{ display: grid; grid-template-columns: repeat(8,1fr); grid-gap: 30px;}
.slide-news .itm .cover{ grid-column: span 3; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;}
.slide-news .itm .cover img{ position: absolute; width: 100%; height: 100%; object-fit: cover;}
.slide-news .itm .info{ grid-column: span 5; display: flex; flex-flow: column; padding: 20px; width: calc(100% + 30px); margin-left: -30px; background: url('../img/slide.png') no-repeat white; background-size: cover;}
.slide-news .itm .info span{ font-size: 18px; line-height: 30px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.slide-news .itm .info i{ display: flex; align-items: center; font-size: 12px; line-height: 30px; color: var(--primary); font-style: normal;}
.slide-news .itm .info i img{ display: inline-block; width: 20px; height: 20px;}
.slide-news .itm .info p{ font-size: 14px; color: var(--desc); -webkit-line-clamp: 3;}
.slide-news .dots{ position: absolute; width: auto; bottom: 20px; left: calc((100% - 210px) / 8 * 3 + 80px); z-index: 2; display: grid; grid-auto-flow: column; justify-content: end; align-content: center; grid-gap: 5px; opacity: 1; }
.slide-news .dots span{ width: 10px; height: 10px; border-radius: 0; margin: 0!important; border-radius: var(--rounded); background: var(--border); opacity: 1;}
.slide-news .dots span.swiper-pagination-bullet-active{ background: var(--primary);}

.news-list{ display: grid; }
.news-list a{ display: grid; grid-auto-flow: column; align-items: center; justify-content: space-between;}
.news-list a span{ position: relative; font-size: 16px; line-height: 40px; text-indent: 1em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.news-list a span:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; height: 4px; border-radius: 2px; margin: auto; background: var(--primary);}
.news-list a i{ flex-shrink: 0; font-size: 14px; line-height: 1.5; font-style: normal; color: var(--desc);}

.notice-list{ display: grid; grid-gap: 15px;}
.notice-list a{ display: grid; grid-template-columns: auto 1fr; grid-gap: 15px; align-items: center;}
.notice-list a b{ display: grid; align-content: space-around; justify-content: center; justify-items: center; width: 60px; height: 55px; padding: 5px; line-height: 1; background: var(--secondary); color: white; font-weight: normal;}
.notice-list a b em{ font-size: 16px; font-style: normal; color: white; }
.notice-list a b i{ width: 100%; height: 1px; background: white; opacity: 0.5;}
.notice-list a b:after{ content: 'View'; font-size: 12px; font-style: normal; text-transform: uppercase;}
.notice-list a span{ width: 100%; font-size: 16px; line-height: 25px; text-align: justify;}

.policy-list{ display: grid; }
.policy-list a{ display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; align-items: center;}
.policy-list a i{ width: 48px; font-size: 14px; line-height: 24px; border-radius: var(--rounded); background: #FBFCD9; text-align: center; font-style: normal; color: var(--info);}
.policy-list a i.g{ background: #D9E4FC;}
.policy-list a i.s{ background: #D9F4FC;}
.policy-list a span{ font-size: 16px; line-height: 40px;}

.banner-list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px;}
.banner-list a{ position: relative; display: block; width: 100%; height: 0; padding-bottom: calc(100% / 41 * 10);}
.banner-list a img{ position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%;}

.product-list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px 30px;}
.product-list a{ display: grid; grid-template-columns: auto 1px 1fr; grid-gap: 10px; align-items: center; padding: 20px; background: var(--gray);}
.product-list a b{ font-size: 18px; line-height: 50px; font-weight: normal;}
.product-list a i{ width: 1px; height: 30px; background: var(--desc);}
.product-list a span{ font-size: 16px; line-height: 25px;}

.footer{ position: relative; width: 100%; background: var(--primary);}
.footer::before{ content: ''; position: absolute; top: 60px; left: 0; width: 100%; height: 1px; background: white; opacity: .2;}

.flink{ display: grid; grid-template-columns: auto 1fr; width: 100%; max-width: 1290px; padding: 10px 0; margin: auto;}
.flink .caption{ position: relative; display: flex; align-items: center; padding-right: 28px;}
.flink .caption::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 16px; margin: auto; background: white; opacity: 0.2;}
.flink .caption .ico{ width: 40px; height: 40px;}
.flink .caption .ico img{ display: block; width: 100%; height: 100%;}
.flink .caption .cn{ font-size: 16px; line-height: 20px; font-weight: bold; color: white;}
.flink .box-con{ display: flex; align-items: center;}
.flink .box-con a{ font-size: 14px; line-height: 20px; color: white; margin: 0 2em;}

.foot{ display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1290px; padding: 30px 0; margin: auto;}
.foot .cpy{ font-size: 14px; line-height: 30px; color: white;}
.foot .cpy em{ display: inline-block; width: 2rem;}
.foot .qrcode{ display: flex; align-items: center; color: white;}
.foot .qrcode span{ font-size: 14px; line-height: 30px;}
.foot .qrcode img{ width: 80px; height: 80px; object-fit: cover;}

#nav-btn{ width: 10vw; height: 10vw; font-size: 6vw; text-align: center; line-height: 10vw; color: white; display: none;}

#nav-box{z-index: 999; position: fixed; width: 100%; height: 100vh; right: -105%; top: 0; display: none; overflow: hidden; pointer-events: none; transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out; }
#nav-box{ display: grid; align-content: space-between; padding: 18vw 4vw 4vw; background: var(--primary);}
#nav-box.act{ pointer-events: auto; right: 0; }
#nav-box .close{ position:absolute; top: 4vw; right: 4vw; width: 10vw; height: 10vw; font-size: 6vw; line-height: 10vw; text-align: center; color: white; z-index: 9;}

#nav-box ul{width: 100%; overflow: auto;}
#nav-box ul::-webkit-scrollbar { display:none}
#nav-box ul li{ position: relative; width: 100%; overflow: hidden;}
#nav-box ul li{ border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
#nav-box ul li>a{ position: relative; z-index: 0; display: block; padding: 2vw 4vw; font-size: 16px; line-height: 2; color: white; }
#nav-box ul li i{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; opacity: 0.7;}
#nav-box ul li i::before{ content: ''; position: absolute; top: 4vw; right: 4vw; bottom: 0; width: 1px; height: 13px; background: white; transform: translateX(-6px);}
#nav-box ul li i::after{ content: ''; position: absolute; top: 4vw; right: 4vw; bottom: 0; width: 13px; height: 1px; background: white; transform: translateY(6px);}
#nav-box ul li.on i::before{ height: 0;}

#nav-box .list{ display: none; position: relative; width: 100%; z-index: 2; left: 0; background: none; border: 0; clear: both; padding-bottom: 10px; }
#nav-box .list a{ display: block; padding: 0 4vw; font-size: 12px; color: rgba(255,255,255,.6); line-height: 40px; }

#nav-box .search-box{ display: flex; align-items: center; width: 100%; height: 40px;}
#nav-box .search-box input{ border: none; border-radius: 0; background: rgba(255, 255, 255, 0.1);}
#nav-box .search-box input[type=text]{ width: calc(100% - 40px); height: 40px; padding: 0 20px; font-size: 14px; line-height: 40px; color: white;}
#nav-box .search-box input[type=text]::placeholder{ color: white; opacity: 0.2;}
#nav-box .search-box input[type=submit]{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-left: none; font-size: 20px; font-family: 'neko'; line-height: 40px; color: white; cursor: pointer;}

#mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 888; background-color: rgba(0,0,0,0.4); display: none; }

/* sub */
.column{ grid-column: span 12; display: grid; grid-template-columns: repeat(12,1fr); align-items:start; grid-gap: 30px; width: 100%;}

.banner-sub{ position: relative; z-index: 0; width: 100%; height: 300px; margin: auto; background: url('../img/sub.png') center center no-repeat; background-size: cover;}

.location{ position: relative; padding-bottom: 30px;}
.location:after{ content: ''; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: #eee;}
.location span,
.location a{ display: inline-block; font-size: 16px; line-height: 1.5;}
.location span:after{ content: ':'; padding: 0 5px;}
.location span i{ font-size: 16px; font-weight: bolder; vertical-align: middle; margin-right: 0.5em; color: var(--primary)}
.location a:after{ content: '>'; padding: 0 5px;}
.location a:last-child:after{ display: none;}

.column-m{ grid-column: span 9; display: grid; grid-gap: 30px;}

.list-news{ display: grid; grid-gap: 20px;}
.list-news a{ display: flex; align-items: center; overflow: hidden;}

.list-news a .thumb{ flex-shrink: 0; width: 160px; height: 120px; margin-right: 20px; background: var(--gray);}
.list-news a .thumb img{ width: 100%; height: 100%; object-fit: cover;}

.list-news a .info{ display: grid; line-height: 2; overflow: hidden;}
.list-news a .info .tit{ font-size: 16px; font-weight: bold; color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.list-news a .info .date{ display: flex; align-items: center; font-size: 12px; color: var(--desc);}
.list-news a .info .date i{ margin-right: .25em;}
.list-news a .info .desc{ font-size: 13px; line-height: 2; color: var(--info); display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

.list-news em{ width: 100%; height: 1px; background: var(--border); opacity: 0.3;}

.pagination{ padding: 10px 0;}
.pagination>table{ margin: auto}
.pagination *{ font-size: 14px!important; line-height: 1.5!important; font-family: "Microsoft YaHei UI", "Microsoft YaHei UI Light", sans-serif, Arial, "Arial Narrow", "微软雅黑", "宋体"!important;}
.pagination a,
.pagination span,
.pagination input{ display: inline-block!important; border: none!important; height: auto!important; background: #f4f5f6!important; padding: .25em .75em!important; margin: 0 .5em!important}
.pagination span.this-page{ color: white; background: var(--primary)!important;}

.column-l{ grid-column: span 3; position: relative; top: -100px;}
.column-l .cate-name{ padding: 30px; font-size: 26px; color: white; background: rgba(0,54,214,0.7);}
.column-l .cate-list{ display: grid; padding: 0 30px 30px; background: var(--gray);}
.column-l .cate-list>a{ font-size: 18px; line-height: 3.5; border-bottom: 1px dotted var(--desc);}
.column-l .cate-list .sub{ position: relative; top: -1px; display: grid; background: white; padding: 10px 30px; border-left: 2px solid var(--primary);}
.column-l .cate-list .sub a{ font-size: 16px; line-height: 3;}
.column-l .box-tit .cn,
.column-l .box-tit a.more{ color: var(--secondary);}
.column-l .news-list a span:before{ background: var(--secondary);}

.article{ display: grid; grid-gap: 30px;}
.article .strip{ width: 100%; height: 1px; background: var(--border); opacity: 0.3;}
.article .article-tit{ position: relative;}
.article .article-tit h1{ font-size: 20px; line-height: 1.75; color: var(--primary)}
.article .article-info{ position: relative; font-size: 13px; line-height: 1.5;}
.article .article-con{ position: relative; font-size: 16px; line-height: 2; text-align: justify; color: var(--text);}
.article .article-con img{ display: inline-block; max-width:100% }
.article .article-arrow{ display: flex; justify-content: flex-end;}
.article .article-arrow a{ display: block; font-size: 15px; line-height: 1.5;}
.article .article-arrow b{ flex-shrink: 0; color: var(--primary); margin-right: 0.5em;}