@import "./common.less";

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

	.flex-column;
	min-height: 100vh;

	@media (max-width: 768px) {}
}

header {
	background: #fff;
position: relative;
	.layui-nav .layui-this:after {
		display: none;
	}

	.layui-main {
		padding: var(--p20) 0;
		
    position: unset;
	}

	.layui-nav {
		.d-flex;
		.al-c;
		gap: var(--p30);
		
    position: unset;
	}

	.layui-nav .layui-nav-item a {
		color: #333;
		padding: 0;
	}

	.layui-nav .layui-nav-item {
	    
    position: unset;
		line-height: 2em;

	}

	.layui-nav .layui-nav-item a:hover,
	.layui-nav .layui-this>a {
		color: vaR(--ftc);
	}

	&.bgcolor {

		box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
	}
}
.IndexCase{
    .body{
        margin-top: var(--p50);
        .swiper{
            .img{
                aspect-ratio:1400/579;
            }
        }
     
        .num{
            .d-flex;
            
        gap: 5px;
            color: rgba(204, 204, 204, 1);
            font-size: var(--ft36);
               h5{
            
            color: var(--ftc);
            font-size: var(--ft50);
            line-height: 1em;
        }
        }
        .btn{
            .d-flex;
            .al-c;
            .jc-fs;
            flex: 1;
            gap: var(--p30);
        }
    }
    .Card{
        background: var(--ftc);
        color: #fff;
        position: absolute;
        min-height:340px ;
        width: 330px;
        left: 100px;
        bottom: 0;
        z-index: 999;
        transform: translateY(500px);
        opacity: 0;
        transition: all 0.8s;
      .d-flex;
     .flex-column;
        padding:  var(--p20);
        h5{
            font-size: var(--ft20);
            border-bottom: 1px solid #fff;
            padding-bottom: var(--p10);
            margin-bottom: var(--p20);
        }
        dl{
            .d-flex;
            .flex-column;
            gap: var(--p10);
        }
        i{
            transition: all 0.5s;
            margin-left: var(--p10);
            
        }
        dd:hover{
            i{
                margin-left:0;
            }
        }
        .foot1{
            margin-top: auto;
        }
        .layui-btn{
            margin-top: vaR(--p30);
         
            border-color: #fff;
            color: #fff;
        }
    }
    .foot{
        padding-left: 500px;
        margin-top: var(--p40);
        .d-flex;
        .jc-s;
            gap: var(--p30);
    }

      .layui-show{
   
         
        .Card{
        transform: translateY(0);
        transition-delay:  0.5s;
        opacity: 1;
        }
    }
  
}
.TBox{
    .d-flex;
    .jc-s;
    gap: var(--p20);
    .al-fe;
    flex-wrap: wrap;
} .head{
        .d-flex;
        gap: var(--p20);
        .item{
            cursor: pointer;
            border-bottom: 1px solid #fff;
        }
        .item.layui-this{
            color: var(--ftc);
            border-color: var(--ftc);
        }
    }
.IndexNew{
   
    .body{
        margin-top: var(--p40);
        ul{
            .d-grid;
            .grid3;
            gap:var(--p20);
        }
        a{
            min-width: 0;
            overflow: hidden;
        }
        .img{
            aspect-ratio: 453/266;
        }
        .block{
            background: #F7F7F7;
            padding: var(--p25);
            min-width: 0;
            overflow: hidden;
        }
        .date{
            color: #9E9E9E;
            font-size: var(--ft14);
        }
        h5{
            font-size: var(--ft20);
            margin-top: vaR(--p20);
            line-height: 1.6;
            height: 3.2em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow-wrap: anywhere;
        }
    
    }
    .foot{
        margin-top: var(--p40);
        .flex-center;
    }
}
.IndexTitle{
    .en{
        color: #DCDCDC;
        font-size: var(--ft52);
        text-transform: uppercase;
    }
    h1{
        line-height: 1em;
        color: #333333;
        font-size: var(--ft42);
    }
}

.CarList {
	margin-top: vaR(--p100);
	.d-grid;
	.grid2;
	gap: var(--p40) var(--p30);

	h5 {

		font-size: var(--ft36);
		text-align: center;
		font-weight: normal;
	}

	.item {
		background: #F4F4F4;
		display: block;
		padding: vaR(--p50);
		.flex-column-center;
		gap: var(--p50) 0;
	}

	.img {
		aspect-ratio: 410/280;
	}
}
.IndexHonors{
    background: #F3F3F3;
    .IndexTitle{
        text-align: center;
    }
}
.NengyuanList {
  	margin-top: vaR(--p100);
	.d-grid;
	.al-c;
	gap: var(--p80) ;
		.item {
		    .d-flex;
		    
		background: #F4F4F4;
		padding: vaR(--p50);
	
		gap: var(--p50) 0;
			&:nth-child(even){
	     flex-direction: row-reverse;
    	}
	}
	.img{
	    aspect-ratio: 1/1;
	}
	.Text{
	    flex:1;
	    .flex-column-center;
	    gap: var(--p140);
	}
		h5 {

		font-size: var(--ft36);
		text-align: center;
		font-weight: normal;
	}

}

.btn-red {
	background: initial;
	color: var(--ftc);
	padding: 0 var(--p40);

	&:hover {
		color: var(--ftc);
		padding: 0 var(--p50);
	}
}

.caseNav {
	background: #F3F3F3;

	.layui-main {
		color: #666666;
		.d-flex;
		.al-c;
		gap: 3PX;
		padding: var(--p10) 0;
		font-size: vaR(--ft14);
	}

	i {
		font-size: var(--ft12);
	}

}

footer {
	background: #090A0B;
	color: #C7C7C7;

	.footer1 {
		padding: var(--p70) 0 var(--p40);
		.d-flex;
		.al-fs;
		gap: vaR(--p60);
		flex-wrap: wrap;
	}

	.footer2 {
		border-top: 1px solid #999;

		>* {
			margin-right: var(--p20);
		}

		font-size: var(--ft14);
		padding: var(--p10) 0;

	}

	.info {
		.brand-summary {
			max-width: 260px;
			margin-top: var(--p20);
			color: #C7C7C7;
			line-height: 1.8;
		}

		span {
			font-size: var(--ft14);
			color: #999;
			display: inline-block;
			margin-bottom: 5px;
		}

		.tel {
			color: #fff;
			font-size: var(--ft24);
		}

		.add {
			color: #fff;
		}

		dl {
			.d-grid;
			gap: var(--p15);

			margin-top: vaR(--p40);
		}
	}

	.qrocode {
		ul {
			.d-flex;
			flex-wrap: wrap;
			gap: var(--p60);
			text-align: center;

			p {
				margin-top: vaR(--p10);
			}

			.img_box {
				width: 130px;
			}
		}
	}

	a:hover {
		color: #fff;
	}

	nav {
	    gap: var(--p10);
		padding: 0 var(--p60);
		flex: 1;
		border-left: 1px solid #D8D8D8;
		border-right: 1px solid #D8D8D8;
		.d-flex;
		.al-fs;
		.jc-s;
		flex-wrap: wrap;

		li>a {
			font-size: var(--ft18);
			color: #fff;
		}

		dl {
			margin-top: vaR(--p20);
			.d-grid;
			gap: var(--p10);
		}
	}
}
.index_swiper .img,
.index_swiper{
    aspect-ratio: 1920/800;
}
main {
	flex: 1;
}

/* 呼吸效果关键代码 */
@keyframes breathing {

	0%,
	100% {
		scale: 1;
		// opacity: 0.6;
	}

	50% {
		scale: 1.05;
		// opacity: 1;
	}
}

.topBanner {
	aspect-ratio: 1920/500;
	position: relative;
	padding: var(--p80) 0;

	.nav {
		font-size: var(--ft14);
		position: absolute;
		bottom: 0;
		z-index: 2;
		padding: var(--p10) 0;
		color: #fff;

		i {
			font-size: var(--ft12);
		}
	}

	.img {
		height: 100%;

		img {
			scale: 1;
			animation: breathing 8s ease-in-out;
		}

		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.d-flex;
	.flex-column;
	.al-c;
	.jc-c;

	.block {
		color: #fff;
		position: relative;
		z-index: 9;
	}

	h1 {
		font-weight: normal;
		font-size: var(--ft60);
	}

	hr {
		width: 110px;
		height: 4px;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
	}

	.en {
		bottom: var(--p50);
		line-height: 1em;
		position: absolute;
		left: 0;
		z-index: 0;
		font-size: VAR(--ft100);
		font-weight: bold;
		color: transparent;
		/* 文字本身透明 */
		-webkit-text-stroke: 1px #fff;
		text-stroke: 1px #fff;
	}


}

.CaseDetailsMain {
	section {
		padding: var(--p40) 0;
	}

	.Card {
		background: #fff;
		padding: var(--p30);

		h3 {
			font-weight: normal;
			text-align: center;
			font-size: var(--ft36);
			margin-bottom: var(--p50);
		}
	}
}

.CaseDetailsMain .s_content,
.ProductDetailsMain .s_content {
    img {
        display: none !important;
    }

    p {
        display: block;
        margin-bottom: 1em;
        text-indent: 2em;
        line-height: 1.9;
    }

    p:last-child {
        margin-bottom: 0;
    }

    h4 {
        margin: 1.5em 0 0.65em;
        color: #333;
        font-size: var(--ft18);
        font-weight: 600;
        line-height: 1.5;
    }

    ul {
        margin: 0 0 1em;
        padding-left: 1.5em;
    }

    li {
        margin-bottom: 0.55em;
        line-height: 1.8;
    }
}

.CaseDetailsMain,
.ProdcutMain,
.detailsMain,
.NewMain,
.ContactMain {
	background: #f6f6f6;
}

.productCateList {
	.d-grid;
	.grid2;
	gap: var(--p50) var(--p80);

	.img {
		aspect-ratio: 660/380;
	}

	h5 {
		transition: all 0.3s;
		font-size: var(--ft20);
		color: #333;
		margin-top: var(--p10);
	}

	i {
		opacity: 0;
		display: inline-block;
		transition: all 0.3s;
		position: relative;
		transform: translateX(20px);
	}

	.item:hover {
		h5 {
			color: var(--ftc);
		}

		i {
			transform: translateX(0px);
			opacity: 1;
		}
	}
}
.IndexProduct{
    .swiper{
        margin-top: vaR(--p50);
    }
.btn{
    .d-flex;
    gap: var(--p20);
}
	
	.item{
	    width: 450px;
	    max-width: 100%;
	        	.img {
		aspect-ratio: 454/392;
	}

	h5 {
		transition: all 0.3s;
		font-size: var(--ft20);
		color: #333;
	}

// 	i {
// 		opacity: 0;
// 		display: inline-block;
// 		transition: all 0.3s;
// 		position: relative;
// 		transform: translateX(20px);
// 	}
	.text{
		margin-top: var(--p10);
	   .jc-s;
	   .al-c;
	   .d-flex;
	}
    	.more{
    	    color: var(--ftc);
    	}
	}

	.item:hover {
		h5 {
			color: var(--ftc);
		}

// 		i {
// 			transform: translateX(0px);
// 			opacity: 1;
// 		}
	}
}

.detailsMain {
	.layui-main {
		.d-grid;
		grid-template-columns: 1fr 500px;
		gap: var(--p60);

		h3 {
			font-size: var(--ft30);
			color: #333;
		}

		.date {
			color: rgba(153, 153, 153, 1);
			font-size: var(--ft14);
			margin-top: var(--p20);
		}

		.s_content {
			margin-top: var(--p40);
		}

		.foot {
			margin-top: vaR(--p60);
		}
	}
}

.NavCom {
	border-bottom: 1px solid #D8D8D8;

	.layui-main {
		.d-flex;
		flex-wrap: wrap;
		gap: var(--p30);

	}

	.item {
		position: relative;
		display: block;
		padding: var(--p10) 0;

		&:before {
			display: block;
			content: '';
			left: 50%;
			width: 0;
			height: 2px;
			position: absolute;
			bottom: 0;
			background: var(--ftc);
			transition: all 0.5s;
			transform: translateX(-50%);
		}

		&.active::before,
		&:hover::before {
			width: 100%;
		}
	}
}

.NewSection {
	padding: var(--p50) 0;
}

.NewList {
	.d-grid;
	gap: var(--p40);

	.item {
		padding: var(--p30);
		background: #fff;
		.d-grid;
		gap: var(--p40);
		grid-template-columns: 40% 1fr;
		transition: all 0.3s;

		&:hover {

			box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);

			.content .foot .more {
				color: var(--ftc);
				border-color: var(--ftc);
			}
		}

		.content {
			h5 {
				.line-clamp1;
				font-size: vaR(--ft24);
			}

			.sub {
				color: #666666;
				margin-top: vaR(--p30);
				.line-clamp6;
				height: 9.5em;
			}

			padding: var(--p35) 0 var(--p30);

			.foot {
				margin-top: var(--p30);
				.d-flex;
				.al-c;
				.jc-s;

				.date {
					color: #9E9E9E;
				}

				.more {
					transition: all 0.3s;
					color: #333333;
					padding-bottom: 3px;
					border-bottom: 1px solid #333333;
				}
			}
		}
	}
}

.newTextList {
	background: #fff;
	padding: var(--p20) var(--p40);

	.item {
		display: block;
		padding: var(--p20) 0;
		border-bottom: 1px solid rgba(216, 216, 216, 1);

		&::before {
			height: 1px;
			background: var(--ftc);
		}
	}

	h5 {
		.line-clamp1;
		font-size: vaR(--ft20);
	}

	.sub {
		color: #666666;
		margin-top: vaR(--p10);
		.line-clamp2;
	}

	.date {
		color: #9E9E9E;
	}
}

.Contact {
	ul {
		.d-grid;
		gap: var(--p35);

		.title {
			font-size: var(--ft18);
			color: #666666;
			.d-flex;
			.al-c;

			.img {
				width: 48px;
				flex-shrink: 0;
			}
		}

		h5 {
			margin-top: var(--p20);
			font-size: var(--ft24);
		}


	}

	.grid-row {
		gap: var(--p80);
	}

	.Card {
		padding: var(--p50) var(--p70);
		.d-grid;
		gap: var(--p100);
		grid-template-columns: 40% 1fr;
		background: #fff;

		.Box {
			.d-flex;
			.flex-column;
			.jc-s;
			gap: var(--p60);
		}

		form {
			.d-flex;
			.flex-column;
			gap: var(--p10);
		}

		.foot {
			margin-top: auto;
		}

		.layui-input,
		.layui-textarea {
			border: none;
			--input: 55px;
			background: #F4F4F4;
		}

		.layui-textarea {
			height: 200px;
		}
	}

	.layui-btn {
		flex: 1;
		width: 100%;
		border-radius: 25px;
	}
}

.titleCom {
	text-align: center;
	color: #333;
	font-size: var(--ft40);
}

.AboutHoner {
	ul {
		.d-grid;
		.grid3;
		gap: var(--p20);
		margin-top: var(--p40);

		li {
			transition: all 0.3s;
			background: #F7F7F7;
			padding: var(--p20);

			&:hover {
				box-shadow: 0px 5px 18px #CC0001;
				background: var(--ftc);
			}
		}
	}
}

.nextBtn,
.prevBtn {
    z-index: 9999;
	border-radius: 8px;

	border: 1px solid #CC0001;
	aspect-ratio: 1/1;
	width: 44px;
	cursor: pointer;
	transition: all 0.3s;
	display: inline-block;
	.flex-center;
	&:hover{
	    box-shadow: 0 0px 15px rgba(204, 0, 1,0.2);
	}
}

.prevBtn {
	color: var(--ftc);
}

.nextBtn {
	color: #fff;
	background: var(--ftc);
}

.AboutShebei {
	h1 {
		text-align: left;
	}

	.title {
		.d-flex;
		.al-c;
		.jc-s;

		.btn {
			.d-flex;
			.al-c;
			gap: var(--p20);
		}
	}

	.swiper {
		margin-top: var(--p60);
		padding-bottom: var(--p60);

		.swiper-pagination-progressbar {
			height: 2px;
			--swiper-pagination-color: var(--ftc);
			bottom: 0 !important;
			top: unset;
		}
	}

	background: #F4F4F4;
}

.AboutInfo {
	color: #666;

	h1 {
		text-align: left;
	}

	ul {
		margin-top: var(--p100);
		.d-grid;
		.grid4;
		gap: var(--p20);
		text-align: center;
		color: #666;

		h5 {
			font-weight: normal;
			display: inline-block;
			font-size: var(--ft60);
			margin: 0 5px;
			color: var(--ftc);

		}

	}
}

.CaseImg {
	margin-top: vaR(--p50);
}
.HouseList{
      	margin-top: vaR(--p100);
	.d-grid;
	.al-c;
	gap: var(--p80) ;
		.item {
		    .d-flex;
		    .al-c;
		    
		    
		background: #F4F4F4;
	
		gap: var(--p50) 0;
			&:nth-child(even){
	     flex-direction: row-reverse;
    	}
	}

	.Text{
	    .d-flex;
	    .flex-column;
	    .jc-fs;
	    .al-fs;
	    gap: var(--p140);
		padding: vaR(--p50) var(--p100);
	    flex:1;
	    gap: var(--p140);
	}
	.layui-btn{
	    margin: 0;
	}
		h5 {

		font-size: var(--ft36);
		text-align: left;
		font-weight: normal;
	}
}
.housList2Box{
    h1{
        text-align: center;
        font-size: var(--ft36);
        font-weight: normal;
    
        margin-bottom: var(--p50);
    }
    ul{
        .flex-center;
        flex-wrap: wrap;
        .item{
            width: 460px;
            max-width: 100%;
            .flex-column-center;
            gap: var(--p50);
        }
        .img{
            aspect-ratio:460/330 ;
        }
        gap: vaR(--p40) var(--p150);
    }
    margin-top: vaR(--p80);
}
header .layui-nav .layui-nav-item:hover{
    .nav-child{
        padding: var(--p20) 0;
        height: 300px;
    }
}
.nav-child{
    width: 100%;
    transition: all 0.8s;
    left: 0;
    height: 0;
    overflow: hidden;
    right: 0;
    top: 100%;
    position: absolute;
    padding:0;
    background: rgba(255, 255, 255, 0.8);
    .img{
        aspect-ratio: 335/192;
    }
    dl{
    width: 100%;
        .d-grid;
        .grid4;
        gap: var(--p30);
        dd{
            
        }
    }
}

.IndexHonors{
     .swiper-slide {
      text-align: center;
      font-size: 18px;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.6);
	  height: 400px;
	  .img {
		height: 100%;
	  }
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
	.swiperBox{
	    position: relative;
	}
	.swiper{
	    margin-top: var(--p50);
	}
	.nextBtn {
	    position: absolute;
	    top: 50%;
	    left:calc( 100% + 30px);
	}
		.prevBtn {
	    position: absolute;
	    top: 50%;
	    right:calc( 100% + 30px);
	}
}
.IndexProduct{
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto;
    .IndexTitle{
        // *{
            
        // color: #fff;
        // }
    }
    	.swiper-pagination-progressbar {
    position: relative;
    	    margin-top: var(--p50);
			height: 2px;
			--swiper-pagination-color: var(--ftc);
			bottom: 0 !important;
			top: unset;
		}
}
.IndexAbout{
    .layui-btn{
        background: var(--ftc);
        border-color: #fff;
        color: #fff;
    }
    .TBox{
        margin-bottom: var(--p50);
    }
}
.ProductMain1{
    h1{
        text-align: left;
    }
}
.ProductList{
    .more{
        margin-top: var(--p30);
        text-align: right;
        color: var(--ftc);
        transition: all 0.5s;
        position: relative;
        left: 0;
    }
    .d-grid;
    gap: var(--p50);
    margin-top: vaR(--p60);
    .content{
        padding: var(--p50);
        flex: 1;
    }
    .img{
        width: 40%;
        flex-shrink: 0;
        height: 100%;
    }
    .item{
        &:hover{
            .more{
                left: var(--p20);
            }
        }
        .d-flex;
        .al-fs;
background: #F6F6F6;
&:nth-child(odd){
    flex-direction: row-reverse;
}
h5{
    font-weight: normal;
    font-size: vaR(--ft32);
    border-bottom: 1px solid var(--ftc);
    padding-bottom: var(--p10);
    margin-bottom: var(--p20);
}
.sub{
    .line-clamp7;
}
    }
}
.ProductDetailsMain{
    .grid-row{
        gap: var(--p100);
    }
    .img{
        aspect-ratio: 600/400;
    }
    h3{
        font-size: var(--ft32);
        font-weight: normal;
        border-bottom: 1px solid var(--ftc);
        padding-bottom: var(--p10);
        margin-bottom: var(--p20);
    }
    .mySwiper{
        margin-top: var(--p30);
    }
    .swiperBox{
        --swiper-navigation-size:var(--ft20);
        --swiper-navigation-color: var(--ftc); --swiper-pagination-color: var(--ftc);
        position: relative;
        padding:0 var(--p30);
    }
    .swiper-button-prev{
        left: 0;
    } .swiper-button-next{
        right: 0;
    }
    .img1{
        aspect-ratio: 125/85;
        border: 1px solid #fff;
        transition: all 0.3s;
        opacity: 0.8;
    }
    .swiper-slide-thumb-active{
      
            border-color: var(--ftc);
            opacity: 1;
      
    }
}
.SearchMain {
    min-height: 60vh;
    background: #f6f6f6;

    .searchPanel {
        padding: var(--p60) 0 var(--p50);
        background: #fff;
        border-bottom: 1px solid #e5e5e5;
    }

    .searchIntro {
        margin-bottom: var(--p30);

        h1 {
            margin-bottom: var(--p10);
            color: #222;
            font-size: var(--ft36);
            font-weight: normal;
            line-height: 1.25;
        }

        p {
            color: #666;
            font-size: var(--ft16);
            line-height: 1.7;
        }
    }

    .searchForm {
        width: 760px;
        max-width: 100%;
    }

    .searchLabel {
        display: block;
        margin-bottom: var(--p10);
        color: #333;
        font-size: var(--ft14);
        font-weight: 600;
    }

    .searchControl {
        display: flex;
        align-items: center;
        height: 60px;
        overflow: hidden;
        border: 1px solid #cfcfcf;
        border-radius: 6px;
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus-within {
            border-color: var(--bgc);
            box-shadow: 0 0 0 3px rgba(204, 0, 1, 0.1);
        }

        input {
            flex: 1;
            min-width: 0;
            height: 100%;
            padding: 0;
            border: 0;
            outline: 0;
            background: transparent;
            color: #222;
            font-size: var(--ft16);

            &::placeholder {
                color: #6f6f6f;
            }
        }

        button {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 100%;
            padding: 0 var(--p30);
            border: 0;
            background: var(--bgc);
            color: #fff;
            font-size: var(--ft16);
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.2s ease;

            &:hover {
                background: #a90001;
            }

            &:active {
                transform: translateY(1px);
            }

            &:focus-visible {
                outline: 2px solid #fff;
                outline-offset: -4px;
            }
        }
    }

    .searchIcon,
    .searchClear {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 54px;
        color: #666;
        font-size: var(--ft20);
    }

    .searchClear {
        width: 44px;
        height: 100%;
        color: #777;
        transition: color 0.2s ease, background-color 0.2s ease;

        &:hover {
            background: #f3f3f3;
            color: var(--ftc);
        }
    }

    .searchHint {
        margin-top: var(--p10);
        color: #777;
        font-size: var(--ft14);
        line-height: 1.6;
    }

    .searchResultSection {
        padding: var(--p50) 0 var(--p80);
    }

    .searchResultHeader {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--p30);
        margin-bottom: var(--p30);

        h2 {
            margin-bottom: 6px;
            color: #222;
            font-size: var(--ft28);
            font-weight: normal;
            line-height: 1.3;
        }

        p {
            color: #777;
            font-size: var(--ft14);
            line-height: 1.6;
        }
    }

    .searchResultCount {
        flex-shrink: 0;
        padding-left: var(--p15);
        border-left: 2px solid var(--bgc);
        color: #555;
        font-size: var(--ft14);
        font-weight: normal;
        line-height: 1.5;
    }

    .searchResultList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--p20) var(--p30);
    }

    .searchResultItem {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr);
        min-width: 0;
        overflow: hidden;
        border: 1px solid #e4e4e4;
        border-radius: 6px;
        background: #fff;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;

        &:hover {
            border-color: #d6b4b4;
            box-shadow: 0 12px 30px rgba(86, 30, 30, 0.08);
            transform: translateY(-3px);

            .searchResultImage img {
                transform: scale(1.04);
            }

            .searchResultLink {
                color: var(--ftc);
            }
        }

        &:active {
            transform: translateY(-1px);
        }

        &:focus-visible {
            outline: 2px solid var(--bgc);
            outline-offset: 3px;
        }
    }

    .searchResultImage {
        min-height: 168px;
        overflow: hidden;
        background: #ededed;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }
    }

    .searchResultBody {
        display: flex;
        min-width: 0;
        padding: var(--p20);
        flex-direction: column;
        align-items: flex-start;

        h3 {
            display: -webkit-box;
            overflow: hidden;
            margin: 8px 0;
            color: #222;
            font-size: var(--ft20);
            font-weight: 600;
            line-height: 1.45;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        p {
            display: -webkit-box;
            overflow: hidden;
            color: #666;
            font-size: var(--ft14);
            line-height: 1.65;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    }

    .searchResultCategory {
        color: #777;
        font-size: var(--ft13);
        line-height: 1.4;
    }

    .searchResultLink {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: auto;
        padding-top: var(--p15);
        color: #555;
        font-size: var(--ft14);
        transition: color 0.2s ease;
    }

    .searchEmpty {
        padding: var(--p60) var(--p30);
        border: 1px solid #e4e4e4;
        border-radius: 6px;
        background: #fff;
        text-align: center;

        > i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 58px;
            height: 58px;
            margin-bottom: var(--p20);
            border-radius: 50%;
            background: #f4f4f4;
            color: #777;
            font-size: var(--ft26);
        }

        h2 {
            margin-bottom: var(--p10);
            color: #222;
            font-size: var(--ft24);
            font-weight: normal;
        }

        p {
            max-width: 560px;
            margin: 0 auto;
            color: #666;
            font-size: var(--ft14);
            line-height: 1.8;
        }

        a {
            display: inline-flex;
            margin-top: var(--p20);
            padding-bottom: 3px;
            border-bottom: 1px solid var(--bgc);
            color: var(--ftc);
            font-size: var(--ft14);

            &:focus-visible {
                outline: 2px solid var(--bgc);
                outline-offset: 4px;
            }
        }
    }
}
@media only screen and (max-width: 1400px) {}

@media only screen and (max-width: 990px) {
    .SearchMain{
        .searchResultList {
            grid-template-columns: minmax(0, 1fr);
        }
    }
        .ProductList{
            .grid2;
        }
    .ProductList .img{
        width: 100%;
    }
    .ProductList .item .sub{
        .line-clamp4;
    }
    .ProductList .item{
        flex-direction: column !important;
    }
    .IndexProduct .item{
        width: 200px;
    }
    .IndexProduct{
        
    background-size: contain;
    }
    .IndexHonors .nextBtn{
        right: 0;
        left: auto;
    }
     .IndexHonors .prevBtn{
        left:  0;
        right: auto;
    }
    .HouseList .item{
        flex-direction: column;
    }
    :root{
        
    --btn:30px;
    --btn_size:12px;
    }
    .IndexNew .body ul,
    .NengyuanList {
        .grid2;
    }
.NengyuanList .item{
    .flex-column !important;
}
	.nextBtn,
	.prevBtn {
		width: 30px;
	}

	.AboutHoner ul {
		.grid2;
	}

	.detailsMain .layui-main {
		.grid1;
	}

	.Contact .Card {
		.grid1;
		--btn: 40px;
		--btn_size: 14px;
	}

	.Contact .Card .layui-input,
	.Contact .Card .layui-textarea {
		--input: 40px;
		--input_size: 14px;
	}

	.topBanner .en {
		font-size: var(--ft20);
		top: -0.1em;
	}

	.topBanner hr {
		width: 2em;
		height: 1px;
	}

	header .layui-nav {
		display: none;
	}

	header {
		top: 0 !important;
	}

	.navMobile {
		background: #fff;
		color: #333;
	}

	footer .footer1 {
		.flex-column;
	}

	footer nav {
		width: 100%;
	}

	footer .qrocode ul .img_box {
		width: 80px;
	}

	.menu_button .line {

		stroke: #333;
	}

	.logo img,
	.footerLogo img {
		max-height: 30px;
	}
	.IndexCase .foot{
	    padding-left: 0;
	    flex-wrap: wrap;
	}
	.IndexCase .Card{
	    position: unset;
	    width: 100%;
	    min-height: auto;
	}
}

@media only screen and (max-width: 768px) {
    .SearchMain {
        .searchPanel {
            padding: var(--p40) 0 var(--p30);
        }

        .searchIntro {
            margin-bottom: var(--p25);

            h1 {
                font-size: var(--ft28);
            }

            p {
                font-size: var(--ft14);
            }
        }

        .searchControl {
            height: 52px;

            button {
                gap: 4px;
                padding: 0 var(--p20);
                font-size: var(--ft14);
            }
        }

        .searchIcon {
            width: 44px;
            font-size: var(--ft18);
        }

        .searchClear {
            width: 38px;
        }

        .searchResultSection {
            padding: var(--p35) 0 var(--p60);
        }

        .searchResultHeader {
            align-items: flex-start;
            margin-bottom: var(--p25);

            h2 {
                font-size: var(--ft24);
            }
        }

        .searchResultItem {
            grid-template-columns: 112px minmax(0, 1fr);
        }

        .searchResultImage {
            min-height: 142px;
        }

        .searchResultBody {
            padding: var(--p15);

            h3 {
                margin: 6px 0;
                font-size: var(--ft17);
            }

            p {
                font-size: var(--ft13);
                -webkit-line-clamp: 2;
            }
        }

        .searchResultLink {
            padding-top: var(--p10);
            font-size: var(--ft13);
        }

        .searchEmpty {
            padding: var(--p50) var(--p20);
        }
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    .SearchMain .searchControl,
    .SearchMain .searchControl button,
    .SearchMain .searchClear,
    .SearchMain .searchResultItem,
    .SearchMain .searchResultImage img,
    .SearchMain .searchResultLink {
        transition: none;
    }

    .SearchMain .searchResultItem:hover,
    .SearchMain .searchResultItem:active,
    .SearchMain .searchControl button:active {
        transform: none;
    }
}