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


.wrapper{ background: url('../img/bg.png') center top no-repeat var(--gray);}
.header{ width: 100%; max-width: 1290px; margin: auto;}
.head{ display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
.head .logo img{ width: auto; height: 120px;}
.nav{ position: relative; display: flex; justify-content: flex-start; align-items: center; height: 50px; background: white;}
.nav a{ padding: 0 1.5em; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;}
.nav a.on{ color: white; background: var(--primary);}
.nav .search{ position: absolute; right: 7px; display: flex; align-items: center; width: 203px; height: 36px;}
.nav .search form{ display: flex!important; align-items: center; width: 100%; height: 100%;}
.nav .search input{ border: none; background: none;}
.nav .search input[type=text]{ display: inline-flex; width: 167px; height: 36px; padding: 0 10px; border-radius: 4px 0 0 4px; font-size: 12px; line-height: 2; background: #eee;}
.nav .search input[type=submit]{ display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 0 4px 4px 0; background: #FFAE23; font-size: 16px; font-family: 'neko'; line-height: 1; color: white;}


.grid{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 30px; width: 100%; max-width: 1290px; padding: 30px 0; margin: auto;}
.slideshow{ position: relative; grid-column: span 12; width: 100%; height: 400px; 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 6; width: 100%; padding: 20px; background: white;}
.box .box-tit{ position: relative; display: flex; align-items: center; line-height: 1.5;}
.box .box-tit .cn{ font-size: 20px; font-weight: bold; color: var(--primary);}
.box .box-tit .strip{ width: 1px; height: 10px; margin: 0 10px; background: var(--border);}
.box .box-tit .en{ font-size: 14px; font-family: Serif; text-transform: uppercase; color: var(--border);}
.box .box-tit a.more{ position: absolute; right: 0; font-size: 14px; color: var(--primary);}
.box .box-con{ padding-top: 10px;}


.xwkd{ grid-column: span 8;}
.tzgg{ grid-column: span 4;}
.zcfg{ grid-column: span 8; padding: 0; background: none;}
.xxgk{ grid-column: span 4;}


.tzgg .box-tit .cn,
.tzgg .box-tit a.more{ color: var(--secondary);}


.zcfg .box-tit{ padding: 0 20px;}
.zcfg .box-tit a.more{ right: 20px;}
.zcfg .box-con{ display: grid; grid-template-columns: repeat(8,1fr); grid-gap: 30px;}
.zcfg dl{ grid-column: span 4; padding: 20px; background: white;}
.zcfg dl dt{ display: flex; justify-content: space-between; align-items: center; width: 100%; line-height: 30px;}
.zcfg dl dt .cn{ font-size: 16px; font-weight: bold; color: var(--primary);}
.zcfg dl dt a.more{ font-size: 14px; color: var(--primary);}
.zcfg dl dd{ padding-top: 10px;}
.zcfg dl dd a{ display: flex; justify-content: space-between; width: 100%; line-height: 40px;}
.zcfg dl dd a span{ position: relative; font-size: 15px; text-indent: 1em; color: var(--text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.zcfg dl dd a span:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; height: 4px; margin: auto; background: var(--primary);}


.xwkd .box-con{ display: grid; grid-template-columns: 50% auto; grid-gap: 20px;}
.xwkd .box-con .news-list{ padding: 10px 0;}


.slide-news{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.slide-news .swiper-wrapper{ position: relative; z-index: 0;}
.slide-news .itm{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.slide-news .itm .cover{ width: 100%; height: 100%; overflow: hidden;}
.slide-news .itm .cover img{ width: 100%; height: 100%; object-fit: cover;}
.slide-news .itm .info{ position: absolute; bottom: 0; left: 0; display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 40px; background: rgba(0,0,0,.5);}
.slide-news .itm .info span{ width: 85%; font-size: 14px; line-height: 30px; color: white; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-indent: 10px;}
.slide-news .prev,
.slide-news .next{ position: absolute; top: 0; bottom: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin: auto; cursor: pointer;}
.slide-news .prev{ left: 0; right: auto;}
.slide-news .prev i,
.slide-news .next i{ font-size: 32px; line-height: 1; color: white;}
.slide-news .dots{ position: absolute; right: 10px; bottom: 17px; left: auto; z-index: 2; display: grid; grid-auto-flow: column; justify-content: end; align-content: center; grid-gap: 6px; opacity: 1; }
.slide-news .dots span{ width: 6px; height: 6px; border-radius: 0; margin: 0!important; background: var(--border); opacity: 1;}
.slide-news .dots span.swiper-pagination-bullet-active{ background: var(--primary);}


.news-list{ display: flex; flex-flow: column nowrap; overflow: hidden;}
.news-list a{ display: flex; justify-content: space-between; width: 100%; line-height: 40px;}
.news-list a span{ position: relative; font-size: 15px; text-indent: 1em; color: var(--text); 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; margin: auto; background: var(--primary);}
.news-list a i{ flex-shrink: 0; font-size: 13px; font-style: normal; color: var(--desc);}


.notice-list{ display: flex; flex-flow: column nowrap; overflow: hidden;}
.notice-list a{ display: flex; justify-content: space-between; align-items: center;}
.notice-list a:not(:last-child){margin-bottom: 20px;}
.notice-list a b{ flex-shrink: 0; display: flex; flex-flow: column nowrap; width: 50px;}
.notice-list a b em{ display: flex; justify-content: center; align-items: center; font-size: 14px; line-height: 33px; font-style: normal; color: white; background: var(--secondary);}
.notice-list a b i{ display: flex; justify-content: center; align-items: center; border: 2px solid var(--secondary); font-size: 12px; line-height: 23px; font-style: normal; text-transform: uppercase; color: var(--secondary);}
.notice-list a span{ width: calc(100% - 60px); font-size: 15px; line-height: 25px; text-align: justify;}


.footer{ width: 100%; background: var(--primary);}
.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 i{ 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;}



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


.location{ grid-column: span 12; position: relative; padding: 10px 20px; background: white;}
.location:after{ content: ''; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: #eee;}
.location span,
.location a{ display: inline-block; font-size: 14px; line-height: 1.5;}
.location span:after{ content: ':'; padding: 0 5px;}
.location span i{ font-size: 14px; font-weight: bolder; vertical-align: middle; margin-right: 0.5em; color: #002B54}
.location a:after{ content: '>'; padding: 0 5px;}
.location a:last-child:after{ display: none;}


.column-m{ grid-column: span 9; display: grid; grid-gap: 20px; padding: 20px; background: white;}


.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-r{ grid-column: span 3;}
.column-r .box-tit .cn,
.column-r .box-tit a.more{ color: var(--secondary);}
.column-r .news-list a span:before{ background: var(--secondary);}


.article{ grid-column: span 12; display: grid; grid-gap: 20px; padding: 20px; background: white;}
.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;}