/* =========================================================
   首页：主视觉 / 品牌介绍 / 品牌案例 / 团队 / 服务数据 / 旅程
   取值对齐原站 _crawl/css_style.min.css 中 .z_banner / .text_img /
   .z_index_about / .z_index_case / .z_index_team / .z_index_service /
   .z_index_contact 的对应规则
   ========================================================= */

/* ---------------- 主视觉（原站 .z_banner + .text_img） ---------------- */

/* 原站 .z_banner { background: url(../img/bg.jpg) }：底纹取自原站 /web/img/bg.jpg */
.sg-hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: url(../img/bg.jpg);
}

.sg-hero .sg-slider,
.sg-hero .sg-slider__track,
.sg-hero .sg-slider__slide { height: 100%; }

/* 原站 li 为 opacity 0/1 硬切换，画面切换靠 .imgbox 的 clip-path 揭开 */
.sg-hero .sg-slider--fade .sg-slider__slide { transition: none; }

/* 行高由 36vw 的图片撑开，文案列随之拉伸（与原站 .z_banner .warps 一致） */
.sg-hero__inner {
  padding-top: clamp(62.4px, 6.25vw, 126px);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.sg-hero__info {
  flex: 1;
  min-width: 0;
  padding: 11.9792vw var(--sg-gutter) 0;  /* 230 / 1920 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--sg-fs-18);
}

.sg-hero__title {
  font-size: var(--sg-fs-50);
  line-height: 2.9167vw;
  font-weight: 700;
}

.sg-hero__desc { margin-top: .5208vw; }
.sg-hero__desc-cn { margin-bottom: .5208vw; }

/* 文案入场：cc1 无延迟、cc2 延迟 .5s（原站 .z_banner .cc1/.cc2） */
.sg-hero__desc-cn,
.sg-hero__desc-en {
  opacity: 0;
  transform: translateY(50%);
  transition: opacity 1s var(--sg-ease), transform 1s var(--sg-ease);
}

.sg-hero__desc-en { transition-delay: .5s; }

.sg-slider__slide.is-active .sg-hero__desc-cn,
.sg-slider__slide.is-active .sg-hero__desc-en {
  opacity: 1;
  transform: translateY(0);
}

/* 图片：奇偶反向揭开 */
.sg-hero__media {
  width: 65%;
  height: 36vw;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--sg-dark);
  clip-path: inset(0 100% 0 0);
  filter: blur(5px);
  transition: clip-path 2.5s var(--sg-ease) .5s, filter 2.5s var(--sg-ease) .5s;
}

.sg-slider__slide:nth-child(even) .sg-hero__media { clip-path: inset(0 0 0 100%); }

.sg-slider__slide.is-active .sg-hero__media { clip-path: inset(0 0 0 0); filter: blur(0); }

.sg-hero__media .sg-media__bg { transform: scale(1.1); transition: transform 3s var(--sg-ease); }
.sg-slider__slide.is-active .sg-hero__media .sg-media__bg { transform: scale(1); }

/* 悬停放大需要盖过上面的 is-active 规则 */
.sg-hero__media:hover .sg-media__bg,
.sg-slider__slide.is-active .sg-hero__media:hover .sg-media__bg { transform: scale(1.05); }

/* 底部装饰大字：线 — This momenT — 线 */
.sg-hero__deco {
  position: absolute;
  left: var(--sg-gutter);
  bottom: 0;
  z-index: 1;
  width: calc(100% - var(--sg-gutter) * 2);
  height: calc(100vh - clamp(62.4px, 6.25vw, 126px) - 36vw);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.sg-hero__deco-text {
  flex-shrink: 0;
  padding: 0 1.0417vw;
  font-size: clamp(16px, 6.25vw, 126px);
  line-height: 4.7917vw;
  letter-spacing: .4167vw;
  font-weight: 700;
}

.sg-hero__deco-line {
  width: 100%;
  height: clamp(8px, .4167vw, 8.4px);
  background: var(--sg-dark);
  opacity: .9;
}

.sg-hero__deco-line--grow {
  width: 0;
  transition: width 5s var(--sg-ease);
}

.sg-hero__deco.is-inview .sg-hero__deco-line--grow { width: 100%; }

/* 控制条：原站桌面隐藏（.z_moible_bar），仅移动端展示 */
.sg-hero__bar {
  display: none;
  position: absolute;
  left: 0;
  bottom: 12px;
  z-index: 3;
  width: 100%;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.sg-hero__nav {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  border-radius: 3px;
  opacity: .8;
  font-size: 18px;
  line-height: 1;
}

.sg-hero__bar .sg-mouse {
  width: 18px;
  height: 25px;
  border-radius: 12px 12px 6px 6px;
  border-color: #fff;
}

.sg-hero__bar .sg-mouse::before { background: #fff; animation-duration: 1s; }

@media screen and (max-width: 980px) {
  .sg-hero { height: auto; min-height: 0; }
  .sg-hero .sg-slider__slide { height: calc(100vh - var(--sg-header-h)); }
  .sg-hero__inner { display: block; position: relative; height: 100%; padding-top: 0; }

  .sg-hero__media { width: 100%; height: 100%; }

  .sg-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .3);
    pointer-events: none;
  }

  .sg-hero__info {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 100%;
    padding: 20px;
    text-align: center;
    color: #fff;
  }

  .sg-hero__desc-cn, .sg-hero__desc-en { text-align: center; }
  .sg-hero__deco { display: none; }

  .sg-hero__bar { display: flex; }
}

/* ---------------- 品牌介绍（原站 .z_index_about） ---------------- */
.sg-about { background: var(--sg-bg); }

.sg-about__top { padding: 4.1667vw var(--sg-gutter); }

.sg-about__warps { display: flex; border-bottom: 1px solid #c8c8c8; }

.sg-about__conwarp {
  width: 62.5vw;
  margin-left: auto;
  margin-top: 12.5vw;
  padding: 2.6042vw;
  padding-right: 0;
  border-left: 1px solid #c8c8c8;
  display: flex;
}

.sg-about__infobox {
  width: 31.25vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sg-about__desc {
  font-size: var(--sg-fs-16);
  line-height: 1.6;
  text-align: justify;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sg-about__media {
  width: 14.5833vw;
  height: 18.75vw;
  flex-shrink: 0;
  margin-left: auto;
}

/* 高度必须逐层给出：淡入模式下轨道是块级且首屏 slide 为相对定位，
   只给最外层高度时百分比无处可算，整块会塌成 0 高 */
.sg-about__btm { height: 50vw; }
.sg-about__btm .sg-slider__track,
.sg-about__btm .sg-slider__slide,
.sg-about__btm .sg-media { height: 100%; }

@media screen and (max-width: 980px) {
  .sg-about__top { padding: 40px 15px; }
  .sg-about__warps { display: block; border: none; }
  .sg-about__conwarp { width: 100%; margin: 20px 0 0; padding: 0; border: none; display: block; }
  .sg-about__infobox { width: 100%; }
  .sg-about__media { display: none; }
  .sg-about__btm { height: 60vw; }
}

/* ---------------- 品牌案例（原站 .z_index_case / .z_case_swiper / .small_img） ---------------- */

/* 原站 .z_index_case */
.sg-case {
  position: relative;
  padding: 7.2917vw var(--sg-gutter);
  padding-bottom: clamp(124.8px, 12.5vw, 252px);
  overflow: hidden;
  background: #cdc4bc;
}

/* 原站 .z_index_case .headbox */
.sg-case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5.2083vw;
}

/* 原站 .z_index_case .btnwarp */
.sg-case__tools { display: flex; align-items: center; }

/* 原站 .z_index_case .btnwarp .z_flex */
.sg-case__arrows { display: flex; align-items: center; }

/* 原站 .z_index_case .btnwarp .iconfont：
   34×34、方角描边、默认 opacity .5，悬停只提亮不换底色 */
.sg-case .sg-arrow {
  width: 34px;
  height: 34px;
  margin: 0 4px;
  border: 1px solid #312f30;
  border-radius: 3px;
  background: hsla(0, 0%, 100%, 0);
  color: #000;
  font-size: 18px;
  line-height: 1;
  opacity: .5;
  transition: ease 1s;
}

.sg-case .sg-arrow:hover {
  opacity: 1;
  background: hsla(0, 0%, 100%, 0);
  border-color: #312f30;
  color: #000;
}

/* 原站 .z_index_case .btnwarp .z_more */
.sg-case .sg-more { margin: 0 0 0 .5208vw; }

/* 原站 .z_case_swiper ul：所有案例底边对齐 */
.sg-case__slider .sg-slider__track { align-items: flex-end; }

/*
  原站 .z_case_swiper li { width:auto }：格宽由内容撑开，
  当前块放大时向外扩张，把后面的案例一起推走。
*/
.sg-case__slider .sg-slider__slide {
  flex: 0 0 auto;
  width: auto;
}

/*
  原站 .z_case_swiper .imgbox：固定图片槽 16.9792vw × 28.9583vw，图片底部对齐。
  基础态图片只占槽的下半部分（22.1354vw 高），
  上方预留的高度就是当前块放大时向上生长的空间。
*/
.sg-case .sg-work-card__media {
  width: 16.9792vw;
  height: 28.9583vw;
  aspect-ratio: auto;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: clamp(15px, 1.0417vw, 21px);
  background: transparent;
  transition: ease 1s;
}

/* 原站 .z_case_swiper .imgbox .box */
.sg-case .sg-work-card__box {
  width: 100%;
  height: 22.1354vw;
  transition: ease 1s;
}

/* 原站 .z_case_swiper li.active .imgbox / .box：当前块向右扩、向上长 */
.sg-case__slider .sg-slider__slide.is-current .sg-work-card__media { width: 22.1875vw; }
.sg-case__slider .sg-slider__slide.is-current .sg-work-card__box { height: 100%; }

/* 原站 .z_case_swiper .infobox */
.sg-case .sg-work-card__info { width: 16.9792vw; padding-top: 0; }

/* 原站 .z_case_swiper .slg */
.sg-case .sg-work-card__tag {
  margin-bottom: 5px;
  color: inherit;
  font-size: var(--sg-fs-16);
  letter-spacing: 0;
}

/* 原站 .z_case_swiper .tts:first-child */
.sg-case .sg-work-card__title {
  margin-top: 0;
  margin-bottom: clamp(8px, .4167vw, 8.4px);
  font-size: var(--sg-fs-20);   /* clamp(16px, 1.0417vw, 21px) */
  font-weight: 700;
  line-height: 1.5;
}

/* 原站 .z_case_swiper .tt 的第三行（描述）：不裁切，随文案换行 */
.sg-case .sg-work-card__caption {
  margin-top: 0;
  color: inherit;
  font-size: var(--sg-fs-16);
  line-height: 1.7;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* 原站案例卡没有图片缩放效果（团队卡才有 li:hover .imgbg），关掉通用组件带来的 */
.sg-case .sg-work-card:hover .sg-media__bg,
.sg-case .sg-media:hover .sg-media__bg { transform: none; }

/* 原站 .z_case_swiper li.active 需要压住相邻案例 */
.sg-case__slider .sg-slider__slide.is-current { z-index: 3; }

/*
  原站 .small_img：底部滚动选择框。
  轨道是铺满一屏的 14×18 小格子（左右各 2px 外边距，节距 18px），
  一格对应一个案例；96×52 的描边选择框可以拖动，
  拖到哪一格，案例条就滑到对应位置。
*/
.sg-case__thumbs {
  position: absolute;
  left: 0;
  bottom: clamp(52px, 5.2083vw, 105px);
  z-index: 2;
}

/* 原站 .small_img ul */
.sg-thumbs__list { white-space: nowrap; }

/* 原站 .small_img li */
.sg-thumbs__list li {
  display: inline-block;
  width: 14px;
  height: 18px;
  margin: 0 2px;
  background: #e1dbd6;
  vertical-align: top;
}

/* 原站 .small_img .box：96×52 + 1px 描边 + 3px 圆角 */
.sg-thumbs__frame {
  position: absolute;
  left: -2px;
  top: 50%;
  z-index: 1;
  width: 96px;
  height: 52px;
  margin-top: -26px;
  background: rgba(238, 235, 232, 0);
  border: 1px solid #312f30;
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
}

/* 拖动时跟手，不做补间 */
.sg-thumbs__frame.is-dragging { transition: none; cursor: grabbing; }

.sg-thumbs__frame:focus-visible { outline: 2px solid var(--sg-theme); outline-offset: 2px; }

@media screen and (max-width: 980px) {
  /* 原站 .z_index_case 移动端 */
  .sg-case { padding: 50px 12px; }
  .sg-case__head { display: block; margin-bottom: 10px; }
  .sg-case__head .sg-title { text-align: center; margin-bottom: 40px; }
  .sg-case__head .sg-title__en { text-align: center; display: none; }
  .sg-case__tools { margin-top: 40px; justify-content: space-between; }
  .sg-case__thumbs { display: none; }

  /* 原站 .z_case_swiper 移动端：格宽 70vw，图片槽与图片同高，不再有放大差异 */
  .sg-case__slider .sg-slider__slide { width: 70vw; }
  .sg-case .sg-work-card__media { width: 100%; height: 90vw; }
  .sg-case .sg-work-card__box { height: 90vw; }
  .sg-case__slider .sg-slider__slide.is-current .sg-work-card__media { width: 100%; }
  .sg-case__slider .sg-slider__slide.is-current .sg-work-card__box { height: 90vw; }
  .sg-case .sg-work-card__info { width: 100%; }
}

/* ---------------- 我们的团队（原站 .z_index_team） ---------------- */
.sg-team {
  padding: 5.2083vw 0;
  background: var(--sg-bg);
  overflow: hidden;
}

.sg-team__infobox { width: 36.1458vw; padding: 0 var(--sg-gutter); }
.sg-team__infobox .sg-more { margin-top: 2.6042vw; }

.sg-team__slider {
  margin-top: 11.9792vw;
  border-top: 1px solid #cdcdcd;
  text-align: center;
}

.sg-team__slider .sg-slider__track { transition-timing-function: linear; }

.sg-team__slider .sg-slider__slide {
  width: 12.5%;   /* 原站 data-view="8,2" */
  padding-top: clamp(10.4px, 1.0417vw, 21px);
}

/* 原站 .box 的右边框：与图片等高、落在列右缘 */
.sg-team__slider .sg-slider__slide::before {
  content: "";
  position: absolute;
  right: 0;
  top: clamp(10.4px, 1.0417vw, 21px);
  width: 1px;
  height: 12.2917vw;
  background: #cdcdcd;
}

.sg-team .sg-designer-card__media {
  width: 80%;
  height: 12.2917vw;
  aspect-ratio: auto;
  margin: 0 auto clamp(10.4px, 1.0417vw, 21px);
}

.sg-team .sg-designer-card__name {
  margin-top: 0;
  font-size: var(--sg-fs-18);
  font-weight: 700;
  line-height: 1.5;
}

.sg-team .sg-designer-card__role {
  color: inherit;
  font-size: var(--sg-fs-18);
  font-weight: 700;
  line-height: 1.5;
}

.sg-team .sg-designer-card__meta {
  margin-top: 6px;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  color: var(--sg-text);
  font-size: var(--sg-fs-16);
  white-space: nowrap;
}

@media screen and (max-width: 980px) {
  .sg-team { padding: 50px 0; }
  .sg-team__infobox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .sg-team__infobox .sg-title { text-align: center; }
  .sg-team__infobox .sg-title__en { display: none; }
  .sg-team__infobox .sg-more { margin: 0; flex-shrink: 0; }

  .sg-team__slider .sg-slider__slide { width: 50%; }
  .sg-team .sg-designer-card__media { height: 50vw; }
  .sg-team__slider .sg-slider__slide::before { height: 50vw; }
}

/* ---------------- 服务 + 数据（原站 .z_index_service） ---------------- */
.sg-service {
  padding: 7.2917vw 0;
  background: #cdc4bc;
}

.sg-service__top { display: flex; align-items: center; }

.sg-service__figure { overflow: hidden; }
.sg-service__figure:nth-child(1) { width: 39.0625vw; height: 36.4583vw; }
.sg-service__figure:nth-child(2) {
  width: 24.7917vw;
  height: 36.4583vw;
  margin-left: .3646vw;
}

.sg-service__infobox { width: 22.3958vw; margin-left: 6.7708vw; }

.sg-service__desc {
  margin: 2.6042vw 0;
  color: var(--sg-text);
  font-size: var(--sg-fs-16);
  line-height: 1.3;
}

.sg-service__btm { margin-top: 4.1667vw; padding: 0 var(--sg-gutter); }

.sg-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
}

.sg-stats h3 { font-weight: 700; font-size: var(--sg-fs-16); }

.sg-stats h3 em {
  display: inline-block;
  margin-right: 5px;
  font-size: clamp(24px, 1.875vw, 37.8px);
  font-style: normal;
  font-weight: 700;
}

.sg-stats__desc { margin-top: 7px; font-size: var(--sg-fs-16); line-height: 1.4; }

@media screen and (max-width: 980px) {
  .sg-service { padding: 50px 12px; }
  .sg-service__figure { display: none; }
  .sg-service__infobox { width: 100%; margin-left: 0; }
  .sg-service__desc { margin: 20px 0; }
  .sg-service__btm { margin-top: 30px; padding: 0; }
  .sg-stats { justify-content: flex-start; }
  .sg-stats li { margin-top: 20px; }
}

/* ---------------- 开启一次奇妙的旅程（原站 .z_index_contact） ---------------- */
.sg-story {
  height: 36.4583vw;
  padding: 0 11.9792vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sg-bg);
}

.sg-story__side { width: 15.1042vw; height: 18.75vw; flex-shrink: 0; }

.sg-story__body { text-align: center; }

.sg-story__title {
  margin-bottom: .5208vw;
  font-size: clamp(20px, 2.5vw, 50.4px);
  font-weight: 700;
  line-height: 1.3;
}

.sg-story__desc { font-size: var(--sg-fs-16); }

/* 原站 .z_gos */
.sg-story__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20.3125vw;
  height: 3.2292vw;
  margin: 2.0833vw auto 0;
  padding-left: 1.0417vw;
  border-radius: 3px;
  background: #d8d9da;
  font-size: var(--sg-fs-16);
  transition: background .6s var(--sg-ease);
}

.sg-story__go-ico {
  width: 2.6042vw;
  height: 2.6042vw;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--sg-bg);
  font-style: normal;
  font-size: var(--sg-fs-18);
  transition: background .6s var(--sg-ease);
}

.sg-story__go:hover .sg-story__go-ico { background: var(--sg-theme); color: #fff; }

@media screen and (max-width: 980px) {
  .sg-story {
    height: auto;
    padding: 50px 0;
    justify-content: center;
    background: #e1dbd6;
  }
  .sg-story__side { display: none; }
  .sg-story__go { width: 80%; height: 50px; margin-top: 40px; }
  .sg-story__go-ico { width: 40px; height: 40px; margin-right: 5px; }
}