/* 标题 */
.index-hr{
    margin-bottom: unset;
    border-color: #999999;
    opacity: .5;
}

article{
    background: #f3f3f3;
}

.s_subt{
    font-size: var(--f20);
    color: #414141;
    font-weight: 300;
}


.news_bg.move_bg .mv_img{
    left: -56rem;
    top: 2rem;
    width: 80rem;

}



/* 轮播 */
.index-banner {
	position: relative;
	width: 100%;
	z-index: 0;
	--swiper-navigation-sides-offset: 2.5rem;
    height:100vh;
    transition: all .5s;
}

.index-banner .img_db{
    transform: scale(1.1);
    transition: transform 2.4s cubic-bezier(.38,0,0,1);
}

.index-banner .swiper-slide-active .img_db{
    transform: scale(1);

}

.index-banner .item{
    width:100%;
    height: 100%;
}
.index-banner .item:after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 60%;
	z-index: 1;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 100%);
}

.index-banner .img {
	height: 100%;
	width: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.index-banner .img video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.index-banner .img:after {
	padding-top: 50%;
}

.index-banner .mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    z-index: 9;
}

.index-banner .wp {
	height: 100%;
}

.index-banner .txt {
	color: #fff;
    position: absolute;
    bottom: 3rem;
}

.index-banner .txt h3{
    font-size: var(--f58);
    letter-spacing: .04em;
    opacity: 0;
}
.index-banner .txt h4{
    font-size: var(--f24);
    font-weight: 300;
    opacity: 0;
}
.index-banner .txt h4 b{
    font-weight: 600;
}

.index-banner .banner-btn{
    font-size: var(--f16);
    padding: .4rem 2rem;
    border: 2px solid var(--themeColor);
    border-radius: 10rem;
    margin-bottom: 2rem;
    display: inline-block;
    opacity: 0;
    transition: all .5s;
}

.index-banner .banner-btn:hover{
    background: var(--themeColor);
}


.index-banner .swiper-pagination  .line {
	display: block;
	width: 2rem;
	height: 1px;
	background: rgba(255, 255, 255, 1);
	position: relative;
	left: 0;
	/* width: 100%; */
	margin-top: 0.6rem;
    transition: width .5s;
}

.index-banner .swiper-pagination .line .line-act {
	display: block;
	width: 0;
	height: 1px;
	background: var(--themeColor);
	position: absolute;
	left: 0;
	bottom: 0;
	transition: 0s;
}

.index-banner .swiper-pagination{
    display: flex;
    width: auto;
    right: var(--wpPaddingNum);
    left: auto;
    top: auto;
    bottom: 3rem;
    gap:1rem ;
    
}

.index-banner .swiper-pagination .line.on{
	width: 5rem;
}

.index-banner.active{
    height: 80vh;
}



/* 关于 */
.s_about{
    padding-bottom: 26rem;
    position: relative;
}
.s_about .flexjs{
    gap:16rem;
}
.s_about .rt .item{
    display: flex;
    background: rgba(255, 255, 255, .3);
    padding: 1rem 2rem;
    box-shadow: 0 2px 14px -6px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    align-items: center;
    width: 26rem;
}
.s_about .rt .item .ico{
    height: auto;
    width: 1.8rem;
    object-fit: contain;
    margin-right: 2rem;
}
.s_about .szgd .num span{
    color: var(--themeColor);
    font-size:var(--f91);
    line-height: 1;
    font-weight: 600;
}
.s_about .rt .item .szgd .num em{
    font-weight:400;
    font-size:var(--f20);
    color:#575a5e;
}
.s_about .rt .item  p{
    font-weight:500 ;
    font-size:var(--f18);
    color:#575a5e;
    margin-left: 3rem;
    flex: 1;
    text-align: right;
}

.s_about .lt .tt{
    font-size:var(--f44) ;
}
.s_about .lt .subtt{
    font-size:var(--f44) ;
    font-weight: 300;
}
.s_about .lt .ar_article{
    margin-top: 1rem;
    font-size: var(--f18);
    color: #656565;
}
.s_about .lt .link{
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 3rem;
}
.s_about .lt .link .cir-icon{
    background:var(--themeColor);
    transition: all .5s;
}
.s_about .lt .link .cir-icon i{
    color: #fff;
}
.s_about .lt .link span{
    font-size: var(--f18);
    color: #2a2a2a;
}
.s_about .lt .link:hover .cir-icon{
    transform: rotate(45deg);
}
.s_about .yun{
    position: absolute;
    background: url(../images/yun.png) top center/100% auto;
    width: 100%;
    bottom: 0;
    height: 14rem;
}




/* 消防模拟 */
.s_xf {
    background: linear-gradient(180deg,#fff,#f3f3f3);
}
.s_xf .rt .img-db{
    width: 50rem;
    height: auto;
    aspect-ratio: 1000/480;
    border-radius: 1rem;
}
.s_xf .item{
    gap: 10rem;
    margin-top: 3rem;

}
.s_xf .lt{
    flex: 1;
}
.s_xf .lt .tt{
    font-size: var(--f36);
    font-weight: bold;
    line-height: 1.2;
    color: #232626;
}

.s_xf .lt .subtitle{
    font-size: var(--f18);
    font-weight: 300;
    color: #787878;
    line-height: 1.5;
    margin-top: 1rem;
}
.s_xf .lt .s_more{
    margin-top: 2rem;
    font-size: var(--f15);
    padding: .4em .75rem .4rem 1.6875rem;
}
.s_xf .lt .s_more svg{
    background: #fff;
    width: 1.9rem;
}
.s_xf .lt .s_more svg path{
    fill: var(--themeColor);
    transition: all .5s;
}
.s_xf .lt .s_more:hover svg path{
    fill: var(--themeColor2);
}
.s_xf .more-type a{
    padding: 0 1rem;
    border-left:1px solid #232626;
    line-height: 1;
    font-size: var(--f20);
    color: #232626;
    transition: all .5s;
}
.s_xf .more-type a:last-child{
    border-right: 1px solid #232626;
}
.s_xf .more-type a:hover{
    color: var(--themeColor);
}




/* 消防装备 */
.s_xfzb .swiper{
    overflow: unset;
}
.s_xfzb .cont{
    padding: 0 2.3rem;
}



/* 消防知识 */
.s_xfzs .swiper{
    width: 50rem;
    max-width: 100%;
    height: auto;
    aspect-ratio:1024/600;
}

.s_xfzs .swiper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transform: scale(1.1); */
    /* transition: transform 2.4s cubic-bezier(.38,0,0,1); */
}


.s_xfzs .swiper .img{
    overflow:hidden;
    border-radius: 1rem;
}

.s_xfzs .swiper .swiper-slide-active .img{
    border: 1px solid #fff;
}
.s_xfzs .swiper-3d .swiper-slide-shadow-right,
.s_xfzs .swiper-3d .swiper-slide-shadow-left{
    overflow:hidden;
    border-radius: 1rem;
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
}


.s_xfzs .flex-one{
    position: relative;
}
.s_xfzs .flex-one .rt{
    z-index: 2;
}
.s_xfzs .flex-one .bg{
    backdrop-filter: blur(1rem);
    background-color: rgba(255, 255, 255, .6);
    border-radius: 1rem;
    overflow:hidden;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 95%;
    height: 100%;
}

.s_xfzs .flex-one .rt{
    display: flex;
    align-items: center;
}
.s_xfzs .flex-one .rt .line-txt h5{
    font-size: var(--f36);
    color: #232626;
    font-weight: 400;
}
.s_xfzs .flex-one .rt .line-txt .line{
    font-size: var(--f36);
    width: 1.5em;
    height: 1px;
    background: var(--themeColor);
    margin-top: 1.5rem;
}
.s_xfzs .flex-one .rt .txt{
    padding: 0 4rem;
}
.s_xfzs .flex-one .rt .txt .ar_article{
    font-size: var(--f18);
    color: #1b1f1f;
    margin-top: 1.5rem;
}

.s_xfzs .tools{
    margin-top: 2rem;
}
.s_xfzs .tools .item img{
    height: 2.4rem;
    width: auto;
    text-align:center;
    margin: 0 auto;
    display:block ;
}
.s_xfzs .tools .item p{
    font-size: var(--f16);
    margin-top: .6rem;
}

.s_xfzs .swiper-button{
    border-radius: 100%;
    width: 2.6rem;
    height: auto;
    aspect-ratio: 1/1;
    background-color: rgba(255, 255, 255, .8);
    --swiper-navigation-sides-offset:6rem;
}

.s_xfzs .swiper-button i{
    color: #333;
    font-size: var(--f16);
}
.s_xfzs .swiper-button::after{
    display: none;
}
.s_xfzs .swiper-button-next{
    background:var(--themeColor) ;
}
.s_xfzs .swiper-button-prev{
    transform: rotate(180deg);
}

.s_xfzs .swiper-button-next i{
    color: #fff;
}




/* 消防应急 */
.s_xfyj .item h5{
    font-size: var(--f36);
    font-weight: 400;
    padding:0 1.5rem ;
    /* opacity: 0; */
    transition: all .5s;

}

/* .s_xfyj .swiper-slide-active .item h5{
 *     opacity: 1;
 * } */
.s_xfyj .item .img-db{
    height: auto;
    aspect-ratio: 880/502;
    border-radius: 1rem;
    overflow: hidden;
    margin-top: 1rem;
}
.s_xfyj .cont{
    position: relative;
}
.s_xfyj .cont::before{
    content: '';
    display: block;
    height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
    background: linear-gradient(-90deg, rgba(239, 239, 239, 0) 0%, #efefef 100%);
	z-index: 9;
    pointer-events: none;
}

.s_xfyj .cont::after{
    content: '';
    display: block;
    height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 25%;
    background: linear-gradient(90deg, rgba(239, 239, 239, 0) 0%, #efefef 100%);
	z-index: 9;
    pointer-events: none;
}

.s_xfyj .swiper-button{
    border-radius: 100%;
    width: 4rem;
    height: auto;
    aspect-ratio: 1/1;
    backdrop-filter: blur(.6rem);
    background-color: rgba(156, 156, 157, .4);
    --swiper-navigation-sides-offset:24.5rem;
    margin-top: 0;
}

.s_xfyj .swiper-button i{
    color: #fff;
    font-size: var(--f24);
}
.s_xfyj .swiper-button::after{
    display: none;
}
.s_xfyj .swiper-button.swiper-button-prev{
    transform: rotate(180deg);
}




/* 案例 */
.s_anli{
    position: relative;
    height: 44rem;
}
.s_anli .index-title h5{
    color: white;
}
.s_anli .wp{
    position: relative;
    width: 100%;
    height: 100%;
}
.s_anli .slide-for{
    left: 0;
    top: 0;
}
.s_anli .grid{
    gap:1rem;
}
.s_anli .slide-nav .item{
    padding: 2.4rem 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    backdrop-filter: blur(.1rem);
    background-color: rgba(245, 245, 245, .9);
    border-radius: 1rem;
    overflow: hidden;
    transition: all .5s;
}
.s_anli .slide-nav .item h5{
    flex: 1;
    font-size: var(--f20);
}
.s_anli .slide-nav{
    position: absolute;
    bottom: 0;
    left: var(--wpPaddingNum);
}
.s_anli .slide-nav .item .cir-icon{
    background: #fff;
    transition: all .5s;
}
.s_anli .slide-nav .item .cir-icon i{
    color: #333;
    transition: all .5s;
}
.s_anli .slide-nav .item:hover{
    background-color: #fff;
}

.s_anli .slide-nav .item:hover .cir-icon{
    transform: rotate(45deg);
    background: var(--themeColor);
}
.s_anli .slide-nav .item:hover .cir-icon i{
    color: #fff;
}




/* 新闻资讯 */
.s_news .cont{
    position: relative;
    height: 33rem;
    padding-left: var(--wpPaddingNum);
}

.s_news .cont .slide-for > .li{
    opacity: 0;
    transform: translateY(15%);
    transition: opacity .5s cubic-bezier(.38,0,0,1), transform 1s cubic-bezier(.38,0,0,1);
}
.s_news .cont .slide-for > .li.on{
    opacity: 1;
    transform: translateY(0);
}

.s_news .cont .item{
    backdrop-filter: blur(.75rem);
    background-color: rgba(255, 255, 255, .6);
    display: block;
    border-radius: .8rem;
    overflow:hidden;
}

.s_news .cont .item .msg{
    padding: 2.8rem 1.5rem;
}
.s_news .cont .item .msg small{
    font-size:var(--f14);
    font-family: 'popr-font';
    display:block ;
    margin-bottom: 1.2rem;
    color: #999999;
}

.s_news .cont .item h3{
    font-size: var(--f24);
    font-weight: 300;
    height: calc(1em * 1.5 * 3);
    line-height: 1.5;
}
.s_news .cont .item .cir-icon{
    border: 1px solid #bdbdbd;
    width: 1.6rem;
    position: absolute;
    margin-top: 3rem;
}
.s_news .cont .item .cir-icon i{
    color: #bdbdbd;
    font-size: var(--f16);
}

.s_news .cont .item .photo{
    height: 13rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.s_news .cont .item .photo .pic{
    filter: grayscale();
    opacity: .2;
    transition: all .5s cubic-bezier(.38,0,0,1);
    transform: translateY(42%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.s_news .cont .swiper-slide-next .item{
    box-shadow: 0 .2rem .6rem .1rem rgba(35, 38, 38, .1);
}

.s_news .cont .swiper-slide-next .item .photo .pic{
    filter: grayscale(0%);
    opacity: 1;
    transform: translate(0, 0);
}
.s_news .cont .fot-tool{
    position: absolute;
    bottom: 0;
    right: 4rem;
    display: flex;
    align-items: center;
    gap:1rem ;
    z-index: 9;
}
.s_news .cont .fot-tool .line{
    width: 36rem;
    border-top: 1px dashed #292e2e;
    height: 1px;
}
.s_news .cont .fot-tool .swiper-btn div{
    width: 4.2rem;
    cursor: pointer;
    background: #fff;
    border: none;
}
.s_news .cont .fot-tool .swiper-btn div i{
    color: #333;
    transition: all .5s;
}
.s_news .cont .fot-tool .swiper-btn div:hover{
    background-color: var(--themeColor);
}
.s_news .cont .fot-tool .swiper-btn div:hover i{
    color: #fff;
}
.s_news .cont .fot-tool .swiper-btn .swiper-button-prev{
    transform: rotate(-180deg);
}