.home_header { width: 100%; height: 720px; position: relative; }
.home_header .header_bar { width: 1200px; margin: 0 auto; position: relative; z-index: 900; }
.home_header .header_bar .logo { float: left; width: 299px; height: 64px; margin-top: 30px; margin-left: 30px; }
.home_header .header_bar .logoV2 { float: left; width: 278px; height: 64px; margin-top: 30px; margin-left: 30px; }
.home_header .header_bar .logoV3 { float: left; width: 299px; height: 64px; margin-top: 30px; margin-left: 30px; }

/* 头部菜单 */
.home_header .header_bar .menus { float: right; margin-top: 70px; margin-left: 30px; position: relative; }
.home_header .header_bar .menus li { display: inline-flex; margin-left: 20px; }
.home_header .header_bar .menus li > a { display: inline-flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 25px; line-height: 18px; font-size: 18px; color: #000; }
.home_header .header_bar .menus li > a::after { content: ''; display: inline-flex; width: 0%; height: 2px; background: #0e5ea100; transition: all .3s; -webkit-transition: all .3s; }
.home_header .header_bar .menus li > a:hover,
.home_header .header_bar .menus li > a.se,
.home_header .header_bar .menus li > a.se:hover { color: #0e5ea1; }
.home_header .header_bar .menus li > a.se::after { width: 100%; background: #0e5ea1ff; }

/* 子菜单样式 */
.home_header .header_bar .menus .submenu { position: absolute; z-index: 700; left: 0; top: 46px; background: rgba(255, 255, 255, .5); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05); padding: 30px; display: none; }
.home_header .header_bar .menus .submenu img { width: 220px; height: auto; float: left; margin: 0 20px 0 0; }
.home_header .header_bar .menus .submenu span { float: left; width: 250px; }
.home_header .header_bar .menus .submenu span a { display: inline-block; box-sizing: border-box; padding: 10px; width: 120px; height: 40px; line-height: 40px; color: #000; font-size: 16px; line-height: 20px; }
.home_header .header_bar .menus .submenu span a::before { content: ''; display: inline-block; height: 16px; width: 16px; background: url(../img/svg/chevron_right.svg) center center no-repeat; vertical-align: middle; margin-top: -2px; margin-right: 4px; }
.home_header .header_bar .menus .submenu span a:hover { color: #fff; background: #0e5ea1; }
.home_header .header_bar .menus .submenu span a:hover::before { background-image: url(../img/svg/chevron_right_white.svg); }


/* 头部搜索框 */
/*.home_header .header_bar .search { position: absolute; right: 0; top: 20px; }
.home_header .header_bar .search > input { border-radius: 28px; box-sizing: border-box; padding: 10px 44px 10px 20px; border: none; width: 220px; height: 36px; background-color: #fff; background-image: url(../img/svg/search.svg); background-position: right 10px center; background-repeat: no-repeat; background-size: 24px; opacity: .5; }
.home_header .header_bar .search > input:focus { opacity: .9; }*/
.home_header .header_bar .search { position: absolute; right: 0; top: 20px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; }
.home_header .header_bar .search > input { border-radius: 18px 0 0 18px; box-sizing: border-box; padding: 10px 10px 10px 38px; border: none; width: 200px; height: 36px; background-color: #fff; background-image: url(../img/svg/search.svg); background-position: left 12px center; background-repeat: no-repeat; background-size: 20px; opacity: .5; }
.home_header .header_bar .search > input:focus { opacity: .9; }
.home_header .header_bar .search > a { display: inline-flex; justify-content: center; align-items: center; width: 60px; height: 36px; line-height: 36px; text-decoration: none; color: #fff; background: #0e5ea1; border-radius: 0 18px 18px 0; opacity: .5; }
.home_header .header_bar .search > a:hover { opacity: .9; }
/* 头部滑动背景 */
.home_header .swiper-container { position: absolute; left: 50%; top: 0; z-index: 800; margin-left: -50%; width: 100%; height: 720px; }
.home_header .swiper-container .swiper-slide { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.home_header .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet { height: 8px; width: 8px; border-radius: 4px; background: #fff; }
.home_header .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 32px; border-radius: 4px; }

/* 友情链接 */
.fedLnks { width: 1200px; margin: 0 auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 20px; }
.fedLnks > dl { width: 100%; border: solid 1px #ddd; border-radius: 7px; position: relative; font-size: 16px; }
.fedLnks > dl > dt { color: #888; height: 48px; line-height: 48px; padding: 0 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; cursor: pointer; border-radius: 7px; }
.fedLnks > dl > dt::after { content: ''; height: 24px; width: 24px; display: inline-flex; background: url(../img/svg/chevron_down.svg) center center no-repeat; }
.fedLnks > dl > dd { display: none; position: absolute; left: -1px; right: -1px; bottom: 48px; border: solid 1px #ddd; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .15); height: 260px; overflow: hidden; overflow-y: auto; border-radius: 7px; }
.fedLnks > dl > dd::-webkit-scrollbar { border-radius: 3px; width: 6px; background: rgba(0, 0, 0, .05); }
.fedLnks > dl > dd::-webkit-scrollbar-thumb { border-radius: 3px; width: 6px; background: rgba(0, 0, 0, .3); }
.fedLnks > dl > dd::-webkit-scrollbar-track { border-radius: 3px; width: 6px; background: rgba(0, 0, 0, .05); margin-top: 3px; margin-bottom: 3px; }
.fedLnks > dl.se { border-color: #0e5ea1; }
.fedLnks > dl.se dt { background: #fff; color: #0e5ea1; }
.fedLnks > dl.se dd { display: block; z-index: 99999; }
.fedLnks > dl > dd > a { display: block; height: 40px; line-height: 40px; font-size: 16px; padding: 0 20px; border-bottom: solid 1px #eaf5ff; }
.fedLnks > dl > dd > a:last-child { border: none 0; }
.fedLnks > dl > dd > a:hover { color: #0e5ea1; background: #eaf5ff; }

.webslide { width: 102px; z-index: 8888; position: fixed; right: 30px; top: 120px; }
.webslide > a { position: relative; opacity: .8; cursor: pointer; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: 4px; background: #fff; border-radius: 10px; box-shadow: 0 0 12px rgba(0,0,0,.1); margin-bottom: 10px; padding: 10px; text-decoration: none; }
.webslide > a::before { content: ''; display: inline-flex; width: 36px; height: 36px; background: url(/web/img/svg/w10_wechat_color.svg) 0 0 no-repeat; background-size: contain; }
.webslide > a.app_wswgzh::before { background-image: url(/web/img/svg/w10_wechat_color.svg); }
.webslide > a.app_fwdh::before { background-image: url(/web/img/svg/w10_technical_support_color.svg); }
.webslide > a.app_yjjy::before { background-image: url(/web/img/svg/w10_pen_color.svg); }
.webslide > a.app_zxbx::before { background-image: url(/web/img/svg/w10_maintenance_color.svg); }
.webslide > a.app_wzjb::before { background-image: url(/web/img/svg/w10_private_color.svg); }
.webslide > a > span { font-size: 12px; line-height: 16px; font-weight: bold; color: #666; text-decoration: none; }
.webslide > a > p { display: none; position: absolute; left: -100px; top: 0; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1); }
.webslide > a:hover { opacity: 1; box-shadow: 0 0 12px rgba(0,0,0,.3); }
.webslide > a:hover span { color: #0e5ea1; }
.webslide > a.app_wswgzh > p { width: 127px; height: 127px; padding: 10px; left: -167px; }
.webslide > a.app_wswgzh:hover p { display: flex; }
.webslide > a.app_fwdh > p { width: 127px; height: 127px; padding: 10px; left: -167px; font-size: 26px; font-weight: bold; color: #0e5ea1; text-align: center; justify-content: center; align-items: center; }
.webslide > a.app_fwdh:hover p { display: flex; }

/* 首页主体 */
.home_body { background: url(../img/home_body_bg.jpg) center top no-repeat; padding: 40px 0 0 0; }
.home_body .news_body { width: 1200px; margin: 0 auto 40px auto; }
.home_body .news_body .news_left { float: left; width: 680px; }
.home_body .news_body .news_right { float: right; width: 480px; }
.news_sec > dt { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; font-size: 16px; }
.news_sec > dt > b { display: inline-flex; font-size: 26px; line-height: 26px; color: #0e5ea1; font-weight: bold; }
.news_sec > dt > span { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.news_sec > dt > span > a { display: inline-flex; flex-flow: column nowrap; align-items: center; gap: 10px; color: #888; margin-left: 20px; font-size: 16px; font-weight: bold; line-height: 16px; border-bottom: solid 2px #0e5ea100; }
.news_sec > dt > span > a::after { content: ''; display: inline-flex; width: 0%; height: 2px; background: #0e5ea100; transition: all .3s; -webkit-transition: all .3s; }
.news_sec > dt > span > a:hover { color: #0e5ea1; }
.news_sec > dt > span > a.se { color: #0e5ea1; }
.news_sec > dt > span > a.se::after { width: 100%; background: #0e5ea1ff; }
.news_sec > dt > p > a:hover { color: #0e5ea1; text-decoration: underline; }
.news_sec > dd > ul > li { font-size: 16px; color: #000; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: dotted 1px #ddd; }
.news_sec > dd > ul > li > em { flex-shrink: 0; color: #666; font-size: 14px; margin-left: 20px; }
.news_sec > dd > ul > li > a { color: #000; }
.news_sec > dd > ul > li > a:hover { color: #0e5ea1; text-decoration: underline; }
.news_sec > dd > ul > li.fst { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding: 0; gap: 20px; margin-bottom: 10px; border-bottom: none 0; }
.news_sec > dd > ul > li.fst > a.pic { flex-shrink: 0; display: inline-flex; margin-top: 4px; width: 240px; height: 160px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 6px; }
.news_sec > dd > ul > li.fst > div.con { width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.news_sec > dd > ul > li.fst > div.con > h2 { font-size: 18px; font-weight: bold; line-height: 26px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news_sec > dd > ul > li.fst > div.con > h2 a { color: #000; text-decoration: none; }
.news_sec > dd > ul > li.fst > div.con > h2 a:hover { color: #0e5ea1; text-decoration: underline; }
.news_sec > dd > ul > li.fst > div.con > p.desc { color: #666; font-size: 14px; line-height: 24px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.news_sec > dd > ul > li.fst > div.con > p.time { width: 100%; text-align: right; color: #666; font-size: 14px; }

.corpnews ul > li { font-size: 16px; color: #000; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: dotted 1px #ddd; }
.corpnews ul > li > em { flex-shrink: 0; color: #666; font-size: 14px; margin-left: 20px; }
.corpnews ul > li.fst { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; padding: 0; gap: 20px; margin-bottom: 10px; border-bottom: none 0; }
.corpnews ul > li.fst > a.pic { flex-shrink: 0; display: inline-flex; margin-top: 4px; width: 300px; height: 200px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 6px; }
.corpnews ul > li.fst > div.con { width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; gap: 10px; }
.corpnews ul > li.fst > div.con > h2 { font-size: 18px; font-weight: bold; line-height: 26px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.corpnews ul > li.fst > div.con > h2 a { color: #000; text-decoration: none; }
.corpnews ul > li.fst > div.con > h2 a:hover { color: #0e5ea1; text-decoration: underline; }
.corpnews ul > li.fst > div.con > p.desc { color: #666; font-size: 14px; line-height: 24px; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.corpnews ul > li.fst > div.con > p.time { width: 100%; text-align: right; color: #666; font-size: 14px; }
.corpnews .swiper-container { padding: 0 0 19px 0; }
.corpnews .swiper-container .swiper-pagination-bullet { height: 10px; width: 10px; border-radius: 5px; }
.corpnews .swiper-container .swiper-pagination-bullet-active { background: linear-gradient(45deg, #0e5ea1 0%, #2ead77 100%); width: 30px; }
/* 通知公告（紧急停水） */
.news_sec > dd > .fixed { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: dotted 1px #ddd; padding: 0 0 12px 0; }
.news_sec > dd > .fixed > h2 { box-sizing: border-box; border: solid 1px #f4e5e5; height: 52px; width: 52px; color: #ca7d7d; line-height: 14px; font-size: 14px; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; }
.news_sec > dd > .fixed > .swiper-container { width: 100%; height: 52px; }
.news_sec > dd > .fixed > .swiper-container .swiper-slide { font-size: 14px; position: relative; }
.news_sec > dd > .fixed > .swiper-container .swiper-slide em { line-height: 14px; font-size: 14px; color: #888; }
.news_sec > dd > .fixed > .swiper-container .swiper-slide a { font-size: 16px; display: block; word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; }
.news_sec > dd > .fixed > .swiper-container .swiper-slide a:hover { color: #0e5ea1; text-decoration: underline; }
.news_sec > dd > .fixed > .swiper-container .swiper-slide a > span { position: relative; }
.news_sec > dd > .fixed > .swiper-container .swiper-slide a > span > i { position: absolute; height: 14px; line-height: 14px; right: -36px; top: 0px; text-decoration: none; background: #dd0000; color: #fff; font-size: 9px; padding: 0 4px; border-radius: 4px; }

/* 通知公告（常规） */
.news_sec > dd > .notify { font-size: 16px; }
.news_sec > dd > .notify > li { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: dotted 1px #ddd; padding: 11px 0; }
.news_sec > dd > .notify > li > h2 { box-sizing: border-box; border: solid 1px #f4e5e5; height: 52px; width: 52px; line-height: 14px; font-size: 14px; color: #ca7d7d; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; }
.news_sec > dd > .notify > li > h2.type_01 { color: #60b53c; border-color: #e1efdc; }
.news_sec > dd > .notify > li > h2.type_02 { color: #0e5ea1; border-color: #dbe7f1; }
.news_sec > dd > .notify > li > h2.type_03 { color: #8974bc; border-color: #f1eff6; }
.news_sec > dd > .notify > li > h2.type_04 { color: #74bcb1; border-color: #e0eeeb; }
.news_sec > dd > .notify > li > p { width: 100%; }
.news_sec > dd > .notify > li > p > a { line-height: 24px; font-size: 16px; display: block; }
.news_sec > dd > .notify > li > p > a:hover { color: #0e5ea1; text-decoration: underline; }
.news_sec > dd > .notify > li > p > a > span { line-height: 24px; }
.news_sec > dd > .notify > li > p > a > span > i { margin-left: 5px; display: inline-flex; height: 14px; line-height: 14px; right: -36px; top: 0px; text-decoration: none; background: #dd0000; color: #fff; font-size: 9px; padding: 0 4px; border-radius: 4px; }
.news_sec > dd > .notify > li > p > em { line-height: 14px; font-size: 14px; color: #888; }

/* 我们能为你做什么？ */
.whatdo { width: 1200px; margin: 0 auto 40px auto; }
.whatdo > h2 { text-align: center; font-size: 26px; font-weight: bold; line-height: 40px; margin-bottom: 30px; color: #0e5ea1; }
.whatdo > ul { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 3.6%; }
.whatdo > ul > li > a { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 15px; transition: all .3s; -webkit-transition: all .3s; }
.whatdo > ul > li > a > em { line-height: 16px; font-size: 16px; color: #888; font-weight: bold; }
.whatdo > ul > li > a > span { display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 80px; border: solid 0px #ddd; border-radius: 50%; box-sizing: border-box; background: linear-gradient(45deg, #0e5ea1 0%, #2ead77 100%); }

.whatdo > ul > li > a > span > i { display: inline-flex; width: 48px; height: 48px; }
.whatdo > ul > li > a > span > i.ico_maintenance { background-image: url(../img/svg/maintenance_white.svg); }
.whatdo > ul > li > a > span > i.ico_location { background-image: url(../img/svg/location_white.svg); }
.whatdo > ul > li > a > span > i.ico_paid_search { background-image: url(../img/svg/paid_search_white.svg); }
.whatdo > ul > li > a > span > i.ico_create_archive { background-image: url(../img/svg/create_archive_white.svg); }
.whatdo > ul > li > a > span > i.ico_search_contacts { background-image: url(../img/svg/search_contacts_white.svg); }
.whatdo > ul > li > a > span > i.ico_card_payment { background-image: url(../img/svg/card_payment_white.svg); }
.whatdo > ul > li > a > span > i.ico_transfer { background-image: url(../img/svg/transfer_white.svg); }
.whatdo > ul > li > a > span > i.ico_service_tips { background-image: url(../img/svg/service_tips_white.svg); }
.whatdo > ul > li > a:hover { margin-top: -15px; }
.whatdo > ul > li > a:hover > em { color: #000; }
.whatdo > ul > li > a:hover > span { background-color: #fff; border: solid 0px #180606; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }


.whatdo > ul > li.ico_1 > a > span { background: linear-gradient(135deg, #FFE985 0%, #FA742B 100%); }
.whatdo > ul > li.ico_2 > a > span { background: linear-gradient(135deg, #ABDCFF 0%, #0396FF 100%); }
.whatdo > ul > li.ico_3 > a > span { background: linear-gradient(135deg, #FEB692 0%, #EA5455 100%); }
.whatdo > ul > li.ico_4 > a > span { background: linear-gradient(135deg, #CE9FFC 0%, #7367F0 100%); }
.whatdo > ul > li.ico_5 > a > span { background: linear-gradient(135deg, #5EFCE8 0%, #736EFE 100%); }
.whatdo > ul > li.ico_6 > a > span { background: linear-gradient(135deg, #52E5E7 0%, #130CB7 100%); }
.whatdo > ul > li.ico_7 > a > span { background: linear-gradient(135deg, #FFAA85 0%, #B3315F 100%); }
.whatdo > ul > li.ico_8 > a > span { background: linear-gradient(135deg, #FFE985 0%, #FA742B 100%); }

/* 网上营业厅 */
.netshop { width: 1200px; margin: 0 auto 40px auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; gap: 40px; }
.netshop > .psnl { box-sizing: border-box; width: 100%; height: 248px; padding: 50px; background: url(../img/netshop_psnl.jpg) center center no-repeat; background-size: cover; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.netshop > .corp { box-sizing: border-box; width: 100%; height: 248px; padding: 50px; background: url(../img/netshop_corp.jpg) center center no-repeat; background-size: cover; display: inline-flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.netshop h2 { flex-shrink: 0; display: inline-flex; flex-flow: column nowrap; justify-content: center; align-items: center; }
.netshop h2 > b { display: inline-flex; flex-flow: column nowrap; justify-content: center; align-items: center; font-size: 26px; font-weight: normal; color: #0e5ea1; border-bottom: solid 2px #0e5ea1; padding: 0 0 20px 0; margin-bottom: 20px; }
.netshop h2 > i { display: inline-flex; height: 48px; width: 48px; border-radius: 50%; background: url(../img/svg/chevron_right.svg) center center no-repeat #fff; background-size: 24px 24px; }
.netshop p { opacity: 0; width: 0%; height: 100%; margin-left: 30px; overflow: hidden; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; gap: 20px; transition: all .3s; -webkit-transition: all .3s; }
.netshop .psnl p { height: 124px; }
.netshop .corp p { height: 88px; }
.netshop p > a { display: inline-flex; font-size: 16px; line-height: 16px; color: #000; }
.netshop p > a:hover { color: #0e5ea1; text-decoration: underline; }
.netshop > .se { opacity: 1; }
.netshop > .se > p { opacity: 1; width: 100%; }
