Text

<h2 style="white-space:pre-line">全民英檢中級寫作</h2>
<p class="large"><em><strong><span style="color:#e03e2d">影片*6/檔案*6</span>/<span style="color:#236fa1">作業批改*4</span>/<span style="color:#169179">預約課程*2.</span></strong></em></p>

Embed

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全民英檢中級寫作課程</title>
    <style>
        /* --- Base Styles for Mobile --- */
        * {
            box-sizing: border-box;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f4f7f9;
            -webkit-font-smoothing: antialiased;
        }
        .steps-container {
            width: 100%;
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .step {
            display: flex;
            position: relative;
            margin-bottom: 25px;
            opacity: 0;
            animation: slideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            animation-delay: var(--animation-delay, 0s);
        }

        .step:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 26px;
            top: 52px;
            width: 3px;
            height: 100%;
            background: #e0e0e0;
            z-index: 0;
        }
        
        .step-number {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 1.7rem;
            margin-right: 20px;
            z-index: 1;
            background: #343a40;
            color: white;
            transition: background-color 0.3s ease;
        }

        .step.active .step-number {
            background-color: #007bff;
        }

        .step-content {
            flex: 1;
            min-width: 0;
        }
        
        .episode-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background: #fff;
            border: 1px solid #e0e0e0;
            padding: 21px 26px;
            border-radius: 16px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            text-align: left;
            transition: border-color 0.2s ease;
        }
        
        .toggle-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: #212529;
            line-height: 1.2;
        }

        .title-sub {
            display: inline;
            font-size: 1.15rem;
            font-weight: 500;
            color: #6c757d;
            margin-left: 10px;
        }
        
        .episode-toggle::after {
            content: '+';
            font-size: 2.3rem;
            font-weight: 400;
            color: #007bff;
            transition: transform 0.3s ease-out;
            margin-left: 20px;
        }
        .episode-toggle.active::after {
            transform: rotate(45deg);
        }
        .episode-toggle.active {
            border-color: #007bff;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .link-panel {
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
            border: 1px solid #007bff;
            border-top: none;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            padding-left: 23px;
            padding-right: 23px;
        }
        .episode-toggle.active ~ .link-panel {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .link-bar {
            display: flex;
            align-items: center;
            text-decoration: none;
            padding: 16px 23px;
            margin-bottom: 13px;
            border-radius: 16px; /* Changed from 50px for better fit */
            font-size: 1.2rem;   /* Adjusted base font size */
            font-weight: 600;
            background: #f8f9fa; 
            color: #343a40; 
            border: 1px solid #dee2e6;
            transition: all 0.3s ease;
        }
        .link-bar:last-child { margin-bottom: 0; }
        .link-bar:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            border-color: #007bff;
        }
        .link-icon {
            font-size: 1.5rem;
            margin-right: 16px;
        }
        .bar-homework { background: #007bff; color: white; border-color: #007bff; }
        .bar-playlist { background: #198754; color: white; border-color: #198754; }

        /* --- NEW STYLES FOR TWO-LINE TEXT --- */
        .link-bar-text {
            display: flex;
            flex-direction: column;
        }
        .link-title {
            font-weight: 600;
            color: #343a40;
        }
        .link-subtitle {
            font-size: 0.9rem;
            font-weight: 500;
            color: #6c757d;
            margin-top: 3px; /* Space between the two lines */
        }
        .bar-homework .link-title, .bar-homework .link-subtitle,
        .bar-playlist .link-title, .bar-playlist .link-subtitle {
             color: white;
        }


        /* --- Tablet Styles (Portrait & Landscape) --- */
        @media (min-width: 768px) and (max-width: 1199px) {
            .steps-container { padding: 30px; }
            .step { margin-bottom: 35px; }
            .step:not(:last-child)::after { left: 37px; top: 74px; width: 4px; }
            .step-number { width: 74px; height: 74px; border-radius: 22px; font-size: 2.4rem; margin-right: 28px; }
            .episode-toggle { padding: 30px 36px; border-radius: 22px; }
            .toggle-title { font-size: 2.0rem; line-height: 1.2; }
            .title-sub { font-size: 1.6rem; margin-left: 14px; }
            .episode-toggle::after { font-size: 3.2rem; }
            .link-panel { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; padding-left: 32px; padding-right: 32px; }
            .episode-toggle.active ~ .link-panel { padding-top: 28px; padding-bottom: 28px; }
            .link-bar { padding: 22px 32px; margin-bottom: 18px; font-size: 1.5rem; border-radius: 22px; }
            .link-icon { font-size: 2.1rem; margin-right: 22px; }
            .link-subtitle { font-size: 1.1rem; }
        }
        
        /* --- Desktop Styles (Grid layout for WIDE screens only) --- */
        @media (min-width: 1200px) {
            .steps-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; padding: 40px; }
            .step:not(:last-child)::after { display: none; }
            .step { margin-bottom: 0; }
            .step-number { width: 84px; height: 84px; border-radius: 26px; font-size: 2.7rem; margin-right: 32px; }
            .episode-toggle { padding: 34px 42px; border-radius: 26px; }
            .toggle-title { display: flex; flex-direction: column; align-items: flex-start; font-size: 2.2rem; line-height: 1.3; }
            .title-sub { font-size: 1.8rem; margin-left: 0; margin-top: 8px; }
            .episode-toggle::after { font-size: 3.7rem; }
            .link-panel { border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; padding-left: 37px; padding-right: 37px; }
            .episode-toggle.active ~ .link-panel { padding-top: 32px; padding-bottom: 32px; }
            .link-bar { padding: 26px 37px; margin-bottom: 21px; font-size: 1.6rem; border-radius: 26px; }
            .link-icon { font-size: 2.4rem; margin-right: 26px; }
            .link-subtitle { font-size: 1.2rem; }
        }
    </style>
</head>
<body>

<div class="steps-container">

    
    <div class="step" style="--animation-delay: 0.1s;">
        <div class="step-number">1</div>
        <div class="step-content">
            <button class="episode-toggle"><span class="toggle-title">第一集</span></button>
            <div class="link-panel">
                <a href="https://youtu.be/caVBN-X9Ffg" target="_blank" rel="noopener noreferrer" class="link-bar">
                    <span class="link-icon">🎥</span>
                    <div class="link-bar-text">
                        <span class="link-title">上課影片</span>
                        <span class="link-subtitle">1h 26 mins</span>
                    </div>
                </a>
                <a href="https://drive.google.com/drive/folders/1KkhOT9djhOnNwr7_zl9gY2Tk6EQS7R7w?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar"><span class="link-icon">📂</span> <span class="link-title">上課檔案下載</span></a>
            </div>
        </div>
    </div>
    
    <div class="step" style="--animation-delay: 0.2s;">
        <div class="step-number">2</div>
        <div class="step-content">
            <button class="episode-toggle"><span class="toggle-title">第二集</span></button>
            <div class="link-panel">
                <a href="https://youtu.be/YFVLLezWUR0" target="_blank" rel="noopener noreferrer" class="link-bar">
                    <span class="link-icon">🎥</span>
                    <div class="link-bar-text">
                        <span class="link-title">上課影片</span>
                        <span class="link-subtitle">59 mins</span>
                    </div>
                </a>
                <a href="https://drive.google.com/drive/folders/1AmTN_23Uvn0be5ENVKHbrphQTP1WTu9p?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar"><span class="link-icon">📂</span> <span class="link-title">上課檔案下載</span></a>
            </div>
        </div>
    </div>
    
    <div class="step" style="--animation-delay: 0.3s;">
        <div class="step-number">3</div>
        <div class="step-content">
            <button class="episode-toggle"><span class="toggle-title">第三集</span></button>
            <div class="link-panel">
                 <a href="https://youtu.be/7UEmpBSMrxE" target="_blank" rel="noopener noreferrer" class="link-bar">
                    <span class="link-icon">🎥</span>
                    <div class="link-bar-text">
                        <span class="link-title">上課影片</span>
                        <span class="link-subtitle">1h 11 mins</span>
                    </div>
                </a>
                <a href="https://drive.google.com/drive/folders/1q6H_6S_oHNqIMAdRpfhA56ER2Y-dNmlB?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar"><span class="link-icon">📂</span> <span class="link-title">上課檔案下載</span></a>
            </div>
        </div>
    </div>
    
    <div class="step" style="--animation-delay: 0.4s;">
        <div class="step-number">4</div>
        <div class="step-content">
            <button class="episode-toggle"><div class="toggle-title"><span class="title-main">第四集</span><span class="title-sub">（包含寫作批改題目1）</span></div></button>
            <div class="link-panel">
                <a href="https://youtu.be/TOd_FuRaLMg" target="_blank" rel="noopener noreferrer" class="link-bar">
                    <span class="link-icon">🎥</span>
                    <div class="link-bar-text">
                        <span class="link-title">上課影片</span>
                        <span class="link-subtitle">1h 17 mins</span>
                    </div>
                </a>
                <a href="https://drive.google.com/drive/folders/1kW2ESIp5jkJkR_y3BNiEanPtzpvvl-TA?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar"><span class="link-icon">📂</span> <span class="link-title">上課檔案下載</span></a>
                <a href="https://drive.google.com/file/d/1SgN_j1tvVC-pefe3uQ9hkc4eaY1VBaGQ/view?usp=share_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-homework"><span class="link-icon">✍️</span> <span class="link-title">作業寫作第一回批改題目</span></a>
            </div>
        </div>
    </div>
    
    <div class="step" style="--animation-delay: 0.5s;">
        <div class="step-number">5</div>
        <div class="step-content">
            <button class="episode-toggle"><div class="toggle-title"><span class="title-main">第五集</span><span class="title-sub">（包含寫作批改題目2）</span></div></button>
            <div class="link-panel">
                <a href="https://youtu.be/hnvZOTB5f70" target="_blank" rel="noopener noreferrer" class="link-bar">
                    <span class="link-icon">🎥</span>
                    <div class="link-bar-text">
                        <span class="link-title">上課影片</span>
                        <span class="link-subtitle">1h 28 mins</span>
                    </div>
                </a>
                <a href="https://drive.google.com/drive/folders/1DtctDpvuUO9s2GYJlBd9VdnSSVAnXrGw?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar"><span class="link-icon">📂</span> <span class="link-title">上課檔案下載</span></a>
                <a href="https://drive.google.com/drive/folders/1lb9oeLCLIzjTpcPMqdK12tRHaVZLWqFz?usp=drive_link" target="_blank" rel="noopener noreferrer" class="link-bar bar-homework"><span class="link-icon">✍️</span> <span class="link-title">作業寫作第二回批改題目</span></a>
            </div>
        </div>
    </div>
    
    <div class="step" style="--animation-delay: 0.6s;">
        <div class="step-number">▶️</div>
        <div class="step-content">
            <button class="episode-toggle"><span class="toggle-title">完整課程影片</span></button>
            <div class="link-panel">
                <a href="https://youtube.com/playlist?list=PLYY0gyFHODrOfZP0pziLR5JWwVwNSH5AF&si=ZvAvOt2qMwylzRKI" target="_blank" rel="noopener noreferrer" class="link-bar bar-playlist"><span class="link-icon">▶️</span> <span class="link-title">YouTube 完整播放清單</span></a>
            </div>
        </div>
    </div>
</div>

<script>
    // JavaScript 保持不變
    const toggles = document.querySelectorAll(".episode-toggle");

    toggles.forEach(toggle => {
        toggle.addEventListener("click", function() {
            const parentStep = this.closest('.step');
            const isCurrentlyActive = parentStep.classList.contains("active");

            document.querySelectorAll('.step').forEach(step => {
                if (step !== parentStep) {
                    step.classList.remove("active");
                    step.querySelector(".episode-toggle").classList.remove("active");
                    step.querySelector(".link-panel").style.maxHeight = null;
                }
            });

            if (isCurrentlyActive) {
                parentStep.classList.remove("active");
                this.classList.remove("active");
                this.nextElementSibling.style.maxHeight = null;
            } else {
                parentStep.classList.add("active");
                this.classList.add("active");
                const panel = this.nextElementSibling;
                panel.style.maxHeight = panel.scrollHeight + "px";
            }
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>課程使用說明卡片</title>
  <style>
    body {
      margin: 0;
      font-family: 'Arial', 'Noto Sans TC', sans-serif;
      background-color: #f4f4f4;
      padding: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .card {
      background: #fff;
      border-radius: 16px;
      padding: 1.5rem;
      width: 90%;
      max-width: 400px;  /* 手機版容器寬度 */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
    }

    .card h2 {
      font-size: 1.2rem;
      margin-bottom: 1.25rem;
      font-weight: bold;
      color: #1a1a1a;
    }

    .card ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .card li {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1rem;
      line-height: 1.6;
      font-size: 1rem;
      color: #333;
    }

    .card li::before {
      content: "✓";
      color: #007bff;
      margin-right: 0.75rem;
      font-weight: bold;
      font-size: 1.1rem;
      flex-shrink: 0;
    }

    /* 平板放大 1.5 倍 */
    @media (min-width: 768px) {
      .card {
        padding: 2.25rem;
        max-width: 600px;
      }

      .card h2 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
      }

      .card li {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
      }

      .card li::before {
        font-size: 1.4rem;
      }
    }

    /* 桌機放大 2 倍 */
    @media (min-width: 1024px) {
      .card {
        padding: 3rem;
        max-width: 1200px;
      }

      .card h2 {
        font-size: 2.4rem;
      }

      .card li {
        font-size: 2rem;
      }

      .card li::before {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>課程使用說明</h2>
    <ul>
      <li>完成影片第四集後，即可開始 4-1 寫作模擬測驗。</li>
      <li>完成任兩回測驗後預約第一堂線上一對一課程（共贈送兩堂，每堂 50 分鐘）。</li>
      <li>或完成四回測驗後一併預約課程。</li>
    </ul>
  </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>課程預約</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* General body style for better presentation */
    body {
      background-color: #f0f2f5;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .button-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 20px;
    }

    .slide-button {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      border-radius: 999px;
      white-space: nowrap;
      overflow: visible;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeIn 1s forwards;
      text-decoration: none;
      margin-bottom: 28px;
      padding: 24px 48px;
      min-width: 400px;
      font-size: 1rem;
      max-width: 95vw;
      z-index: 0;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    /* --- Button Color Overrides --- */

    /* First button: White background, black text */
    .btn-50 {
      background: white !important;
      color: black !important;
    }

    /* UPDATED: Second button with red background and ivory text */
    .btn-rules {
      background-color: #DC143C !important; /* Alarming Red (Crimson) */
      color: #FFFFF0 !important;          /* Ivory White */
    }


    .btn-50::before,
    .btn-rules::before {
      display: none;
    }

    /* Style for the external link icon */
    .external-link-icon {
      width: 32px;
      height: 32px;
      opacity: 0.6;
      transition: opacity 0.2s ease;
    }
    
    /* Make the white icon on the red button more visible */
    .btn-rules .external-link-icon {
        filter: brightness(0) invert(1);
        opacity: 0.7;
    }


    .slide-button:hover .external-link-icon {
      opacity: 1;
    }

    .slide-button:nth-child(1) { animation-delay: 0.1s; }
    .slide-button:nth-child(2) { animation-delay: 0.4s; }

    .slide-button:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      filter: brightness(1.05);
    }

    .slide-button:active {
      transform: translateY(1px) scale(0.98);
      box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.2);
      filter: brightness(0.95);
    }

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

    /* Media Queries for Responsiveness */
    @media (min-width: 1025px) {
      .slide-button {
        font-size: 2.25rem;
        min-width: 780px;
        padding: 30px 60px;
      }
    }

    @media (min-width: 481px) and (max-width: 1024px) {
      .slide-button {
        font-size: 2.2rem;
        min-width: 620px;
        padding: 28px 56px;
      }
    }

    @media (max-width: 480px) {
      .slide-button {
        font-size: 1.7rem;
        padding: 24px 20px;
        width: 92vw;
        max-width: none;
        min-width: unset;
      }

      /* Rule specifically for the LEFT-SIDE icon (calendar, rules) to keep its size */
      .slide-button span img {
        width: 45px !important;
        height: 45px !important;
      }

      /* Rule specifically for the RIGHT-SIDE icon, making it smaller */
      .slide-button .external-link-icon {
        width: 18px !important;
        height: 18px !important;
      }
    }
  </style>
</head>
<body>

  <div class="button-container">
    
    <a class="slide-button btn-50" href="https://tonyonlineenglish.setmore.com/services/705b5c72-2baf-4d17-b322-310ed491510d?step=time-slot&products=705b5c72-2baf-4d17-b322-310ed491510d&type=service&staff=f0ab8ee6-e0c0-4c4e-8f89-d68a4cdaf046&staffSelected=false" target="_blank">
      <span style="display: flex; align-items: center; gap: 15px;">
        <img src="https://ik.imagekit.io/lql1uveoc/calendar.png?updatedAt=1748455856712" alt="calendar" width="40" height="40" />
         預約50分鐘課程
      </span>
      <img src="https://ik.imagekit.io/lql1uveoc/external-link.png?updatedAt=1754911187731" alt="External link icon" class="external-link-icon" />
    </a>

    
    <a class="slide-button btn-rules" href="https://tonyonlineenglish.mydurable.com/regulations" target="_blank">
      <span style="display: flex; align-items: center; gap: 15px;">
        <img src="https://ik.imagekit.io/lql1uveoc/IMG_1503.png?updatedAt=1749367927208" alt="rules icon" width="40" height="40" />
         學生請假調課規範
      </span>
      <img src="https://ik.imagekit.io/lql1uveoc/external-link.png?updatedAt=1754911187731" alt="External link icon" class="external-link-icon" />
    </a>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>滑入式提示條 - 多色邊框</title>
  <style>
    :root {
      --gold-gradient: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
      --neon-blue-gradient: linear-gradient(135deg, #00f0ff, #0099ff, #00f0ff);
    }

    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: #f5f5f5;
    }

    .bar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
      padding: 2rem 1rem;
    }

    .bar {
      position: relative;
      width: 100%;
      max-width: 1000px;
      border-radius: 50px;
      padding: 1.5rem 2rem;
      font-style: italic;
      font-weight: bold;
      font-size: clamp(1.5rem, 5vw, 2.5rem);
      animation: slideIn 1.2s ease forwards;
      opacity: 0;
      background: #444;
      color: white;
      z-index: 0;
      overflow: hidden;
    }

    .bar::before {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 60px;
      z-index: -1;
      background-size: 200% 200%;
      animation: spin 4s linear infinite;
    }

    .bar::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      background: inherit;
      border-radius: 50px;
      z-index: -1;
    }

    .bar1::before {
      background: var(--gold-gradient);
      filter: drop-shadow(0 0 8px #ffdb4d);
    }

    .bar2::before {
      background: var(--neon-blue-gradient);
      filter:
        drop-shadow(0 0 5px #00f0ff)
        drop-shadow(0 0 10px #00f0ff)
        drop-shadow(0 0 15px #00ccff);
    }

    .bar3::before {
      background: none;
      animation: none;
      filter: none;
    }

    .bar1 {
      background: linear-gradient(90deg, #6ecf68, #f9d976, #f26a4b);
      animation-delay: 0s;
    }

    .bar2 {
      background: linear-gradient(90deg, #5dade2, #a569bd, #e74c3c);
      animation-delay: 0.5s;
    }

    .bar3 {
      background-color: #0d1038;
      color: white;
      animation-delay: 1s;
    }

    .symbol {
      color: white;
      font-size: 1.5em;
      display: inline-block;
      animation: zoomPop 1s ease-out;
      white-space: nowrap;
    }

    .rule-icon-img {
      height: 1.5em;
      width: auto;
      vertical-align: middle;
      display: inline-block;
      animation: zoomPop 1s ease-out;
    }

    .number {
      color: black;
      font-size: 1.5em;
      display: inline-block;
      animation: zoomPop 1s ease-out;
      font-style: italic;
      white-space: nowrap;
    }

    .italic-black {
      color: black;
      font-style: italic;
      display: inline-block;
      white-space: nowrap;
    }

    .pulse {
      animation: pulse 1.5s infinite;
      display: inline-block;
      color: #ffdd00;
      font-weight: bold;
    }

    @keyframes slideIn {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes zoomPop {
      0% { transform: scale(1); }
      30% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }

    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.15); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @media (max-width: 600px) {
      .bar {
        padding: 1rem 1.25rem;
        border-radius: 30px;
      }
    }

    @media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
      .bar::before {
        animation: none !important;
        filter: none !important;
      }
      .bar1::before {
        background: var(--gold-gradient);
      }
      .bar2::before {
        background: var(--neon-blue-gradient);
      }
      .bar3::before {
        background: none !important;
      }

      .bar {
        padding: 1.25rem 3rem;
        font-size: 2rem;
        white-space: nowrap;
        overflow-x: auto;
      }

      .bar::-webkit-scrollbar {
        display: none;
      }
    }

    @media (min-width: 769px) {
      .bar3 {
        line-height: 1.8;
      }
    }

    @media (min-width: 1025px) {
      .bar3 {
        line-height: 1.8;
      }
    }
  </style>
</head>
<body>

  <div class="bar-container">
    <div class="bar bar1">
      <img class="rule-icon-img" src="https://ik.imagekit.io/lql1uveoc/rules.png?updatedAt=1748531353399" alt="rule icon"><span class="number">24</span>小時內提出請假或調課,
      <span class="italic-black">扣除</span><span class="number">0.5</span><span class="italic-black"> 堂</span>
    </div>

    <div class="bar bar2">
      <img class="rule-icon-img" src="https://ik.imagekit.io/lql1uveoc/rules.png?updatedAt=1748531353399" alt="rule icon"><span class="number">12</span>小時內提出請假或調課,
      <span class="italic-black">扣除</span><span class="number">1</span><span class="italic-black"> 堂</span>
    </div>

  <div class="bar bar3">
  上述規範適用上課時段<br>
   <span class="symbol">❖</span>週一～週五, 10:00 am~10:00 pm <span class="pulse"></span><br>
  <span class="symbol">❖</span>週六 10:00 am~5:00 pm
  <span style="font-size: 0.75rem; color: #ffaaaa; font-weight: normal;">（請假/缺席頻繁，取消該時段課程。）</span>
</div>