.qili-iframe2 {
  overflow: hidden;
  position: relative;
  padding: clamp(30px, 3.645833vw, 70px) 0;
}
.qili-iframe2 .indextit h2 {
  font-size: clamp(24px, 2.08vw, 40px);
  text-align: center;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.qili-iframe2 .indextit p {
  font-size: clamp(14px, 0.94vw, 18px);
  color: #666;
  line-height: 1.7;
  text-align: center;
  max-width: 1600px;
  margin: 0 auto 20px;
}

/* ÃƒÂ©Ã¢â€šÂ¬Ã¢â‚¬Â°ÃƒÂ©Ã‚Â¡Ã‚Â¹ÃƒÂ¥Ã‚ÂÃ‚Â¡ÃƒÂ¥Ã‚Â¯Ã‚Â¼ÃƒÂ¨Ã‹â€ Ã‚Âª */
.qili-iframe2 ul {
  margin: 40px 0 0;
  display: flex;
  flex-wrap: nowrap; 
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 20px; 
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; 
}
.qili-iframe2 ul .col-md-3 {
  flex: 1; 
  min-width: 160px;
  padding: 12px 10px;
  color: #555;
  position: relative;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}
.qili-iframe2 ul li {
  width: 15%;
  padding: 12px 16px;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 1.4;
  color: #555;
  position: relative;
  cursor: pointer;
  text-align: center;
  border-radius: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.qili-iframe2 ul li:hover {
  color: #2890F2;
}
.qili-iframe2 ul li.active .txt{
  color: #2890F2;
  font-weight: 600;
}

.qili-iframe2 ul li .img {
  position: relative;
  text-align: center;
  height: clamp(70px, 10vw, 124px); /* 统一高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 默认图：绝对定位 + 居中 + 正常显示 */
.qili-iframe2 ul li .img .icon-normal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* 选中图：绝对定位 + 居中 + 默认隐藏 */
.qili-iframe2 ul li .img .icon-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  object-fit: contain;
  display: none;
}

/* 选中后切换显示 */
.qili-iframe2 ul li.active .img .icon-normal {
  display: none;
}
.qili-iframe2 ul li.active .img .icon-active {
  display: block;
}

.qili-iframe2 ul li .txt {
  color: #333;
  font-size: clamp(14px, 0.83vw, 16px);
  text-align: center;
  margin-top: 6px;
}

.qili-iframe2 .list {
  overflow: hidden;
  margin-top: 40px;
}
.qili-iframe2 .list .box {
  overflow: hidden;
  display: none;
  border-radius: 10px;
  /* æ–°å¢žèƒŒæ™¯æ•ˆæžœ */
  background: linear-gradient(120deg, #f5f7fa 0%, #eef2f5 100%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ÃƒÂ¥Ã¢â‚¬Â Ã¢â‚¬Â¦ÃƒÂ¥Ã‚Â®Ã‚Â¹ÃƒÂ©Ã‚Â¡Ã‚Â¹ÃƒÂ¥Ã‚Â¸Ã†â€™ÃƒÂ¥Ã‚Â±Ã¢â€šÂ¬ */
.qili-iframe2 .list .item {
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-between;
}
.qili-iframe2 .list .item:nth-child(2n) {
  flex-direction: row-reverse;
}

/* ÃƒÂ¦Ã¢â‚¬â€œÃ¢â‚¬Â¡ÃƒÂ¥Ã‚Â­Ã¢â‚¬â€ÃƒÂ¥Ã…â€™Ã‚ÂºÃƒÂ¥Ã…Â¸Ã…Â¸ */
.qili-iframe2 .list .item .txt {
  width: 65%;
  padding: clamp(40px, 6vw, 80px) clamp(30px, 5vw, 60px);
  box-sizing: border-box;
}
.qili-iframe2 .list .item .txt h3 {
  font-size: clamp(20px, 1.46vw, 28px);
  color: #2890F2;
  line-height: 1.3;
  margin-bottom:clamp(15px, 1.56vw, 30px);
  font-weight: 600;
}
.qili-iframe2 .list .item .txt p {
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 1.7;
  color: #555;
}
.qili-iframe2 .list .item .txt a {
  display: inline-block;
  margin-top: clamp(15px, 1.30vw, 25px);
  font-size: clamp(14px, 0.94vw, 18px);
  color: #2890F2;
  font-weight: 500;
  padding: 10px 20px;
  border: 1px solid #2890F2;
  border-radius: 50px;
  transition: all 0.3s ease;
}
.qili-iframe2 .list .item .txt a:hover {
  background: #2890F2;
  color: #fff;
  text-decoration: none;
}

/* ÃƒÂ¥Ã¢â‚¬ÂºÃ‚Â¾ÃƒÂ§Ã¢â‚¬Â°Ã¢â‚¬Â¡ÃƒÂ¥Ã…â€™Ã‚ÂºÃƒÂ¥Ã…Â¸Ã…Â¸ */
.qili-iframe2 .list .item .img {
  width: 31%;
  position: relative;
  overflow: hidden;
}
.qili-iframe2 .list .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}


/* ÃƒÂ¦Ã¢â‚¬â„¢Ã‚Â­ÃƒÂ¦Ã¢â‚¬ÂÃ‚Â¾ÃƒÂ¦Ã…â€™Ã¢â‚¬Â°ÃƒÂ©Ã¢â‚¬â„¢Ã‚Â® */
.qili-iframe2 .list .item .img a {
  background: var(--color-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(50px, 3.65vw, 70px);
  height: clamp(50px, 3.65vw, 70px);
  border-radius: 50%;
  transition: all 0.4s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.qili-iframe2 .list .item .img a i {
  font-size: clamp(22px, 3.65vw, 70px);
  color: #fff;
  margin-left: 3px;
}
.qili-iframe2 .list .item .img a:hover {
  background: #1f5abd;
}

/* ===================== ÃƒÂ¥Ã¢â‚¬Å“Ã‚ÂÃƒÂ¥Ã‚ÂºÃ¢â‚¬ÂÃƒÂ¥Ã‚Â¼Ã‚ÂÃƒÂ¤Ã‚Â¼Ã‹Å“ÃƒÂ¥Ã…â€™Ã¢â‚¬â€œ ===================== */


@media (max-width: 768px) {
  .qili-iframe2 .list .item {
    flex-direction: column !important;
  }
  .qili-iframe2 .list .item .txt,
  .qili-iframe2 .list .item .img {
    width: 100%;
  }
  .qili-iframe2 .list .item .txt {
    padding: 30px 24px;
  }

  .qili-iframe2 .list .item .txt a {
    padding: 5px 15px;
  }
  
}

@media (max-width: 480px) {

  .qili-iframe2 ul {
    gap: 8px 12px;
  }
  .qili-iframe2 ul li {
    padding: 8px 12px;
  }
  .qili-iframe2 ul .col-md-3 {
    min-width: 142px;
  }
}