/**
 * 详情页样式
 * 用于集成式发布的四个子页面
 */

/* ========================================
   Banner Styles
   ======================================== */
.detail-banner {
  width: 1200px;
  margin: 0 auto;
  height: 280px;
  background: linear-gradient(135deg, #4a7cc9 0%, #2d5ba9 50%, #1e4a8a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.detail-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/title-bg.png") no-repeat center center;
  background-size: cover;
  opacity: 1;
}

.detail-banner .banner-title {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  letter-spacing: 8px;
}

/* 不同页面的Banner颜色 */
.xiaofei-banner {
  background: linear-gradient(135deg, #4a7cc9 0%, #2d5ba9 50%, #1e4a8a 100%);
}

.huinong-banner {
  background: linear-gradient(135deg, #5b8fd9 0%, #3d72b9 50%, #2a5a9a 100%);
}

.yibao-banner {
  background: linear-gradient(135deg, #4a7cc9 0%, #2d5ba9 50%, #1e4a8a 100%);
}

.gongjijin-banner {
  background: linear-gradient(135deg, #4a7cc9 0%, #2d5ba9 50%, #1e4a8a 100%);
}

/* ========================================
   Section Styles
   ======================================== */
.detail-section {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.detail-section.section-gray {
  /* background: #f5f7fa; */
}

.detail-section.section-blue {
  background: #115db2;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title .title-line {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #115db2);
}

.section-title .title-line:last-child {
  background: linear-gradient(90deg, #115db2, transparent);
}

.section-title .title-text {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 0 20px;
}

.section-title.white .title-text {
  color: #fff;
}

.section-title.white .title-line {
  background: linear-gradient(90deg, transparent, #fff);
}

.section-title.white .title-line:last-child {
  background: linear-gradient(90deg, #fff, transparent);
}

/* ========================================
   Policy Grid Styles
   ======================================== */
.policy-grid {
  display: flex;
  gap: 30px;
}

.policy-column {
  flex: 1;
}

.policy-header {
  display: flex;
  align-items: center;
  /* margin-bottom: 15px;
  padding-bottom: 10px; */
}

.policy-icon {
  font-size: 20px;
  margin-right: 10px;
}
.policy-icon-img {
  width: 10px;
  height: 20px;
  background-image: url("icon.png");
  background-repeat: no-repeat; /* 禁止图片重复 */
  background-position: center center; /* 图片居中显示 */
  background-size: contain; /* 覆盖容器，保持比例，裁剪超出部分 */
  background-attachment: local; /* 滚动内容时背景图跟随 */
}
.policy-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.policy-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.policy-list li::before {
  content: "\2022";
  /* position: absolute; */
  left: 0;
  color: #115db2;
}

.policy-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
}

.policy-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   Interpret Grid Styles
   ======================================== */
.interpret-grid {
  display: flex;
  gap: 30px;
}

.interpret-column {
  flex: 1;
}

.interpret-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.interpret-icon {
  font-size: 20px;
  margin-right: 10px;
}

.interpret-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.interpret-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.interpret-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.interpret-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.interpret-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
}

.interpret-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

.video-list {
  display: flex;
  gap: 20px;
}

.video-item {
  flex: 1;
}

.video-thumb {
  width: 100%;
  height: 170px;
  background: #e0e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.play-icon {
  width: 50px;
  height: 50px;
  background: rgba(17, 93, 178, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}

.video-item p {
  font-size: 14px;
  color: #333;
  text-align: center;
}

.image-list {
  display: flex;
  gap: 20px;
}

.image-item {
  flex: 1;
  text-align: center;
}

.image-item img {
  width: 100%;
  height: 170px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.image-item p {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* ========================================
   Guide Grid Styles
   ======================================== */
.guide-grid {
  display: flex;
  gap: 30px;
}

.guide-column {
  flex: 1;
}

.guide-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.guide-icon {
  font-size: 20px;
  margin-right: 10px;
}

.guide-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.guide-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.guide-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.guide-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

.category-cards {
  display: flex;
  gap: 20px;
}

.category-card {
  flex: 1;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: scale(1.02);
}

.category-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* ========================================
   Store Styles
   ======================================== */
.store-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.store-tabs .tab {
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.store-tabs .tab:hover,
.store-tabs .tab.active {
  background: #fff;
  color: #115db2;
}

.store-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.store-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
}

.store-name {
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
}

.store-address {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

/* ========================================
   Help Grid Styles
   ======================================== */
.help-grid {
  display: flex;
  gap: 30px;
}

.help-column {
  flex: 1;
}

.help-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.help-icon {
  font-size: 20px;
  margin-right: 10px;
}

.help-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.more-link {
  margin-left: auto;
  color: #999;
  font-size: 14px;
  text-decoration: none;
}

.more-link:hover {
  color: #115db2;
}

.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #e5e5e5;
  font-size: 18px;
  color: #333;
  line-height: 1.6;
}

.faq-list {
  margin-top: 10px;
}

.faq-item {
  margin-bottom: 15px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.faq-q {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.faq-a {
  font-size: 14px;
  color: #666;
  line-height: 1.8;
}

/* ========================================
   Hotline Box Styles
   ======================================== */
.hotline-box {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 10px;
}

.hotline-box.vertical {
  flex-direction: column;
}

.hotline-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hotline-item.large {
  padding: 20px 30px;
}

.hotline-item.btn-style {
  background: #115db2;
}

.hotline-item.btn-style .hotline-label {
  color: #fff;
}

.hotline-icon {
  font-size: 24px;
}

.hotline-label {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.hotline-number {
  font-size: 28px;
  font-weight: bold;
  color: #115db2;
}

.hotline-btn {
  padding: 8px 20px;
  background: #ef920e;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
}

.hotline-btn:hover {
  background: #d88200;
}

/* ========================================
   Sponsor Info Styles
   ======================================== */
.sponsor-info {
  text-align: center;
  padding: 30px 0;
}

.sponsor-info p {
  font-size: 40px;
  color: #395DAC;
  margin: 10px 0;
  font-weight: bold;
}

/* ========================================
   Service Box Styles
   ======================================== */
.service-box {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.service-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: #115db2;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.service-btn:hover {
  background: #0e4a8f;
}

.service-btn.red {
  background: #e74c3c;
}

.service-btn.red:hover {
  background: #c0392b;
}

.service-icon {
  font-size: 20px;
}

.service-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-list ul li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.service-list ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.service-list ul li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.service-list ul li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   One Thing Grid Styles
   ======================================== */
.one-thing-grid {
  display: flex;
  gap: 30px;
}

.one-thing-column {
  flex: 1;
}

.one-thing-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #115db2;
}

.one-thing-icon {
  font-size: 20px;
  margin-right: 10px;
}

.one-thing-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.one-thing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.one-thing-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.one-thing-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.one-thing-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.one-thing-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   QA Grid Styles
   ======================================== */
.qa-grid {
  display: flex;
  gap: 30px;
}

.qa-column {
  flex: 1;
}

.qa-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #115db2;
}

.qa-icon {
  font-size: 20px;
  margin-right: 10px;
}

.qa-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.qa-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qa-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.qa-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.qa-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.qa-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   Product Grid Styles
   ======================================== */
.product-grid {
  display: flex;
  gap: 30px;
}

.product-column {
  flex: 1;
}

.product-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #115db2;
}

.product-icon {
  font-size: 20px;
  margin-right: 10px;
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.product-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.product-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.product-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.product-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   Business Grid Styles
   ======================================== */
.business-grid {
  display: flex;
  gap: 30px;
}

.business-column {
  flex: 1;
}

.business-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #115db2;
}

.business-icon {
  font-size: 20px;
  margin-right: 10px;
}

.business-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.business-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.business-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.business-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.business-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.business-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   Activity Grid Styles
   ======================================== */
.activity-grid {
  display: flex;
  gap: 30px;
}

.activity-column {
  flex: 1;
}

.activity-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #115db2;
}

.activity-icon {
  font-size: 20px;
  margin-right: 10px;
}

.activity-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.activity-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.activity-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.activity-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.activity-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   Info Grid Styles
   ======================================== */
.info-grid {
  display: flex;
  gap: 30px;
}

.info-column {
  flex: 1;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #115db2;
}

.info-icon {
  font-size: 20px;
  margin-right: 10px;
}

.info-title {
  font-size: 18px;
  font-weight: bold;
  color: #115db2;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.info-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.info-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.info-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   News Grid Styles
   ======================================== */
.news-grid {
  display: flex;
  gap: 30px;
}

.news-list {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  padding: 10px 0;
  padding-left: 15px;
  position: relative;
  border-bottom: 1px dashed #e5e5e5;
}

.news-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #115db2;
}

.news-list li a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.news-list li a:hover {
  color: #115db2;
  text-decoration: underline;
}

/* ========================================
   Responsive Styles
   ======================================== */
@media screen and (max-width: 768px) {
  .detail-banner {
    height: 180px;
  }

  .detail-banner .banner-title {
    font-size: 28px;
    letter-spacing: 4px;
  }

  .section-title .title-text {
    font-size: 22px;
  }

  .policy-grid,
  .interpret-grid,
  .guide-grid,
  .help-grid,
  .one-thing-grid,
  .qa-grid,
  .product-grid,
  .business-grid,
  .activity-grid,
  .info-grid,
  .news-grid {
    flex-direction: column;
  }

  .store-list {
    grid-template-columns: 1fr;
  }

  .hotline-box {
    flex-direction: column;
  }

  .service-box {
    flex-direction: column;
  }

  .category-cards {
    flex-direction: column;
  }

  .video-list,
  .image-list {
    flex-direction: column;
  }
}