@charset "utf-8";
/* CSS Document */



/* === banner === */
		.banner-box{
			position: relative;
			min-width: 100%;
			overflow: hidden;
			height: 400px;
		}

		.banner-img{
			min-width: 100%;
			height: 100%;
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content:space-between;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
		}

		.banner-img img{
			margin: auto;
		}

		.banner-txt{
			position: absolute;
			left: 0;
			top:32%;
			min-width: 100%
			
		}

		.banner-txt h1{
			font-size: 4.2rem;
			color: #fff;
			text-align: center;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);			
		}

		.banner-txt h4{
			text-align: center;
			font-size: 1.3rem;
			color: #fff;
			font-weight: 500;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
		}

		.banner-box:hover h1{
			transform: translateY(-8px);
			transition: all 0.3s;
			
		}

		.banner-box:hover h4{
			transform: translateY(-8px);
			transition: all 0.3s;
		}


/* === 响应式设计 === */
        @media screen and (max-width: 768px) {
			
			.banner-box{
				width: 100%;
				height: 22vh;
				margin-top: 59px;
			}
			
			.banner-img {
				width: 100%;
			}
            .banner-img img{
				width: 100%;
				margin: 0;
				height: 20vh;
			}
			
			.banner-txt h1{
				font-size: 1.3rem;
			}
			
			.banner-txt h4{
				font-size: 0.6rem;
			}
			
        }



/* === 左边内容 === */
		.content-skis{
			width: 1400px;
			height: 100%;
			margin: auto;
			padding-top: 80px;
		}

		.content-equip{
			width: 1400px;
			height: 100%;
			margin: auto;
			padding-top: 80px;
		}

		.content-engin{
			width: 1400px;
			height: 100%;
			margin: auto;
			padding-top: 80px;
		}

		.content-skis-dn{
			width: 1400px;
			height: 100%;
			margin: auto;
			padding-top: 80px;
		}
	
		.z-skis-m-box{
			float: left;
			position: relative;
		}



        /* 二级菜单 */
        .lfotmenu {
            position: absolute;
            min-width: 280px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            opacity: 1;
			background: #f7f7f7;
            transition: all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
            z-index: 998;
			padding: 30px 0;
			
        }

		.lfo-hig{
			padding: 40px 0!important;
		}

		/* 初始状态效果 */
		.lfotmenu-item::after {
			content: '';
			position: absolute;
			bottom: 0px;
			left: 50%;
			width: 0;
			height: 2px;
			background: #f7f7f7;
			transition: all 0.9s ease;
		}

		/* 悬停交互效果 */

		.lfotmenu-item:hover::after {
			width: 100%;
			left: 0;
		}
        
		.lfotmenu-g{
			min-width: 160px !important;
			left: 30%!important;
		}

		.cnicon i{
			background-image: url("../../style/imges/in_icon006.png") ;
			width: 18px;
			height: 18px;
			position: absolute;
			top: 34%;
			left: 20%;
		}

		.cnicon:hover i{
			background-image: url("../../style/imges/in_icon006-1.png") ;
		}

		.enicon i{
			background-image: url("../../style/imges/in_icon007.png") ;
			width: 18px;
			height: 18px;
			position: absolute;
			top: 34%;
			left: 20%;
		}

		.enicon:hover i{
			background-image: url("../../style/imges/in_icon007-1.png") ;
		}

        .nav-item:hover > .lfotmenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(2px);
        }

		#fixed-box {
            /* 将盒子放在首屏中间 */
            position: absolute;
            top: 0;
            transition: all 0.3s ease;
			
        }
        #fixed-box.fixed  {
            position: fixed;
            z-index: 1000;
        }

		
		 /* === 三级菜单专属样式 === */
        .lfotmenu11 {
            background: #fff;
            min-width: 160px;
            transition: all 0.3s ease;
			overflow: hidden;
			display: none;
			
        }
        
        
        .lfotmenu .lfotmenu {
            left: 100%;
            top: 0;
        }
        
        .lfotmenu-item {
            position: relative;
            border-bottom: 1px solid #f7f7f7;
        }
        
        .lfotmenu-link {
            color: #262626;
            padding: 20px 36px;
            display: block;
            transition: background 0.3s;
			font-size: 1.2rem;
        }
        
		.lfotmenu-g{
			font-size: 1.1rem !important;
			padding: 15px 50px !important;
			color: #666 !important;
		}
	
		.lfotmenu-g:hover{
			color: #fff!important;
		}
		
        .lfotmenu-link:hover {
            background: #0089e5;
			color: #fff;
        }

		.skis-color{
			color: #0089e5!important;
			font-weight:600;
		}

		.skis-color:hover{
			color: #fff!important;
		}
		
		.kau i{
			background-image: url("../../style/imges/in_icon005.png") ;
			width: 6px;
			height: 10px;
			position: absolute;
			top: 44%;
			left: 50%;
		}

		.kau:hover i{
			background-image: url("../../style/imges/in_icon005-1.png") ;
		}

		.kus i{
			background-image: url("../../style/imges/in_icon005-2.png") ;
			width: 6px;
			height: 10px;
			position: absolute;
			top: 44%;
			left: 50%;
		}

		.kus:hover i{
			background-image: url("../../style/imges/in_icon005-1.png") ;
		}




/* === 响应式设计 === */
        @media screen and (max-width: 768px) {
			.lfotmenu { display: none;
              	  
            }
			
        }





/* === 右边内容 === */

		.y-skis-m-box{
			float: right;
			width: 76%;
		}
		.y-skis-m-box h2{
			font-size: 2rem;
			color: #262626;
			text-align: center;
			line-height: 2rem;
			font-weight: normal;
		}
		
		.y-skis-m-box h6{
			font-size: 0.8rem;
			color: #989898;
			text-align: center;
			line-height: 2rem;
			font-weight: normal;
			text-transform: uppercase;
			margin-bottom: 40px;	
		}

		.y-skis-m-box span{
			font-size: 1.1rem;
			color: #333;
			text-align:left;
			line-height: 2.4rem;
			font-weight: 500;
			padding: 50px 60px;
			background: #f7f7f7;
			display: inline-block;
		}


		.y-skis-m-conte{
			margin-top: 180px;
			margin-bottom: 120px;
		}

		
 
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
 
        .gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin-bottom: 30px;
        }
 
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            border: 1px #e6e6e6 solid;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }
 
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
			padding-bottom: 66px;
        }
 
        .gallery-item:hover img {
            transform: scale(1.1);
        }
 
        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
 
        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 1);
			box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
            padding: 20px;
            opacity: 1;
			
        }
 
        .gallery-item:hover .overlay {
            opacity: 1;
            transform: translateY(0);
        }
 
        .overlay h3 {
            margin-bottom: 8px;
            font-size: 1.3rem;
			color: #333;
        }
 
        .overlay p {
            font-size: 1.1rem;
            line-height: 1.5;
            opacity: 0.8;
			color: #333;
        }
 
        .indicator {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 137, 229, 0.8);
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.4s ease;
        }
 
        .gallery-item:hover .indicator {
            opacity: 1;
            transform: scale(1);
        }
 
        .mobile-instruction {
            display: none;
            text-align: center;
            background: rgba(255, 255, 255, 0.15);
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            backdrop-filter: blur(5px);
        }
 
        .mobile-instruction .tap-icon {
            display: inline-block;
            margin: 0 5px;
            animation: pulse 2s infinite;
        }
 
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
 
        .features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 50px;
        }
 
        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            flex: 1;
            min-width: 250px;
            max-width: 350px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
 
        .feature-card h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            font-size: 1.3rem;
        }
 
        .feature-icon {
            font-size: 24px;
        }
 
/* === 响应式设计 === */

 
        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(1, 1fr);
                
				width: 100%;
            }
            
			.qcgrid{
				width: 100%;
			}
			
			.gallery-item img{
				padding-bottom: 38px;
			}
			
            .mobile-instruction {
                display: block;
            }
			
			.overlay{
				padding: 10px 20px;
			}
            
			.y-skis-m-box{
				float: none;
				width: 100%;
			}
			
			.content-skis{
				width: 100%;
				padding-top: 10px;
			}
			
			.content-equip{
				width: 100%;
				padding-top: 10px;
			}
			
			.content-engin{
				width: 100%;
				padding-top: 10px;
			}
			
			.y-skis-m-box h2{
				font-size: 1.2rem;
				line-height: 1.2rem;
			}
			
			.y-skis-m-box h6{
				font-size: 0.6rem;
				line-height: 1.2rem;
				margin-bottom: 10px;
			}
			
			.y-skis-m-box span{
				font-size: 0.6rem;
				line-height: 1.3rem;
				width: 100%;
				padding: 20px 30px 20px 30px;
			}
			
			.y-skis-m-conte{
				margin-top: 20px;
				width: 100%;
				margin-bottom: 20px;
					
			}
			
			.skid-top{
				margin-top: 20px!important;
			}
			
			.content-skis{
				padding-bottom: 0px;
				width: 100%;
			}
			
			.content-equip{
				padding-bottom: 0px;
				width: 100%;
			}
			
			.content-engin{
				padding-bottom: 0px;
				width: 100%;
			}
			
			.enicon i{
				background-image: url("../../style/imges/in_icon007-1.png") ;
				width: 18px;
				height: 18px;
				position: absolute;
				top: 30%;
				left: 16%;
			}
			
			.cnicon i{
				background-image: url("../../style/imges/in_icon006-1.png") ;
				width: 18px;
				height: 18px;
				position: absolute;
				top: 30%;
				left: 16%;
			}
			
			.overlay h3 {
				font-size: 1.2rem;
			}
 
			.overlay p {
				font-size: 0.6rem;
			}
			

        }





/* === 成套设备标准化设计 === */

		.equ-tite{
			width: 100%;
			position: relative;
		}

		.equ-tite img{
			width: 100%;
		}

		.equ-tite-cot{
			position: absolute;
			top: 75%;
			width: 100%;
			text-align: center;
		}

		.equ-tite h3{
			font-size: 1.1rem;
			color: #333;
			text-align:left;
			line-height: 2.4rem;
			font-weight: 500;
			padding: 50px 60px;
			background-color: rgba(255, 255, 255, 0.8);
			box-shadow: 0 5px 12px rgba(0,23,38,0.2);
			display: inline-block;
			width: 90%;
			border-radius: 8px;
		}

		.equ-tite a{
			display: block;
			font-size: 1.4rem;
			color: #0089e5;
			font-weight: bold;
			margin-bottom: 1rem;
		}


		.equ-tite h3:hover{
			transform: translateY(-10px);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
			
		}



/* === 成套设备响应式设计 === */

        @media screen and (max-width: 768px) {
			.equ-tite img{
				width: 100%;
			} 
			
			.equ-tite h3{
				font-size: 0.6rem;
				line-height: 1.3rem;
				width: 90%;
				padding: 20px 30px 20px 30px;
			}
			
			.equ-tite a{
				font-size: 1.1rem;
				color: #0089e5;
				font-weight: bold;
				margin-bottom: 0.6rem;
			}
			
			.y-equip-conte{
				margin-top: 200px;
				margin-bottom: 20px;
			}
		
        }


/* === 工程设计 === */

		.engin-tite{
			width: 100%;
			position: relative;
		}

		.engin-tite img{
			width: 100%;
		}

		.engin-tite-cot{
			position: absolute;
			top: 75%;
			width: 100%;
			text-align: center;	
		}

		.engin-tite h3,.engin-tite h4{
			font-size: 1.1rem;
			color: #333;
			text-align:left;
			line-height: 2.4rem;
			font-weight: 500;
			padding: 50px 60px;
			background-color: rgba(255, 255, 255, 0.8);
			box-shadow: 0 3px 8px rgba(0,23,38,0.1);
			display: inline-block;
			width: 90%;
			border-radius: 8px;
			
		}

		.engin-tite h4{
			margin-top: 50px;
		}

		.engin-tite a{
			display: block;
			font-size: 1.4rem;
			color: #0089e5;
			font-weight: bold;
			margin-bottom: 1rem;
		}


		.engin-tite h3:hover{
			transform: translateY(-10px);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;		
		}

		.engin-tite h4:hover{
			transform: translateY(-10px);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;		
		}

		.engin-tite h5:hover{
			transform: translateY(-10px);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;		
		}

		.engin-tite h5{
			margin-left: 4%;
			margin-top: 4%
		}

		.engin-tite em{
			font-style: normal;
			display: inline-block;
		}

		.y-engin-conte{
			margin-top: 180px;
		}


/* === 工程设计响应式 === */

        @media screen and (max-width: 768px) {
			.engin-tite img{
				width: 100%;
			} 
		
			
			.engin-tite h3,.engin-tite h4,.engin-tite h5{
				font-size: 0.6rem;
				line-height: 1.3rem;
				width: 90%;
				padding: 20px 30px 20px 30px;
			}
			
			.engin-tite a{
				font-size: 0.9rem;
				color: #0089e5;
				font-weight: bold;
				margin-bottom: 0.6rem;
			}
			
			.engin-tite h5{
				margin-left: 5%;
			}
			
			.y-engin-conte{
				margin-top: 170px;
				margin-bottom: 0;
			}
		
        }



/* === 撬块设计页面 === */

		.y-skis-dn-box{
			float: right;
			width: 76%;
			padding-top: 80px;
		}

		#links1{
			padding-top: 0!important;
		}

		#links6{
			margin-bottom: 80px;
		}

		.y-skis-dn-box h2{
			font-size: 2rem;
			color: #262626;
			text-align: center;
			line-height: 2rem;
			font-weight: normal;
		}
		
		.y-skis-dn-box h6{
			font-size: 0.8rem;
			color: #989898;
			text-align: center;
			line-height: 2rem;
			font-weight: normal;
			text-transform: uppercase;
			margin-bottom: 40px;	
		}

		.y-skis-dn-box span{
			font-size: 1.1rem;
			color: #333;
			text-align:left;
			line-height: 2.4rem;
			font-weight: 500;
			padding: 50px 60px;
			background: #f7f7f7;
			display: inline-block;
		}


		.y-skis-dn-conte{
			margin-bottom: 60px;

		}
		
		figure i{
			width: 76%;
			height: 1px;
			
			display: inline-block;
			float: right;
			background-image:url("../../style/imges/skid-img50.png")
		}

		.matops{
			
		}


/* === 撬块设计响应式 === */

        @media screen and (max-width: 768px) {
			.content-skis-dn{
				width: 100%;
				padding-top: 0;
			}
			
			.y-skis-dn-box{
			float: right;
			width: 100%;
			padding-top: 0px;
			}
			
			.content-skis-dn{
				padding-bottom: 0px;
			}
			
			.y-skis-dn-box h2{
				font-size:1.2rem;
				line-height:1.2rem;
			}
			
			.y-skis-dn-box h6{
				font-size:0.6rem;
				line-height:1.3rem;
				margin-bottom: 10px;
			}
			
			.y-skis-dn-conte{
				margin-bottom: 20px;
			}
			
			figure i{
				width: 100%;
				float: none;
				display: none;
			}
			
			.y-skis-dn-box span{
				font-size:0.6rem;
				line-height:1.3rem;
				width: 100%;
				padding: 20px 30px 20px 30px;
				margin-bottom: 20px!important;
			}
			
			.matops{
				margin-top: 20px;
			}
			
			#links6{
				margin-bottom: 0px;
			}
			
        }