body {
  font-family: "Lucida Grande", Verdana, Arial;
  background: #eef2f5;
  color: #222;
}

a{
  color: #1a5fb4;
  text-decoration: none;
}

a:hover{
  color: #56e5eb;
  text-decoration: underline;
}

.hero-gradient {
  background-image: url('/static/wanzi/default/images/top.png');
  background-position: center top;
  background-repeat: no-repeat;
}

.cta-gradient {
  background: linear-gradient(180deg, #f7f9fb 0%, #e3eaf0 100%);
}

.btn-teal {
  background: linear-gradient(180deg, #5fd0df 0%, #2cb5c9 55%, #1fa3b8 100%);
  border: 1px solid #1590a3;
}

.btn-teal:hover {
  background: linear-gradient(180deg, #72d8e5 0%, #38bdd0 55%, #24adc2 100%);
}

.product-btn {
  background: linear-gradient(180deg, #5fd0df 0%, #2cb5c9 60%, #1a9fb3 100%);
  border: 1px solid #168fa1;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.product-btn:hover {
  filter: brightness(1.05);
}

.panel-head {
  background: linear-gradient(180deg, #fafbfc 0%, #e9eef3 100%);
}

.hero-copy {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.logo-script {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-style: italic;
}

.logo-img{
  position: absolute; top: -7px; left: 0; width: 160px;
}
.logo-text{
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 16px;
  left: 130px;
  width: 600px;
}

.logo-text a{
  color: #fff;
  text-decoration: none;
}
.logo-text a:hover{
  color: #56e5eb !important;
  text-decoration: underline !important;
}
.banner-text{
  padding-top: 3rem;
}

.banner-img{
  padding-top: 3rem;
}

#hero-carousel{
  margin-top: 0.2rem;
}

.hero-carousel-track {
  position: relative;
  height: 220px;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero-carousel-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.hero-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.65);
}

.hero-carousel-dot.is-active {
  background: #fff;
  transform: scale(1.15);
}

.btn-slide{
  color: #0f4c9a !important;
  background: rgba(255, 255, 255, 0.5);
  padding: 0 0.65rem;
  border-radius: 1rem;
}

.btn-slide:hover{
  color: #fff !important;
  background: #0f4c9a !important;
}

.top15{
  top: 1.5rem;
}

.about-icon{
  width: 40px;
  height: 20px;
  background: url('/static/wanzi/default/images/about-icon.jpg') no-repeat center center;
  background-size: contain;
}

.text-brand-diy{
  color: #1a5fb4 !important;
}

.category_list{
  list-style: none;
  padding: 8px 0 12px;
  margin: 0;
}
.category_list > li{
  list-style: none;
  margin: 0 0 10px;
}
.category_list > li > a{
  list-style: none;
  padding: 0 12px;
  width: 85%;
  display: block;
  height: 34px;
  line-height: 34px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  border-radius: 17px;
  border: 1px solid #28a9bc;
  background: linear-gradient(to bottom, #46d0dd, #28a9bc);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category_list > li > a:hover{
  color: #fff;
  background: linear-gradient(to bottom, #28a9bc, #46d0dd);
}

/* 一级下有二级时：二级列表样式（参考图） */
.category_list .category_sublist,
.category_list ul{
  list-style: none;
  width: 85%;
  margin: 6px auto 0;
  padding: 6px 10px;
  background: #f3f4f6;
  border-radius: 4px;
}
.category_list .category_sublist > li,
.category_list ul > li{
  list-style: none;
  margin: 0;
}
.category_list .category_sublist > li > a,
.category_list ul > li > a{
  display: block;
  padding: 5px 2px;
  font-size: 12px;
  line-height: 1.45;
  color: #1a5fb4;
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
  margin: 0;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.category_list .category_sublist > li > a::before,
.category_list ul > li > a::before{
  content: '> ';
  color: #1a5fb4;
}
.category_list .category_sublist > li > a:hover,
.category_list ul > li > a:hover{
  color: #28a9bc;
  background: transparent;
}
.category_list .category_sublist > li > a:hover::before,
.category_list ul > li > a:hover::before{
  color: #28a9bc;
}

/* —— 移动端 媒体查询 —— */
@media (max-width: 768px) {
  .logo-img {
    display: none;
  }

  .logo-text {
    font-size: 0.76rem;
    left: 0;
    top: 1.2rem;
    width: 11rem;
  }

  .hero-gradient {
    background-size: 100% contain!important;
  }

  .topbar {
    padding: 0;
  }

  .top15{
    top: 1.3rem;
  }

  .banner-text{
    display: none;
  }

  .banner-img{
    padding-top: 2rem;
  }

  .banner-dots{
    margin-top: 1.5rem;
  }

  .hero-body{
    padding-bottom: 0.76rem!important;
  }

  .hero-carousel-dot{
    background: #1a9fb3!important;
  }
  .hero-carousel-dot.is-active{
    background: #0f4c9a!important;
  }
  #hero-carousel{
    margin-top: 0;
  }

}

/* —— 桌面端 媒体查询 —— */
@media (min-width: 768px) {
  .hero-gradient {
    background-size: cover;
  }
  .hero-carousel-track {
    height: 260px;
  }
}