body{font-family: "Arial","微軟正黑體";background: #FFF; }
button:focus{outline:none}
.container{position: relative;max-width: 80%;}
a{color: #000;}
a:hover{text-decoration: none;}
ul{margin-left: -3%;}
p{font-size: 20px;}
h3{display: flex;align-items: center;font-size: 25px;font-weight: 400;}
h4{line-height: 1.8;}
h6{font-size: 1.8rem;}




/* visual */
header.hero {
  background: #FFF url("../images/hero_BG.jpg") no-repeat top center;
  position: relative;
  background-size: 100%;
  height: 100vh;
}

.character-img{position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
/* ===== Hero ===== */


    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.18));
      z-index: 1;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      padding-top: 40px;
      padding-bottom: 50px;
      min-height: 860px;
    }

    .hero-main-title {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .hero-title-box {
      display: inline-block;
      background: rgba(255,255,255,0.95);
      border: 4px solid #222;
      border-radius: 24px;
      padding: 18px 36px 22px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.15);
      position: relative;
    }

    .hero-title-box::before,
    .hero-title-box::after {
      content: "";
      position: absolute;
      top: -18px;
      width: 70px;
      height: 36px;
      border-top: 4px solid #222;
    }

    .hero-title-box::before {
      left: -24px;
      border-left: 4px solid #222;
      transform: skewX(-28deg);
    }

    .hero-title-box::after {
      right: -24px;
      border-right: 4px solid #222;
      transform: skewX(28deg);
    }

    .hero-kicker {
      display: inline-block;
      background: #e62929;
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      border-radius: 30px;
      padding: 6px 18px;
      margin-bottom: 8px;
    }

    .hero-big-title {
      margin: 0;
      font-size: 64px;
      line-height: 1.05;
      font-weight: 900;
      letter-spacing: -1px;
      color: #111;
    }

    .hero-sub-title {
      margin-top: 6px;
      margin-bottom: 0;
      font-size: 40px;
      line-height: 1.15;
      font-weight: 900;
      color: #d91d1d;
    }

    .hero-brand {
      margin-top: 8px;
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }
    .floating-card {
      background: rgba(255,255,255,0.96);
      border: 2px solid #1f1f1f;
      border-radius: 18px;
      padding: 16px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.14);
      margin-bottom: 16px;
    }

    .floating-card .icon-box {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: #1f1f1f;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex: 0 0 54px;
      margin-right: 14px;
    }

    .floating-card h3 {
      font-size: 18px;
      line-height: 1.4;
      font-weight: 900;
      margin-bottom: 8px;
      color: #111;
    }

    .floating-card p {
      font-size: 14px;
      line-height: 1.6;
      color: #555;
      margin-bottom: 10px;
    }

    .btn-pill {
      display: inline-block;
      background: #e62929;
      color: #fff;
      border-radius: 999px;
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 700;
    }

    .btn-pill:hover {
      background: #bf1717;
      color: #fff;
    }

    .top-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 58px;
      height: 58px;
      border-radius: 14px;
      background: #222;
      color: #fff;
      border: 2px solid #fff;
      font-size: 24px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .date-box {
      max-width: 460px;
      margin: 18px auto 0;
      background: rgba(255,255,255,0.95);
      border: 2px solid #222;
      border-radius: 18px;
      padding: 16px 18px;
      box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    }

    .date-box .date-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      border: 2px solid #e62929;
      color: #e62929;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-right: 14px;
      flex: 0 0 52px;
    }

    .date-box strong {
      display: block;
      font-size: 18px;
      color: #111;
    }

    .date-box span {
      display: block;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

/* =========================
   Hero 微動畫效果
========================= */

/* 背景慢慢放大，增加首頁動態感 */
.hero {
  overflow: hidden;
  animation: heroBgZoom 12s ease-in-out infinite alternate;
}

@keyframes heroBgZoom {
  from {
    background-size: 100%;
  }
  to {
    background-size: 104%;
  }
}

/* 主視覺圖片淡入 + 輕微浮動 */
.character-img {
  animation: heroTitleIn 1s ease-out both, floatY 4s ease-in-out 1s infinite;
}

@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes floatY {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* 卡片淡入上升 */
.floating-card {
  opacity: 0;
  animation: cardFadeUp 0.8s ease-out both;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 左右卡片分批出現 */
.col-lg-3:first-child .floating-card:nth-child(1) {
  animation-delay: 0.35s;
}

.col-lg-3:first-child .floating-card:nth-child(2) {
  animation-delay: 0.55s;
}

.col-lg-3:last-child .floating-card:nth-child(1) {
  animation-delay: 0.75s;
}

@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 卡片滑過時微微浮起 */
.floating-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.2);
}

/* icon 輕微動態 */
.floating-card .icon-box {
  transition: transform 0.3s ease, background 0.3s ease;
}

.floating-card:hover .icon-box {
  transform: rotate(-6deg) scale(1.08);
  background: #e62929;
}

/* 按鈕 hover 有彈性感 */
.btn-pill {
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.btn-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(230,41,41,0.28);
}

/* 讓使用者若設定減少動畫時，自動關閉動畫 */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .character-img,
  .floating-card {
    animation: none !important;
  }

  .floating-card {
    opacity: 1;
  }
}
/* First */
         .pt-40{padding-top: 40px !important;}
         .feature-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 86px;
            padding: 1rem 1.5rem;
            color: #fff;
            font-weight: 700;
            line-height: 1.5;
            text-align: left;
            background-color: #111827;
            border-radius: 1rem;
            box-shadow: 0 10px 15px rgba(0, 0, 0, .15);
            transition: all .25s ease;
        }

        .feature-btn:hover,
        .feature-btn:focus {
            color: #fff;
            text-decoration: none;
            background-color: #374151;
            transform: scale(1.04);
        }

        .feature-btn .icon {
            margin-right: .5rem;
            font-size: 1.25rem;
            flex: 0 0 auto;
        }

        .cta-btn {
            display: inline-block;
            padding: 1rem 2.5rem;
            color: #fff;
            font-size: 1.25rem;
            font-weight: 900;
            background-color: #dc2626;
            border: 4px solid #fff;
            border-radius: 999px;
            box-shadow: 0 15px 30px rgba(220, 38, 38, .35);
            transition: all .25s ease;
            animation: pulseBtn 1.8s infinite;
        }

        .cta-btn:hover,
        .cta-btn:focus {
            color: #fff;
            text-decoration: none;
            background-color: #b91c1c;
            transform: scale(1.07);
        }

        @keyframes pulseBtn {
            0%, 100% { box-shadow: 0 15px 30px rgba(220, 38, 38, .35); }
            50% { box-shadow: 0 18px 38px rgba(220, 38, 38, .55); }
        }

        .section-title {
            display: inline-block;
            color: #111827;
            font-size: 2.5rem;
            font-weight: 900;
            font-style: italic;
            border-bottom: 4px solid #dc2626;
            padding-bottom: .5rem;
        }

        .section-note {
            color: #6b7280;
            font-weight: 600;
        }

        .course-card {
            height: 100%;
            padding: 1.5rem;
            background-color: #fff;
            border-radius: 1rem;
            border-top: 4px solid #dc2626;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
            transition: all .25s ease;
        }

        .course-card:hover {
            box-shadow: 0 10px 25px -5px rgba(220, 38, 38, .3);
            transform: translateY(-4px);
        }

        .course-card h3 {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            color: #111827;
            font-size: 1.25rem;
            font-weight: 700;
        }

        .course-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-right: .5rem;
            border-radius: .65rem;
            font-size: 1.2rem;
        }

        .icon{
            width: 30px;
            height: 30px;
        }

        .course-list {
            margin: 0;
            padding: 0;
            list-style: none;
            color: #374151;
            font-weight: 500;
        }

        .course-list li {
            margin-bottom: .75rem;
            transition: color .2s ease;
        }

        .course-list li:not(.course-group) {
            position: relative;
            padding-left: 1.55rem;
            cursor: pointer;
        }

        .course-list li:not(.course-group)::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: .2rem;
            width: 1.05rem;
            height: 1.05rem;
            color: #fff;
            font-size: .75rem;
            font-weight: 700;
            line-height: 1.05rem;
            text-align: center;
            background-color: #dc2626;
            border-radius: 50%;
        }

        .course-list li:not(.course-group):hover {
            color: #dc2626;
        }

        .theme-red .course-list li:not(.course-group)::before { background-color: #dc2626; }
        .theme-blue .course-list li:not(.course-group)::before { background-color: #2563eb; }
        .theme-yellow .course-list li:not(.course-group)::before { background-color: #ca8a04; }
        .theme-cyan .course-list li:not(.course-group)::before { background-color: #0891b2; }
        .theme-green .course-list li:not(.course-group)::before { background-color: #16a34a; }
        .theme-orange .course-list li:not(.course-group)::before { background-color: #ea580c; }
        .theme-purple .course-list li:not(.course-group)::before { background-color: #9333ea; }
        .theme-pink .course-list li:not(.course-group)::before { background-color: #db2777; }

        .course-group {
            margin-top: 1rem;
            margin-bottom: .5rem;
            font-weight: 700;
        }

        .border-red { border-top-color: #ef4444; }
        .border-blue { border-top-color: #3b82f6; }
        .border-yellow { border-top-color: #eab308; }
        .border-cyan { border-top-color: #06b6d4; }
        .border-green { border-top-color: #22c55e; }
        .border-orange { border-top-color: #f97316; }
        .border-purple { border-top-color: #a855f7; }
        .border-pink { border-top-color: #ec4899; }

        .theme-red .course-icon { color: #dc2626; background-color: #fee2e2; }
        .theme-blue .course-icon { color: #2563eb; background-color: #dbeafe; }
        .theme-yellow .course-icon { color: #ca8a04; background-color: #fef3c7; }
        .theme-cyan .course-icon { color: #0891b2; background-color: #cffafe; }
        .theme-green .course-icon { color: #16a34a; background-color: #dcfce7; }
        .theme-orange .course-icon { color: #ea580c; background-color: #ffedd5; }
        .theme-purple .course-icon { color: #9333ea; background-color: #f3e8ff; }
        .theme-pink .course-icon { color: #db2777; background-color: #fce7f3; }

        .theme-red .course-group { color: #991b1b; }
        .theme-blue .course-group { color: #1e40af; }
        .theme-yellow .course-group { color: #854d0e; }
        .theme-cyan .course-group { color: #155e75; }
        .theme-green .course-group { color: #166534; }
        .theme-orange .course-group { color: #9a3412; }
        .theme-purple .course-group { color: #6b21a8; }
        .theme-pink .course-group { color: #9d174d; }

    
/* btnLink */
section#btnLink{padding: 10% 0 80px 0;position: relative;}
section#btnLink:before {content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url("../images/UCOM.jpg") no-repeat center;background-size: cover;z-index: 0;background-attachment: fixed;
}
section#btnLink button{width: 100%; margin: 15px auto 25px auto; display: block;background:#2F7DE1;color:#FFF; border: 4px solid #FFF; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.6rem;height: 72px;}
section#btnLink button:hover{transform: translateY(5px);opacity: 0.6;}
section#btnLink .row{margin: 0;}

      
@media(min-width: 1441px){.container {max-width: 1320px;}}

@media(max-width: 767px){
.container{max-width: 100%;}
        
        
/* visual */
header#visual{height: 35vh;}

        
/* First */
.section-title {
    font-size: 2rem;
}

.cta-btn {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.1rem;
}

.pt-40{padding-top: 10px !important;}
/* btnLink */
#btnLink .card{flex-direction: column;}
section#btnLink .btn{width: 100%;}
section#btnLink button{font-size: 1.2rem;}

        
}

/* =========================
   RWD 調整
========================= */

/* 桌機 1440 以下 */
@media (max-width: 1440px) {
  header.hero {
    background-size: cover;
    background-position: top center;
  }

  .hero-inner {
    min-height: 820px;
  }

  .character-img {
    max-width: 72%;
  }
}

/* 1280 以下 */
@media (max-width: 1280px) {
  .hero-inner {
    min-height: 760px;
    padding-top: 30px;
  }

  .character-img {
    max-width: 68%;
  }

  .floating-card {
    padding: 14px;
  }

  .floating-card h3 {
    font-size: 17px;
  }

  .floating-card p {
    font-size: 13px;
  }
}

/* 1200 以下 */
@media (max-width: 1200px) {
  header.hero {
    height: auto;
    min-height: 760px;
    padding-bottom: 60px;
  }

  .hero-inner {
    min-height: 720px;
  }

  .character-img {
    max-width: 65%;
  }
}

/* 1160 以下 */
@media (max-width: 1160px) {
  .hero-inner {
    min-height: 680px;
  }

  .character-img {
    max-width: 62%;
  }

  .floating-card {
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
}

/* 平板以下 */
@media (max-width: 991px) {
  header.hero {
    height: auto;
    min-height: auto;
    background-size: cover;
    background-position: top center;
    padding-bottom: 50px;
  }

  .hero-inner {
    min-height: auto;
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .character-img {
    position: relative;
    top: auto;
    left: 50%;
    transform: translateX(-44%);
    display: block;
    width: 105%;
    max-width: 620px;
    margin: 0 0 30px;
  }

  .hero .row {
    margin-top: 0 !important;
  }

  .floating-card {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 800 以下 */
@media (max-width: 800px) {
  .character-img {
    width: 86%;
  }

  .floating-card {
    padding: 14px;
  }

  .floating-card .icon-box {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: 18px;
    margin-right: 12px;
  }

  .floating-card h3 {
    font-size: 16px;
  }

  .floating-card p {
    font-size: 13px;
    line-height: 1.55;
  }
}

/* 768 以下 */
@media (max-width: 768px) {
  header.hero {
    padding-bottom: 40px;
  }

  .hero-inner {
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .character-img {
    width: 90%;
    margin-bottom: 24px;
  }

  .floating-card {
    margin-bottom: 14px;
  }

  .btn-pill {
    padding: 7px 16px;
    font-size: 13px;
  }
}

/* 手機 599 以下 */
@media (max-width: 599px) {
  header.hero {
    background-size: cover;
    background-position: top center;
    padding-bottom: 32px;
  }

  .hero-inner {
    padding-top: 18px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .character-img {
    width: 118%;
    max-width: none;
    left: 50%;
    transform: translateX(-43%);
    margin-bottom: 22px;
  }

  .floating-card {
    padding: 14px 13px;
    border-radius: 14px;
  }

  .floating-card .d-flex {
    align-items: flex-start !important;
  }

  .floating-card .icon-box {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    font-size: 16px;
    margin-right: 10px;
  }

  .floating-card h3 {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 6px;
  }

  .floating-card p {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 8px;
  }

  .btn-pill {
    padding: 7px 14px;
    font-size: 12px;
  }
}