/* 對應原專案 assets/tailwind.css 及各元件 <style scoped> 中的自訂樣式 */

body {
  font-family: 'Roboto', "Noto Sans TC", sans-serif;
}

.bg-container {
  width: 100%;
  background-repeat: no-repeat;
}

.card-content {
  color: #333;
}

/* 對應 components/ArticleCard.vue 的文章卡片 */
.bg-card-pattern {
  background-image: url('img/pc/2-1_pc_bg_03.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card .card-title {
  color: #222;
}

/* Header 下拉選單 */
.nav-item {
  position: relative;
}

.nav-item ul {
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.nav-item:hover > ul {
  visibility: visible;
  opacity: 1;
}

.mobile-submenu {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s ease-in-out;
}

.mobile-submenu.open {
  transform: scaleY(1);
}

.mobile-subitems {
  display: none;
}

.mobile-subitems.open {
  display: block;
}

/* IndexCard 按鈕，模擬 Element Plus el-button */
.el-button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 4px;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #cd0505;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s, color 0.2s;
}

.el-button-like:hover {
  background-color: #cd0505;
  color: #ffffff;
}

/* 對應 components/FloatBtn.vue 的浮動按鈕 */
.float-btn-mo {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

.float-btn-pc {
  position: fixed;
  right: 16px;
  top: 66.666667%;
  transform: translateY(-50%);
  z-index: 50;
}

.float-btn-circle {
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}

.float-btn-tooltip {
  position: absolute;
  right: 100%;
  bottom: 0;
  margin-right: 8px;
  background: #fff;
  border: 2px solid #cd0505;
  border-radius: 12px;
  padding: 16px;
  white-space: nowrap;
  display: none;
}

.float-btn-phone-wrap:hover .float-btn-tooltip {
  display: block;
}

/* YouTube 點擊播放外殼，避免頁面一開就強制載入 iframe */
.yt-facade {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
}

.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.yt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: rgba(205, 5, 5, 0.85);
  cursor: pointer;
}

.yt-play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
}

/* 對應 components/evp/RedCircleFlip.vue 翻轉圓形卡片（dt.html / evp.html 共用） */
.flip-circle {
  position: relative;
  perspective: 1000px;
}

.flip-circle .flip-circle-inner {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.flip-circle:hover .flip-circle-inner {
  transform: rotateY(180deg);
}

.flip-circle-front,
.flip-circle-back {
  backface-visibility: hidden;
}

.flip-circle-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: linear-gradient(to bottom, #cd0a0a 0%, #960000 100%);
}

/* 對應 components/evp/SquareFlip.vue 翻轉方形卡片（dt.html / evp.html 共用） */
.flip-square {
  width: 290px;
  height: 154px;
  perspective: 1000px;
}

.flip-square-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-square:hover .flip-square-inner {
  transform: rotateY(180deg);
}

.flip-square-front,
.flip-square-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.flip-square-back {
  transform: rotateY(180deg);
}

/* 三角形裁切（麥肯錫金字塔圖用，dt.html） */
.clip-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 對應 components/billionceo/CompanyCard.vue 的翻牌卡片（teachers.html 使用） */
.teacher-flip-card {
  height: 264px;
  width: 318px;
}

.teacher-flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

.teacher-flip-card:hover .teacher-flip-card-inner {
  transform: rotateY(180deg);
}

.teacher-flip-card-front,
.teacher-flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.teacher-flip-card-front {
  color: black;
}

.teacher-flip-card-back {
  color: black;
  transform: rotateY(180deg);
}

/* 對應 teachers.vue 用 IntersectionObserver 觸發的淡入動畫 */
.teachers-fade-target {
  opacity: 0;
}

.teachers-fade-target.teachers-fade-in-visible {
  animation: teachersFadeInUp 0.6s ease-out forwards;
}

.teachers-fade-target-up {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.teachers-fade-target-up.teachers-fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes teachersFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Swiper 導覽按鈕 */
.swiper-btn-prev {
  left: 0;
}

.swiper-btn-next {
  right: 0;
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
  color: #000;
  font-size: 20px;
}

@media (max-width: 500px) {
  .mySwiper .swiper-button-next,
  .mySwiper .swiper-button-prev {
    background-color: #fff;
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .mySwiper .swiper-button-next::after,
  .mySwiper .swiper-button-prev::after {
    font-size: 12px;
  }

  .swiper-btn-prev {
    left: 8px;
  }

  .swiper-btn-next {
    right: 8px;
  }
}

/* 對應 pages/ceo50.vue <style scoped> 內的 Swiper 客製樣式 */
.ceo50ArticleSwiperPc .swiper-pagination-bullet {
  background-color: #676c00;
  opacity: 1;
  width: 10px;
  height: 10px;
}

.ceo50ArticleSwiperPc .swiper-pagination-bullet-active {
  background-color: #d1b317;
}

.ceo50ArticleSwiperPc.swiperWithPagination {
  padding-bottom: 3rem;
}

.ceo50ArticleSwiperMo .swiper-button-next,
.ceo50ArticleSwiperMo .swiper-button-prev {
  color: #000;
  font-size: 20px;
}

@media (max-width: 500px) {
  .ceo50ArticleSwiperMo .swiper-button-next,
  .ceo50ArticleSwiperMo .swiper-button-prev {
    background-color: #fff;
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .ceo50ArticleSwiperMo .swiper-button-next::after,
  .ceo50ArticleSwiperMo .swiper-button-prev::after {
    font-size: 12px;
  }
}

/* 對應 components/chartCircle.vue */
.chart-circle {
  min-height: 320px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .chart-circle {
    min-height: 700px;
    height: 73vh;
    padding: 0;
  }
}

.chart-circle .diagram {
  position: relative;
  width: 70%;
  max-width: 870px;
  margin: 0 auto;
  height: min-content;
}

.chart-circle .center {
  position: absolute;
  top: 51%;
  left: 52%;
  width: 45%;
  color: #fff;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.chart-circle .center p {
  margin: 0;
  font-size: clamp(12px, 2.4vw, 1.5em);
  line-height: 1.5em;
  position: absolute;
  width: 60%;
}

.chart-circle .center img {
  width: 100%;
}

.chart-circle .node {
  font-size: 1.875rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: absolute;
  width: 8rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s ease-in-out;
  transform: translate(-50%, -50%);
}

.chart-circle .node1 { top: 0%; left: 52%; }
.chart-circle .node2 { top: 17%; left: 12%; }
.chart-circle .node3 { top: 17%; left: 91%; }
.chart-circle .node4 { top: 53%; left: 5%; }
.chart-circle .node5 { top: 53%; left: 99%; }
.chart-circle .node6 { top: 97%; left: 12%; }
.chart-circle .node7 { top: 97%; left: 93%; }

.chart-circle.chart-mobile .diagram { width: 95%; }
.chart-circle.chart-mobile .node { font-size: 16px; width: 4rem; padding: 3px 12px; }
.chart-circle.chart-mobile .center { width: 50%; }
.chart-circle.chart-mobile .node1 { top: -3.8%; left: 52%; }
.chart-circle.chart-mobile .node2 { top: 18%; left: 17%; }
.chart-circle.chart-mobile .node3 { top: 18%; left: 86%; }
.chart-circle.chart-mobile .node4 { top: 53%; left: 8%; }
.chart-circle.chart-mobile .node5 { top: 53%; left: 92%; }
.chart-circle.chart-mobile .node6 { top: 95%; left: 16%; }
.chart-circle.chart-mobile .node7 { top: 95%; left: 85%; }

@media (min-width: 450px) {
  .chart-circle.chart-mobile .diagram { width: 80%; }
  .chart-circle.chart-mobile .node { font-size: 18px; width: 5rem; padding: 6px 16px; }
  .chart-circle.chart-mobile .center { width: 50%; }
  .chart-circle.chart-mobile .node1 { top: -3%; left: 52%; }
  .chart-circle.chart-mobile .node2 { top: 15%; left: 12%; }
  .chart-circle.chart-mobile .node3 { top: 15%; left: 90%; }
  .chart-circle.chart-mobile .node4 { top: 53%; left: 6%; }
  .chart-circle.chart-mobile .node5 { top: 53%; left: 97%; }
  .chart-circle.chart-mobile .node6 { top: 95%; left: 12%; }
  .chart-circle.chart-mobile .node7 { top: 95%; left: 95%; }
}

.chart-circle .c-light {
  position: absolute;
  border-radius: 9999px;
  filter: blur(24px);
  width: 65%;
  height: 65%;
  transition: all 0.3s ease;
}

.chart-circle.theme-green .center .c-green { display: block; }
.chart-circle.theme-green .center .c-gray { display: none; }
.chart-circle.theme-green .c-light { background-color: #abbf04; mix-blend-mode: overlay; }
.chart-circle.theme-green .node { background-color: #6d6d6d; }
.chart-circle.theme-green .node:hover { background-color: #aa8f16; }
.chart-circle.theme-green .node.active { background-color: #aa8f16; }

.chart-circle.theme-red .center .c-green { display: none; }
.chart-circle.theme-red .center .c-gray { display: block; }
.chart-circle.theme-red .c-light { background-color: #626262; mix-blend-mode: color-dodge; }
.chart-circle.theme-red .node { background-color: #dc0101; }
.chart-circle.theme-red .node:hover { background-color: #000; }
.chart-circle.theme-red .node.active { background-color: #000; }
.chart-circle.theme-red { background: url('img/chart/bg-deco.png') repeat-y center / 100% 205%; }

/* 對應 ceoclub.vue swiperWithPagination / ceoclubArticlesPcSwiper 的分頁樣式 */
.ceoclubArticlesPcSwiper,
.ceoclubArticlesMoSwiper {
  padding-bottom: 48px;
}

.ceoclubArticlesPcSwiper .swiper-pagination-bullet,
.ceoclubArticlesMoSwiper .swiper-pagination-bullet {
  background-color: #d90207;
  opacity: 1;
  width: 10px;
  height: 10px;
}

.ceoclubArticlesPcSwiper .swiper-pagination-bullet-active,
.ceoclubArticlesMoSwiper .swiper-pagination-bullet-active {
  background-color: #a87c45;
}

/* 對應 ceoclub.vue 表單 <el-form> 樣式模擬 */
.ceoclub-form input,
.ceoclub-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  color: #000;
  background-color: #fff;
}

.ceoclub-form label {
  display: block;
  color: #fff;
  font-weight: 700;
  margin-bottom: 8px;
}

/* 對應 components/chartSkill.vue：10個擄獲人心的表達技巧圖表熱區 */
.chart-skill-hotspot {
  position: absolute;
  width: 20%;
  padding-top: 20%;
  display: block;
  border-radius: 9999px;
  cursor: pointer;
  background: transparent;
  transition: background-color 0.2s;
}

.chart-skill-hotspot:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.chart-skill-hotspot.pos-1 { top: 0; left: 0; }
.chart-skill-hotspot.pos-2 { top: 26%; left: 20%; }
.chart-skill-hotspot.pos-3 { top: 0; left: 40%; }
.chart-skill-hotspot.pos-4 { top: 26%; left: 60%; }
.chart-skill-hotspot.pos-5 { top: 0; left: 80%; }

/* 對應 pages/aboutDean.vue 精選文章 tab 按鈕 */
.aboutdean-tab {
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}

.aboutdean-tab.active {
  background-color: #A67C49;
  color: #fff;
}

.aboutdean-tab:not(.active) {
  background-color: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.aboutdean-tab:not(.active):hover {
  background-color: #fafafa;
}

/* ===== 對應 pages/billionceo.vue 及 components/billionceo/* ===== */

/* CircleBadge 元件（全台獨家百億陪跑教練團） */
.circle-badge-gold {
  background: linear-gradient(45deg, #ac7e45 0%, #f5d9a0 36%, #ac7e45 73%, #f5d9a0 100%);
}

.roboto-text {
  font-family: 'Roboto', sans-serif;
}

/* 手把手擬定成長藍圖：growth-card / growth-chip / growth-pill */
.growth-card {
  background: url('../img/1-3/card_bg.png') center center/cover no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.growth-chip {
  background: linear-gradient(90deg, #A87C45 0%, #e9d3a6 100%);
}

.growth-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.growth-pill {
  background: linear-gradient(90deg, #e9d3a6 0%, #A87C45 100%);
  color: #000;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* 搶先看:這6個重點 YTCard 縮圖，維持影片比例避免點擊播放後塌陷 */
.billionceo-yt-facade {
  aspect-ratio: 16 / 9;
}

/* 這些縮圖自帶播放鍵，不需要 .yt-facade 預設的壓暗（原站縮圖為原色） */
.billionceo-yt-facade img {
  height: auto;
  opacity: 1;
}

/* 企業破圈突圍 成長需勇氣為先：戶外領導力圖片 hover 放大 */
.outdoor-img {
  transition: transform 0.3s ease;
}

.outdoor-img-container {
  overflow: hidden;
}

.outdoor-img:hover {
  transform: scale(1.1);
}

/* 對應 pages/space.vue <style scoped> 的 Swiper 分頁點樣式 */
.swiperWithPagination .swiper-pagination-bullet {
  background-color: #d90207;
  opacity: 1;
  width: 10px;
  height: 10px;
}

.swiperWithPagination .swiper-pagination-bullet-active {
  background-color: #a87c45;
}

/* 對應 pages/space.vue 手機版輪播區塊的動態上邊距 */
.pt-dynamic-mo {
  padding-top: clamp(10%, calc(20% - ((100vw - 320px) * 0.025)), 30%);
}

/* 對應 pages/dt.vue <style scoped> 的預約諮詢按鈕字型設定 */
.custom-btn-font {
  width: 240px;
  font-family: "PingFang TC", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

.custom-btn-font:hover {
  background-color: #CD0505 !important;
  border-color: #CD0505 !important;
  color: #fff !important;
}

/* ===== 對應 components/chartCircle.vue（ceo50.html 7大主題互動圖） ===== */
.ceo50-chart-circle {
  width: 100%;
  min-height: 320px;
  padding: 24px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  .ceo50-chart-circle {
    min-height: 700px;
    height: 73vh;
    padding: 0;
  }
}

.ceo50-diagram {
  position: relative;
  width: 70%;
  max-width: 870px;
  margin: 0 auto;
  height: min-content;
}

.ceo50-center {
  position: absolute;
  top: 51%;
  left: 52%;
  width: 45%;
  color: #fff;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

.ceo50-center p {
  margin: 0;
  font-size: clamp(12px, 2.4vw, 1.5em);
  line-height: 1.5em;
  position: absolute;
  width: 60%;
}

.ceo50-center img {
  width: 100%;
}

.ceo50-node {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: absolute;
  width: 8rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1.2;
}

.ceo50-node1 { top: 0%; left: 52%; }
.ceo50-node2 { top: 17%; left: 12%; }
.ceo50-node3 { top: 17%; left: 91%; }
.ceo50-node4 { top: 53%; left: 5%; }
.ceo50-node5 { top: 53%; left: 99%; }
.ceo50-node6 { top: 97%; left: 12%; }
.ceo50-node7 { top: 97%; left: 93%; }

.ceo50-chart-circle.chart-mobile .ceo50-diagram { width: 95%; }
.ceo50-chart-circle.chart-mobile .ceo50-node { font-size: 14px; width: 4rem; padding: 3px 12px; }
.ceo50-chart-circle.chart-mobile .ceo50-center { width: 50%; }
.ceo50-chart-circle.chart-mobile .ceo50-node1 { top: -3.8%; left: 52%; }
.ceo50-chart-circle.chart-mobile .ceo50-node2 { top: 18%; left: 17%; }
.ceo50-chart-circle.chart-mobile .ceo50-node3 { top: 18%; left: 86%; }
.ceo50-chart-circle.chart-mobile .ceo50-node4 { top: 53%; left: 8%; }
.ceo50-chart-circle.chart-mobile .ceo50-node5 { top: 53%; left: 92%; }
.ceo50-chart-circle.chart-mobile .ceo50-node6 { top: 95%; left: 16%; }
.ceo50-chart-circle.chart-mobile .ceo50-node7 { top: 95%; left: 85%; }

@media (min-width: 450px) {
  .ceo50-chart-circle.chart-mobile .ceo50-diagram { width: 80%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node { font-size: 16px; width: 5rem; padding: 6px 16px; }
  .ceo50-chart-circle.chart-mobile .ceo50-center { width: 50%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node1 { top: -3%; left: 52%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node2 { top: 15%; left: 12%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node3 { top: 15%; left: 90%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node4 { top: 53%; left: 6%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node5 { top: 53%; left: 97%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node6 { top: 95%; left: 12%; }
  .ceo50-chart-circle.chart-mobile .ceo50-node7 { top: 95%; left: 95%; }
}

.ceo50-c-light {
  position: absolute;
  border-radius: 9999px;
  filter: blur(24px);
  width: 65%;
  height: 65%;
  transition: all 0.5s;
  opacity: 0;
}

.ceo50-c-light.is-active { opacity: 0.8; }

.ceo50-theme-green .ceo50-c-green { display: block; }
.ceo50-theme-green .ceo50-c-gray { display: none; }
.ceo50-theme-green .ceo50-c-light { background: #abbf04; mix-blend-mode: overlay; }
.ceo50-theme-green .ceo50-node { background: #6d6d6d; }
.ceo50-theme-green .ceo50-node:hover,
.ceo50-theme-green .ceo50-node.active { background: #aa8f16; }

/* 對應 components/ceo50Card.vue / ceo50RecommendCard.vue 所在的課程文章 Swiper */
.ceo50-swiper .swiper-pagination-bullet {
  background-color: #676c00;
  opacity: 1;
  width: 10px;
  height: 10px;
}

.ceo50-swiper .swiper-pagination-bullet-active {
  background-color: #d1b317;
}

.ceo50-swiper .swiper-button-next,
.ceo50-swiper .swiper-button-prev {
  color: #000;
  font-size: 20px;
}

@media (max-width: 500px) {
  .ceo50-swiper .swiper-button-next,
  .ceo50-swiper .swiper-button-prev {
    background-color: #fff;
    border-radius: 9999px;
    width: 32px;
    height: 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .ceo50-swiper .swiper-button-next::after,
  .ceo50-swiper .swiper-button-prev::after {
    font-size: 12px;
  }
}

/* 對應 components/training/RedCircleFlip.vue 解決方案翻牌圓形卡（training.html PC 版） */
.redcircle-flip {
  position: relative;
  overflow: hidden;
}

.redcircle-flip-front,
.redcircle-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.3s ease;
}

.redcircle-flip-back {
  opacity: 0;
}

.redcircle-flip:hover .redcircle-flip-front {
  opacity: 0;
}

.redcircle-flip:hover .redcircle-flip-back {
  opacity: 1;
}

/* 對應 pages/aboutDean.vue 文章摘要的多行截斷 */
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 對應 pages/cooperate.vue 的 el-form 表單欄位 */
.cooperate-field {
  margin-bottom: 20px;
}

.cooperate-label {
  display: block;
  color: #000;
  font-weight: 700;
  margin-bottom: 8px;
}

.cooperate-input,
.cooperate-select,
.cooperate-textarea {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 16px;
  background: #fff;
  color: #000;
}

.cooperate-input:focus,
.cooperate-select:focus,
.cooperate-textarea:focus {
  outline: none;
  border-color: #cd0505;
}