html,body{min-width:1200px;height: auto;}
body{font:20px/30px 'Microsoft YaHei';color:#333;background:#FCF4E4;width:100%;height: auto;overflow-x:hidden;}
a{color:#333;}
a:hover{color:#254FC7;}
.w{width: 1280px;margin: 0 auto;}
.titu{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    box-sizing: border-box;
}
.navBox{background-color: #10318E;}
.navBox .w{font-size: 22px;height: 80px;display: flex;justify-content: space-between;align-items: center;}
.navBox a{color:#FFF;padding: 10px 0;}
.navBox a:hover{color:#DECA7C;}
.navBox .home{width: 132px;height: 40px;background:url(../../images/zt/railway20th/icon_logo.png) no-repeat center;object-fit: contain;}
.navBox .home:hover{background-image:url(../../images/zt/railway20th/icon_logo_on.png);}

.typeA ul a,.eco ul a{border-radius: 3px;overflow: hidden;}
.main{padding:40px 0 45px;}
.main>.w>div{margin-bottom: 40px;}
.main h2{width: 100%;height: 60px;margin: 0 auto 20px;}
.main h2 a{width: 100%;height: 100%;margin: 0 auto;display: block;}
.main .data{margin-top: 40px;}
.main ul a img{width: 100%;aspect-ratio: 16 / 9;object-fit: cover;}
.miracle h2{background: url(../../images/zt/railway20th/channel_01.png) no-repeat;}
.joy h2{background: url(../../images/zt/railway20th/channel_02.png) no-repeat;}
.unity h2{background: url(../../images/zt/railway20th/channel_03.png) no-repeat;}
.eco h2{background: url(../../images/zt/railway20th/channel_04.png) no-repeat;}
.spirit h2{background: url(../../images/zt/railway20th/channel_05.png) no-repeat;}
.milestone h2{background: url(../../images/zt/railway20th/channel_06.png) no-repeat;}
.typeA ul a,.eco ul a{background-color: #fff;}
.typeA ul a:hover,.eco ul a:hover{color: #fff;background-color: #254FC7;}
.typeA ul a:nth-child(1) {
    width: 760px;
    height: 518px;
    float: left;
}
.typeA ul a:nth-child(n+2) {
    width: 500px;
    height: 90px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    float: right;
    align-items: center;
}
.typeA ul a:nth-child(1) p,.eco ul a p{
    padding: 0 20px;
    display: flex;
    align-items: center;
    height: 88px;
}
.typeA ul a:nth-child(n+3){margin-top: 17px;}
.float_reverse ul a:nth-child(1){float: right;}
.float_reverse ul a:nth-child(n+2) {float: left;}
.miracle .data img{width:306px;height:160px;}
.eco ul{display: flex;flex-wrap: wrap;justify-content: space-between;}
.eco ul a{width: 412px;}

.swiper {
    box-sizing: border-box;
}

.swiperBox {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
/* 左右遮罩 */
.swiperBox::before,
.swiperBox::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((100% - 1280px) / 2);
  background: rgba(252, 244, 228, 0.7);
  z-index: 10;
  pointer-events: none;
}
.swiperBox::before { left: 0; }
.swiperBox::after { right: 0; }
.swiper-wrapper{padding-bottom: 120px;}
.swiper-slide {
    background-position: center;
    background-size: cover;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;}
.swiper-button-prev,.swiper-button-next{width: 50px;height: 50px;}
.swiperBox .swiper-scrollbar {
    width: 1280px;
    margin: 0 auto;
    height: 30px;
    background: none;
    border-radius: 0;
    position: relative;
}

/* 4px 轨道线，上下居中 */
.swiperBox .swiper-scrollbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #DECA7C;
}

.swiperBox .swiper-scrollbar-drag {
    height: 30px;
    background-color: transparent;
    border-radius: 0;
    position: relative;
    cursor: pointer;
  }

/* 滑块图片，固定 90×30 */
.swiperBox .swiper-scrollbar-drag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 30px;
    background-image: url(../../images/zt/railway20th/icon_thumb.png);
    background-size: 100% 100%;
}
.swiper_A {
    width: 1280px;
    margin: 0 auto;
    overflow: visible !important;
}

/* slide */
.swiper_A .swiper-slide {
    width: 460px;
    border-top: 8px solid #DECA7C;
    background-color: #fff;
    padding:25px 40px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}
.swiper_A .swiper-slide:hover{
    color: #254FC7;
    border-color: #254FC7;
    cursor: pointer;
}
.swiper_A .line{
    position: absolute;
    left: 50%;          /* 线的水平位置，按设计调整 */
    top: calc(100% - 20px);       /* 线从 slide 顶部往下 80px 处开始 */
    width: 40px;         /* 线的粗细 */
    background:url(../../images/zt/railway20th/icon_circle.png) no-repeat top;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.swiper_A .line-bar {
    width: 4px;
    flex: 1;
    background: #DECA7C;
    margin-bottom: 10px;
    margin-top: 50px;
}
.swiper_A .line-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #DECA7C;
    flex-shrink: 0;
}
.swiper_A .swiper-slide:hover .line{
    background-image: url(../../images/zt/railway20th/icon_circle_on.png);
}
.swiper_A .swiper-slide:hover .line>div{
    background: #254FC7;
}

.swiper_A h4{font-size: 26px;margin-bottom: 15px;}

.bg_3{margin-top:-10px;}
.footer{font-size:16px;height: 320px;background:url(../../images/zt/railway20th/bg_bottom.jpg) no-repeat bottom center;}
.footer .other, .footer .other a{color: #CBAF78;}
.footer .other{background:none;line-height: 28px;height:284px;padding-top:90px;}

/*返回顶部*/
#goToTop{position:fixed;right:50%;margin-right:-700px;bottom:50px;z-index:5;}
#goToTop>div{font-size:20px;width:60px;height:60px;line-height:60px;text-align:center;color:#FFF;background:rgba(0,0,0,0.4);cursor:pointer;}