@charset 'utf-8';
.product { padding: 46px 0; }
.product .classification { width: 270px; float: left; box-sizing: border-box; padding: 0; border: solid #e8e8e8 1px; border-radius: 10px; overflow: hidden; }
.product .classification .title h2 { font-family: PlusJakartaSans-SemiBold, Microsoft YaHei, sans-serif; font-size: 20px; text-align: left; font-weight: bold; color: #fff; border-bottom: 2px solid #fff; padding-bottom: 15px; margin-bottom: 0; }
.productlist .search { border-bottom: solid #ddd 1px; padding: 10px 0; }
.productlist .search input { width: 96%; height: 36px; border: none; font-size: 16px; padding-left: 20px; }
.productlist .search button { width: 20px; height: 36px; border: none; background: url("../images/search.png") center no-repeat; cursor: pointer; }
.product .classification .list { margin-top: 0; }
.product .classification .list li { line-height: 22px;/* padding: 15px 0; *//* border-bottom: dashed #eee 1px; */ position: relative;
}
.product .classification .list li a { display: block; vertical-align: middle; font-size: 16px; color: #333; padding: 15px; font-weight: bold; padding-right: 30px; padding-left: 30px; }
.product .classification .list li.clicked>a { color: #2d7fd1; }
.product .classification .list li a:hover { color: #fff; background: #2d7fd1; }
.product .classification .list li .nav_btn { width: 30px; height: 30px; display: inline-block; vertical-align: middle; cursor: pointer; background: url(../images/icon_spirit.png) 0 -240px no-repeat; margin-right: 8px; }
.product .classification .list li ul {/* display: none; */ }
.product .classification .list li ul li { white-space: nowrap;/* padding: 15px 10px 5px 10px; */ border-bottom: none; }
.product .classification .list li ul li a { font-size: 15px; overflow: hidden; text-overflow: ellipsis; padding-left: 40px; font-weight: 100; padding-right: initial; }
.product .classification .list li ul li ul li a { font-size: 13px; overflow: hidden; text-overflow: ellipsis; padding-left: 50px; padding-right: initial; }
.product .classification .list li ul li i { width: 30px; height: 30px; display: inline-block; vertical-align: middle; cursor: pointer; background: url(../images/icon_spirit.png) 0 -270px no-repeat; margin-right: 8px; }
.product .productlist { width: calc(100% - 330px); float: right; }
.product .productlist .title { margin-bottom: 30px; }
.product .productlist .title h2 { font-size: 32px; font-family: PlusJakartaSans-SemiBold, Microsoft YaHei, sans-serif; }
.product .productlist .list { width: 30%; float: left; box-sizing: border-box; margin-right: 0; margin-bottom: 30px; display: flex; align-items: center; text-align: left; flex-wrap: wrap; margin: 0 1.5% 20px 1.5%; }
.product .productlist .list:nth-child(3n) { margin-right: 0; }
.product .productlist .list .picture {/* border-bottom: solid #e8e8e8 1px; */ overflow: hidden; width: 100%; }
.product .productlist .list .picture img { width: 100%; transition: all 0.5s; }
.product .productlist .list .picture:hover img { transform: scale(1.1); }
.product .productlist .list .text { padding: 0 0 10px 0;/* white-space: nowrap; *//* overflow: hidden; *//* text-overflow: ellipsis; */ width: 100%; }
.product .productlist .list .text a h2 { font-family: PlusJakartaSans-SemiBold, Microsoft YaHei, sans-serif; font-size: 16px; color: #333; margin-bottom: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product .productlist .list .text a p { font-size: 16px; color: #333; word-wrap: break-word; word-break: break-all; margin: 30px 0; box-shadow: 0 0 3px 0 #ddd; padding: 10px; }
.product .productlist .list .text a:hover { color: #2d7fd1; }
.get_iorerd .ikrr .btn span { font-size: 16px; }
.product .classification .list .xypg-left-subnav li.clicked .srtrre { display: block; }
.dikoe { display: flex; }
.dikoe li { font-size: 20px; color: #000; }
.xypg-left-nav li.clicked .xypg-left-subnav { display: block; }
.utuesd { font-size: 16px; color: #666 }
.xypg-left-nav > li .first-nav-btn { position: absolute; z-index: 9; width: 30px; height: 30px; text-align: center; top: 10px; left: 0; cursor: pointer; background: url(../images/icon_spirit.png) 0 -450px no-repeat; }
.xypg-left-nav > li.clicked .first-nav-btn { background-position: 0 -390px; }
.xypg-left-nav > li .xypg-left-subnav .first-nav-btn { right: initial; left: 10px; background: url(../images/icon_spirit.png) 0 -450px no-repeat; }
.xypg-left-nav > li .xypg-left-subnav li .xypg-left-subnav .first-nav-btn { right: initial; left: 20px; background: url(../images/icon_spirit.png) 0 -570px no-repeat; }
.xypg-left-nav > li .xypg-left-subnav>li.clicked>.first-nav-btn { background-position: 0 -390px; }
.xypg-left-nav > li .xypg-left-subnav .srtrre li.clicked .first-nav-btn { background-position: 0 -540px; }
.xypg-left-nav > li:hover > a, .xypg-left-nav > li.clicked > a { color: #09445a; }
.xypg-left-nav > li:hover .first-nav-btn, .xypg-left-nav > li.clicked .first-nav-btn { color: #09445a; background: url(../images/icon_spirit.png) -30px -450px no-repeat; }
.xypg-left-nav .xypg-left-subnav { display: none;/* padding: 0 10px; */ }
.xypg-left-nav .xypg-left-subnav > li { /* border-top: 1px dashed #eeeeee; */ }
.xypg-left-nav .xypg-left-subnav > li > a { padding: 8px; display: block; line-height: 20px; color: #818181; font-size: 16px; }
.xypg-left-nav .xypg-left-subnav > li > a:hover { color: #09445a; }
.xypg-left-nav .xypg-left-subnav > li.clicked > a { color: #09445a; }
.xypg-left-nav .xypg-left-threenav > li > a { padding: 5px 10px; display: block; font-size: 14px; line-height: 24px; color: #999999; }
.cuant { padding: 0; margin-top: 30px; background: #2d7fd1; padding: 15px; }
.cuant h3 { padding-bottom: 15px; font-size: 20px; font-weight: bold; margin-bottom: 20px; color: #fff; border-bottom: 2px solid #fff; }
.cuant p { font-size: 14px; line-height: 1.8; padding: 10px 0; margin-bottom: 10px; border-bottom: 1px solid #ddd; color: #fff; }

@media (max-width: 990px) {
.xypg-left-nav .xypg-left-threenav { display: block; }
}
.product .whole .title { text-align: center; padding: 15px; background: #2d7fd1; margin: 0; }
.product .productlist .list:hover .text a h2 { font-family: PlusJakartaSans-SemiBold, Microsoft YaHei, sans-serif; color: #2d7fd1; }
.product .productlist .list:hover .text a p { color: #fff; background: #2d7fd1; }
.ikrr { margin: 0 0 15px 0; }
.gift-products { width: 100%; margin: 0 auto; overflow: hidden; padding: 30px 0 30px 0;/*display: grid; grid-template-columns: repeat(4, 1fr);  一行4列  gap: 20px; /* 列/行间距 */ }
.scroll-wrapper { display: flex; transition: transform 0.5s ease-out; }
/* 单个商品卡片 */
.product-card { /*width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;*/ width: 25%;        /* 一行4个 → 自适应等分 */ flex-shrink: 0;    /* 关键：不压缩 */ padding: 0 8px;    /* 左右间距 */ overflow: hidden; background: #fff; }
/* 商品图片 */
.product-img { width: 100%; height: auto; border-radius: 16px; display: block; }
/* 商品标题容器 - 弹性布局，标题左，图标右 */
.product-title-wrap { width: 100%; display: flex; justify-content: space-between; /* 两端对齐 */ align-items: center; font-size: 16px; color: #333; padding: 10px 0 10px 0; }
/* 商品标题文字 */
.product-title { flex: 1; font-size: 20px; font-family: "PlusJakartaSans-SemiBold", Microsoft YaHei, sans-serif; }
/* 购物车图标（可点击） */
.cart-icon { width: 28px; height: 28px; cursor: pointer; /* 鼠标指针变手型，提示可点击 */ margin-left: 8px; /* 与标题保持小间距 */ text-align: center; line-height: 28px; background-color: #2d7fd1; transition: transform 0.2s ease; /* 点击时轻微缩放 */ border-radius: 14px; }
/* 购物车图标hover/点击效果 */
.cart-icon:hover { transform: scale(1.1); /* hover时放大一点 */ }
.cart-icon:active { transform: scale(0.95); /* 点击时缩小一点，模拟按压 */ }
/* 按钮容器 */
.btn-group { display: flex; gap: 10px; margin-top: 4px; }
/* 通用按钮样式（确保可点击） */
.product-btn { padding: 8px 16px; border-radius: 20px; /* 圆角匹配设计 */ font-size: 14px; font-weight: 500; cursor: pointer; /* 手型指针 */ transition: all 0.3s ease; /* 平滑过渡 */ border: none; outline: none; text-decoration: none; /* 清除a标签下划线 */ display: inline-block; text-align: center; /* 确保按钮可点击区域足够 */ min-width: 100px; }
/* Get a Quote 按钮 */
.quote-btn { background-color: #2d7fd1; color: white; }
/* Learn More 按钮 */
.learn-btn { background-color: transparent; color: #030303; border: 1px solid #030303; }
/* 按钮hover淡背景色效果 */
.quote-btn:hover { background-color: #5790f0; /* 稍浅的蓝色 */ opacity: 0.9; /* 淡色效果 */ color: #FFFFFF; }
.learn-btn:hover { background-color: rgba(0, 113, 227, 0.1); /* 淡蓝色透明背景 */ color: #000000; }
.product-title h2 { font-size: 20px; font-family: "PlusJakartaSans-SemiBold", Microsoft YaHei, sans-serif; margin: 0; padding: 10px 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 990px) {
.product .productlist .list .text a h2 { font-family: PlusJakartaSans-SemiBold, Microsoft YaHei, sans-serif; font-size: 16px; color: #333; margin-bottom: 14px; }
.product { padding: 30px 0; }
.product .classification { width: 100%; padding: 20px 15px; }
.product .classification .search input { width: 90%; }
.product .classification .search button { float: right; }
.product .classification .list li a { max-width: 270px; }
.product .productlist { width: 100%; float: right; margin-top: 30px; }
.product .productlist .title { margin-bottom: 30px; }
.product .productlist .title h2 { font-family: PlusJakartaSans-SemiBold, Microsoft YaHei, sans-serif; font-size: 22px; }
.product .productlist .list { width: 48%; margin: 0 4% 5% 0 }
.product .productlist .list:nth-child(3n) { margin-right: 4%; }
.product .productlist .list:nth-child(2n) { margin-right: 0; }
.product .productlist .list .text { padding: 8px; }
.product .productlist .list .text a { font-size: 14px; }
.btn-group { display: unset; }
.product-btn { width: 100%; margin-bottom: 8px; }
.product-title h2 { font-size: 16px; }
}

@media (max-width:1207px) {
.product-btn { padding: 4px 4px; }
.cart-icon { width: 24px; height: 24px; line-height: 24px; }
.product-title h2 {
  font-size: 14px;
}
}

@media (max-width:1440px) {
.product-title h2{ font-size:14px; }
}
