/**!
 * 首页
 * date:2022-5-24
 * author: jjuan;
 */

body {
    background: #f2f7fb;
}

/* 搜索 */
.top {
    background: url('../images/top_bg.jpg') no-repeat top center;
    height: 447px;
    padding-top: 49px;
    text-align: center;
}

.top-slogan {
    width: 589px;
    height: 49px;
}

.search-box {
    width: 580px;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

.search {
    position: relative;
    width: 100%;
    height: 60px;
    background: url('../images/search_bg.png') no-repeat top center;
    padding: 5px;
    box-shadow: 0px 3px 7px 0px rgba(19, 60, 144, 0.5);
    border-radius: 30px;
}

.search-text {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    padding: 0 85px 0 30px;
    font-size: 18px;
}

.search-text::-webkit-input-placeholder {
    color: #7d869a;
    font-size: 18px;
}

.search-btn {
    cursor: pointer;
    position: absolute;
    width: 76px;
    height: 50px;
    border-radius: 25px;
    right: 5px;
    top: 5px;
    background: url('../images/search_btn.png') no-repeat center 8px;
    background-color: #2145a1;
}

.search-btn:hover {
    background-color: #06297f;
}

.search-hot {
    margin-top: 7px;
    padding-left: 35px;
    text-align: left;
}

.search-hot-title {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-right: 20px;
}

.search-item {
    display: inline-block;
    color: #ffffff;
    padding: 0 15px;
    height: 25px;
    line-height: 25px;
    background: rgba(4, 76, 184, 0.5);
    border-radius: 12px;
    margin-right: 10px;
}

.search-item:last-child {
    margin-right: 0;
}

/* 中心公告、风采展示 */
.msg {
    margin-top: 60px;
}

.news-box {
    width: 44%;
    height: 340px;
}

.news {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

.news a {
    display: block;
}

.news img {
    width: 100%;
    height: 340px;
}

.news-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38px;
    line-height: 38px;
    background: rgba(51, 51, 51, 0.5);
    color: #fefefe;
    font-size: 16px;
    padding: 0 200px 0 13px;
}

.news .news-pagination {
    bottom: 0;
    left: auto;
    right: 0;
    height: 38px;
    width: 130px;
    padding: 10px 10px 0 0;
    text-align: right;
}

.swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: #878a8d;
}

.swiper-pagination-bullet-active {
    background: #eff0f4;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}

.post {
    width: calc(56% - 24px);
    height: 340px;
    margin-left: 24px;
    padding: 15px 20px 0 20px;
    background: #fff;
}

.tab-hd {
    height: 50px;
    border-bottom: 1px solid #d6dce2;
}

.tab-hdl {
    cursor: pointer;
    line-height: 49px;
    padding-left: 35px;
    color: #79a0c0;
    font-size: 22px;
    background-position: left center;
    background-repeat: no-repeat;
}

.tab-hdl.active {
    position: relative;
    color: #1463ce;
}

.tab-hdl.active::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    background: #1463ce;
    bottom: -1px;
    left: 0;
}

.notice {
    background-image: url('../images/notice.png');
}

.notice.active {
    background-image: url('../images/notice_h.png');
}

.view {
    margin-left: 38px;
    background-image: url('../images/view.png');
}

.view.active {
    background-image: url('../images/view_h.png');
}

.notice-item {
    position: relative;
    height: 42px;
    padding-left: 15px;
    color: #505c8a;
}

.notice-item::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    background: #bcd5fb;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.notice-item:hover::before {
    background: #1463ce;
}

.notice-item:hover,
.notice-item:hover .notice-txt {
    color: #1463ce;
}

.notice-txt {
    display: block;
    line-height: 42px;
    color: #333;
    font-size: 16px;
    margin-right: 145px;
}

.notice-data {
    line-height: 42px;
    font-size: 16px;
}

.bdl {
    position: relative;
    padding-top: 9px;
}

.tab-more {
    position: absolute;
    content: '';
    width: 17px;
    height: 17px;
    background: url('../images/tab_more.png') no-repeat center center;
    background-color: #83bfe2;
    border-radius: 50%;
    top: -35px;
    right: 0;
}

.tab-more:hover {
    background-color: #1463ce;
}

/* 自助服务 */
.serve {
    margin-top: 60px;
    background: url('../images/serve.jpg') no-repeat center center;
    background-size: 100% 100%;
    padding: 39px 0 60px 0;
}

.service-title {
    position: relative;
    height: 74px;
    text-align: center;
}

.service-title::before,
.service-title::after {
    position: absolute;
    content: '';
    height: 13px;
    background-size: 100% auto;
    top: 50%;
    transform: translateY(-50%);
}

.service-title::before {
    background: url('../images/title_left.png') no-repeat right 80%;
    left: 0;
    right: calc(50% + 140px);
}

.service-title::after {
    background: url('../images/title_right.png') no-repeat left 80%;
    right: 0;
    left: calc(50% + 140px);
}

.service-title span {
    display: inline-block;
    line-height: 74px;
    font-size: 36px;
    font-weight: 600;
    color: #1d62c0;
}

.serve-top {
    margin-top: 10px;
}

.serve-box {
    display: inline-block;
    width: calc(50% - 12px);
    height: 120px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.serve-box:hover {
    transform: translateY(-10px);
    box-shadow: 0px 12px 20px 0px rgba(6, 57, 127, 0.18);
}

.serve-box.left {
    padding: 0 30px 0 190px;
    position: relative;
    background-image: url('../images/serve_left.jpg');
    font-size: 0;
    -webkit-text-size-adjust: none;
}

.serve-box.left::before {
    position: absolute;
    content: '';
    bottom: 2px;
    left: 30px;
    width: 143px;
    height: 174px;
    background: url('../images/robot.png') no-repeat center center;
}

.serve-left-title {
    font-size: 20px;
    font-weight: 600;
    color: #1463ce;
    height: 38px;
    line-height: 38px;
}

.serve-left-txt {
    line-height: 26px;
    font-size: 16px;
    color: #505c8a;
}

.serve-left {
    display: inline-block;
    vertical-align: middle;
}

.serve-box.left > i {
    width: 0;
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.serve-box.right {
    margin-left: 24px;
    padding:16px 0 0 20px;
    background-image: url('../images/serve_right_new.png');
}

/* .serve-right-title {
    line-height: 120px;
    font-size: 30px;
    font-weight: 600;
    color: #04a1a3;
} */

.serve-result p{
    line-height:42px;
    font-size: 30px;
    font-weight: 600;
    color: #04a1a3;
}

.serve-new{
    margin-left:64px;
}

.serve-new .serve-box-title{
   
color: #2D62CC;
}

.serve-box-title{
    line-height:48px;
font-weight: bold;
font-size: 24px;
}


.go{
   margin-top:3px;
    width: 49px;
height: 24px;
border-radius: 12px;
    padding-left:9px;
    line-height:24px;
    background:no-repeat center;
}

.serve-new .go{
    
color: #2D62CC;
    background-image:url("../images/serve_new.png");
}

.serve-old{
    margin-left:184px
}

.serve-old .serve-box-title{
   
color: #1499AC;
}

.serve-old .go{
    
color: #1499AC;
    background-image:url('../images/serve_old.png');
}

.my-item {
    margin-top: 29px;
    margin-right: 24px;
    height: 220px;
    width: 15%;
    background: url('../images/my_item.png') no-repeat center center;
    background-size: 100% 100%;
}

.my-item:last-child {
    margin-right: 0;
}

.my-name {
    display: block;
    height: 100%;
    padding-top: 166px;
    line-height: 30px;
    text-align: center;
    color: #333333;
    font-size: 22px;
    background-repeat: no-repeat;
    background-position: center 28px;
}

.my-name.icon1 {
    background-image: url('../images/my_icon1.png');
}

.my-name.icon2 {
    background-image: url('../images/my_icon2.png');
}

.my-name.icon3 {
    background-image: url('../images/my_icon3.png');
}

.my-name.icon4 {
    background-image: url('../images/my_icon4.png');
}

.my-name.icon5 {
    background-image: url('../images/my_icon5.png');
}

.my-name.icon6 {
    background-image: url('../images/my_icon6.png');
}

.my-item:hover {
    transform: translateY(-10px);
    box-shadow: 0px 12px 20px 0px rgba(6, 57, 127, 0.18);
}

.my-item:hover .my-name {
    color: #1463ce;
}

/* 案例公开、便民公告 */
.case {
    position: relative;
    height: 520px;
}

.case-con{
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    overflow: hidden;
}

.case-box {
    height: 400px;
    width: 50%;
    border: 1px solid #fff;
    box-shadow: 0 0 10px rgba(131, 179, 213, 0.5);
    background: #fff;
}

.case-title {
    position: relative;
    height: 79px;
    line-height: 79px;
    text-align: center;
    background: url('../images/case_bg.jpg') no-repeat center center;
    background-size: 100% 100%;
}

.case-title::before,
.case-title::after {
    position: absolute;
    content: '';
    height: 9px;
    width: 49px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center center;
}

.case-title::before {
    right: calc(50% + 108px);
    background-image: url('../images/case_left.png');
}

.case-title::after {
    left: calc(50% + 108px);
    background-image: url('../images/case_right.png');
}

.case-box:hover .case-title::before {
    background-image: url('../images/case_left_hover.png');
}

.case-box:hover .case-title::after {
    background-image: url('../images/case_right_hover.png');
}

.case-title span {
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    color: #659eec;
    padding-left: 42px;
    background-repeat: no-repeat;
    background-position: left center;
}

.case-box:hover {
    height: 420px;
}

.case-title.icon1 span {
    background-image: url('../images/case_icon1.png');
}

.case-title.icon2 span {
    background-image: url('../images/case_icon2.png');
}

.case-box:hover .case-title {
    height: 99px;
    line-height: 99px;
}

.public {
    padding: 0 30px;
}

.public-item {
    height: 89px;
    border-bottom: 1px dashed #b8cfdf;
}

.public-item a {
    display: block;
    height: 100%;
    padding-top: 12px;
}

.public-item p {
    padding-left: 20px;
}

.public-title {
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    background: url('../images/public_title.png') no-repeat left center;
}

.public-txt {
    height: 30px;
    line-height: 30px;
    color: #505c8a;
}

.more {
    position: relative;
    display: block;
    text-align: center;
    height: 44px;
    line-height: 44px;
    color: #45a1fa;
}

.more span {
    display: inline-block;
}

.more::before,
.more::after {
    position: absolute;
    content: '';
    height: 5px;
    width: 295px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center center;
}

.more::before {
    right: calc(50% + 22px);
    background-image: url('../images/more_left.png');
}

.more::after {
    left: calc(50% + 22px);
    background-image: url('../images/more_right.png');
}

.case-box .notice-list {
    padding: 0 30px;
}

.case-box .notice-item {
    height: 43px;
    border-bottom: 1px dashed #b8cfdf;
}

/* 运行情况 */
.move {
    background: url('../images/move.jpg') no-repeat center center;
    background-size: 100% 100%;
    padding-top: 39px;
}

.date-list {
    margin-top: 7px;
    width: 100%;
}

.move-hdl {
    position: relative;
    height: 34px;
    line-height: 22px;
    margin-right: 45px;
    font-size: 20px;
    color: #538cbb;
    cursor: pointer;
}

.move-hdl:last-child {
    margin-right: 0;
}

.move-hdl.active {
    background: url('../images/move_hdl.png') no-repeat center bottom;
    background-size: 100% 100%;
}

.move-hdl.active::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    background: #1463ce;
    bottom: 0;
    left: 0;
}

.move-hdl span {
    display: inline-block;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: left center;
}

.move-hdl.active span {
    color: #1463ce;
}

.move-hdl.icon1 span {
    background-image: url('../images/move_icon1.png');
}

.move-hdl.icon2 span {
    background-image: url('../images/move_icon2.png');
}

.move-hdl.icon3 span {
    background-image: url('../images/move_icon3.png');
}

.move-hdl.icon4 span {
    background-image: url('../images/move_icon4.png');
}

.move-hdl.active.icon1 span {
    background-image: url('../images/move_icon1h.png');
}

.move-hdl.active.icon2 span {
    background-image: url('../images/move_icon2h.png');
}

.move-hdl.active.icon3 span {
    background-image: url('../images/move_icon3h.png');
}

.move-hdl.active.icon4 span {
    background-image: url('../images/move_icon4h.png');
}

.map-date {
    margin-top: 40px;
    width: 33.3333%;
}

.box {
    background: #fff;
    box-shadow: 0 0 10px rgba(208, 222, 234, 0.5);
}

.map-top {
    position: relative;
    height: 120px;
}

.map-top::before,
.map-top::after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 94px;
    background-repeat: no-repeat;
    background-position: center center;
}

.map-top::before {
    left: 9px;
    background-image: url('../images/map_left.png');
}

.map-top::after {
    right: 9px;
    background-image: url('../images/map_right.png');
}

.map-title {
    text-align: center;
    padding-top: 10px;
}

.map-title span {
    display: inline-block;
    padding: 0 78px;
    height: 29px;
    line-height: 29px;
    font-size: 20px;
    color: #1463ce;
    background: url('../images/map_title.png') no-repeat center center;
}

.scrollnum {
    height: 57px;
    line-height: 57px;
    display: inline-block;
    vertical-align: middle;
}

.scrollnum > .item {
    width: 43px;
    vertical-align: top;
    text-align: center;
    background: url('../images/scrollNum.png') no-repeat center;
    font-size: 36px;
    font-weight: bold;
    color: #ef921a;
    margin-right: 8px;
    background-size: 100% 100%;
    height: 100%;
    display: inline-block;
    position: relative;
}

.scrollnum > .item:first-child {
    margin-left: 0 !important;
}

.scrollnum > .item:first-child:before {
    display: none;
}

.scrollnum > .item > .sequence {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scrollnum > .item > .sequence > span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    height: 1000%;
    transition: top 2s ease;
}

.scrollnum > .item > .sequence > span > i {
    display: block;
    height: 10%;
    font-style: normal;
}

.map-all {
    text-align: center;
    margin-top: 8px;
}

.map-unit {
    display: inline-block;
    color: #538cbb;
    font-size: 16px;
    vertical-align: bottom;
}

.map-list {
    width: 100%;
    margin-top: 30px;
}

.map-item {
    margin-right: 19px;
    height: 220px;
    width: 30%;
    padding-top: 20px;
    background-repeat: no-repeat;
    background-position: center 110px;
}

.map-item:last-child {
    margin-right: 0;
}

.map-item-tt {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #333333;
}

.map-txt {
    text-align: center;
    height: 37px;
    color: #538cbb;
    font-size: 16px;
}

.map-num {
    line-height: 37px;
    font-size: 24px;
    color: #1463ce;
    text-align: center;
}

.map-item.icon1 {
    background-image: url('../images/map_item1.png');
}

.map-item.icon2 {
    background-image: url('../images/map_item2.png');
}

.map-item.icon3 {
    background-image: url('../images/map_item3.png');
}

.map-chart {
    width: 66.6667%;
    height: 445px;
    background: url('../images/map_bg.png') no-repeat center bottom;
}

.map {
    position: relative;
}

.map-box {
    width: 220px;
    height: 63px;
    background: #ffffff;
    box-shadow: 0px 10px 15px 0px rgba(25, 73, 136, 0.2);
    border-radius: 32px;
    padding: 4px 29px 0 29px;
}

.map-box-title {
    height: 28px;
    line-height: 28px;
    font-size: 18px;
    font-weight: 600;
    color: #1463ce;
}

.map-box-txt {
    height: 26px;
    line-height: 26px;
    font-size: 16px;
    color: #333333;
}

.date-box {
    position: absolute;
    width: auto;
    height: 22px;
    top: -34px;
    right: 0;
}

.date-item {
    width: 50px;
    height: 22px;
    line-height: 20px;
    border-radius: 6px;
    border: 1px solid #45a1fa;
    font-size: 16px;
    color: #45a1fa;
    text-align: center;
    cursor: pointer;
}

.date-item + .date-item {
    margin-left: 5px;
}

.date-item.active,
.date-item:hover {
    color: #ffffff;
    background: #1d62c0;
    border: 0;
}

.bd {
    padding-bottom: 58px;
}

.bar-box {
    padding-top: 30px;
    height: 415px;
}

.com-tt {
    height: 42px;
    line-height: 42px;
    text-align: center;
}

.com-tt span {
    position: relative;
    display: inline-block;
    font-weight: 600;
    color: #2165c2;
    font-size: 22px;
}

.com-tt span::before,
.com-tt span::after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center center;
    width: 70px;
    height: 10px;
}

.com-tt span::before {
    left: -133px;
    background-image: url('../images/com_tt_left.png');
}

.com-tt span::after {
    right: -133px;
    background-image: url('../images/com_tt_right.png');
}

.com-box {
    position: relative;
    padding-top: 30px;
}

.bar-chart {
    height: 343px;
    width: 100%;
}

.pie-box {
    padding-top: 30px;
    background: url('../images/pie_box.png') no-repeat bottom center #fff;
}

.pie {
    width: 42%;
    height: 415px;
    background: url('../images/pie.png') no-repeat center 135px;
}

.pie-list {
    width: 58%;
    height: 415px;
    padding-top: 75px;
}

.pie-item {
    position: relative;
    width: 50%;
    padding: 0 50px 0 30px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #333333;
}

.pie-value {
    width: 32%;
    text-align: right;
}

.pie-name {
    width: 38%;
}

.pie-value span {
    color: #ef921a;
    margin-right: 5px;
    font-weight: 600;
}

.pie-per {
    width: 30%;
    font-weight: 600;
    color: #1d62c0;
    text-align: right;
}

.pie-item::before {
    position: absolute;
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.pie-item:nth-child(1)::before {
    background: #8b61ee;
    box-shadow: 0 0 5px 3px #8b61ee;
}

.pie-item:nth-child(2)::before {
    background: #ee6161;
    box-shadow: 0 0 5px 3px #ee6161;
}

.pie-item:nth-child(3)::before {
    background: #63ae56;
    box-shadow: 0 0 5px 3px #63ae56;
}

.pie-item:nth-child(4)::before {
    background: #01b8c6;
    box-shadow: 0 0 5px 3px #01b8c6;
}

.pie-item:nth-child(5)::before {
    background: #2e53ba;
    box-shadow: 0 0 5px 3px #2e53ba;
}

.pie-item:nth-child(6)::before {
    background: #f9b844;
    box-shadow: 0 0 5px 3px #f9b844;
}

.pie-item:nth-child(7)::before {
    background: #3f9cfb;
    box-shadow: 0 0 5px 3px #3f9cfb;
}

.pie-item:nth-child(8)::before {
    background: #fa6e4e;
    box-shadow: 0 0 5px 3px #fa6e4e;
}

/* 大屏幕 */
@media (max-width: 1199px) {
    .my-item {
        margin-right: 19px;
    }

    .case{
        height: 920px;
    }

    .map-date,
    .map-chart,
    .pie,
    .pie-list {
        width: 100%;
        float: none !important;
    }

    .move-hd {
        padding-bottom: 34px;
    }

    .pie-list{
        padding-left: 20px;
    }
}

/* 中等屏幕(980-1199) */
@media (max-width: 979px) {
    .news-box {
        width: 100%;
        float: none !important;
    }

    .post {
        width: 100%;
        margin-left: 0;
        float: none !important;
        margin-top: 15px;
    }

    .serve-box {
        width: 100%;
        float: none !important;
        margin-top: 20px;
    }

    .serve-box.right {
        margin-left: 0;
    }

    .move-hdl {
        margin-top: 10px;
    }

    .my-item {
        margin-right: 30px;
        width: 30%;
    }

    .my-item:nth-child(3n) {
        margin-right: 0;
    }
}

/* 小屏幕 */
@media (max-width: 767px) {
}

@media (max-width: 624px) {
    .my-item {
        width: calc(50% - 15px);
        margin-right: 30px;
    }

    .my-item:nth-child(3n) {
        margin-right: 30px;
    }

    .my-item:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 615px) {
    .top-slogan {
        width: 100%;
    }

    .search-box {
        width: 100%;
    }

    .search-item {
        margin-bottom: 10px;
    }
}

@media (max-width: 530px) {
    .serve-left-title {
        line-height: 26px;
        height: 26px;
    }

    .serve-left-txt {
        line-height: 16px;
        font-size: 14px;
    }

    .map-item {
        margin-right: 15px;
    }
}