@charset "UTF-8";

body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  text-align: justify;
  user-select: none;
  /* 👉 Swiper 的 swiper-button-next（或 swiper-button-prev）在觸發點擊時，可能會影響 DOM 的焦點或觸發文字選取。 */
}

[v-cloak] {
  opacity: 0;
  /* 初始隱藏 */
  transition: opacity 0.6s ease;
  /* 允許淡入 */
}

/* --頂部banner--------------------------------------------------------------- */
.banner-final {
  overflow: hidden;
}

.banner-final .final-banner-background {
  display: block;
  width: 100%;
  height: auto;
}

.banner-final .final-banner-title {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: auto;
  animation: slideDownTitle 1.2s ease-out;
  opacity: 1;
}

@keyframes slideDownTitle {
  0% {
    transform: translateY(-55px) translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}

.banner-final .final-banner-characters {
  position: absolute;
  bottom: 1%;
  right: 5%;
  width: 50%;
  height: auto;
  animation: bobbing-final-characters 3.5s ease-in-out infinite;
}

.banner-final .final-banner-logo {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 15%;
  height: auto;
}

.navbar-LINEimg {
  position: absolute;
  top: 5%;
  right: 8%;
  width: 50px;
  height: auto;
}

.navbar-FBimg {
  position: absolute;
  top: 5%;
  right: 4%;
  width: 50px;
  height: auto;
}

.banner-final .final-banner-slogan {
  position: absolute;
  bottom: 8%;
  left: 5%;
  width: 50%;
  height: auto;
}

/* 確保 picture 標籤內的 img 能填滿空間 */
.banner-final .final-banner-slogan img {
  width: 80%;
  height: auto;
  display: block; /* 移除圖片底部多餘的空間 */
}

@keyframes bobbing-final-characters {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 1255px) {
  .navbar-LINEimg {
    right: 9%;
  }
}

@media (max-width: 997px) {
  .banner-final {
    margin-top: 70px;
  }
  .banner-final .final-banner-logo {
    display: none;
  }
  .navbar-LINEimg,
  .navbar-FBimg {
    display: none;
  }
}

@media (max-width: 768px) {
  .banner-final .final-banner-title {
    width: 42%;
  }
  .banner-final .final-banner-characters {
    right: 2%;
    width: 65%;
  }
}
/* -------------------------------------------------------------- */

.logo {
  width: 180px;
}

.header {
  background-color: #ffffff;
  color: #333;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed; /* 固定在畫面頂部 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 確保在最上層 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.brand-logo {
  font-size: 1.5em;
  font-weight: bold;
}

/* --- 漢堡選單按鈕 --- */
.hamburger-menu {
  width: 30px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  background: none;
  border: none;
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* --- 導覽列 (預設為收合狀態) --- */
.nav-links {
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 280px; /* 導覽列寬度 */
  background-color: #333;
  padding-top: 80px; /* 留出 header 的空間 */
  display: flex;
  flex-direction: column;
  z-index: 999;
  /* 核心：預設將導覽列移出畫面右側 */
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out; /* 讓滑入/滑出有動畫效果 */
}

/* --- 當導覽列被展開時的狀態 --- */
.nav-links.active {
  transform: translateX(0); /* 將導覽列移回畫面內 */
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 1.2em;
  display: block;
  padding: 20px 30px;
  transition: background-color 0.2s ease;
}

.nav-links li a:hover {
  background-color: #555;
}

/* --- 漢堡選單變形為 "X" 的動畫 --- */
.header.menu-open .hamburger-menu .line1 {
  transform: rotate(45deg) translate(7px, 7px);
}

.header.menu-open .hamburger-menu .line2 {
  opacity: 0;
}

.header.menu-open .hamburger-menu .line3 {
  transform: rotate(-45deg) translate(7px, -7px);
}

.navbar-share-m {
  padding: 20px 30px;
}

.navbar-share-m img {
  width: 50px;
}

@media (min-width: 997px) {
  .header,
  .nav-links {
    display: none;
  }
}

/* --電腦版導覽列---------------------------------------------- */
.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
}

.cta-button {
  width: 266px;
  height: 87px;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.2s ease-in-out;
}

/* 按鈕1: 專業認證 */
#btn-certification {
  background-image: url("../assets/img/button-professional-certification.png");
}
#btn-certification:hover {
  background-image: url("../assets/img/button-professional-certification-hover.jpg");
}

/* 按鈕2: 職能提升 */
#btn-skill {
  background-image: url("../assets/img/button-skill-enhancement.png");
}
#btn-skill:hover {
  background-image: url("../assets/img/button-skill-enhancement-hover.png");
}

/* 按鈕3: 知識變現 */
#btn-knowledge {
  background-image: url("../assets/img/button-monetize-knowledge.png");
}
#btn-knowledge:hover {
  background-image: url("../assets/img/button-monetize-knowledge-hover.png");
}

/* 按鈕4: 成師之路講座 */
#btn-lecture {
  background-image: url("../assets/img/button-path-to-teacher-lecture.png");
}
#btn-lecture:hover {
  background-image: url("../assets/img/button-path-to-teacher-lecture-hover.png");
}

@media (max-width: 997px) {
  .button-container {
    display: none;
  }
}

.event-logo {
  width: 30%;
}

/* -Youtube-------------------------------------------------------------- */
.video-wrapper {
  padding: 70px 50px;
}
.YT {
  text-align: center;
}

.YT iframe {
  width: 1120px;
  height: 630px;
  border: none;
}

@media (max-width: 1300px) {
  .YT iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 768px) {
  .video-wrapper {
    padding: 40px 20px;
  }
}
@media (max-width: 420px) {
  .video-wrapper {
    padding: 30px 10px;
  }
}
/* -成為A咖名師，從證照開始------------------------------------------------- */
.banner-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.banner-background {
  display: block; /* 移除圖片底部的額外空間 */
  width: 100%;
  height: auto;
}

.banner-content {
  position: absolute; /* 相對於 .banner-container 定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* 使用 Flexbox 方便定位內容 */
  align-items: center; /* 垂直方向置中 */
  justify-content: space-around; /* 水平方向平均分配空間 (可根據需求調整) */
  padding: 0 5%; /* 左右留一些內邊距 */
  box-sizing: border-box; /* 確保 padding 不會撐大容器 */
}

.banner-title {
  width: 45%; /* 比例可根據您的標題實際寬度調整 */
  height: auto;
}

.banner-hero {
  width: 30%;
  height: auto;
  align-self: flex-end;
  margin-bottom: 20px;
  animation: bobbing 3.5s ease-in-out infinite;
}

.banner-star {
  position: absolute;
  top: 13%;
  right: 17%;
  width: 80%;
  height: auto;
  max-width: 60px;
  animation: bobbing 3s ease-in-out infinite;
}

@keyframes bobbing {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.event_bg01_m {
  display: none;
}

/* ======================================================= */
/* 第五個橫幅 (置中版 A咖名師) 的專屬樣式                 */
/* ======================================================= */
/* 我們使用 .banner-5 作為前綴，確保這些樣式只對第五個橫幅生效 */

/* 人物圖樣式 */
.banner-5 .final-hero {
  position: absolute;
  width: 42%;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%); /* 水平置中技巧 */
  animation: bobbing-final-hero 3.5s ease-in-out infinite;
}

/* 星星圖樣式 */
.banner-5 .final-star {
  position: absolute;
  width: 7%;
  top: 42%;
  left: 50%;
  transform: translateX(-50%); /* 水平置中技巧 */
  animation: bobbing-final-star 3s ease-in-out infinite;
}

/* 為這個橫幅定義專屬的動畫，避免覆蓋 */
@keyframes bobbing-final-hero {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-8px) translateX(-50%);
  }
}
@keyframes bobbing-final-star {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-6px) translateX(-50%);
  }
}
@media (max-width: 997px) {
  .event_bg01 {
    display: none;
  }
  .event_bg01_m {
    display: block;
  }
  .event_bg01_m01 {
    width: 100%;
  }
}

/* -成長不停歇，職能再進化------------------------------------------------ */
.banner-content {
  display: flex;
  justify-content: space-between; /* 讓內容物盡量靠兩側 */
  align-items: center; /* 垂直置中對齊 */
  padding: 2% 5%; /* 設定一些內邊距 */
}

/* 學者角色樣式 */
.scholar-character {
  width: 20%; /* 設定寬度 */
  height: auto;
  align-self: flex-end; /* 讓角色站在底部 */
  padding-bottom: 1%; /* 微調與底部的距離 */
  animation: bobbing 3.5s ease-in-out infinite;
}

/* 進化標題樣式 */
.evolution-title {
  width: 48%; /* 設定寬度 */
  height: auto;
}

/* 等級提升圖示樣式 (使用絕對定位) */
.lv-up-icon {
  position: absolute; /* 相對於 .banner-container 定位 */
  top: 8%; /* 離頂部 20% */
  left: 13%; /* 離左側 18% */
  width: 12%; /* 設定寬度 */
  height: auto;
  animation: bobbing 3s ease-in-out infinite;
}

.banner-6 .scholar-character-6 {
  position: absolute;
  width: 25%;
  bottom: 5%;
  left: 45%;
  transform: translateX(-50%); /* 水平置中 */
  animation: bobbing-scholar-6 3.8s ease-in-out infinite;
}

.banner-6 .lv-up-icon-6 {
  position: absolute;
  width: 20%;
  top: 40%;
  left: 50%;
  transform: translateX(-50%); /* 水平置中 */
  animation: bobbing-lv-up-6 3.2s ease-in-out infinite;
}

/* 為這個橫幅定義專屬的動畫，避免與其他動畫名稱衝突 */
@keyframes bobbing-scholar-6 {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-8px) translateX(-50%);
  }
}
@keyframes bobbing-lv-up-6 {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-6px) translateX(-50%);
  }
}

/* -2025向錢進！快把知識變現----------------------------------------------- */
.banner-3 .banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2% 8%;
}

/* 知識變現標題樣式 */
.banner-3 .monetize-title {
  width: 50%; /* 設定寬度 */
  height: auto;
  position: relative; /* 確保標題在最上層 */
  z-index: 10;
}

/* 法師角色樣式 */
.banner-3 .mage-character {
  width: 25%; /* 設定寬度 */
  height: auto;
  align-self: flex-end; /* 讓角色站在底部 */
  padding-bottom: 2%;
  animation: bobbing-mage 3.2s ease-in-out infinite; /* 套用新的動畫 */
}

/* INT 999 圖示樣式 (使用絕對定位) */
.banner-3 .int-999-icon {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%); /* 垂直置中輔助 */
  width: 10%;
  height: auto;
}

/* 為法師定義一個專屬的動畫，避免與其他動畫混淆 */
@keyframes bobbing-mage {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.banner-7 .mage-character-7 {
  position: absolute;
  width: 34%;
  bottom: 5%;
  left: 52%;
  transform: translateX(-50%); /* 水平置中 */
  animation: bobbing-mage-7 3.5s ease-in-out infinite;
}

.banner-7 .int-icon-7 {
  position: absolute;
  width: 16%;
  top: 42%;
  left: 50%;
  transform: translateX(-50%); /* 水平置中 */
  animation: bobbing-int-7 3s ease-in-out infinite;
}

/* 為這個橫幅定義專屬的動畫，避免與其他動畫名稱衝突 */
@keyframes bobbing-mage-7 {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-8px) translateX(-50%);
  }
}
@keyframes bobbing-int-7 {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(-7px) translateX(-50%);
  }
}
/* -開啟成師之路講座------------------------------------------- */
.banner-4 .banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2% 6%;
}

/* 轉職角色樣式 */
.banner-4 .career-change-character {
  width: 35%; /* 設定寬度 */
  height: auto;
  align-self: flex-end; /* 讓角色站在石板路上 */
  padding-bottom: 3%;
  animation: bobbing-career-change 3s ease-in-out infinite;
}

@keyframes bobbing-career-change {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* 講座標題樣式 */
.banner-4 .lecture-title {
  width: 50%; /* 設定寬度 */
  height: auto;
}

.banner-8 .career-change-character-8 {
  position: absolute;
  width: 45%;
  bottom: 5%;
  left: 24%;
  animation: bobbing-career-change-8 3.3s ease-in-out infinite;
}

/* 看更多按鈕的樣式 */
.banner-8 .see-more-button-8 {
  position: absolute;
  bottom: 32%;
  right: 8%;

  /* 按鈕外觀設計 */
  background-color: #00e5ee; /* 亮青色背景 */
  color: white; /* 文字顏色 */
  padding: 8px 15px; /* 按鈕內邊距 (上下8px, 左右15px) */
  border-radius: 20px; /* 圓角 */
  text-decoration: none; /* 移除連結底線 */
  font-weight: bold; /* 文字加粗 */
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 加一點陰影增加立體感 */
  transition: background-color 0.3s ease; /* 讓 hover 效果更平滑 */
}

/* 滑鼠移到按鈕上的效果 */
.banner-8 .see-more-button-8:hover {
  background-color: #00b2b8; /* 顏色加深 */
}

/* 為這個橫幅的人物定義專屬的動畫 */
@keyframes bobbing-career-change-8 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* -footer------------------------------------------------------ */
section {
  background-color: #595757;
  padding: 30px;
}

.footer_img {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer_img img {
  width: 50px;
}

.footer_text {
  font-size: 13px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
}

footer {
  background-color: #000;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 15px;
}

/* ----------------------------------------------- */
@media (max-width: 1810px) {
  .slide-down {
    top: 45%;
  }
  .slide-left-in {
    top: 110%;
  }
}

@media (max-width: 1670px) {
  .slide-down {
    top: 37%;
  }
  .slide-left-in {
    top: 83%;
  }
}

@media (max-width: 1535px) {
  .slide-down {
    top: 43%;
  }
  .slide-left-in {
    top: 90%;
  }
}

@media (max-width: 1380px) {
  .slide-down {
    top: 35%;
  }
  .slide-left-in {
    top: 75%;
  }
}

@media (max-width: 1100px) {
  .event-logo {
    width: 55%;
  }
  .slide-down {
    top: 35%;
  }
  .slide-left-in {
    top: 75%;
    width: 35%;
  }
}
@media (max-width: 991.98px) {
  .slide-down {
    top: 26%;
  }

  .event-logo {
    width: 55%;
  }

  .slide-left-in {
    top: 65%;
  }
}

@media (max-width: 768px) {
  .slide-down {
    top: 24%;
  }

  .event-logo {
    width: 47%;
  }

  .slide-left-in {
    left: 2%;
    top: 60%;
    width: 40%;
  }
}

@media (max-width: 576px) {
  .slide-down {
    top: 28%;
  }

  .event-logo {
    width: 76%;
  }

  .logo {
    width: 140px;
  }
  .slide-left-in {
    top: 65%;
  }
}

@media (max-width: 420px) {
  .slide-left-in {
    width: 48%;
  }
}

@media (max-width: 400px) {
  .slide-down {
    top: 24%;
  }

  .event-logo {
    width: 78%;
  }
}