
/* 首页 - 动态 / 案例 2022.11.25 */

.din_dt{ background: #f6f6f6; padding: 80px 0 100px;}
.din_dt .cont{ padding-top: 70px; position: relative;}

.din_dt .li_box{ background:#fff; height:498px; position:relative; box-sizing:border-box; transition: 0.4s; -webkit-transition: 0.4s; margin: 0 15px;}
/* .din_dt .li_box:hover{ box-shadow:2px 0 5px rgba(0,0,0,0.13);} */
.din_dt .li_box span{ display:block;}
/* .din_dt .li_box .pic{ display:none;} */
.din_dt .li_box .pic img{ max-width: 100%;}
.din_dt .time{ margin-bottom:25px; font-family: 'COPYFONTS.COM_NETTO-OT-LIGHT'; color:#666; position:absolute; left:40px; top:20px; color:#fff; box-sizing:border-box;}
.din_dt .time i{ display:block;}
.din_dt .time i.i1{ font-size:60px; line-height:62px;}
.din_dt .title{ margin-bottom:15px; padding: 45px 40px 0;}
.din_dt .title a{ color:#333; font-size:20px; line-height:30px;}
.din_dt .title a:hover{ color:#c7000a;}
.din_dt .zhaiy{ line-height:22px; color:#666;}
.din_dt .more{ position:absolute; left:40px; bottom:40px;}
.din_dt .more a{ color:#d42929; font-weight:bold;}
.din_dt .more a:hover{ text-decoration:underline;}

.din_dt .swiper_btn{ position:absolute; left: 0; top: 50%; width: 100%;}
.din_dt .swiper_btn .arrow > i {width: 15px;height: 26px; top: auto; margin-top: 0;}
.din_dt .swiper_btn .arrow .arrow-left {background: url(../images/index_ryjxicon1a.png) left center no-repeat; left: -40px;top:0;}
.din_dt .swiper_btn .arrow .arrow-right {background: url(../images/index_ryjxicon2a.png) left center no-repeat;left:auto; right: -40px;top:0;}
.din_dt .swiper_btn .arrow > i:hover {background-position: right center;}

.din_al{ padding: 80px 0 100px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.din_al .cont{ padding-top: 70px;}
.din_al .in_title .cn a,
.din_al .in_title .en{ color: #fff;}
.din_al .con_l,
.din_al .con_r{ width: 50%; float: left; box-sizing: border-box;}
.din_al .con_l{ position: relative;}
.din_al .con_l .li_box a{ position: relative; display: block;}
.din_al .con_l .li_box a img{ max-width: 100%;}
.din_al .con_l .li_box .text{ position: absolute; top: 42%; left: 0; width: 100%; font-size: 24px; line-height: 40px; font-weight: 300; text-align: center; color: #333; box-sizing: border-box; padding: 0 80px; transition: all 0.4s;}
.din_al .con_l .li_box a:hover .text{ color: #c7000a;}
.din_al .con_l .swiper_btn .arrow .arrow-left,
.din_al .con_l .swiper_btn .arrow .arrow-right{ width: 44px; height: 64px;}
.din_al .con_l .swiper_btn .arrow .arrow-left { background: url(../images/d_icon1.png) left center no-repeat #cc0000;}
.din_al .con_l .swiper_btn .arrow .arrow-right { background: url(../images/d_icon2.png) left center no-repeat #cc0000;}

.din_al .con_r{ padding-left: 60px; position: relative;}
.din_al .con_r li{ padding: 14px 0;}
.din_al .con_r .tit a{ font-size: 20px; font-weight: bold; color: #fff;}
.din_al .con_r .tit a:hover{ text-decoration: underline;}
.din_al .con_r .tet{ font-size: 14px; line-height: 22px; color: #fff; padding-top: 10px;}
.din_al .con_r .swiper_btn .arrow > i {width: 26px;height: 15px; margin-top: 0; z-index: 10;}
.din_al .con_r .swiper_btn .arrow .arrow-left {background: url(../images/d_icon3.png) left center no-repeat; left: auto; right: 0; top: -10px;}
.din_al .con_r .swiper_btn .arrow .arrow-right {background: url(../images/d_icon4.png) left center no-repeat; left:auto; right: 0; top: auto; bottom: -10px;}


/* 首页进入效果 */
.din_dt .swiper-slide:nth-child(1){transform: translate(-400px,0);opacity: 0;transition: all 1s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(2){transform: translate(-300px,0);opacity: 0;transition: all 0.9s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(3){transform: translate(-200px,0);opacity: 0;transition: all 0.8s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(4){transform: translate(-100px,0);opacity: 0;transition: all 0.7s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(5){transform: translate(400px,0);opacity: 0;transition: all 1s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(6){transform: translate(300px,0);opacity: 0;transition: all 0.9s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(7){transform: translate(200px,0);opacity: 0;transition: all 0.8s 0.3s ease-out;}
.din_dt .swiper-slide:nth-child(8){transform: translate(100px,0);opacity: 0;transition: all 0.7s 0.3s ease-out;}
.din_dt.in_anm .swiper-slide{transform: translate(0,0);opacity: 1;}

.din_al .con_l{transform: translate(-100px,0);opacity: 0;transition: all 1.2s 0.5s ease-out;}
.din_al.in_anm .con_l{transform: translate(0,0);opacity: 1;}
.din_al .con_r{transform: translate(100px,0);opacity: 0;transition: all 1.2s 0.5s ease-out;}
.din_al.in_anm .con_r{transform: translate(0,0);opacity: 1;}




/*响应式*/
@media screen and (max-width:1400px){
    .din_dt .title{ height: 60px; overflow: hidden;}
    .din_al .con_r .tit a{ height: 30px; overflow: hidden;}
    .din_al .con_r .tet{ height: 46px; overflow: hidden;}
    .din_al .con_l .li_box .text{ font-size: 20px;}
}

@media screen and (max-width:1200px){
    .din_dt .li_box{ height: 400px;}
    .din_dt .cont{ padding-top: 50px;}
    .din_dt .swiper_btn .arrow .arrow-left{ left: -10px;}
    .din_dt .swiper_btn .arrow .arrow-right{ right: -10px;}
    .din_al .cont{ padding-top: 50px;}
    .din_al .con_l .li_box .text{ top: 30%;}

}

@media screen and (max-width:1002px){
    .din_al .con_l, 
    .din_al .con_r{ float: none; width: 100%;}
    .din_al .con_l .li_box a img{ width: 100%;}
    .din_al .con_r{ padding-left: 0; padding-top: 50px;}
    .din_al .con_r .swiper_btn .arrow .arrow-left{ top: 20px;}

}

@media screen and (max-width:758px){
    .din_dt{ padding: 50px 0;}
    .din_dt .cont{ padding-top: 30px;}
    .din_dt .title{ padding: 30px 30px 0;}
    .din_dt .title a{ font-size: 18px;}
    .din_dt .time{ left: 30px;}
    
    .din_al{ padding: 50px 0;}
    .din_al .cont{ padding-top: 30px;}
    .din_al .con_l .li_box .text{ font-size: 16px; line-height: 28px; padding: 0 60px; height: 54px; overflow: hidden; top: 40%;}
    .din_al .con_r .tit a{ font-size: 16px;}
    .din_al .con_r .tet{ font-size: 12px;}

}

@media screen and (max-width:479px){

}



