/* =========================================================
   YUNASSIE CERTIFICATE WALL
   PURE WHITE / MULTI-COLOR PREMIUM VERSION

   所有样式仅作用于：
   #yunassie-certificates-v3
========================================================= */


#yunassie-certificates-v3 {


  /* =====================================================
     【主要颜色修改位置】

     国际蓝灰
     青绿色
     低饱和紫
     柔和陶土橙
  ====================================================== */

  --yc-blue:#58788c;
  --yc-blue-dark:#3d5e72;
  --yc-blue-soft:#edf3f6;

  --yc-green:#668679;
  --yc-green-dark:#4b6a5d;
  --yc-green-soft:#eef4f1;

  --yc-violet:#81738e;
  --yc-violet-dark:#655771;
  --yc-violet-soft:#f4f1f6;

  --yc-coral:#bf7963;
  --yc-coral-dark:#985c49;
  --yc-coral-soft:#faf1ee;

  --yc-dark:#222528;
  --yc-text:#686d70;
  --yc-soft:#92979a;
  --yc-line:#e8eaeb;


  width:100%;

  padding:
    82px 25px
    70px;

  box-sizing:border-box;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color:var(--yc-dark);

  overflow:hidden;


  /* =====================================================
     【页面纯白背景修改位置】

     当前固定为纯白：
     #ffffff
  ====================================================== */

  background:#ffffff;

}



#yunassie-certificates-v3 *,
#yunassie-certificates-v3 *::before,
#yunassie-certificates-v3 *::after {

  box-sizing:border-box;

}



/* =========================================================
   CONTAINER
========================================================= */


#yunassie-certificates-v3
.yc3-container {

  width:100%;

  max-width:1500px;

  margin:0 auto;

}



/* =========================================================
   HEADER
========================================================= */


#yunassie-certificates-v3
.yc3-header {

  margin-bottom:55px;

}



/* =========================================================
   SMALL TITLE
========================================================= */


#yunassie-certificates-v3
.yc3-small-title {

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:18px;

  color:var(--yc-blue-dark);

  font-size:10px;

  font-weight:700;

  letter-spacing:2.6px;

}



#yunassie-certificates-v3
.yc3-small-title span {

  position:relative;

  width:43px;

  height:1px;

  overflow:hidden;

  background:#e2e5e6;

}



#yunassie-certificates-v3
.yc3-small-title span::after {

  content:"";

  position:absolute;

  top:0;

  left:-100%;

  width:100%;

  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--yc-blue),
      var(--yc-violet),
      var(--yc-coral),
      var(--yc-green)
    );

  animation:
    yc3SmallLine
    3s
    ease-in-out
    infinite;

}



@keyframes yc3SmallLine {

  0% {

    left:-100%;

  }

  50%,
  100% {

    left:100%;

  }

}



/* =========================================================
   TITLE ROW
========================================================= */


#yunassie-certificates-v3
.yc3-title-row {

  display:grid;

  grid-template-columns:
    1.12fr .88fr;

  gap:80px;

  align-items:center;

}



#yunassie-certificates-v3
.yc3-title-row h2 {

  margin:0;

  color:var(--yc-dark);

  font-size:
    clamp(
      38px,
      4vw,
      61px
    );

  line-height:1.08;

  letter-spacing:-1.7px;

  font-weight:400;

}



/* =========================================================
   主标题彩色动态文字
========================================================= */


#yunassie-certificates-v3
.yc3-title-row h2 span {

  display:block;

  margin-top:4px;

  color:transparent;

  background:
    linear-gradient(
      100deg,
      var(--yc-blue-dark) 0%,
      var(--yc-blue) 20%,
      var(--yc-violet) 42%,
      var(--yc-coral) 64%,
      var(--yc-green) 83%,
      var(--yc-blue-dark) 100%
    );

  background-size:
    260% 100%;

  -webkit-background-clip:text;

  background-clip:text;

  animation:
    yc3TitleGradient
    9s
    linear
    infinite;

}



@keyframes yc3TitleGradient {

  from {

    background-position:
      0% center;

  }

  to {

    background-position:
      260% center;

  }

}



/* =========================================================
   QUALITY STATEMENT
========================================================= */


#yunassie-certificates-v3
.yc3-quality-statement {

  width:100%;

  max-width:570px;

  justify-self:end;

}



/* LABEL */

#yunassie-certificates-v3
.yc3-statement-label {

  display:flex;

  align-items:center;

  gap:9px;

  margin-bottom:15px;

  color:var(--yc-green-dark);

  font-size:9px;

  line-height:1;

  font-weight:700;

  letter-spacing:2px;

}



/* =========================================================
   动态状态点
========================================================= */


#yunassie-certificates-v3
.yc3-statement-dot {

  position:relative;

  display:block;

  width:7px;

  height:7px;

  flex:0 0 7px;

  border-radius:50%;

  background:var(--yc-green);

  animation:
    yc3DotPulse
    2.4s
    ease-in-out
    infinite;

}



#yunassie-certificates-v3
.yc3-statement-dot::after {

  content:"";

  position:absolute;

  inset:-5px;

  border-radius:50%;

  border:
    1px solid
    rgba(102,134,121,.27);

  animation:
    yc3DotRing
    2.4s
    ease-out
    infinite;

}



@keyframes yc3DotPulse {

  0%,
  100% {

    transform:scale(1);

  }

  50% {

    transform:scale(1.2);

  }

}



@keyframes yc3DotRing {

  0% {

    transform:scale(.7);

    opacity:1;

  }

  100% {

    transform:scale(1.7);

    opacity:0;

  }

}



/* =========================================================
   STATEMENT CONTENT
========================================================= */


#yunassie-certificates-v3
.yc3-statement-content {

  display:grid;

  grid-template-columns:
    2px 1fr;

  gap:20px;

}



/* =========================================================
   左侧动态彩色线
========================================================= */


#yunassie-certificates-v3
.yc3-statement-line {

  width:2px;

  height:100%;

  min-height:105px;

  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      var(--yc-blue),
      var(--yc-violet),
      var(--yc-coral),
      var(--yc-green)
    );

  background-size:
    100% 200%;

  animation:
    yc3VerticalColor
    7s
    linear
    infinite;

}



@keyframes yc3VerticalColor {

  from {

    background-position:
      center 0%;

  }

  to {

    background-position:
      center 200%;

  }

}



/* =========================================================
   STATEMENT TEXT
========================================================= */


#yunassie-certificates-v3
.yc3-statement-main p {

  max-width:520px;

  margin:
    -4px 0
    18px;

  color:#6b6f72;

  font-size:15px;

  line-height:1.85;

  font-weight:400;

}



#yunassie-certificates-v3
.yc3-statement-main p strong {

  color:#26292b;

  font-weight:600;

}



/* =========================================================
   BOTTOM KEYWORDS
========================================================= */


#yunassie-certificates-v3
.yc3-statement-bottom {

  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

}



#yunassie-certificates-v3
.yc3-statement-bottom span {

  color:var(--yc-blue-dark);

  font-size:8px;

  font-weight:700;

  letter-spacing:1.4px;

}



#yunassie-certificates-v3
.yc3-statement-bottom span:nth-of-type(2) {

  color:var(--yc-violet-dark);

}



#yunassie-certificates-v3
.yc3-statement-bottom span:nth-of-type(3) {

  color:var(--yc-green-dark);

}



#yunassie-certificates-v3
.yc3-statement-bottom i {

  display:block;

  width:3px;

  height:3px;

  border-radius:50%;

  background:#c4c7c9;

}



/* =========================================================
   THREE FEATURES
========================================================= */


#yunassie-certificates-v3
.yc3-features {

  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:14px;

  max-width:900px;

  margin-top:42px;

}



#yunassie-certificates-v3
.yc3-feature {

  --yc-feature-color:#777;
  --yc-feature-soft:#fafafa;

  position:relative;

  display:flex;

  align-items:center;

  gap:15px;

  min-height:78px;

  padding:
    14px 17px;

  overflow:hidden;

  background:#ffffff;

  border:
    1px solid
    #e8eaeb;

  border-radius:10px;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}



/* 三种颜色 */

#yunassie-certificates-v3
.yc3-feature-blue {

  --yc-feature-color:
    var(--yc-blue);

  --yc-feature-soft:
    var(--yc-blue-soft);

}



#yunassie-certificates-v3
.yc3-feature-green {

  --yc-feature-color:
    var(--yc-green);

  --yc-feature-soft:
    var(--yc-green-soft);

}



#yunassie-certificates-v3
.yc3-feature-violet {

  --yc-feature-color:
    var(--yc-violet);

  --yc-feature-soft:
    var(--yc-violet-soft);

}



/* 左侧动态主题线 */

#yunassie-certificates-v3
.yc3-feature::before {

  content:"";

  position:absolute;

  left:0;

  top:0;

  width:3px;

  height:100%;

  background:
    var(--yc-feature-color);

  transform:
    scaleY(.2);

  transform-origin:
    center bottom;

  transition:
    transform .4s ease;

}



#yunassie-certificates-v3
.yc3-feature:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--yc-feature-color);

  box-shadow:
    0 12px 30px
    rgba(20,30,35,.07);

}



#yunassie-certificates-v3
.yc3-feature:hover::before {

  transform:
    scaleY(1);

}



#yunassie-certificates-v3
.yc3-feature-number {

  color:
    var(--yc-feature-color);

  font-size:11px;

  font-weight:700;

  letter-spacing:1px;

  animation:
    yc3FeatureNumber
    3s
    ease-in-out
    infinite;

}



@keyframes yc3FeatureNumber {

  0%,
  100% {

    transform:
      translateY(0);

    opacity:.65;

  }

  50% {

    transform:
      translateY(-4px);

    opacity:1;

  }

}



#yunassie-certificates-v3
.yc3-feature strong {

  display:block;

  margin-bottom:4px;

  color:#292c2e;

  font-size:14px;

  font-weight:600;

}



#yunassie-certificates-v3
.yc3-feature span {

  display:block;

  color:#7a7e81;

  font-size:11px;

  line-height:1.4;

}



/* =========================================================
   CERTIFICATE SECTION
========================================================= */


#yunassie-certificates-v3
.yc3-cert-section {

  padding-top:27px;

  border-top:
    1px solid
    var(--yc-line);

}



/* =========================================================
   CERT HEADER
========================================================= */


#yunassie-certificates-v3
.yc3-cert-heading {

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:30px;

  margin-bottom:26px;

}



#yunassie-certificates-v3
.yc3-label {

  display:block;

  margin-bottom:7px;

  color:var(--yc-blue-dark);

  font-size:11px;

  font-weight:700;

  letter-spacing:2.2px;

}



#yunassie-certificates-v3
.yc3-cert-heading p {

  margin:0;

  color:#7c8082;

  font-size:13px;

}



/* =========================================================
   HOVER TO PAUSE
========================================================= */


#yunassie-certificates-v3
.yc3-view-tip {

  display:flex;

  align-items:center;

  gap:8px;

  color:#95999b;

  font-size:9px;

  letter-spacing:1.7px;

}



#yunassie-certificates-v3
.yc3-live-dot {

  width:6px;

  height:6px;

  border-radius:50%;

  background:var(--yc-green);

  box-shadow:
    0 0 0 0
    rgba(102,134,121,.35);

  animation:
    yc3Live
    2s
    infinite;

}



@keyframes yc3Live {

  0% {

    box-shadow:
      0 0 0 0
      rgba(102,134,121,.4);

  }

  70% {

    box-shadow:
      0 0 0 7px
      rgba(102,134,121,0);

  }

  100% {

    box-shadow:
      0 0 0 0
      rgba(102,134,121,0);

  }

}



/* =========================================================
   VIEWPORT
========================================================= */


#yunassie-certificates-v3
.yc3-viewport {

  position:relative;

  width:100%;

  overflow:hidden;

  padding:
    8px 0
    20px;

}



/* =========================================================
   左右淡出
   ★ 改成真正纯白
========================================================= */


#yunassie-certificates-v3
.yc3-viewport::before,
#yunassie-certificates-v3
.yc3-viewport::after {

  content:"";

  position:absolute;

  z-index:20;

  top:0;

  bottom:0;

  width:65px;

  pointer-events:none;

}



#yunassie-certificates-v3
.yc3-viewport::before {

  left:0;

  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      rgba(255,255,255,.78) 45%,
      rgba(255,255,255,0) 100%
    );

}



#yunassie-certificates-v3
.yc3-viewport::after {

  right:0;

  background:
    linear-gradient(
      270deg,
      #ffffff 0%,
      rgba(255,255,255,.78) 45%,
      rgba(255,255,255,0) 100%
    );

}



/* =========================================================
   TRACK

   【自动滚动速度修改位置】

   当前：
   36s

   越大越慢
   越小越快
========================================================= */


#yunassie-certificates-v3
.yc3-track {

  display:flex;

  align-items:flex-start;

  gap:34px;

  width:max-content;

  animation:
    yc3InfiniteScroll
    36s
    linear
    infinite;

  will-change:transform;

}



/* 鼠标经过暂停 */

#yunassie-certificates-v3
.yc3-viewport:hover
.yc3-track {

  animation-play-state:paused;

}



/* =========================================================
   CERTIFICATE CARD

   ★ 继续无边框
   ★ 继续无相框
   ★ 继续透明
========================================================= */


#yunassie-certificates-v3
.yc3-card {

  --yc-card-color:
    var(--yc-blue);

  width:235px;

  flex:
    0 0 235px;

  display:block;

  overflow:visible;

  background:
    transparent !important;

  border:
    none !important;

  box-shadow:
    none !important;

  color:
    inherit !important;

  text-decoration:
    none !important;

  transition:
    transform .4s
    cubic-bezier(.2,.7,.2,1);

}



#yunassie-certificates-v3
.yc3-card-blue {

  --yc-card-color:
    var(--yc-blue);

}



#yunassie-certificates-v3
.yc3-card-green {

  --yc-card-color:
    var(--yc-green);

}



#yunassie-certificates-v3
.yc3-card-violet {

  --yc-card-color:
    var(--yc-violet);

}



#yunassie-certificates-v3
.yc3-card-coral {

  --yc-card-color:
    var(--yc-coral);

}



#yunassie-certificates-v3
.yc3-card:hover {

  transform:
    translateY(-7px);

}



/* =========================================================
   CERTIFICATE IMAGE

   ★ 不加框
========================================================= */


#yunassie-certificates-v3
.yc3-image {

  width:100%;

  height:335px;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:visible;

  background:
    transparent !important;

  border:
    none !important;

  box-shadow:
    none !important;

}



#yunassie-certificates-v3
.yc3-image img {

  display:block;

  width:auto;

  height:auto;

  max-width:100%;

  max-height:100%;

  object-fit:contain;

  border:
    none !important;

  outline:
    none !important;

  filter:
    drop-shadow(
      0 7px 12px
      rgba(29,39,45,.07)
    );

  transition:
    transform .5s
    cubic-bezier(.2,.7,.2,1),
    filter .5s ease;

}



#yunassie-certificates-v3
.yc3-card:hover
.yc3-image img {

  transform:
    scale(1.032);

  filter:
    drop-shadow(
      0 14px 20px
      rgba(29,39,45,.13)
    );

}



/* =========================================================
   CERTIFICATE TEXT
========================================================= */


#yunassie-certificates-v3
.yc3-card-bottom {

  position:relative;

  min-height:58px;

  margin-top:16px;

  padding:
    0 5px
    9px;

  display:flex;

  align-items:flex-start;

  justify-content:center;

  gap:8px;

  overflow:hidden;

  background:
    transparent !important;

  border:
    none !important;

}



/* 底部动态颜色细线 */

#yunassie-certificates-v3
.yc3-card-bottom::after {

  content:"";

  position:absolute;

  left:50%;

  bottom:0;

  width:0;

  height:1px;

  background:
    var(--yc-card-color);

  transform:
    translateX(-50%);

  transition:
    width .45s ease;

}



#yunassie-certificates-v3
.yc3-card:hover
.yc3-card-bottom::after {

  width:70%;

}



#yunassie-certificates-v3
.yc3-card-bottom span {

  flex:
    0 0 auto;

  padding-top:3px;

  color:
    var(--yc-card-color);

  font-size:9px;

  font-weight:700;

  transition:
    transform .35s ease;

}



#yunassie-certificates-v3
.yc3-card:hover
.yc3-card-bottom span {

  transform:
    translateY(-3px);

}



#yunassie-certificates-v3
.yc3-card-bottom strong {

  max-width:190px;

  color:#34383a;

  font-size:14px;

  line-height:1.4;

  font-weight:500;

  text-align:center;

  transition:
    color .35s ease;

}



#yunassie-certificates-v3
.yc3-card:hover
.yc3-card-bottom strong {

  color:
    var(--yc-card-color);

}



/* =========================================================
   INFINITE LOOP
========================================================= */


@keyframes yc3InfiniteScroll {

  from {

    transform:
      translateX(0);

  }

  to {

    transform:
      translateX(
        calc(-50% - 17px)
      );

  }

}



/* =========================================================
   BOTTOM
========================================================= */


#yunassie-certificates-v3
.yc3-bottom {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  margin-top:11px;

  color:#999da0;

  font-size:9px;

  letter-spacing:.5px;

}



#yunassie-certificates-v3
.yc3-bottom span {

  position:relative;

  width:27px;

  height:1px;

  overflow:hidden;

  background:#e2e4e5;

}



#yunassie-certificates-v3
.yc3-bottom span::after {

  content:"";

  position:absolute;

  top:0;

  left:-100%;

  width:100%;

  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--yc-blue),
      var(--yc-violet),
      var(--yc-green)
    );

  animation:
    yc3BottomLine
    3.5s
    linear
    infinite;

}



@keyframes yc3BottomLine {

  from {

    left:-100%;

  }

  to {

    left:100%;

  }

}



/* =========================================================
   TABLET
========================================================= */


@media (max-width:1050px) {


  #yunassie-certificates-v3
  .yc3-title-row {

    grid-template-columns:1fr;

    gap:28px;

  }



  #yunassie-certificates-v3
  .yc3-quality-statement {

    justify-self:start;

    max-width:650px;

  }



  #yunassie-certificates-v3
  .yc3-features {

    grid-template-columns:
      repeat(3,1fr);

  }



  #yunassie-certificates-v3
  .yc3-card {

    width:220px;

    flex-basis:220px;

  }



  #yunassie-certificates-v3
  .yc3-image {

    height:315px;

  }


}



/* =========================================================
   MOBILE
========================================================= */


@media (max-width:650px) {


  #yunassie-certificates-v3 {

    padding:
      55px 17px;

  }



  #yunassie-certificates-v3
  .yc3-header {

    margin-bottom:38px;

  }



  #yunassie-certificates-v3
  .yc3-title-row h2 {

    font-size:35px;

  }



  #yunassie-certificates-v3
  .yc3-statement-label {

    font-size:8px;

    letter-spacing:1.6px;

  }



  #yunassie-certificates-v3
  .yc3-statement-content {

    gap:14px;

  }



  #yunassie-certificates-v3
  .yc3-statement-main p {

    font-size:13px;

    line-height:1.75;

  }



  #yunassie-certificates-v3
  .yc3-statement-bottom {

    gap:7px;

  }



  #yunassie-certificates-v3
  .yc3-statement-bottom span {

    font-size:7px;

    letter-spacing:1px;

  }



  #yunassie-certificates-v3
  .yc3-features {

    grid-template-columns:1fr;

    gap:8px;

  }



  #yunassie-certificates-v3
  .yc3-feature {

    min-height:65px;

  }



  #yunassie-certificates-v3
  .yc3-cert-heading {

    align-items:flex-start;

  }



  #yunassie-certificates-v3
  .yc3-view-tip {

    display:none;

  }



  #yunassie-certificates-v3
  .yc3-track {

    gap:20px;

    animation-duration:28s;

  }



  #yunassie-certificates-v3
  .yc3-card {

    width:185px;

    flex-basis:185px;

  }



  #yunassie-certificates-v3
  .yc3-image {

    height:255px;

  }



  #yunassie-certificates-v3
  .yc3-card-bottom {

    margin-top:12px;

  }



  #yunassie-certificates-v3
  .yc3-card-bottom strong {

    font-size:12px;

  }



  #yunassie-certificates-v3
  .yc3-viewport::before,
  #yunassie-certificates-v3
  .yc3-viewport::after {

    width:25px;

  }


}



/* =========================================================
   减少动画模式
========================================================= */


@media (prefers-reduced-motion:reduce) {


  #yunassie-certificates-v3 *,
  #yunassie-certificates-v3 *::before,
  #yunassie-certificates-v3 *::after {

    animation:none !important;

    transition-duration:.2s !important;

  }


}