*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img { max-width: 100%; height: auto; display: block; }
a {
    text-decoration: none;
}
body{
 background-color: #fff;
}
.container{
    width: 100%;
    min-height: 890px;
    background-image: url(image/bg.jpg);
    background-position: top center;
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: hidden;
}
.swiper {
    max-width: 1200px;
    position: relative;
    width: 100%;
    height: auto;
    margin: 620px auto 0;
}
.top-title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}
.top-title .title{
    width: 752px;
    height: 77px;
    background: url(image/title-one.png) no-repeat center;
    background-size: cover;
}
.top-title .prev{
    width: 44px;
    height: 44px;
    background: url(image/left.png) no-repeat center;
    background-size: cover;
    display: none;
}
.top-title .prev:hover{
    background: url(image/left-a.png) no-repeat center;
}
.top-title .next{
    width: 44px;
    height: 44px;
    background: url(image/right.png) no-repeat center;
    background-size: cover;
    display: none;
}
.top-title .next:hover{
    background: url(image/right-a.png) no-repeat center;
}
.top-title .prev::after, .top-title .next::after{
    content: ''!important;
}
.swiper-pagination{
    top: 80px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-pagination-bullet-active{
    width: 24px!important;
    height: 24px!important;
    background: url(image/page-bullet-active.png) no-repeat center!important;
    background-size: cover!important;
     opacity: 1;
}
.swiper-pagination-bullet{
    width: 14px;
    height: 14px;
    background: url(image/page-bullet.png) no-repeat center;
    background-size: cover;
    opacity: 1;
    margin-right: 65px!important;
    position: relative;
}
.swiper-pagination-bullet:not(:last-child)::after{
    content: "";
    width: 50px;
    height: 1px;
    background: url(image/line.png) no-repeat center;
    background-size: cover!important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% + 20px);
}
.content-box{
    width: 100%;
    padding: 70px 0;
}
.content-box .content-top{
    display: flex;
    justify-content: space-between;
}
.content-top .content-top-l {
    width: 600px;
    height: 330px;
    position: relative;
}
.content-top-l .content-cover{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content-top-l .mask{
    width: 100%;
    height: 86px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.content-top-l .content-title{
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    position: absolute;
    bottom: 10px;
}
.content-title .video-icon{
    width: 27px;
    height: 27px;
    margin: 0 15px;
}
.content-top-r{
    max-width: 560px;
}
.content-top-r-item {
    display: flex;
    margin-bottom: 30px;
}
.content-top-r-item .r-img{
    width: 160px;
    height: 90px;
    object-fit: cover;
    margin-right: 10px;
}
.content-top-r-item .content-top-r-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    max-width: 390px;
}
.content-top-r-item .content-top-r-box:hover{
    color: #999;
}
.content-top-r-box .content-top-r-box-time{
    display: flex;
    align-items: center;
     font-size: 12px;
    font-weight: 400;
    color: #999;
}
.content-top-r-box-time img{
    width: 18px;
    height: 19px;
    object-fit: cover;
    margin-right: 8px;
}
.content-bottom{
    width: 100%;
    height: 203px;
    background: url(image/list-bg.png) no-repeat center;
    background-size: cover;
    margin-top: 30px;
    display: flex;
    /* flex: auto; */
    flex-wrap: wrap;
}
.content-bottom li {
    width: 598px;
    height: 100px;
    display: flex;
    align-items: center;
}
.content-bottom li a {
    display: block;
    padding: 0 20px 0 55px;
    position: relative;
    color: #333;
    font-size: 16px;
    font-weight: 400;
}
.content-bottom li a:before{
    content: '';
    width: 4px;
    height: 4px;
    background: url(image/list-point.png) no-repeat center;
    background-size: cover!important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 38px;
}
.content-bottom li a:hover{
    color: #999;
}
.more{
    width: 1160px;
    margin: 20px auto;
    position: relative;
    color: rgb(226, 209, 163);
    font-size: 14px;
    font-weight: 400;
    text-align: right;
}
.more:before {
    content: '';
    width: 1120px;
    border-bottom: 1px dotted #d9d9d6;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
.container-m {
    display: none;
}

/* Some mobile WebViews still report a large layout viewport if viewport meta is ignored.
   Add max-device-width as a fallback to ensure mobile styles apply. */
@media screen and (max-width: 768px), screen and (max-device-width: 1024px){
    html, body{
        width: 100%;
        overflow-x: hidden; /* prevent horizontal scrolling caused by fixed-width blocks */
    }

    .container{ display: none; }
    .container-m{
        display: block;
        position: relative;
        min-height: 100vh;
        overflow-x: hidden;
        /* bg-m.jpg is 750x600 => height = 0.8 * viewport width */
        --hero-h: 80vw;
        padding-top: var(--hero-h); /* keep the visual offset, but make it part of document flow for correct scrolling */
        padding-bottom: 20px;
    }
    .content-box {
        padding: 20px 0;
    }
    /* background layer (empty div) */
    .mobile-box{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: var(--hero-h);
        background: url(image/bg-m.jpg) no-repeat top center / 100% auto;
        pointer-events: none; /* background should not block scrolling/touches */
        z-index: 0;
    }
    
    .container-m .top-title{
        padding: 0 12px;
        position: relative;
        z-index: 1;
    }
    .container-m .top-title .title{
        width: 80vw;
        max-width: 360px;
        height: auto;
        aspect-ratio: 752 / 77;
        background-size: contain;
    }

    .container-m .content-box{
        position: relative;
        z-index: 1;
    }
    .content-top {
        flex-direction: column;
    }
    .content-top-l {
        width: 90%!important;
        height: auto!important;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
      	aspect-ratio: 16 / 9;
    }
    .content-top-r {
        width: 90%!important;
        height: auto!important;
        margin: 20px auto 0;
    }
     .content-top-r  .content-top-r-item{
        margin-bottom: 15px!important;
    }
    .container-m .more{
        width: 100%;
        padding: 0 12px;
    }
    .container-m .more:before{
        width: auto;
        left: 12px;
        right: 56px; /* leave space for "更多" */
    }
    .content-bottom {
        margin-top: 20px!important;
    }
    .content-bottom li{
        height: 50px!important;
        /* margin-bottom: 10px; */
    }
    .r-img {
        border-radius: 5px;
    }
    .tts {
        display: none;
    }
}