html,body {
    background-color: #7A2221;
}

.yyj2_main{
    padding-top: 2.8333rem;
    padding-bottom: 3.75rem;
    height: calc(100vh - 4.3rem);
    width: 100%;
    background: url(../../default/images/yyj2_2.png) no-repeat 0 100%/auto 100% ;
}
.yyj2_bgc{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    /* background-color: black; */
    z-index: 999999;
    overflow: hidden;
}
.yyj2_bgc2{
    position: fixed;
    width: 100%;
    height: 100%;
    /* bottom: 10rem; */
    bottom: 30%;
    left: 0;
    animation-name: example2;
    animation-duration: 3s;
    animation-timing-function: ease; /* 缓动函数 */
    animation-delay: 1s; /* 延迟2秒开始 */
    animation-iteration-count: 1; /* 动画执行一次 */
    animation-fill-mode: forwards; /* 保持动画结束时的状态 */
}
.yyj2_bgc2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
.yyj2_bgc3{
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 80%;
    left: 50%;
    transform: translate(-50%,50%);
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: ease; /* 缓动函数 */
    animation-delay: 1s; /* 延迟2秒开始 */
    animation-iteration-count: 1; /* 动画执行一次 */
    animation-fill-mode: forwards; /* 保持动画结束时的状态 */
    transform-origin: center 80%;
    pointer-events: none;
}
.yyj2_bgc3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
@keyframes example {
    0% {
        bottom: 80%;
        transform: translate(-50%,50%) scale(1);
    }
    90% {
        
        opacity: 1;
    }
    99% {
        display: block;
    }
    100% {
        bottom: -120%;
        transform: translate(-50%,50%) scale(100);
        opacity: 0;
        display: none;
    }
  }

  @keyframes example2 {
    0% {
        bottom: 30%;
    }
    90% {
        
        opacity: 1;
    }
    99% {
        
        bottom: 1%;
        /* display: block; */
    }
    100% {
        bottom: 0%;
        /* opacity: 0.5; */
        /* display: none; */
    }
  }
.yyj2_box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

}
.yyj2_L{
    width: 27.4167rem;
    flex: none;

}

.yyj2_L_title{
    height: 84px;
}
.yyj2_L_title{
    height: 100%;
}
.yyj2_L_box{
    position: absolute;
    width: 19.375rem;
    top: 0;
    right: 100%;
    right: 0;
}
.yyj2_nav_bnd{
    margin-top: 2.0833rem;
}
.yyj2_nav_title{
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 100%;
    color: #FFFFFF;
}
.yyj2_nav_wn{
    margin-top: 2.0833rem;
}
.yyj2_nav_p{
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
}
.yyj2_nav_p2{
    width: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
}
.yyj2_nav_a{
    font-weight: 400;
    font-size: 0.6667rem;
    line-height: 100%;
    color: #FFFFFF;
    vertical-align: top;
}
.yyj2_nav_a2{
    font-weight: 600;
    font-size: 0.6667rem;
    line-height: 100%;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    border-left: 0.0417rem solid #ffffff;
    padding-left: 0.2083rem;
    width: 100%;
}

.yyj2_nav_p:hover{
    background: linear-gradient(90deg, rgba(57, 9, 8, 0.4) 0%, rgba(57, 9, 8, 0) 100%);

}
.yyj2_nav_p2:hover{
    background: linear-gradient(90deg, rgba(57, 9, 8, 0.4) 0%, rgba(57, 9, 8, 0) 100%);

}
.yyj2_nav_act{
    background: linear-gradient(90deg, rgba(57, 9, 8, 0.4) 0%, rgba(57, 9, 8, 0) 100%);
}
.yyj2_nav_ul{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5833rem 0;
}
.yyj2_R{
    flex: 1;
    width: 100%;
    height: 100%;
}
.sb_box{
    top: 0;
    right: 0;
    width: 34.7083rem;
    height: 100%;
    background: linear-gradient(270deg, #7A2221 0%, rgba(122, 34, 33, 0) 100%);
    z-index: 9;
    pointer-events: none;
}
.sb_img{
    width: 2rem;
    height: 2rem;
    margin-left: 0.3333rem;
}
.sb_img img{
    width: 100%;
    height: 100%;
    vertical-align: top;
}
.sb_ts{
    font-weight: 400;
    font-size: 0.8333rem;
    line-height: 150%;
    color: #FFFFFF;
    
}
.sb_cen{
    display: flex;
    align-items: center;
    top: 50%;
    right: 65px;
    transform: translateY(-50%);
}
.swiper-container_yyj {
    width: 100%;
    height: 100%;
    /* height: 40rem;
    height: 40rem; */
}
.yyj2_R_img{
    height: 100%;
    flex: 1;
    box-sizing: border-box;
}
.yyj2_R_img img{
    height: 100%;
    max-width: 100%;
}
.yyj2_swiper_li{
    height: 100%;
    display: flex;
}
.swiper-slide {
    height: 100%;
    width: auto;
}

.yyj2_swiper_top{
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    height: 1.5rem;
}
.yyj2_swiper_top_name{
    font-weight: 600;
    font-size: 1rem;
    color: #FFFFFF;
    margin-right: 0.8333rem;
}
.yyj2_swiper_top_x{
    flex: 1;
    width: 100%;
    border-top: 0.0417rem solid #FFFFFF;

}
.yyj2_swiper_li_L{
    flex: none;
}
.yyj2_swiper_li_r{
    width: 3.9583rem;
    padding: 0 1.4167rem;
}
.yyj2_R_img_box{
    height: calc(100% - 2.75rem);
}
.yyj2_swiper_li_box{
    display: inline-block;
    height: 100%;
    max-width: 100%;
}
.yyj2_sf_img{
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
    width: 100vw;
    height: auto;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}
.yyj2_sf_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.yyj2_bgc4{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99;

}
html{
    overflow: hidden;
}