[v-cloak] { display: none; }

html { background: #fff; }

body { font-size: 16px; color: #263D35; max-width: 100%; }

a { color: inherit; }

.wrap { width: 1200px; }

.base-title { font-size: 28px; text-align: center; }

.banner { position: relative; }

.banner #banner-swiper, .banner #banner-swiper .swiper-slide img { width: 100%; }

.banner .logo.wrap { position: absolute; top: 15px; left: 0; right: 0; z-index: 5; }

.banner .header { position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; height: 100px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); }

.banner .header .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.banner .header .li { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 36px; font-size: 18px; font-weight: bold; color: #fff; }

.banner .header .li.active { background: rgba(255, 255, 255, 0.3); }

.loadmore { display: inline-block; font-size: 16px; color: #fff; padding: 8px 16px; border-radius: 1000px; background: #0B9F58; }

.news-box { padding: 80px 0; }

.news-box .first-new { text-align: center; padding-bottom: 30px; border-bottom: 1px dashed rgba(0, 0, 0, 0.3); margin-bottom: 18px; }

.news-box .first-new .title { font-size: 28px; font-weight: bold; }

.news-box .first-new .des { font-size: 18px; margin-top: 10px; }

.news-box .news-swiper { width: 630px; height: 402px; margin-right: 40px; border-radius: 5px; overflow: hidden; }

.news-box .news-swiper .img-box { position: relative; height: 100%; }

.news-box .news-swiper .img-box img { width: 100%; height: 100%; object-fit: cover; }

.news-box .news-swiper .img-box .title { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; line-height: 110px; padding: 16px; color: #fff; background: linear-gradient(180deg, rgba(0, 35, 18, 0) 0%, #002312 100%); box-sizing: border-box; }

.news-box .right-info { flex: 1; width: 0; }

.news-box .right-info .cell { margin-bottom: 24px; }

.news-box .right-info .cell .title { font-weight: bold; }

.news-box .right-info .cell .des { opacity: .7; margin-top: 5px; }

.duty-box { width: 100%; height: 400px; background: url(../../images/city/qingyang/duty-bg.jpg) no-repeat top center/100% 100%; }

.duty-box .wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }

.duty-box .wrap .tips { position: absolute; top: 0; left: 0; color: #fff; padding: 10px 55px; background: #0B9F58; }

.duty-box .wrap .entity-icon { flex-wrap: wrap; align-content: space-between; height: 268px; }

.duty-box .wrap .icon-item { display: flex; align-items: center; justify-content: center; width: calc((100% - 24px) / 4); height: 130px; border-radius: 5px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(4px); }

.duty-box .wrap .icon-item p { font-weight: bold; color: #fff; font-size: 18px; }

.pro-box { background: linear-gradient(-180deg, #E5F7FF 0%, rgba(250, 251, 252, 0) 100%); padding: 80px 0; }

.pro-box .intro { margin-top: 20px; opacity: .7; font-size: 16px; text-align: center; }

.pro-box .pro-flex { margin-top: 32px; }

.pro-box .pro-flex .pro-li { position: relative; color: #333; }

.pro-box .pro-flex .pro-li img { width: 560px; height: 380px; }

.pro-box .pro-flex .pro-li .des { font-size: 16px; opacity: .5; margin-top: 5px; }

.pro-box .pro-flex .pro-li .cell .bold { font-weight: bold; }

.pro-box .pro-flex .pro-li .cell .green { color: #046636; }

.pro-box .pro-flex .pro-li .cell .mr { margin-right: 30px; }

.pro-box .pro-flex .pro-li .info { position: absolute; left: 20px; bottom: 30px; width: 365px; font-size: 18px; }

.pro-box .pro-flex .pro-li .loadmore { position: absolute; right: 20px; bottom: 70px; }

.donate-box .content { position: relative; white-space: nowrap; margin: 40px 0 15px; overflow: hidden; }

.donate-box .content::after, .donate-box .content::before { content: ''; position: absolute; top: 0; z-index: 5; width: 120px; height: 100%; }

.donate-box .content::after { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }

.donate-box .content::before { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }

.donate-box .content .item { display: inline-block; width: 140px; text-align: center; }

.donate-box .content .item img { width: 56px; height: 56px; object-fit: cover; border-radius: 100%; margin-bottom: 10px; }

.donate-box .content .item .money { color: #0B9F58; margin: 5px 0; font-weight: bold; }

.donate-box .content .item .money span { font-size: 22px; }

.donate-box .content .item .time { font-size: 12px; opacity: .5; }

.zs-box { padding: 80px 0; }

.zs-box .tab { margin: 20px 0 30px; text-align: center; font-size: 18px; }

.zs-box .tab .dl { position: relative; opacity: .5; }

.zs-box .tab .dl.on { opacity: 1; }

.zs-box .tab .dl:first-child { margin-right: 85px; }

.zs-box .tab .dl:first-child::after { content: '|'; position: absolute; right: -45px; top: 0; opacity: .3; }

.zs-box .zs-list { position: relative; display: none; font-size: 0; white-space: nowrap; overflow: hidden; margin-bottom: 15px; }

.zs-box .zs-list::after, .zs-box .zs-list::before { content: ''; position: absolute; top: 0; z-index: 5; width: 120px; height: 100%; }

.zs-box .zs-list::after { left: 0; background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }

.zs-box .zs-list::before { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }

.zs-box .zs-list.on { display: block; }

.zs-box .zs-list a { display: inline-block; width: calc((1200px - 132px) / 5); height: 152px; margin-right: 33px; }

.zs-box .zs-list a img { width: 100%; height: 100%; object-fit: cover; }

.zs-box .zs-list a .name { margin: 7px 0 5px; font-size: 16px; }

.zs-box .zs-list a .ddno { font-size: 12px; opacity: .7; }

.map-box { height: 717px; background: url(../../images/city/qingyang/map-bg.png) no-repeat top center/auto 100%; }

.map-box .wrap { position: relative; }

.map-box .info-box { width: 510px; padding-top: 180px; }

.map-box .info-box .info { padding-left: 25px; }

.map-box .info-box .title { font-size: 28px; }

.map-box .info-box h4 { font-size: 20px; margin: 48px 0; }

.map-box .info-box .address { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; }

.map-box .info-box .address a { display: block; width: calc((100% - 30px) / 4); border-radius: 5px; background: #FFFFFF; border: 1px solid #D4D2D2; font-size: 18px; line-height: 43px; text-align: center; margin-bottom: 10px; }

.map-box .map-list { position: absolute; top: 145px; right: 115px; width: 460px; height: 470px; }

.map-box .map-list a { display: block; position: absolute; z-index: 1; }

.map-box .map-list a.code-621002 { width: 82px; height: 105px; bottom: 45px; right: 160px; }

.map-box .map-list a.code-621021 { width: 116px; height: 95px; right: 142px; bottom: 142px; z-index: 5; }

.map-box .map-list a.code-621022 { width: 255px; height: 265px; top: 0; left: 0; }

.map-box .map-list a.code-621023 { width: 175px; height: 159px; right: 33px; top: 72px; }

.map-box .map-list a.code-621024 { width: 147px; height: 65px; right: 0; bottom: 150px; }

.map-box .map-list a.code-621025 { width: 102px; height: 58px; bottom: 0; right: 0; }

.map-box .map-list a.code-621026 { width: 109px; height: 36px; bottom: 56px; right: 72px; z-index: 2; }

.map-box .map-list a.code-621027 { width: 100px; height: 124px; left: 100px; bottom: 55px; }

.footer { background: #496057; }