@charset "utf-8";

/* ==========================================
   ABOUT PAGE
========================================== */

.about-page {
  background: linear-gradient(to bottom, #2206fb 0%, #1504a3 70%, #000000 100%);
  height: 85vh;
}

/* Hero Section */
.about-hero-section {

  display: flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

/* 文字內容容器：維持要求的 left: 15% */
.about-hero-container {
  width: 100%;
  position: relative;
  padding-left: 15%;
  z-index: 20; /* 確保內容壓在影片上方 */
}

/* ==========================================
   Content Wrapper
========================================== */
.about-content-wrapper {
  display: flex;
  position: relative;
  width: 100%;
}

.about-left-content {
  position: relative;
  width: 100%;
  pointer-events: none;
  z-index: 10;
}

.about-left-content * {
  pointer-events: auto;
}

/* 巨大標題：壓在影片上 */
.about-main-title {
  font-family: "Azonix-1VB0", sans-serif;
  font-size: clamp(1.5rem, 0.4258rem + 4.6452vw, 6rem);
  font-weight: normal;
  letter-spacing: 1px;
  color: #fff;
  text-align: left;
  margin-bottom: 2.25rem;
}

.about-text-blocks .text-line {
  font-size: clamp(1rem, 0.9403rem + 0.2581vw, 1.25rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   右側影片區塊 - 修正為靠上對齊
========================================== */
.about-right-image {
  position: absolute;
  right: 0; /* 貼齊右邊 0 距離 */
  top: -2rem; /* 修改這裡：從頂部開始，實現與 breadcrumb 靠上對齊 */
  transform: none; /* 移除之前的位移 */

  width: 55vw; /* 稍微加寬讓破軸感更強 */
  max-width: 806px;
  z-index: 1;
}

.image-container {
  width: 100%;
  aspect-ratio: 806 / 473;
  overflow: hidden;
  position: relative;
  /* 增加一點向下的投影，讓破出的邊緣有層次感 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.about-right-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 漸層遮罩：加強左側融入感，確保文字清晰 */
.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  z-index: 2;
}

/* ==========================================
   特殊影片MASK區塊
========================================== */

/* 影片容器 */
.video-wrapper {
  position: relative;
  width: 90%; /* 寬度自適應 */
  max-width: 568px; /* 最大寬度參考 SVG */
  aspect-ratio: 568 / 123; /* 維持你的路徑比例 */
  /* 影片遮罩 */
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568 123"><path d="M536.88.75l30.37,17.46v88.5l-27.03,15.54H27.78L.75,106.71V34.07l27.03-15.54h305.02l.22-.22L350.65.75h186.24Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568 123"><path d="M536.88.75l30.37,17.46v88.5l-27.03,15.54H27.78L.75,106.71V34.07l27.03-15.54h305.02l.22-.22L350.65.75h186.24Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* 影片樣式 */
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 藍色外框層:絕對定位疊在影片上方 */
.border-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 讓點擊穿透到下方的影片 */
  z-index: 2;
}
.border-overlay svg {
  width: 100%;
  height: 100%;
}
/* 設定 SVG 邊框樣式 */
.st0 {
  fill: none; /* 不填色，否則會遮住影片 */
  stroke: #008fff; /* 藍色邊框 */
  stroke-width: 3; /* 邊框粗細 */
  vector-effect: non-scaling-stroke; /* 縮放時保持線條粗細 */
}

/* ==========================================
   contact-Three-Pillars section
========================================== */
.contact-Three-Pillars {
  position: relative;
  min-height: 90vh;
}
.contact-Three-Pillars .container {
  width: 70%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.contact-Three-Pillars .page-title {
  font-family: "Azonix-1VB0", sans-serif;
  font-size: clamp(1.5rem, 0.4258rem + 4.6452vw, 6rem);
  font-weight: normal;
  letter-spacing: 1px;
  color: #2206fb;
  text-align: left;

  margin-bottom: 60px;
}

/* Grid 排版 - 2x2 */
.pillars-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 30px;
  position: relative;
  z-index: 2;
  width: 90%;
  margin: 0 auto;
  margin-top: -6.5rem;
}

/* 左上：影片區域 */
.video-section {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.subtitle {
  font-size: clamp(1.25rem, 1.2202rem + 0.129vw, 1.375rem);
  color: #0099ff;
  letter-spacing: 3px;
  text-align: left;
}
.video-wrapper {
  position: relative;
  width: 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568 123"><path d="M536.88.75l30.37,17.46v88.5l-27.03,15.54H27.78L.75,106.71V34.07l27.03-15.54h305.02l.22-.22L350.65.75h186.24Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 568 123"><path d="M536.88.75l30.37,17.46v88.5l-27.03,15.54H27.78L.75,106.71V34.07l27.03-15.54h305.02l.22-.22L350.65.75h186.24Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.border-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.border-overlay svg {
  width: 100%;
  height: 100%;
}
.st0 {
  fill: none;
  stroke: #0088ff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
/* 右上：智慧 */
.pillar-card.wisdom {
  grid-column: 2;
  grid-row: 1;
}

/* 左下：成果導向 */
.pillar-card.result {
  grid-column: 1;
  grid-row: 2;
}

/* 右下：高效 */
.pillar-card.efficiency {
  grid-column: 2;
  grid-row: 2;
}

/* 卡片容器 */
.pillar-card {
  position: relative;
  min-height: 300px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/* SVG 背景層 */
.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.card-bg svg {
  width: 100%;
  height: 100%;
}

/* 不同卡片的 SVG 旋轉 */
.pillar-card.wisdom .card-bg svg {
  transform: rotate(0deg);
}
.pillar-card.result .card-bg svg {
  transform: rotate(0deg);
}
.pillar-card.efficiency .card-bg svg {
  transform: rotate(0deg);
}

/* 卡片內容層 */
.card-content {
  position: relative;
  z-index: 1;
  text-align: left;
  width: 100%;
}
.title-row {
  display: flex;
  align-items: baseline;
  gap: 15px;
  margin-bottom: 25px;
}

/* 智慧和高效卡片內容往左 */
.wisdom .card-content,
.efficiency .card-content {
  padding-left: 25%;
}

/* 成果導向卡片內容往右 */
.result .card-content {
padding-left: 23%;
}
.pillar-card:hover {
  transform: translateY(-3px);
}
.pillar-title {
  font-family: "MiSans-Normal";
  line-height: 33px;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 0;
}
.pillar-subtitle {
  font-family: "MiSans-Normal";
  font-size: clamp(1rem, 0.9628rem + 0.1351vw, 1.125rem);
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
  white-space: nowrap;
}
.pillar-description {
  font-family: "MiSans-Normal";
  font-size: clamp(1rem, 0.9702rem + 0.129vw, 1.125rem);
  line-height: 1.6;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.8);
}


/* ==========================================
   玻璃卡片 — Mac 相容方案
========================================== */
.pillar-card .card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* ── 毛玻璃背景層 ── */
.pillar-card .glass-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(7.9px);
  -webkit-backdrop-filter: blur(7.9px);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* ── SVG 邊框線層 ── */
.pillar-card .glass-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/**智慧卡片**/
.pillar-card.wisdom .glass-backdrop {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(20, 22, 38, 0.05) 100%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 830 302'%3E%3Cpath d='M159.437 300.75C133.377 300.75 112.25 279.623 112.25 253.563C112.25 205.118 87.477 160.037 46.5827 134.065L7.70814 109.375C3.37495 106.623 0.749981 101.846 0.749983 96.7127L0.750012 15.7501C0.750015 7.46579 7.46574 0.75006 15.75 0.75006L682.208 0.750001C703.858 0.75 723.83 12.414 734.467 31.2712L826.815 194.983C828.083 197.232 828.75 199.77 828.75 202.352L828.75 212.587L828.75 285.75C828.75 294.034 822.034 300.75 813.75 300.75L159.437 300.75Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 830 302'%3E%3Cpath d='M159.437 300.75C133.377 300.75 112.25 279.623 112.25 253.563C112.25 205.118 87.477 160.037 46.5827 134.065L7.70814 109.375C3.37495 106.623 0.749981 101.846 0.749983 96.7127L0.750012 15.7501C0.750015 7.46579 7.46574 0.75006 15.75 0.75006L682.208 0.750001C703.858 0.75 723.83 12.414 734.467 31.2712L826.815 194.983C828.083 197.232 828.75 199.77 828.75 202.352L828.75 212.587L828.75 285.75C828.75 294.034 822.034 300.75 813.75 300.75L159.437 300.75Z'/%3E%3C/svg%3E");
}
/**成果卡片**/
.pillar-card.result .glass-backdrop {
  background: linear-gradient(
    to right,
    rgba(20, 22, 38, 0.05) 0%,
    rgba(255, 255, 255, 0.15) 100%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 830 302'%3E%3Cpath d='M670.563 1.250C696.623 1.250 717.750 22.377 717.750 48.437C717.750 96.882 742.523 141.963 783.417 167.935L822.292 192.625C826.625 195.377 829.250 200.154 829.250 205.287L829.250 286.250C829.250 294.534 822.534 301.250 814.250 301.250L147.792 301.250C126.142 301.250 106.170 289.586 95.533 270.729L3.185 107.017C1.917 104.768 1.250 102.230 1.250 99.648L1.250 89.413L1.250 16.250C1.250 7.966 7.966 1.250 16.250 1.250L670.563 1.250Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 830 302'%3E%3Cpath d='M670.563 1.250C696.623 1.250 717.750 22.377 717.750 48.437C717.750 96.882 742.523 141.963 783.417 167.935L822.292 192.625C826.625 195.377 829.250 200.154 829.250 205.287L829.250 286.250C829.250 294.534 822.534 301.250 814.250 301.250L147.792 301.250C126.142 301.250 106.170 289.586 95.533 270.729L3.185 107.017C1.917 104.768 1.250 102.230 1.250 99.648L1.250 89.413L1.250 16.250C1.250 7.966 7.966 1.250 16.250 1.250L670.563 1.250Z'/%3E%3C/svg%3E");
}
/**高效卡片**/
.pillar-card.efficiency .glass-backdrop {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(20, 22, 38, 0.05) 100%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 830 302'%3E%3Cpath d='M159.437 1.250C133.377 1.250 112.250 22.377 112.250 48.437C112.250 96.882 87.477 141.963 46.583 167.935L7.708 192.625C3.375 195.377 0.750 200.154 0.750 205.287L0.750 286.250C0.750 294.534 7.466 301.250 15.750 301.250L682.208 301.250C703.858 301.250 723.830 289.586 734.467 270.729L826.815 107.017C828.083 104.768 828.750 102.230 828.750 99.648L828.750 89.413L828.750 16.250C828.750 7.966 822.034 1.250 813.750 1.250L159.437 1.250Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 830 302'%3E%3Cpath d='M159.437 1.250C133.377 1.250 112.250 22.377 112.250 48.437C112.250 96.882 87.477 141.963 46.583 167.935L7.708 192.625C3.375 195.377 0.750 200.154 0.750 205.287L0.750 286.250C0.750 294.534 7.466 301.250 15.750 301.250L682.208 301.250C703.858 301.250 723.830 289.586 734.467 270.729L826.815 107.017C828.083 104.768 828.750 102.230 828.750 99.648L828.750 89.413L828.750 16.250C828.750 7.966 822.034 1.250 813.750 1.250L159.437 1.250Z'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1440px) {
  .about-page {
    height: 90vh;
  }
}

@media screen and (max-width: 1336px) {
  .about-page {
    height: 75vh;
  }
}

@media screen and (max-width: 1280px) {
    .about-page {
        height: 100vh;
    }
    /* 智慧和高效卡片內容往左 */
    .wisdom .card-content, .efficiency .card-content {
        padding-left: 16%;
    }
}

@media screen and (max-width: 1180px) {
    .about-page {
        height: 85vh;
    }

    .pillars-wrapper {
        margin-top: -5.5rem;
    }
}

@media screen and (max-width: 1080px) {
    .about-page {
        height: 75vh;
    }
}

/* 以下改為垂直排列 */
@media screen and (max-width: 1024px) {
  .about-page {
    height: auto;
  }

  .about-content-wrapper {
    flex-direction: column;
  }

  .about-hero-section {
    overflow: visible;

    height: auto;
    min-height: auto;
  }

  .about-hero-container {
    padding-left: 5%;
    padding-right: 5%;
  }

  .about-left-content {
    width: 100%;
    margin-bottom: 2rem;
  }

  .about-right-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    top: 0;
    right: 0;
    transform: none;
    margin-top: 2rem;
  }
  .image-container {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
  .image-container::before {
    display: none;
  }
  .about-main-title {
    margin-bottom: 2rem;
  }

  .contact-Three-Pillars .container {
    width: 90%;
  }

  .contact-Three-Pillars .page-title {
    margin: 50px 0;
  }

  .pillars-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    margin-top: 0;
  }

  .video-section {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    padding: 0;
  }

  .pillar-card {
    border: 1px solid #494949;
  }

  .pillar-card.wisdom {
    grid-column: 1;
    grid-row: 2;
  }

  .pillar-card.result {
    grid-column: 1;
    grid-row: 3;
  }

  .pillar-card.efficiency {
    grid-column: 1;
    grid-row: 4;
  }
  .wisdom .card-content,
  .efficiency .card-content,
  .result .card-content {
    padding: 40px;
  }
  /* 隱藏複雜的 SVG */
  .card-bg {
    display: none;
  }

  /* 用偽元素創建簡單背景 */
  .pillar-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      135deg,
      rgba(30, 30, 30, 0.8) 0%,
      rgba(10, 10, 10, 0.9) 100%
    );
    backdrop-filter: blur(7.9px);
    z-index: 0;
  }
}

@media (max-width: 990px) {
  .about-text-blocks .text-line {
  }
}

@media (max-width: 768px) {
  /* 讓 pillars-wrapper 在手機版也能自適應 */
  .pillars-wrapper {
    width: 100%;
    padding: 0 40px;
  }

  /* 影片區域自適應 */
  .video-section {
    width: 60%;
    align-items: flex-start;
    transition: all 0.3s ease-out;
    z-index: 10;
  }
  .video-section-range {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .video-wrapper {
    max-width: 100%;
  }

  /* 副標題文字 */
  .subtitle {
    margin-bottom: 10px;
  }

  /* 卡片內容自適應 */
  .card-content {
    padding: 30px 20px !important;
  }

  /* 重置所有卡片的 padding */
  .wisdom .card-content,
  .efficiency .card-content,
  .result .card-content {
  }

  /* 標題行在小螢幕改為垂直排列 */
  .title-row {
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
  }

  /* 調整標題大小 */
  .pillar-title {
    font-size: 24px;
  }
  .pillar-subtitle {
  }
  .pillar-description {
  }

  /* 讓卡片高度自適應 */
  .pillar-card {
    min-height: auto;
    padding: 20px 0;
  }

  /* 確保偽元素背景也自適應 */
  .pillar-card::before {
  }

  /* Three Pillars 標題調整 */
  .contact-Three-Pillars .page-title {
    margin-bottom: 40px;
  }

  .contact-Three-Pillars .container {
    width: 90%;
  }
}

/* 極小螢幕額外優化 */
@media (max-width: 576px) {
  .pillars-wrapper {
    gap: 20px;
    width: 100%;
    padding: 0 20px;
  }

  .video-section {
    padding: 15px 5px;
  }

  .card-content {
    padding: 25px 15px !important;
  }

  .wisdom .card-content,
  .efficiency .card-content,
  .result .card-content {
    padding: 25px 15px !important;
  }

  .pillar-title {
    font-size: 20px;
  }

  .pillar-description {
  }

  .subtitle {
  }
}

/* 初始狀態：從 0.2 倍大小開始 */
[data-aos="zoom-in2"] {
  transform: scale(0.6);
  opacity: 0;
}

/* 動畫結束狀態：放大到正常大小 */
[data-aos="zoom-in2"].aos-animate {
  transform: scale(1);
  opacity: 1;
  transition-property: transform, opacity;
}





/* ====================================================================================
   超大螢幕 & Mac Retina 2560 專用
   ★ 放在最底部，確保覆蓋上方所有規則
==================================================================================== */
/* 超大螢幕 2560px（DPR=1，如 27吋 4K 非 Retina）*/
@media screen and (min-width: 2200px) {
    
    .about-hero-section {
    width: 70%;  margin: 0 auto;
  
  }
    
    .about-hero-container{padding-left:0;}
    
  .pillars-wrapper {
    width: 70%;
    gap: 20px;
  }
    
}
body.is-retina-mac .pillars-wrapper {
  width: 75% !important;
  gap: 15px !important;
  margin-top: -5rem !important;
}
body.is-retina-mac .wisdom .card-content,
body.is-retina-mac .efficiency .card-content {
  padding-left: 20% !important;
}
body.is-retina-mac .result .card-content {
  padding-left: 18% !important;
}
/* ====================================================================================
   Mac Retina 2560 專用（CSS像素=1280, DPR=2）
   ★ 放最底部確保覆蓋，不加 !important 避免副作用
========================================== ==========================================*/
@media screen and (max-width: 1280px) and (min-resolution: 2dppx) {
  .wisdom .card-content,
  .efficiency .card-content {
    padding-left: 20%;
  }
  .result .card-content {
    padding-left: 25%;
  }
}