@charset "UTF-8";
/* CSS Document */

   :root {
            --ink: #24292f;
            --muted: #626a73;
            --red: #b72531;
            --paper: #f8f5f0;
            --line: #e6e1d9
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            /* margin: 0; */
            /* color: var(--ink); */
            /* background: #fff; */
            /* font: 16px/1.8 "Microsoft JhengHei", "PingFang TC", sans-serif; */
        }

        a {
            color: #fff;
        }

        a:hover {
            color: #f4f4f4;
            text-decoration: none
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible {
            outline: 3px solid #b72531;
            outline-offset: 5px
        }

        h1,
        h2,
        h3 {
            font-weight: 700;
            line-height: 1.4
        }

        h2 {
            /* font-size: 2.5em; */
            /* margin: 8px 0 22px; */
        }

        h3 {
            font-size: 20px
        }

        p {
            margin: 0 0 18px
        }

        .container {
            width: calc(100% - 48px);
            max-width: 1140px;
            margin: auto
        }

        .skip {
            position: fixed;
            top: -100px;
            background: #fff;
            z-index: 100;
            padding: 12px
        }

        .skip:focus {
            top: 0
        }

        .nav-wrap {
            position: sticky;
            top: 0;
            background: rgba(255, 255, 255, .97);
            border-bottom: 1px solid var(--line);
            z-index: 30
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            min-height: 76px
        }

        .brand {
            font-size: 23px;
            font-weight: 800;
            color: var(--ink);
            white-space: nowrap
        }

        .brand small {
            display: block;
            font-size: 10px;
            letter-spacing: 3px;
            color: var(--muted)
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 26px
        }

        .nav-links a {
            font-size: 14px;
            color: var(--ink)
        }

        .nav-links .cta {
            color: #fff
        }

        .menu-button {
            display: none;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 8px 12px
        }

        .hero {
            padding: 88px 0;
            background: var(--paper);
            position: relative;
            overflow: hidden
        }

        .hero:after {
            content: "115";
            position: absolute;
            right: -15px;
            top: -70px;
            font-size: 320px;
            font-weight: 900;
            color: rgba(183, 37, 49, .035);
            pointer-events: none
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 64px;
            align-items: center;
            position: relative;
            z-index: 1
        }

        .eyebrow {
            font-size: 12px;
            letter-spacing: 2px;
            color: var(--red);
            font-weight: 700;
            text-align: center;
        }

        .hero h1 {
            font-size: 48px;
            letter-spacing: -1px;
            margin: 15px 0 24px
        }

        .hero h1 em {
            font-style: normal;
            color: var(--red)
        }

        .lead {
            font-size: 18px;
            color: var(--muted)
        }

        .cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 13px 24px;
            background: var(--red);
            border-radius: 8px;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            min-height: 48px;
            border: 0;
            transition: background .2s, transform .2s
        }

        .cta:hover,
        .cta:focus {
            color: #fff;
            background: #941d27;
            transform: translateY(-2px)
        }

        .secondary {
            display: inline-block;
            margin: 12px 0 12px 20px;
            color: var(--ink);
            border-bottom: 1px solid var(--ink)
        }

        .hero-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 32px;
            box-shadow: 0 18px 50px #30291d0c
        }

        .hero-card h2 {
            font-size: 24px
        }

        .price {
            font-size: 62px;
            font-weight: 800;
            line-height: 1.2;
            margin: 22px 0
        }

        .price small {
            font-size: 15px;
            font-weight: 400
        }

        .hero-card .cta {
            width: 100%
        }

        .pill {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 5px;
            background: #f5e5e6;
            color: #91232d;
            font-size: 13px
        }

        .card-detail {
            display: flex;
            gap: 12px;
            margin: 14px 0;
            color: var(--muted)
        }

        .card-detail i {
            width: 20px;
            color: var(--red);
            margin-top: 6px
        }

        .section {
            padding: 80px 0;
            scroll-margin-top: 96px
        }

        .tinted {
            background: var(--paper)
        }

        .section-head {
            /* max-width: 760px; */
            margin: 3% auto;
            text-align: center;
        }

        .section-head p {
            color: var(--muted)
        }

        .feature-grid,
        .schedule-grid,
        .steps,
        .branch-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px
        }

        .feature,
        .month,
        .step,
        .branch {
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 26px;
            background: #fff
        }

        .feature i {
            color: var(--red);
            font-size: 24px
        }

        .feature p {
            color: var(--muted);
            font-size: 15px
        }

        .wide-copy {
            max-width: 900px
        }

        .outline-image {
            width: 100%;
            height: auto;
            margin-top: 24px;
            border-radius: 12px
        }

        .image-wrap[hidden] {
            display: none
        }

        .schedule-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 22px
        }

        .schedule-header h3 {
            margin: 0;
            font-size: 1.5em;
        }

        .month h3 {
            margin-top: 0;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--line);
            font-size: 1.5em;
        }

        .date-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin: 12px 0;
            font-size: 1em;
        }

        .date-row time {
            font-weight: 700;
            font-size: 1.2em;
        }

        .muted {
            color: var(--muted);
            font-size: 14px;
            text-align: center;
        }

        .steps {
            margin: 24px 0
        }

        .step-num {
            display: block;
            color: var(--red);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px
        }

        .step h3 {
            margin: 10px 0
        }

        .step p {
            font-size: 15px
        }

        .notice {
            padding: 22px 26px;
            background: #f9eeee;
            border-left: 3px solid var(--red);
            border-radius: 0 8px 8px 0;
            margin: 24px 0
        }

        .notice p:last-child {
            margin: 0
        }

        .teacher-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px
        }

        .teacher-name {
            font-size: 40px;
            margin-bottom: 20px
        }

        .teacher-bio {
            border-bottom: 1px solid var(--line);
            padding-bottom: 20px;
            margin-bottom: 24px
        }

        .teacher-image {
            width: 100%;
            height: auto;
            border-radius: 12px
        }

        .credentials {
            padding-left: 20px;
            color: var(--muted);
            font-size: 15px
        }

        .credentials li {
            padding: 5px 0
        }

        .faq {
            max-width: 1140px;
        }

        .faq details {
            border-bottom: 1px solid var(--line);
            padding: 20px 0
        }

        .faq summary {
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            gap: 16px;
            align-items: center;
            list-style: none
        }

        .faq summary::-webkit-details-marker {
            display: none
        }

        .faq summary:before {
            content: "Q";
            color: var(--red);
            font-size: 15px
        }

        .faq summary:after {
            content: "+";
            margin-left: auto;
            color: var(--red);
            font-size: 24px
        }

        .faq details[open] summary:after {
            content: "−"
        }

        .answer {
            padding: 18px 0 0 30px;
            color: var(--muted)
        }

        .answer .cta {
            margin-top: 16px;
            display: flex;
            max-width: 160px;
        }

        .story-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px
        }

        .story {
            display: block;
            border: 1px solid var(--line);
            padding: 28px;
            border-radius: 12px;
            color: var(--ink);
            background: #fff
        }

        .story h3 {
            margin: 12px 0 22px
        }

        .story>span:last-child {
            font-size: 14px;
            color: var(--red)
        }

        .final-cta {
            padding: 50px 0;
            background: var(--ink);
            color: #fff
        }

        .final-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px
        }

        .final-inner h2 {
            font-size: 28px;
            margin: 0 0 10px
        }

        .final-inner p {
            margin: 0;
            color: #d5d3d0
        }

        footer {
            /* padding: 65px 0 110px; */
            /* background: var(--paper); */
        }

        footer h2 {
            font-size: 27px
        }

        .branch h3 {
            font-size: 16px;
            margin: 0 0 8px
        }

        .branch p {
            font-size: 14px;
            color: var(--muted);
            margin: 5px 0
        }

        .line-link {
            font-size: 14px
        }

        .footer-bottom {
            /* display: flex; */
            /* justify-content: space-between; */
            /* gap: 20px; */
            /* margin-top: 40px; */
            /* padding-top: 24px; */
            /* border-top: 1px solid var(--line); */
            /* font-size: 13px; */
        }

        .mobile-bar {
            display: none
        }

        .back-top {
            position: fixed;
            bottom: 25px;
            right: 24px;
            background: #fff;
            border: 1px solid var(--line);
            padding: 8px 14px;
            border-radius: 8px;
            z-index: 20
        }

        .back-top[hidden] {
            display: none
        }

        .center-cta {
            margin-top: 30px
        }

        .native-icon {
            font-style: normal;
            color: var(--red)
        }

        @media(max-width:991px) {
            .hero-grid {
                gap: 30px
            }

            .hero h1 {
                font-size: 38px
            }

            .nav-links {
                gap: 16px
            }

            .branch-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:767px) {
            .container {
                width: calc(100% - 36px)
            }

            .nav-inner {
                min-height: 66px;
                flex-wrap: wrap;
                gap: 0
            }

            .brand {
                font-size: 20px
            }

            .menu-button {
                display: block
            }

            .nav-links {
                display: none;
                flex-basis: 100%;
                padding: 18px 0;
                gap: 18px;
                flex-wrap: wrap
            }

            .nav-links.is-open {
                display: flex
            }

            .nav-links .cta {
                display: none
            }

            .hero {
                padding: 44px 0
            }

            .hero-grid,
            .teacher-grid {
                grid-template-columns: 1fr;
                gap: 28px
            }

            .hero h1 {
                font-size: 35px
            }

            .hero-card {
                padding: 26px
            }

            .hero:after {
                font-size: 220px;
                top: 40px
            }

            .section {
                padding: 50px 0;
                scroll-margin-top: 80px
            }

            h2 {
                font-size: 26px
            }

            .feature-grid,
            .schedule-grid,
            .steps,
            .branch-grid,
            .story-grid {
                grid-template-columns: 1fr;
                gap: 14px
            }

            .feature,
            .month,
            .step,
            .branch {
                padding: 22px
            }

            .schedule-header {
                display: block
            }

            .schedule-header p {
                margin-top: 10px
            }

            .final-inner {
                display: block
            }

            .final-inner .cta {
                margin-top: 24px
            }

            .mobile-bar {
                position: fixed;
                display: flex;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
                gap: 14px;
                align-items: center;
                background: #fff;
                border-top: 1px solid var(--line);
                z-index: 40
            }

            .mobile-bar .cta {
                flex: 1
            }

            .mobile-bar span {
                font-weight: 700;
                white-space: nowrap
            }

            .back-top {
                bottom: 90px;
                right: 18px
            }

            .footer-bottom {
                flex-direction: column;
                gap: 10px
            }

            .secondary {
                margin-left: 12px
            }

            footer {
                padding-bottom: 130px
            }

            .faq summary {
                font-size: 17px
            }

            .teacher-name {
                font-size: 32px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            * {
                transition: none !important
            }
        }

        @media print {

            .nav-wrap,
            .mobile-bar,
            .back-top,
            .cta,
            .menu-button {
                display: none !important
            }

            .section,
            .hero {
                padding: 25px 0
            }

            .hero-grid,
            .teacher-grid {
                display: block
            }

            .branch-grid {
                grid-template-columns: repeat(3, 1fr)
            }

            details .answer {
                display: block !important
            }

            footer {
                padding-bottom: 0
            }
        }


        .navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid transparent;
}