@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
div{text-align:left}
a img{border:0;height:100%;}
body{}
ul, ol, li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000; text-decoration:none}
/* body{
    background-color: #333333
} */
/* 效果CSS开始 */

.li img {
    width: 100%;
    height: 100%;
}
/* 新增移动端适配代码 */
@media screen and (max-width: 767px) {
    
    .mod18 img {
            width: 80%;
    }
    
    .mod18 .cf a {
        text-align: center;
    }
    
  /* 重置容器宽度 */
  .mod18 {
    width: 100% !important;
    max-width: 100vw;
    overflow: hidden;
  }

  /* 主轮播区改造 */
  .mod18 .picBox {
    width: 100% !important;
    height: auto !important;
    padding: 20px 0 0 0 !important;
    aspect-ratio: 16/9; /* 按视频比例控制高度 */
  }

  .mod18 .picBox ul {
    position: relative !important;
    height: auto !important;
  }

  .mod18 .picBox li {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }

  .mod18 .picBox a {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  /* 缩略图区改造 */
  .mod18 .listBox {
    width: 100% !important;
    height: auto;
    padding: 15px 0;
  }

  .mod18 .listBox ul {
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 0 !important;
  }

  .mod18 .listBox li {
    width: 25% !important; /* 每行显示4个 */
    height: auto;
    padding: 5px;
    box-sizing: border-box;
  }

  .mod18 .listBox li a {
    width: 100% !important;
    height: auto;
    aspect-ratio: 4/3;
  }

  /* 按钮定位调整 */
  .mod18 .btn {
    transform: scale(0.8); /* 缩小导航按钮 */
  }
  .mod18 #prevTop,
  .mod18 #nextTop {
    top: 30% !important;
  }
  .mod18 #prev,
  .mod18 #next {
    top: auto !important;
    bottom: 20px;
  }
}

/* 通用响应式图片 */
.mod18 img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.mod18{width:677px;position:relative;margin:0 auto;}
.mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:10px;background:url(../images/prevBtn.png) no-repeat;}
.mod18 #prevTop,.mod18 #nextTop{top:250px;width:32px;height:48px;}
.mod18 #prev,.mod18 #next{top:490px;width:10px;height:16px;}
.mod18 #prevTop{background:url(../images/prevBtnTop.png) 0 0 no-repeat;}
.mod18 #nextTop{background:url(../images/nextBtnTop.png) 0 0 no-repeat;}
.mod18 .next{right:10px;background:url(../images/nextBtn.png) no-repeat;}
.mod18 li{float:left;}
.mod18 .cf li{position:relative;color:#fff;}
.mod18 .cf a{display:block;width:526px;height:377px;position:absolute;color:#fff;}
.mod18 .cf li span{display:block;width:486px;position:absolute;left:75px;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.mod18 .picBox{
    /*width:526px; */
    width:526px; 
    
    height:394px; padding-left:75px; padding-right:76px;position:relative;overflow:hidden;padding-top:40px;
    
}
.mod18 .picBox ul{height:377px;position:absolute; left:0;}
.mod18 .picBox li{padding-left:75px; padding-right:1px; width:526px;height:377px;}
.mod18 .listBox{width:642px;height:100px;margin:0 auto;position:relative; padding-top:15px;overflow:hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.mod18 .listBox ul{height:88px;
/*position:absolute; */
padding-left:12px;
    
}
.mod18 .listBox li{width:127px;height:77px;cursor:pointer;position:relative; padding:5px 0 0 0;opacity: 1;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:108px;height:77px;}
.mod18 .listBox img{}
.mod18 .listBox .on a{opacity: 1;}
.mod18 .listBox .on img{opacity: 1;}
.mod18 .listBox .on i{display:block;}
.listBox img{width: 100%;height:100%;object-fit:cover;}













/* 修改后的移动端样式 */
@media screen and (max-width: 767px) {
    .mod18 {
        width: 100% !important;
        max-width: 100vw;
        overflow: visible;
    }

    .mod18 .picBox {
        width: 100vw !important;
        height: 56.25vw;
        padding: 0 !important;
    }

    .mod18 .picBox ul {
        height: 100% !important;
    }

    .mod18 .picBox li {
        width: 100vw !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }

    .mod18 .listBox {
        width: 100vw !important;
        height: 22vw !important;
        padding: 10px 0;
    }

    .mod18 .listBox ul {
        display: block;
        white-space: nowrap;
        padding-left: 12px;
    }

    .mod18 .listBox li {
        width: 20vw !important;
        height: 15vw;
        display: inline-block;
        margin-right: 2vw;
    }

    .mod18 .btn {
        transform: scale(0.75);
        opacity: 0.9;
    }
    #prevTop, #nextTop { top: 35% !important; }
    #prev, #next { bottom: 12px !important; }
    
       /* 内容项特殊处理 */
    .mod18 .picBox li:last-child {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #fff; /* 确保文字内容背景可见 */
    }
    
    .mod18 .picBox li:last-child a {
        position: static !important; /* 解除绝对定位限制 */
        width: 90% !important;
        height: auto !important;
        padding: 20px;
        transform: none !important;
    }
}