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

 .page-banner{height:320px;display:flex;align-items:center;justify-content:center;color:#fff}
  .aboutbg{background: url(../images/bn_wh.jpg);}
 .productsbg{background: url(../images/bn_pr.jpg);}
 .productsbg2{background: url(../images/bn_pr2.jpg);}
 .contactbg{background: url(../images/bn_contact.jpg);}
 .appbg{background: url(../images/bn_message.jpg);}
 
 .nybt{ text-align:center; line-height:50px; padding-bottom:20px;}
        .page-banner h1{font-size:36px}
		.page-banner .btjj{font-size:16px; max-width:800px; text-align:center;}
        .section{padding:10px 20px 70px 20px;max-width:1200px;margin:0 auto}
        .section-title{text-align:center;font-size:30px;color:var(--dark-gray);margin-bottom:80px; margin-top:30px;position:relative; font-weight:bold;}
        .section-title::after{content:"";width:60px;height:3px;background:var(--main-blue);position:absolute;left:50%;transform:translateX(-50%);bottom:-10px}
        .about-page{display:flex;gap:40px;flex-wrap:wrap}
        .about-page-img{flex:1;min-width:300px;border-radius:8px;overflow:hidden}
        .about-page-img img{width:100%;transition:0.5s}
        .about-page-img:hover img{transform:scale(1.08)}
        .about-page-text{flex:1;min-width:300px;line-height:1.9;font-size:16px;color:#444}
       /* 产品图片容器 */
.product-image2 {
  position: relative;
  width: 100%;
  height: 613px;
  overflow: hidden;

  border-radius: 20px 0px 20px 0px;
 box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.product-image2 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 鼠标悬停放大效果 */
.product-image2:hover img {
  transform: scale(1.06);
}
.page-daohang{
	margin: 0px 0px 0px 0px;
    padding: 10px 0px 18px 0px;
    border-bottom: #CCC 1px solid;
}

.xuanxiangka{
	width:100%;
	min-width:1160px;
	margin:0 auto;
	padding:20px 0 40px;
	}
.xuanxiangkanr{
	  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: 46px;
  justify-content: center;

}

.xxkitem {
  text-align: center;
  font-size: 16px;
  color: #000;
  border:#ccc 1px solid;

  border-radius:6px;
  line-height:46px;
  transition: transform 0.3s ease;
}
.xxkitem:hover {

  color: #fff;
  background:var(--main-blue);
  transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}
  .xxkitem.active {
            background:var(--main-blue);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			border:0;
			color:#fff;
  
        }
.product-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
        .product-item{background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.35s ease;cursor:pointer;border:2px solid transparent}
        .product-item img{width:100%;height: atuo;object-fit:cover;transition:transform 0.4s ease}
        .product-info{padding:20px;text-align:center}
        .product-info h3{font-size:18px;margin-bottom:10px;color:var(--dark-gray);transition:0.3s}
        .product-item:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(0,0,0,0.15);border-color:var(--main-blue)}
        .product-item:hover img{transform:scale(1.08)}
        .product-item:hover h3{color:var(--main-blue)}
		
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;flex-wrap:wrap; padding-top:60px;}
        .pro-img{ width: 555px;
  height: 416px;
  overflow: hidden;

  border-radius: 10px;
 box-shadow: 0 10px 20px rgba(0,0,0,0.2);overflow:hidden}
        .pro-img img{width:100%;
		height:auto;
		object-fit: cover;
  transition: transform 0.5s ease;}
		/* 鼠标悬停放大效果 */
.pro-img:hover img {
  transform: scale(1.06);
}
        .pro-info h2{font-size:28px;margin-bottom:20px;color:#222}
        .pro-info p{font-size:16px;line-height:1.9;margin-bottom:15px;color:#555; overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5; /* 限制行数为2 */
  -webkit-box-orient: vertical;}
        .pro-info .btn{display:inline-block;background:var(--main-blue);color:#fff;padding:12px 30px;border-radius:6px;text-decoration:none;margin-top:10px}
        .pro-info .btn:hover{background:var(--accent-orange)}
		
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px}
        .contact-info p{display:flex;align-items:center;gap:15px;font-size:16px;margin-bottom:30px;color:#333}
        .contact-info i{font-size:22px;color:var(--main-blue)}
        .contact-form input,.contact-form textarea{width:100%;padding:14px;margin-bottom:15px;border:1px solid #ddd;border-radius:6px;font-size:15px}
        .contact-form button{background:var(--main-blue);color:#fff;border:none;padding:14px 30px;border-radius:6px;cursor:pointer}
        .contact-form button:hover{background:var(--accent-orange)}
		
.app-grid{display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;}
        .app-box{background: #f1f5f9;
            border-radius: 8px;
            padding: 40px 15px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 1px solid transparent;}
        .app-box i{font-size:40px;color:var(--main-blue);margin-bottom:20px; display:block;}
        .app-box span{font-size:18px;font-weight:500;color:#333}
        .app-box:hover{transform:translateY(-8px);box-shadow:0 8px 25px rgba(0,0,0,0.12);border-color: var(--main-blue);}
        .app-box:hover i{color:var(--accent-orange)}

.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
        .adv-card{background:#f1f5f9;padding:40px 25px;border-radius:10px;text-align:center;box-shadow:0 3px 15px rgba(0,0,0,0.08);transition:0.3s}
        .adv-card i{font-size:42px;color:var(--main-blue);margin-bottom:20px}
        .adv-card h3{font-size:20px;margin-bottom:15px;color:#222}
        .adv-card p{color:#666;line-height:1.8}
        .adv-card:hover{transform:translateY(-8px);box-shadow:0 8px 25px rgba(0,0,0,0.12)}
        footer{background:var(--dark-gray);color:white;padding:60px 20px}
				
	@media(max-width:768px){.product-detail{grid-template-columns:1fr}
	.page-banner h1{font-size:28px}
	.contact-wrap{grid-template-columns:1fr}
	.xuanxiangka{
	width: 100%;
	max-width:768px;
	min-width:200px;
	margin:0 auto;
	padding:20px 0 40px;
	}
	 .pro-img{ width: 100%;
  height: auto;
   border-radius:0;
   box-shadow: none;
	 }
	 .contact-form img{ width:100%; height:auto;}
	 .product-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
	}
	.lanyun-hd {
		color: rgba(255, 122, 60, 1); padding:30px 0 20px;
    font-weight: bold;
	font-size:26px;
	border-bottom:1px solid #eee;
	text-align:center;
	}
	 .lanyun-product-detail-text{
		    color:#555;
    margin: 0px 0px 20px 0px;
    padding: 32px 0px 32px 0px;
    font-size: 16px;
    line-height: 1.9;

	 }
	 
	 .lanyun-product-url {color:rgba(51, 51, 51, 1);font-size:14px;line-height:1.5;margin:0px 0px 15px 0px;}
	 .lanyun-product-tags { font-size: 14px; line-height: 21px; color: rgb(27, 31, 46); margin-bottom: 10px; display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; }
.lanyun-product-tags a { padding: 5px 24px; display: inline-block; vertical-align: middle; background: rgb(238, 238, 238); border-radius: 20px; margin-right: 10px; }
.lanyun-product-tags a:last-child { margin-right: 0px; }
.lanyun-product-tags a:hover { background: rgb(239, 239, 239); }

.lanyun-prev-next { display: flex; -webkit-box-pack: justify; justify-content: space-between; }
.lanyun-prev-next li { max-width: 50%; }
.lanyun-prevnext:hover a {color:rgba(255, 122, 60, 1);}
.lanyun-prev-next { font-size: 14px; color: rgb(27, 31, 46); line-height: 21px; }