@import "./common.less";

body {
	font-size: var(--ft16);
	color: #000;
	.d-flex;

	.flex-column;
	min-height: 100vh;
    --main:1200px;
	@media (max-width: 768px) {}
}

main {
	flex: 1;
}

        .splitting {
            --delay: 0s;
            overflow: hidden;
        }

        .splitting .char {
            display: inline-block;
            visibility: visible;
            opacity: 0;
            transform: translateY(100%);
            transition: all 1s;
            transition-delay: calc(var(--delay) + (.5s * var(--char-index) / var(--char-total)));
        }

        .animate__animated .char {
            opacity: 1;
            transform: translateY(0);
        }
.pagenum{
    font-size: vaR(--ft14);
    a,  span{
        
        border-radius: 5px;
    }
    .next-page,
    .prev-page{
        padding: 0 var(--p15);
        border-radius: 5px;
        border-color: var(--bgc);
        color: var(--bgc);
    }
}
.backtop {
	opacity: 0;
	width: 40px;
	aspect-ratio: 1/1;

	background: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	border: none;
	position: fixed;
	right: var(--p20);
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
	bottom: vaR(--p50);
	transition: all 0.3s;
	visibility: hidden;

	.arrow path {
		fill: var(--ftc);
	}



	&:hover .arrow {
		animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}

	@keyframes slide-in-bottom {
		0% {
			transform: translateY(10px);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

}
.topBanner{
     --swiper-pagination-color:#fff;

    .item{
        aspect-ratio: 1920/500;
    }
}
.titleCom{
    text-align: center;
    margin-bottom: var(--p40);
    h1{
        font-size: vaR(--ft40);
    }
    .key{
       color: rgba(25, 31, 43, 0.4);
       font-size: var(--ft20);
    }
}
.CaseSection{
    .head{
        width: 90%;
        font-size: var(--ft20);
        margin: vaR(--p50) auto var(--p30);
        border-bottom: 4px solid #D8D8D8;
        .flex-center;
        .jc-se;
        padding-bottom: vaR(--p10);
        gap: var(--p30);
        .item{
            cursor: pointer;
            &.layui-this,
            &:hover{
                .ftc;
            }
        }
        
    }
    .body{
         .layui-tabs-item {
          display: block;
          opacity: 0;
          visibility: hidden;
          transform: translateY(10px);
          transition: all 0.5s ease;
          height: 0;
          overflow: hidden;
        }
        
        .layui-tabs-item.layui-show {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          height: auto;
        }
    }
}
.caseList{
    .d-grid;
    .grid4;
    gap: var(--p30);
    *{
        transition: all 0.3s;
    }
    .item{
        
        .d-flex;
        .flex-column;
        gap: var(--p10);
        color: #fff;
        font-size: vaR(--ft20);
        aspect-ratio: 250/370;
          width: 100%;
	            height: 100%;
        &:hover{
           .con{
                opacity: 1;
               padding: var(--p35) 0;
           }   
        }
    }
    .img{
        flex: 1;
        position: relative;
     border-radius: 6px;
            color: #fff;
    }
    .sub{
        opacity: 0.6;
        font-size: var(--ft14);
        margin-top: var(--p10);
    }
    .block{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: var(--p20);
        background: rgba(0,0,0,0.5);
        .d-flex;
        .flex-column;
        .jc-fe;
    }
    hr{
        border: none;
        width: 2em;
        height: 4px;
        .bgc;
    }
    h5{
        color: #fff;
        .line-clamp1;
    }
    .con{
        opacity: 0;
        overflow: visible;
        .bgc;
        .flex-center;
        height: 0;
        border-radius: 6px;
      
    }
}
header {
    background: #fff;
    position: sticky;
	&.bgcolor {
		.backtop {
			visibility: visible;
			opacity: 1;
		}
	}
	.logo{
	    padding-left: 40px;
	}
	.layui-nav .layui-nav-item{
	    line-height: 80px;
	}
	.layui-nav .layui-nav-item a{
	    color: #000;
	    font-size: vaR(--ft18);
	    padding: 0 var(--p30);
	}
	.layui-nav .layui-nav-item a:hover{
	    background: #fff;
	    .ftc;
	} .layui-nav .layui-this a{
	    .bgc !important;
	    color: #fff !important;
	}
	.layui-nav .layui-this:after, .layui-nav-bar{
	    display: none;
	}
}

footer{
    color: #fff;
    background: #191F2B;
    a[href]{
        &:hover{
            transition: all 0.3s;
            opacity: 1;
        }
    }
    .foot1{
        padding: var(--p30);
        .flex-center;
    }
    .foot2{
        
        border: 1px solid rgba(255,255,255,0.5);
        border-left: 0;
        border-right: 0;
        padding: var(--p20);
          nav{
            flex-wrap: wrap;
            .flex-center;
            
            gap: var(--p30);
            li{
            	a{
            		color:#ffffff !important;
            	}
            }
            
        }
    }
    .foot3{
        padding: var(--p20);
        padding-bottom: var(--p10);
           ul{
            .flex-center;
            flex-wrap: wrap;
            
            gap: var(--p60);
        }
        a{
            
            opacity: 0.6;
        }
    }
    .foot4{
        padding: var(--p10) var(--p20);
        ul{
            .flex-center;
            flex-wrap: wrap;
            
            gap: var(--p10);
        }
        a{
            opacity: 0.6;
        }
        font-size: var(--ft14);
    }
}
.newList{
    .d-grid;
    .item{
        padding: vaR(--p30) var(--p20);
        border-bottom: 1px solid #E8EEF7;
        .d-grid;
        grid-template-columns: 0.3fr 1fr;
        gap: var(--p30);
        &:hover{
            h5{
                .ftc;
            }
        }
        .img_100{
        	aspect-ratio: 84 / 47;
        }
    }
    .img{
        position: relative;
        border-radius: 8px;
    }
    .label{
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
            background: linear-gradient(45deg, #ec1210, #ec6110);
            padding:5px var(--p20);
            
            font-size: var(--ft12);
            border-radius: 0 0 var(--p20) 0;
    }
    .t1{
        .d-flex;
        .al-c;
        gap: var(--p10);
        
    }
    .date{
        color: #848484;
        white-space: nowrap;
       flex: 1;
       text-align: right;
    }
    .sub{
        width: 90%;
        color: #848484;
        font-size: vaR(--ft14);
        .line-clamp3;
        line-height: 2em;
        margin-top: vaR(--p15);
    }
    h5{
        max-width: 80%;
        .line-clamp1;
        font-size: var(--ft20);
    }
}
.Index{
    --main:1200px;
}
	.detailsMain {
		section {
			padding: var(--p30) 0 var(--p80);
		}

		.layui-main {
			background: #fff;
			padding: var(--p40) var(--p30);
		}

		h3 {
			font-size: var(--ft30);
			margin-bottom: vaR(--p30);
		}
            dl{
                .d-flex;
                flex-wrap: wrap;
                gap: var(--p10) var(--p60);
                  color: rgba(25, 31, 43, 0.4);
            }
	

		.con {
            color: rgba(25, 31, 43, 0.4);
			margin: var(--p20) 0;
			min-height: 20vh;
		}

		.foot {
			.d-grid;
            .grid2;
            color: rgba(25, 31, 43, 0.4);
            &>div:nth-child(2){
                text-align: right;
                
            }
			a {
				.line-clamp1;

				&:hover {
					color: vaR(--ftc);
				}
			}

			gap: var(--p10);
		}
	}
	.IndexNew{
	    background: #E6EBEF;
	    ul{
	        margin-top: var(--p50);
	        .d-grid;
	        .grid2;
	        gap: var(--p20) var(--p40);
	        .item{
	            width: 100%;
	            height: 100%;
	            display: block;
	            border-radius: 14px;
	            padding: var(--p20);
	            color: #fff;
	            background: #191F2B;
	        }
	        h5{
	            font-size: vaR(--ft20);
	            .line-clamp1;
	            
	        }
	        .date{
	            margin: var(--p10) 0;
	            font-size: var(--ft14);
	            opacity: 0.6;
	        }
	        .sub{
	             .line-clamp4;
	        }
	    }
	}
	.IndexCase{
	    .bg_fixed;
	    .titleCom{
	        color: #fff;
	        .key{
	            color: #fff;
	            opacity: 0.6;
	        }
	    }
	}
	.IndexAbout{
	    background: #F8F8F8;
	        hr{
        border: none;
        width: 2em;
        height: 4px;
        .bgc;
    }
    .Info{
        .d-grid;
        grid-template-columns: 1fr 0.8fr;
        gap: vaR(--p50);
    }
    .titleCom{
        text-align: left;
        margin-bottom: 0;
    }
    .sub{
        margin: var(--p25) 0;
        font-size: var(--ft20);
    }
    .layui-btn{
        border-radius: 0;
    }
	}
	     .navMobile {
            position: fixed;
            left: 100%;
            width: 100%;
            top: 0;
            bottom: 0;
            background: #fff;
            color: #000;
            transition: all 0.5s;
            z-index: 999;

            &.show {
                left: 0;
            }

            .menu_button {
                path {
                    stroke: #000;
                }
            }
        }
@media only screen and (max-width: 1500px) {
    body{
        
    --main:1080px;
    }
}

@media only screen and (max-width: 990px) {
    .footerLogo,
    .logo{
        img{
            max-width: 50vw;
            max-height: 30px;
        }
    }header .logo {
  padding-left: 0;
}
    .newList h5{
        width: 60%;
    }
    .CaseSection .head{
        width: 100%;
        gap: var(--p10);
        flex-wrap: wrap;
        // .jc-fs;
        font-size: var(--ft12);
    }
    .menu_button .line{
        stroke: var(--ftc);
    }
    .IndexAbout .Info{
        .grid1;
    }
    .caseList{
        .grid2;
    }
}

@media only screen and (max-width: 768px) {
	.newList .item .img_100{
		aspect-ratio:unset;
	}
}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {
	
}