body {
    background: url(2024-zmwl-bg.jpg) no-repeat top #ecf6fc;
    background-size: 100% auto;
}

.pLogo {
    background: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
}

.pSearch .s-hot a {
    background-color: rgba(255, 255, 255, .3);
    color: #ffffff;
}

.pNav {
    display: none;
}

.zmwl-banner {
    width: 100%;
    height: 9rem;
    position: relative;
}

.zmwl-banner .banner-img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.zmwl-banner .banner-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zmwl-banner .banner-yun {
    position: absolute;
    left: 0;
    /* top: 6.94rem; */
    bottom: -3.75rem;
    z-index: 2;
    width: 100%;
    height: 5.98rem;
    overflow: hidden;
}

.zmwl-banner .banner-yun img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.zmwl-banner .zmwl-logo {
    position: absolute;
    left: calc((100% - 8.55rem) / 2);
    top: 3.8rem;
    z-index: 3;
    width: 8.55rem;
    height: auto;
    display: block;
}

.zmwl-people {
    width: 2.12rem;
    height: 1.74rem;
    position: absolute;
    right: -.65rem;
    top: -1.35rem;
    z-index: 2;
}

.zmwl-people img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/****** 区情简介 ******/
.zmwl-wlgk {
    height: 5.51rem;
    background: url(2024-zmwl-wlgk-bg.png) no-repeat center;
    background-size: contain;
    position: relative;
    z-index: 2;
    margin-top: -1.42rem;
}

.zmwl-wlgk .wlgk-img {
    width: 5.34rem;
    height: 4.3rem;
    display: block;
    float: left;
    margin: .66rem .4rem auto .93rem;
}

.zmwl-wlgk .wlgk-msg {
    width: calc(100% - 5.34rem - .4rem - .93rem * 2);
    height: 2.55rem;
    float: right;
    margin-top: .8rem;
    margin-right: .93rem;
}

.zmwl-wlgk .wlgk-msg .con {
    margin-top: .25rem;
}

.zmwl-wlgk .wlgk-msg .con a {
    height: 1.8rem;
    line-height: .45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-line-clamp: 4;
    word-wrap: break-word;
    word-break: break-all;
    text-indent: 2em;
    text-align: justify;
}

.zmwl-wlgk .wlgk-msg .con a:hover {
    color: #ff0000;
}

.zmwl-wlgk .wlgk-menu {
    width: 6.3rem;
    float: left;
    margin-top: .2rem;
}

.zmwl-wlgk .wlgk-menu a {
    width: .9rem;
    height: auto;
    display: block;
    float: left;
    margin-left: .85rem;
    text-align: center;
}

.zmwl-wlgk .wlgk-menu a:first-child {
    margin-left: .22rem;
}

.zmwl-wlgk .wlgk-menu a img {
    width: .9rem;
    height: .9rem;
    background: url(2024-zmwl-wlgk-menu-box.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
}

.zmwl-wlgk .wlgk-menu a:hover img {
    width: auto;
    height: .7rem;
}

.zmwl-wlgk .wlgk-menu a span {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: .16rem;
    display: block;
    margin-top: .1rem;
    white-space: nowrap;
}

.zmwl-tit {
    width: 100%;
    padding: .5rem 0;
}

.zmwl-tit a {
    display: block;
    margin: 0 auto;
    max-width: 6.48rem;
}

.zmwl-tit img {
    width: 100%;
    height: auto;
}

/****** 畅游武隆 ******/
.zmwl-cywl .con {
    text-align: center;
}

.zmwl-cywl .con a {
    display: inline-block;
    width: 2.27rem;
    padding: .5rem 10px 0;
    position: relative;
    margin: 0 .13rem;
    height: 4.65rem;
    overflow: hidden;
}

.zmwl-cywl .con a img {
    width: 100%;
    height: 4.65rem;
    display: block;
    object-fit: cover;
}

.zmwl-cywl .con a::after {
    content: '';
    display: block;
    width: 100%;
    height: 4.65rem;
    position: absolute;
    left: 0;
    top: calc(.5rem - 10px);
    background-color: #ffffff;
    z-index: -1;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
}

.zmwl-cywl .con a span {
    width: .3rem;
    padding: .72rem .34rem;
    font-size: .24rem;
    color: #ffffff;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    background-color: rgba(1, 85, 152, .2);
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
}

.zmwl-cywl .con a span::after {
    content: '';
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(255, 255, 255, .5);
}

.zmwl-cywl .con a:hover {
    padding-top: 10px;
    height: calc(4.65rem + .5rem - 10px);
}

.zmwl-cywl .con a:hover::after {
    top: 0;
}

.zmwl-cywl .con a:hover span {
    top: .6rem;
}

/****** 休闲旅游 ******/
.zmwl-xxly .swiper-container {
    padding-bottom: .4rem;
}

.zmwl-xxly .swiper-slide {
    width: 9.78rem;
    height: 5.6rem;
    transition-timing-function: linear;
}

.zmwl-xxly .swiper-slide a {
    width: 100%;
    height: 100%;
    display: block;
}

.zmwl-xxly .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .04rem;
    display: block;
}

.zmwl-xxly .swiper-slide .title {
    position: absolute;
    left: -.32rem;
    font-size: .18rem;
    color: rgb(102, 102, 102);
    width: .18rem;
    text-align: center;
    height: 5.6rem;
    display: block;
    line-height: .2rem;
    color: #000;
    overflow: hidden;
}

.zmwl-xxly .swiper-button-next,
.zmwl-xxly .swiper-button-prev {
    width: .86rem;
    height: 1.12rem;
    background-size: .86rem 1.12rem;
    margin-top: -.56rem;
    outline: none;
}

.zmwl-xxly .swiper-button-next:after,
.zmwl-xxly .swiper-button-prev:after {
    display: none;
}

.zmwl-xxly .swiper-button-next {
    background-image: url(2024-zmwl-cywl-cursor-next.png);
}

.zmwl-xxly .swiper-button-prev {
    background-image: url(2024-zmwl-cywl-cursor-prev.png);
}

.zmwl-xxly .swiper-pagination-bullet {
    background: none;
    opacity: 1;
    margin: 0 6px !important;
    width: 9px;
    height: 9px;
    position: relative;
    outline: none;
    vertical-align: middle;
}

.zmwl-xxly .swiper-pagination-bullet span {
    width: 3px;
    height: 3px;
    background: #a5dde8;
    display: block;
    border-radius: 50%;
    margin-top: 3px;
    margin-left: 3px;
}

.zmwl-xxly .swiper-pagination-bullet i {
    background: #015598;
    height: 1px;
    width: 20px;
    position: absolute;
    top: 4px;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 3;
    transition-timing-function: linear;
}

.zmwl-xxly .swiper-pagination-bullet-active span,
.zmwl-xxly .swiper-pagination-bullet:hover span {
    width: 9px;
    height: 9px;
    margin-top: 0;
    margin-left: 0;
    background: #015598;
    position: relative;
    z-index: 1;
}

.zmwl-xxly .swiper-pagination-bullet-active i {
    animation: middle 6s;
}

.zmwl-xxly .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i {
    animation: first 6s;
}

.zmwl-xxly .swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i {
    animation: last 6s;
}

/****** 人文风情 ******/
.zmwl-rwfq .rwfq-con {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: .2rem;
}

.zmwl-rwfq .swiper-container {
    padding: .15rem 0;
    width: 100%;
    height: calc(3.75rem + .45rem);
}

.zmwl-rwfq .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 300ms;
    transform: scale(.8);
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
}

.zmwl-rwfq .swiper-slide-active {
    transform: scale(1.32);
    -webkit-transform: scale(1.32);
    -moz-transform: scale(1.32);
    -ms-transform: scale(1.32);
    -o-transform: scale(1.32);
}

.zmwl-rwfq .swiper-slide .pic {

    width: 2.3rem;
    height: 2.3rem;
    display: block;
    margin: 0 auto;
    background: url(2024-zmwl-rwfq-img-box-active.png) no-repeat;
    background-size: 100%;
    /* margin-top: calc((3.75rem - 1.98rem) / 2); */
    padding: .04rem;
}

.zmwl-rwfq .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.zmwl-rwfq .swiper-slide-active .pic {
    width: 2.75rem;
    height: 2.75rem;
    margin-top: 0;
    background-image: url(2024-zmwl-rwfq-img-box-active.png);
    padding: .05rem;
}

.zmwl-rwfq .swiper-slide .name {
    width: 1.9rem;
    display: block;
    text-align: center;
    line-height: .3rem;
    height: .3rem;
    padding-top: .15rem;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.zmwl-rwfq .swiper-slide-active .name {
    /* width: 3.65rem; */
    width: 100%;
}

.zmwl-rwfq .swiper-slide-prev {
    margin-right: .45rem;
    margin-left: -.45rem;
}

.zmwl-rwfq .swiper-slide-next {
    margin-left: .45rem;
    margin-right: -.45rem;
}

.zmwl-rwfq .swiper-button-next,
.zmwl-rwfq .swiper-button-prev {
    content: '';
    width: .39rem;
    height: .39rem;
    background: no-repeat center;
    background-size: 100%;
    top: calc((3.75rem + .75rem - .39rem) / 2);
}

.zmwl-rwfq .swiper-button-prev {
    left: calc(-.39rem - .2rem);
    background-image: url(2024-zmwl-rwfq-prev.png);
}

.zmwl-rwfq .swiper-button-next {
    right: calc(-.39rem - .2rem);
    background-image: url(2024-zmwl-rwfq-next.png);
}

.zmwl-rwfq .swiper-button-next:after,
.zmwl-rwfq .swiper-button-prev:after {
    display: none;
}

/****** 武隆视频 ******/
.zmwl-wlsp .wlsp-con {
    width: 10.58rem;
    padding: 10px;
    background-color: #ffffff;
    margin: 0 auto;
}

.zmwl-wlsp .wlsp-con video {
    width: 100%;
    height: auto;
    display: block;
    outline: none;
}

/****** 数据发布 ******/
.zmwl-sjfb .tjtb-head {
    width: 2.4rem;
    float: left;
}

.zmwl-sjfb .tjtb-head li {
    width: 2.33rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    background-color: #ffffff;
    margin-top: .04rem;
    position: relative;
}

.zmwl-sjfb .tjtb-head li:first-child {
    margin-top: 0;
}

.zmwl-sjfb .tjtb-head li a {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.zmwl-sjfb .tjtb-head li.active a {
    background-color: #4e79c0;
    background-image: linear-gradient(to bottom right, #5386d7, #2b63ba);
    color: #ffffff;
}

.zmwl-sjfb .tjtb-head li::after {
    content: '';
    display: none;
    width: 0;
    height: 0;
    border-top: .05rem solid transparent;
    border-bottom: .05rem solid transparent;
    border-left: .07rem solid #4e79c0;
    position: absolute;
    right: -.07rem;
    top: calc(50% - .03rem);
}

.zmwl-sjfb .tjtb-head li.active::after {
    display: block;
}

.zmwl-sjfb .tjtb-con {
    width: calc(100% - 2.4rem - .18rem - .4rem);
    float: right;
    height: calc(5rem - .4rem);
    background-color: #ffffff;
    padding: .2rem;
}

.zmwl-sjfb .sjfb-menu {
    margin-top: .25rem;
    height: auto;
    background-color: #ffffff;
}

.zmwl-sjfb .sjfb-menu li {
    width: calc(100% / 4);
    float: left;
    height: .7rem;
    line-height: .7rem;
    position: relative;
}

.zmwl-sjfb .sjfb-menu li::after {
    content: '';
    display: block;
    width: 1px;
    height: .24rem;
    background-color: #7eaee4;
    position: absolute;
    right: 0;
    top: calc((.7rem - .24rem) / 2);
}

.zmwl-sjfb .sjfb-menu li:last-child::after {
    display: none;
}

.zmwl-sjfb .sjfb-menu li img {
    width: auto;
    height: .32rem;
    display: block;
    margin-top: calc((.7rem - .32rem) / 2);
    margin-left: 1.04rem;
    margin-right: .25rem;
    float: left;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
}

.zmwl-sjfb .sjfb-menu li span {
    font-size: .22rem;
    font-weight: 700;
    color: #115db1;
    cursor: pointer;
    float: left;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
}

.zmwl-sjfb .sjfb-menu li:hover img {
    height: .22rem;
    margin-top: calc((.7rem - .22rem) / 2);
}

.zmwl-sjfb .sjfb-menu li:hover span {
    font-size: .2rem;
}

@media screen and (max-width: 768px) {
    .pLogo {
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

    .pLogo .pLogo-logo img {
        height: .64rem;
    }

    .pLogo .pLogo-logo img.gh {
        float: none;
        margin: 0 auto;
    }

    .pSearch {
        margin-top: 0 !important;
        padding-top: .1rem !important;
    }

    .zmwl-banner .zmwl-logo {
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
        top: 2.8rem;
    }

    .zmwl-banner {
        height: calc(100vw * .86);
    }
    
    .zmwl-people {
        right: 10px;
        width: auto;
        height: 1rem;
        top: -.9rem;
    }
    
    .zmwl-people img {
        width: auto;
    }

    .zmwl-wlgk {
        padding: 0;
        margin: 0;
        background: rgba(255, 255, 255, .5) top;
        position: relative;
        height: auto;
    }

    .zmwl-wlgk::after {
        content: '';
        display: block;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background-color: #ffffff;
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: -2;
    }

    .zmwl-wlgk .wlgk-img {
        width: 75%;
        height: auto;
        margin: 0 auto;
        float: none;
    }

    .zmwl-wlgk .wlgk-msg {
        float: none;
        width: auto;
        height: auto;
        padding: .3rem .3rem 10px;
        margin: 0;
    }

    .zmwl-wlgk .wlgk-msg .con {
        margin-top: .2rem;
    }

    .zmwl-wlgk .wlgk-msg .con a {
        height: 1.4rem;
        line-height: .35rem;
    }

    .zmwl-wlgk .wlgk-menu {
        width: 100%;
        margin-top: 10px;
        float: none;
    }

    .zmwl-wlgk .wlgk-menu a {
        width: calc(100% / 3);
        margin: 0 !important;
    }

    .zmwl-tit {
        padding: .25rem 0;
    }

    .zmwl-tit a {
        width: 80%;
    }

    .zmwl-cywl .con::after {
        content: '';
        display: block;
        clear: both;
    }

    .zmwl-cywl .con a {
        width: calc((100% - 30px - 40px) / 4);
        display: block;
        float: left;
        margin-left: 0;
        margin-right: 10px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: .2rem;
        height: calc(100vw * .5);
    }

    .zmwl-cywl .con a:nth-child(4) {
        margin-right: 0;
    }

    .zmwl-cywl .con a::after {
        top: calc(.2rem - 5px);
        height: calc(100vw * .5);
    }

    .zmwl-cywl .con a img {
        height: calc(100vw * .5);
    }

    .zmwl-cywl .con a span {
        padding: .2rem .1rem;
        font-size: .2rem;
    }

    .zmwl-xxly .swiper-slide {
        width: calc(100vw * .55);
        height: calc(100vw * .35);
    }

    .zmwl-xxly .swiper-slide .title {
        height: calc(100vw * .35);
    }

    .zmwl-xxly .swiper-button-next,
    .zmwl-xxly .swiper-button-prev {
        width: .3rem;
        height: .4rem;
        background-size: contain;
        margin-top: -.35rem;
    }

    .zmwl-rwfq .swiper-container {
        padding: 20px 0;
        height: calc((100vw - 20px) / 3 + .45rem) !important;
    }

    .zmwl-rwfq .swiper-slide {
        width: calc((100vw - 20px) / 3) !important;
    }

    .zmwl-rwfq .swiper-slide .pic {
        width: calc(100% - .08rem - 20px) !important;
        height: calc((100vw - 20px) / 3 - .08rem - 20px) !important;
        margin: 0 10px;
    }

    .zmwl-rwfq .swiper-slide .name {
        width: 100% !important;
    }

    .zmwl-rwfq .swiper-slide-prev {
        margin-right: 0;
        margin-left: 0;
    }

    .zmwl-rwfq .swiper-slide-next {
        margin-left: 0;
        margin-right: 0;
    }
    
    .zmwl-rwfq .swiper-button-next, .zmwl-rwfq .swiper-button-prev {
        width: .2rem;
        height: .2rem;
        top: 48%;
    }

    .zmwl-rwfq .swiper-button-prev {
        left: -6px;
    }

    .zmwl-rwfq .swiper-button-next {
        right: -6px;
    }

    .zmwl-wlsp .wlsp-con {
        width: calc(100% - 20px);
    }

    .zmwl-sjfb .tjtb-head {
        width: 100%;
        float: none;
        height: auto;
    }

    .zmwl-sjfb .tjtb-head::after {
        content: '';
        display: block;
        clear: both;
    }

    .zmwl-sjfb .tjtb-head li {
        width: calc((100% - 1px) / 2);
        height: .55rem;
        line-height: .55rem;
        float: left;
        margin-top: 0;
        border-right: 1px solid #ffffff;
    }

    .zmwl-sjfb .tjtb-head li:nth-child(2n) {
        border-right: 0;
    }

    .zmwl-sjfb .tjtb-head li::after {
        border-left: .05rem solid transparent;
        border-right: .05rem solid transparent;
        border-top: .07rem solid #4e79c0;
        bottom: -.12rem;
        left: calc(50% - .07rem);
        top: auto;
        right: auto;
        z-index: 9;
    }

    .zmwl-sjfb .tjtb-con {
        width: calc(100% - 20px);
        margin-top: 10px;
        float: none;
        height: calc(100vw * .65 - 20px);
        padding: 10px;
    }

    .zmwl-sjfb .sjfb-menu {
        margin-top: 10px;
    }

    .zmwl-sjfb .sjfb-menu li {
        width: calc(100% / 2);
    }

    .zmwl-sjfb .sjfb-menu li:nth-child(2n)::after {
        display: none;
    }

    .zmwl-sjfb .sjfb-menu li img {
        margin-left: .3rem;
    }
}

@keyframes first {
    0% {
        transform: scaleX(0.5);
        left: 0px;
    }

    100% {
        transform: scaleX(1);
        left: 2px;
    }
}

@keyframes last {
    0% {
        transform: scaleX(0.7);
        left: -10px;
    }

    20% {
        transform: scaleX(0.3);
        left: 2px;
    }

    100% {
        transform: scaleX(0.3);
        left: 0px;
    }
}

@keyframes middle {
    0% {
        transform: scaleX(0.7);
        left: -10px;
    }

    20% {
        transform: scaleX(0.45);
        left: 2px;
    }

    100% {
        transform: scaleX(1);
        left: 2px;
    }
}