/* ==================== 首页专属样式 ==================== */

/* 关于我们区域 */
.about-section {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 4.84vw 70.99vw 5.52vw 16.98vw;
  overflow: hidden;
  background-image: url(../img/about_bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 0;
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 0.6;
  z-index: 0;
}

.about-section>* {
  position: relative;
  z-index: 1;
}

.about-desc {
  display: flex;
  position: absolute;
  top: 7.34vw;
  left: 17.08vw;
  align-items: center;
  width: 65.885vw;
  height: 16.563vw;
  line-height: 2.6vw;
  letter-spacing: 0.05vw;
  color: #ffffff;
  font-family: Maitree, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 1.042vw;
}

.about-footer {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding-right: 0;
  padding-left: 0;
}

.about-title {
  display: flex;
  letter-spacing: 0.1vw;
  color: #FFFFFF;
  font-family: OPPOSans, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 2.083vw;
  font-weight: bold;
  margin: 0;
}

.about-footer .btn-primary {
  margin-top: 15.28vw;
}

/* 企业理念区域 */
.philosophy-section {
  position: relative;
  margin-top: 33.96vw;
  width: 100vw;
  height: 33.8vw;
}

.philosophy-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 33.8vw;
}

.philosophy-item {
  position: absolute;
  top: -33.96vw;
  width: 33.39vw;
  height: 34.06vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0.2vw 0.8vw rgba(0, 0, 0, 0.12),
    0 0.8vw 2vw rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.philosophy-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy-item:hover {
  transform: translateY(-0.8vw) scale(1.02);
  box-shadow:
    0 1vw 2.5vw rgba(0, 106, 255, 0.2),
    0 2vw 5vw rgba(0, 0, 0, 0.15),
    inset 0 0 0 0.1vw rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.philosophy-item:hover::before {
  opacity: 1;
}

.philosophy-item:active {
  transform: translateY(-0.4vw) scale(1.01);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy-item-1 {
  left: 0;
  background-image: linear-gradient(180deg, #00000000 0%, #000000 100%),
    url(../img/about-item1.webp);
  background-position: 0px -13.28vw;
  background-size: 102.18% 178.05%;
}

.philosophy-subtitle {
  display: flex;
  position: absolute;
  top: 27.29vw;
  left: 0.68vw;
  align-items: center;
  justify-content: center;
  width: 32.19vw;
  height: 5.47vw;
  line-height: 2.34vw;
  letter-spacing: 0.06vw;
  color: #ffffff;
  font-family: Maitree, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 1.25vw;
}

.philosophy-title {
  display: flex;
  position: absolute;
  top: 23.91vw;
  left: 0.68vw;
  align-items: center;
  justify-content: center;
  width: 32.19vw;
  height: 5.47vw;
  line-height: 2.34vw;
  letter-spacing: 0.08vw;
  color: #ffffff;
  font-family: OPPOSans, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 1.67vw;
  font-weight: 700;
}

.philosophy-item-2 {
  left: 33.39vw;
  width: 33.28vw;
  background-image: linear-gradient(180deg, #00000000 0%, #000000 100%),
    url(../img/about-item2.webp);
  background-position: -2.24vw 0px;
  background-size: 153.45% 100%;
}

.philosophy-item-2 .philosophy-subtitle {
  left: 0.73vw;
}

.philosophy-item-2 .philosophy-title {
  left: 0.73vw;
}

.philosophy-item-3 {
  right: -0.05vw;
  left: auto;
  background-image: linear-gradient(180deg, #00000000 0%, #000000 100%),
    url(../img/about-item3.webp);
}

.philosophy-item-3 .philosophy-subtitle {
  left: 0.63vw;
}

.philosophy-item-3 .philosophy-title {
  left: 0.63vw;
}

.philosophy-detail {
  display: flex;
  position: absolute;
  top: 0;
  right: -0.05vw;
  flex-direction: column;
  align-items: flex-start;
  background: #03173799;
  padding: 6.3vw 10.57vw 6.04vw 4.9vw;
  width: 52.81vw;
  height: 33.8vw;
}

.philosophy-detail-text {
  display: flex;
  align-items: center;
  width: 37.34vw;
  height: 16.56vw;
  line-height: 2.6vw;
  letter-spacing: 0.06vw;
  color: #ffffff;
  font-family: Maitree, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: 1.25vw;
}

.philosophy-detail .btn-primary {
  margin-top: 3vw;
  margin-right: 25.31vw;
  align-self: stretch;
}

/* 品牌合作区域 */
.brand-section {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  margin-right: -0.05vw;
  margin-left: -0.05vw;
  padding: 2.55vw 8.49vw 5.57vw 8.44vw;
  overflow: hidden;
}

.brand-header {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brand-title {
  line-height: 5.21vw;
  letter-spacing: 0.1vw;
  color: var(--color-black);
  font-family: OPPOSans, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: var(--font-xl);
  font-weight: 700;
}

.brand-subtitle {
  line-height: 1.72vw;
  letter-spacing: 0.83vw;
  color: var(--color-gray);
  font-family: OPPOSans, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif;
  font-size: var(--font-base);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-self: stretch;
  margin-top: 4.22vw;
  margin-bottom: 3vw;
  width: 100%;
  max-width: 83.13vw;
  border: 0.1vw solid #bebebe;
  border-collapse: collapse;
}

.brand-item {
  border: var(--border-base) solid var(--color-border);
  border-collapse: collapse;
  width: 100%;
  height: 9.22vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-white);
  position: relative;
  cursor: pointer;
  box-shadow:
    0 0.3vw 0.8vw rgba(0, 0, 0, 0.1),
    0 0.6vw 1.5vw rgba(0, 0, 0, 0.06),
    inset 0 0.05vw 0.1vw rgba(255, 255, 255, 0.8);
}

.brand-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 106, 255, 0.03) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.brand-item:not(:nth-child(4n)) {
  border-right: var(--border-base) solid var(--color-border);
}

.brand-item:nth-child(n+5) {
  border-top: none;
}

.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: var(--transition-base);
}

.brand-item:hover {
  transform: translateY(-0.3vw) scale(1.03);
  box-shadow:
    0 0.8vw 2vw rgba(0, 106, 255, 0.15),
    0 1.5vw 3.5vw rgba(0, 0, 0, 0.08),
    inset 0 0 0 0.05vw rgba(0, 106, 255, 0.2);
  border-color: rgba(0, 106, 255, 0.4);
  z-index: 1;
}

.brand-item:hover::after {
  opacity: 1;
}

.brand-item:active {
  transform: translateY(-0.1vw) scale(1.01);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}