:root {
  color-scheme: light;
}

@font-face {
  font-family: "Outfit";
  src: url("/wp-content/themes/junj/assets/fonts/Outfit-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/wp-content/themes/junj/assets/fonts/Outfit-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/wp-content/themes/junj/assets/fonts/Outfit-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/wp-content/themes/junj/assets/fonts/Outfit-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/wp-content/themes/junj/assets/fonts/Outfit-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("/wp-content/themes/junj/assets/fonts/orbitron-bold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

body {
  font-family: "Outfit", Arial, sans-serif;
}

a,
a:hover,
a:focus,
a:focus-visible{
  color: inherit;
  text-decoration: none;
  outline: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
* {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  touch-action: manipulation; /* 消除300ms延迟，修正active时序 */
}

/* 重点：干掉点击后残留的 focus 焦点框（90%残留根源） */
:focus {
  outline: none;
}
/* 键盘访问保留焦点，兼顾无障碍 */
:focus-visible {
  outline: 2px solid #409eff;
}

.about-page {
  --green: #008c11;
  --deep: #14363f;
  --muted: #97a29c;
  --panel: #f5f8f7;
  --menu-bk: #CCE0D7;
  --menu-active: #fff;
  --banner-b-c: #F9FBFA;
  --container: 1640px;
  --border: #B8D8BC;
  max-width: 100%;
}

.container {
  max-width: var(--container);
  margin: auto;
}

.banner-wrap {
  background-color: var(--banner-b-c);
  padding: 97px 0;
}

.banner-wrap h1 {
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 48px;
  line-height: 58px;
}
.banner-wrap h1 span {
  color: var(--green);
}

.banner-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.right-item p {
  font-size: 16px;
  line-height: 27px;
  color: var(--deep);
}

.right-item p:first-child {
  color: var(--green);
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  margin-bottom: 8px;
}

.img-list {
  padding-bottom: 91px;
}

.img-list img {
  margin-top: -150px;
}

.about-three {
  background-color: var(--banner-b-c);
  padding: 115px 0;
}
.about-three {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about-three .left {

}
.about-three .right {
  width: 1084px;
}
.slide-item {
  padding: 42px 35px 20px;
}
.slide-item .text {
  padding: 39px 5px;
}

.certificate-swiper {
  width: 100%;
  overflow: hidden;
}
.slide-item {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.slide-item .img {
  overflow: hidden;
}
.slide-item .img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.slide-item .text h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--deep);
  line-height: 27px;
  height: 54px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.slide-item .text p {
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
}

.slide-item:hover img{
  scale: 1.2;
  transition: all .6s;
}

.slide-item:hover h4 {
  color: var(--green);
  transition: all .6s;
}

.swiper-other-wrap {
  padding-left: 136px;
  padding-right: 20px;
}

.swiper-other-wrap h4 {
  color: var(--green);
  font-size: 34px;
  font-weight: 700;
  line-height: 44px;
  margin-top: 90px;
}

.swiper-other-wrap p {
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
  margin-top: 35px;
}
.swiper-other-wrap .button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
  margin-top: 90px;
}
.swiper-other-wrap .button i {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 50%;
  cursor: pointer;
  transform-origin: center center;
}
.swiper-other-wrap .button i.iconfont::before {
  display: block;
  line-height: 1;
}
@media (hover: hover) {
  .swiper-other-wrap .button i:hover {
    color: #fff;
    background-color: var(--green);
    transition: all .6s;
  }

  .green-bg .swiper-other-wrap .button i:hover {
    color: var(--green);
    background-color: #fff;
    transition: all .6s;
  }
}
.swiper-other-wrap .button i:active {
  color: #fff;
    background-color: var(--green);
    transition: all .3s;
}
.green-bg .swiper-other-wrap .button i:active {
    color: var(--green);
    background-color: #fff;
    transition: all .3s;
  }


.swiper-other-wrap .button i.left {
  transform: rotate(180deg);
}

.green-bg {
  background-color: var(--green);
}

.green-bg .swiper-other-wrap h4 {
  color: #fff;
}

.green-bg .swiper-other-wrap p {
  color: var(--border);
}

.green-bg .swiper-other-wrap .button i {
  color: #fff;
  border-color: #fff;
}

.about-six {
  position: relative;
}

.about-six img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: clamp(320px, 42vw, 800px);
  object-fit: cover;
  object-position: center;
}

.about-six .text {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0, 140, 17 , 0.82);
  padding: 50px 78px;
  border-radius: 30px  0 0 0;
}

.about-six .text p {
  font-size: 28px;
  line-height: 51px;
  color: #fff;
  font-weight: 700;
}

.about-seven {
  padding: 160px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about-seven .right {
  padding-left: 104px;
  min-width: 0;
  align-self: center;
}

.about-seven .right img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: clamp(300px, 36vw, 680px);
  object-fit: contain;
  object-position: center;
}

.about-seven .left {
  padding-left: 141px;
  padding-right: 60px;
}


.about-seven .left h2 {
  font-size: 24px;
  line-height: 44px;
  font-weight: 700;
  color: var(--green);
  margin-top: 88px;
  text-align: left;
}

.about-seven .left p {
  font-size: 18px;
  line-height: 32px;
  color: var(--deep);
  margin-top: 25px;
}
@media (max-width: 1700px) {
  .about-seven .left {
    padding-left: 60px;
  }
}
@media (max-width: 1440px) {
    .about-page {
    --container: 1240px;
  }
    .banner-wrap h1 {
      font-size: 32px;
    }
    .about-three .right {
      width: 650px;
    }
    .swiper-other-wrap {
      padding: 20px;
    }
    .about-seven .left {
      padding: 20px;
    }
    .about-seven .right {
      padding: 0;
      display: flex;
      align-items: center;
    }
}

@media (max-width: 1280px) {
    .about-page {
    --container: 940px;
  }
    .banner-wrap h1 {
      font-size: 32px;
    }
    .about-three .right {
      width: 650px;
    }
    .swiper-other-wrap {
      padding: 20px;
    }
    .about-seven {
      padding: 30px 10px;
    }
}

@media (max-width: 972px) {
    .about-page {
      --container: 640px;
    }
    .banner-wrap h1 {
      font-size: 26px;
      line-height: 36px;
    }
    .swiper-other-wrap h4,
    .about-seven .left h2 {
      font-size: 22px;
    }
    .about-three .right {
      width: 450px;
    }
    .swiper-other-wrap {
      padding: 20px;
    }
    .about-seven {
      padding: 10px;
    }
}

@media (max-width: 840px) {
  .banner-box {
    display: block;
    line-height: 36px;
  }
  .banner-wrap {
    padding: 30px 10px;
  }
  .about-three {
    padding: 20px 10px;
  }
  .about-six .text {
    padding: 10px;
    border-radius: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-six .text p {
    font-size: 20px;
    line-height: 27px;
    display: inline-block;
  }
  .about-seven {
    display: block;
  }
  .about-seven .left h2 {
    margin-top: 10px;
  }
  .about-seven .left {
    padding: 0;
  }
}

@media (max-width: 762px) {
  .img-list img {
    margin-top: 0;
  }
  .img-list,
  .slide-item,
  .about-three,
  .slide-item .text {
    padding: 10px;
  }
  .swiper-other-wrap h4,
  .swiper-other-wrap p {
    margin-top: 10px;
  }
  /* .about-three {
    display: block;
  } */
  .swiper-other-wrap h4 {
    line-height: 30px;
  }
  .about-three .right {
    width: 300px;
  }
  .swiper-other-wrap .button {
    margin-top: 30px;
  }
}
@media (max-width: 562px) {
  .about-three {
    display: block;
  }
  .about-three .right  {
    width: 100%;
  }
  .banner-wrap h1 {
    font-size: 20px;
  }
  .swiper-other-wrap h4,
  .about-seven .left h2 {
    font-size: 18px;
  }
  .about-six .text p,
  .about-seven .left p {
    font-size: 16px;
  }
  .about-seven .left h2 {
    line-height: 26px;
  }
  .about-seven .left p {
    margin-top: 10px;
  }
  .about-seven .left p {
    line-height: 22px;
  }
  .about-seven .right {
    margin-top: 10px;
  }
  .swiper-other-wrap {
    padding: 0;
  }
  .swiper-other-wrap .button {
    margin-top: 15px;
  }
  .slide-item {
    margin-top: 15px;
  }
  .about-three {
    margin-bottom: 30px;
  }
  .about-six img {
    min-height: 200px;
    object-fit: cover;
  }
  .banner-wrap {
    padding: 10px;
  }
}

@media (max-width: 1280px) {
  .about-page,
  .container,
  .banner-box,
  .right-item,
  .about-three,
  .about-three .left,
  .about-three .right,
  .certificate-swiper,
  .slide-item,
  .slide-item .text,
  .about-six,
  .about-six .text,
  .about-seven,
  .about-seven .left,
  .about-seven .right {
    min-width: 0;
  }

  .container {
    width: min(calc(100% - 40px), var(--container));
    max-width: var(--container);
  }

  .banner-wrap {
    padding-block: 56px;
  }

  .banner-wrap h1 {
    font-size: 32px;
    line-height: 1.22;
  }

  .right-item p,
  .swiper-other-wrap p,
  .slide-item .text h4,
  .slide-item .text p {
    font-size: 15px;
    line-height: 1.55;
  }

  .about-three {
    gap: 28px;
    padding: 72px 20px;
  }

  .about-three .right {
    width: 100%;
  }

  .swiper-other-wrap h4 {
    margin-top: 34px;
    font-size: 32px;
    line-height: 1.28;
  }

  .swiper-other-wrap p {
    margin-top: 20px;
  }

  .swiper-other-wrap p br {
    display: none;
  }

  .swiper-other-wrap .button {
    margin-top: 34px;
  }

  .slide-item {
    padding: 24px 20px 18px;
    border-radius: 8px;
  }

  .slide-item .text {
    padding: 24px 0 10px;
  }

  .about-six .text {
    padding: 28px 36px;
    border-radius: 8px 0 0 0;
  }

  .about-six .text p {
    font-size: 26px;
    line-height: 1.45;
  }

  .about-seven {
    gap: 34px;
    padding: 72px 20px;
  }

  .about-seven .left {
    padding-inline: 0;
  }

  .about-seven .right {
    padding-left: 0;
  }

  .about-seven .left h2 {
    margin-top: 0;
    font-size: 24px;
    line-height: 1.45;
  }

  .about-seven .left p {
    font-size: 15px;
    line-height: 1.65;
  }
}

@media (max-width: 1108px) {
  .container {
    width: min(calc(100% - 36px), var(--container));
  }

  .banner-wrap h1,
  .swiper-other-wrap h4,
  .about-six .text p {
    font-size: 28px;
  }

  .about-seven .left h2 {
    font-size: 22px;
  }

  .about-three {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    padding-block: 58px;
  }

  .img-list img {
    margin-top: 0;
  }

  .about-two .img-list-wrap,
  .about-two .img-list {
    margin-top: 24px;
    z-index: auto;
  }
}

@media (max-width: 900px) {
  .banner-wrap {
    padding-block: 46px;
  }

  .banner-box,
  .about-seven {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .banner-wrap h1,
  .swiper-other-wrap h4,
  .about-six .text p,
  .about-seven .left h2 {
    font-size: 22px;
    line-height: 1.32;
  }

  .right-item p,
  .swiper-other-wrap p,
  .slide-item .text h4,
  .slide-item .text p,
  .about-seven .left p {
    font-size: 14px;
  }

  .about-three {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 20px;
    padding: 46px 16px;
  }

  .swiper-other-wrap {
    padding: 0;
  }

  .swiper-other-wrap h4 {
    margin-top: 0;
  }

  .swiper-other-wrap .button {
    margin-top: 22px;
    gap: 20px;
  }

  .swiper-other-wrap .button i {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .about-seven {
    padding-block: 46px;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(calc(100% - 32px), var(--container));
  }

  .banner-wrap {
    padding-block: 40px;
  }

  .banner-wrap h1,
  .swiper-other-wrap h4,
  .about-six .text p,
  .about-seven .left h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  .right-item p,
  .swiper-other-wrap p,
  .slide-item .text h4,
  .slide-item .text p,
  .about-seven .left p {
    font-size: 14px;
    line-height: 1.55;
  }

  .img-list {
    padding-bottom: 34px;
  }

  .img-list img {
    margin-top: 0;
  }

  .about-two {
    overflow: hidden;
  }

  .about-two .img-list-wrap,
  .about-two .img-list {
    margin-top: 24px;
    z-index: auto;
  }

  .honors-wall-hero__content {
    margin-top: 0;
  }

  .about-three {
    display: block;
    padding: 36px 16px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    isolation: isolate;
  }

  .about-three .right {
    width: 100%;
    margin-top: 20px;
  }

  .slide-item {
    padding: 20px 18px 16px;
  }

  .slide-item .text {
    padding: 20px 0 4px;
  }

  .slide-item .text h4 {
    height: auto;
    display: block;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
  }

  .about-six .text {
    padding: 20px;
    border-radius: 0;
  }

  .about-seven {
    padding: 38px 16px;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .banner-wrap {
    padding-block: 34px;
  }

  .about-three {
    padding-inline: 14px;
    padding-block: 32px;
  }

  .swiper-other-wrap .button i {
    width: 40px;
    height: 40px;
  }

  .about-seven {
    padding-inline: 14px;
  }
}

@media (max-width: 390px) {
  .container {
    width: min(calc(100% - 24px), var(--container));
  }

  .banner-wrap h1,
  .swiper-other-wrap h4,
  .about-six .text p,
  .about-seven .left h2 {
    font-size: 20px;
  }

  .right-item p,
  .swiper-other-wrap p,
  .slide-item .text h4,
  .slide-item .text p,
  .about-seven .left p {
    font-size: 14px;
  }
}

/* Independent heading inside the certificate-wall hero. */
.honors-wall-hero {
  position: relative;
  z-index: 1;
  min-height: clamp(300px, 23.3vw, 447px);
  overflow: hidden;
  isolation: isolate;
}

.honors-wall-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 80, 18, 0.32), rgba(0, 140, 17, 0.05));
  content: "";
}

.honors-wall-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.honors-wall-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: clamp(300px, 23.3vw, 447px);
  margin-top: clamp(0px, 5vh, 150px);
  min-height: clamp(300px, 23.3vw, 447px);
  max-width: 900px;
  margin-inline: auto;
  padding-bottom: 84px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.honors-wall-hero__content h2 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(32px, 2.5vw, 48px);
  font-weight: 900;
  line-height: 1.2;
}

.honors-wall-hero__content p {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
  text-align-last: center;
  text-justify: inter-ideograph;
  -webkit-text-justify: inter-ideograph;
}

.about-two {
  position: relative;
  overflow: visible;
}

.about-two .img-list-wrap {
  margin-top: clamp(0px, 5vh, 150px);
  position: relative;
  z-index: 3;
}

.about-two .img-list {
  margin-top: clamp(0px, 5vh, 150px);
  position: relative;
  z-index: 3;
}

.about-two .img-list img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: clamp(280px, 40vw, 760px);
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .honors-wall-hero,
  .honors-wall-hero__content {
    min-height: 320px;
  }

  .honors-wall-hero__content {
    width: min(calc(100% - 40px), 900px);
    padding-bottom: 36px;
  }

  .honors-wall-hero__content h2 {
    font-size: 30px;
  }

  .honors-wall-hero__content p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
  }
}

/* Keep every certificate carousel aligned across mixed card content. */
.about-three.honors-swiper-block .certificate-swiper .swiper-wrapper {
  align-items: stretch;
}

.about-three.honors-swiper-block .certificate-swiper .swiper-slide {
  display: flex;
  height: auto;
}

.about-three.honors-swiper-block .certificate-swiper .slide-item {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
}

.about-three.honors-swiper-block .certificate-swiper .slide-item .img {
  display: flex;
  width: 100%;
  aspect-ratio: 318 / 280;
  align-items: center;
  justify-content: center;
}

.about-three.honors-swiper-block .certificate-swiper .slide-item .img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-three.honors-swiper-block .certificate-swiper .slide-item .text {
  flex: 1 1 auto;
}

/* 1920 design: left 836 / right 1084. Scale that split below 1920 so
   the carousel cannot eat the intro column. */
@media (min-width: 1281px) {
  .about-three {
    grid-template-columns: minmax(0, 836fr) minmax(0, 1084fr);
  }

  .about-three .left,
  .about-three .right {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .swiper-other-wrap {
    padding-left: clamp(32px, 7.08vw, 136px);
    padding-right: 20px;
  }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .slide-item {
    padding: 28px 20px 16px;
  }

  .slide-item .text {
    padding: 20px 0 0;
  }

  .slide-item .text h4 {
    height: auto;
    min-height: calc(27px * 3);
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* ===== 批次 C (2026-08-19) about-honors 视觉对齐修复 ===== */

/* #78 语录文字改小标题样式 + 主题绿: 底框改浅色以保证绿色文字可读 */
.about-six .text {
  background: rgba(255, 255, 255, 0.94);
}

.about-six .text p {
  color: var(--green);
}

/* #79 收尾区块文字居中 */
.about-seven .left {
  text-align: center;
}

/* #82 图文区块: 文字在图片垂直中间 */
.about-seven {
  align-items: center;
}

/* #81 文字太贴近证书: 文字右边界左移, 与证书拉开间距 */
@media (min-width: 1281px) {
  .swiper-other-wrap {
    padding-right: clamp(48px, 4.5vw, 96px);
  }
}

/* #80 证书图片放大: 压缩卡片内边距并加高图片区 */
@media (min-width: 1281px) {
  .about-three .slide-item {
    padding: 22px 16px 14px;
  }

  .about-three.honors-swiper-block .certificate-swiper .slide-item .img {
    aspect-ratio: 318 / 300;
  }
}

/* ── 客户 1009 r22（/about-honors-certifications/ 「Quality Builds Trust…」区块）────
   「文字上移，图片向左移，文字和图片中间可以空小点 / 文字+图片整体要居中，左右两侧间隔一样」。
   1920 实测（改动前）：左列文字墨迹 141..693（左留白 141）、右列图片 1064..1920
   （**贴视口右缘，右留白 0**）、图文间隙 371 —— 与客户截图两侧红框「间隔一样」的诉求正相反。
   改为：
     ① 区块左右各留对称留白（1920 → 各 100）：两侧间隔一样、内容整体居中；
     ② 右列 padding-left 104 → 0 并加 100 的列间距：图片左移（不再贴右缘），
        图文中间留出一个小空隙（"空小点"）；
     ③ padding-top 160 → 120，且 h2 上边距 88 → 40：文字整块上移 88。
   列宽按实测内容配比（760 : 856），图片尺寸不变、只挪位置。
   规则放在文件末尾，以盖住上方各断点里 `.about-seven .left { padding-left: 60px }`
   等同特异性的历史规则。 */
@media (min-width: 1701px) {
  .about-seven {
    padding-top: 120px;
    padding-left: 100px;
    padding-right: 100px;
    grid-template-columns: minmax(0, 760fr) minmax(0, 856fr);
    column-gap: 100px;
  }

  .about-seven .left,
  .about-seven .right {
    padding-left: 0;
    padding-right: 0;
  }

  .about-seven .left h2 {
    margin-top: 40px;
  }
}

@media (min-width: 1201px) and (max-width: 1700px) {
  .about-seven {
    padding-top: 120px;
    padding-left: 60px;
    padding-right: 60px;
    grid-template-columns: minmax(0, 760fr) minmax(0, 856fr);
    column-gap: 60px;
  }

  .about-seven .left,
  .about-seven .right {
    padding-left: 0;
    padding-right: 0;
  }

  .about-seven .left h2 {
    margin-top: 40px;
  }
}