﻿/* KEA Diagram & System */
.key-to-ever { width: 100%; background-color: #F9FAFB; padding: 120px 0; overflow: hidden; }
.kea-inner { max-width: 1440px; margin: 0 auto; position: relative; }
.kea-header-center { text-align: center; margin-bottom: 80px; }
.kea-header-center .sub-tit { font-size: var(--fs-body); color: var(--point); font-weight: 700; display: block; margin-bottom: 15px; letter-spacing: 1px; }
.kea-header-center .main-tit { font-size: var(--fs-title); color: var(--main); font-weight: 800; line-height: 1.4; }
.kea-header-center .point { color: var(--point); }
.kea-diagram-wrap { position: relative; width: 800px; height: 800px; margin: 0 auto; transform: scale(0.8); transform-origin: center top; margin-top: 220px; margin-bottom: -150px; }
.kea-svg-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.seg-bg { fill: none; stroke: var(--sub2); stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; opacity: 0.25; }
.seg-anim { fill: none; stroke: var(--point); stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--length); stroke-dashoffset: var(--length); }
.seg-group.active .seg-anim { stroke-dashoffset: 0; }
.center-icon-box { position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); width: 625px; z-index: 1; display: flex; justify-content: center; align-items: center; }
.center-icon-box img { width: 100%; height: auto; display: block; }
.vertex-dot { position: absolute; width: 22px; height: 22px; background-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; transition: all 0.3s; box-shadow: none; background: var(--sub2); }
.vertex-dot.active { background-color: var(--point); box-shadow: 0 0 18px 0 var(--point); }
.step-item { position: absolute; display: flex; align-items: center; justify-content: center; width: 0; height: 0; z-index: 5; cursor: pointer; }
.step-item:hover { z-index: 20; }
.num-ball { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); width: 55px; height: 55px; background-color: var(--sub2); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-sub-title); transition: all 0.3s; z-index: 5; box-shadow: 0 4px 4px rgba(0,0,0,0.25); }
.step-item .txt-box { width: 375px; height: 185px; background: #fff; border-radius: 20px; box-shadow: 2px 4px 20px 0px rgba(11, 28, 56, 0.16); display: flex; flex-direction: row; align-items: flex-start; padding: 30px; box-sizing: border-box; text-align: left; transition: all 0.3s; z-index: 4; justify-content: flex-start; }
.step-item .tit { display: flex; align-items: center; height: auto; font-size: 24px; font-weight: 800; color: var(--point); white-space: nowrap; margin-right: 20px; padding-right: 20px; position: relative; margin-bottom: 0; margin-top: 3px; }
.step-item .tit::after { content: ''; position: absolute; right: 0; top: 5px; width: 2px; height: 125px; background-color: transparent; display: block; }
.step-item .desc { display: block; color: var(--sub); font-weight: 400; text-align: left; font-size: var(--fs-body); }
.desc-title { text-align: left; font-size: var(--fs-sub-title-sub); color: var(--sub); font-weight: 500; padding-bottom: 15px; line-height: 1.3; }
.step-item.active .txt-box { box-shadow: 2px 4px 30px 0px rgba(255, 107, 61, 0.25); }
.step-item.active .num-ball { background-color: var(--point); color: #fff; box-shadow: 0 4px 15px rgba(255, 107, 61, 0.4); transform: translate(-50%, -50%) scale(1.1); }

/* Diagram Positions (PC) */
.kea-diagram-wrap { margin-top: 280px; }
.step-1 { width: 375px; margin-top: -220px; }
.step-item.step-1 .num-ball { margin-top: 150px; }
.step-item.step-1 .txt-box { bottom: 65px; left: 50%; transform: translateX(-50%); text-align: center; }
.step-2 { width: 375px; margin-left: 50px; }
.step-item.step-2 .num-ball { margin-left: 0px; margin-top: -10px; }
.step-item.step-2 .txt-box { left: 100px; top: 50%; transform: translateY(-50%); }
.step-3 { width: 375px; margin-top: 250px; margin-left: 10px; }
.step-item.step-3 .num-ball { margin-left: 40px; margin-top: -250px; }
.step-item.step-3 .txt-box { left: 65px; top: 50%; transform: translateY(-50%); }
.step-4 { width: 375px; margin-top: 220px; margin-left: 180px; }
.step-item.step-4 .num-ball { margin-top: -150px; margin-left: -175px; }
.step-item.step-4 .txt-box { top: 65px; left: 50%; transform: translateX(-50%); text-align: center; }
.step-5 { width: 375px; margin-top: 220px; margin-left: -50px; }
.step-item.step-5 .num-ball { margin-top: -150px; margin-left: 50px; }
.step-item.step-5 .txt-box { top: 65px; left: 50%; transform: translateX(-50%); text-align: center; }
.step-6 { width: 375px; margin-left: -380px; margin-top: 250px; }
.step-item.step-6 .num-ball { margin-top: -250px; margin-left: 320px; }
.step-item.step-6 .txt-box { right: 65px; top: 50%; transform: translateY(-50%); }
.step-7 { width: 375px; margin-left: -430px; }
.step-item.step-7 .num-ball { margin-left: 370px; margin-top: -10px; }
.step-item.step-7 .txt-box { right: 65px; top: 50%; transform: translateY(-50%); }
.kea-footer-msg { text-align: center; margin-top: 350px; font-size: var(--fs-sub-title); font-weight: 800; color: var(--sub); font-family: 'Nanum Myeongjo', serif; line-height: 1.5; }
.kea-footer-point { color: var(--point); }

@media screen and (max-width: 1200px) {
    .step-item .txt-box { width: 375px; height: 210px; }
    .key-to-ever { padding: 80px 0; height: auto; min-height: 650px; }
    .kea-diagram-wrap { width: 800px; height: 800px; margin: 0 auto; margin-top: 280px; transform: scale(0.4); transform-origin: top center; position: relative; left: 50%; margin-left: -400px; }
    .kea-svg-line, .center-icon-box, #vertices-container { display: block; }
    .step-item { width: 0 !important; height: 0 !important; margin: 0 !important; position: absolute !important; transform: none !important; }
    .step-item.step-1 { left: 400px !important; top: 100px !important; }
    .step-item.step-2 { left: 670px !important; top: 230px !important; }
    .step-item.step-3 { left: 740px !important; top: 520px !important; }
    .step-item.step-4 { left: 550px !important; top: 750px !important; }
    .step-item.step-5 { left: 250px !important; top: 750px !important; }
    .step-item.step-6 { left: 60px !important; top: 520px !important; }
    .step-item.step-7 { left: 130px !important; top: 230px !important; }
    .num-ball, .step-item .num-ball { position: absolute !important; top: 0 !important; left: 0 !important; margin: 0 !important; transform: translate(-50%, -50%) !important; width: 60px; height: 60px; font-size: 24px; background-color: var(--sub2); z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .step-item.active .num-ball { transform: translate(-50%, -50%) scale(1.1) !important; background-color: var(--point); color: #fff; }
    .step-item .txt-box { position: absolute !important; width: 100%; max-width: 340px !important; min-height: 150px; background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; padding: 25px 30px !important; margin: 0 !important; z-index: 100; transform: translate(-50%, 0) scale(2.22) !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
    .step-item.step-1 .txt-box { top: -450px !important; left: 0px !important; }
    .step-item.step-2 .txt-box { top: -580px !important; left: -270px !important; }
    .step-item.step-3 .txt-box { top: -870px !important; left: -340px !important; }
    .step-item.step-4 .txt-box { top: -1100px !important; left: -150px !important; }
    .step-item.step-5 .txt-box { top: -1100px !important; left: 150px !important; }
    .step-item.step-6 .txt-box { top: -870px !important; left: 340px !important; }
    .step-item.step-7 .txt-box { top: -580px !important; left: 270px !important; }
    .step-item.active .txt-box { opacity: 1; visibility: visible; }
    .step-item .tit { font-size: 22px; margin-bottom: 12px; margin-top: 0; height: auto; width: 100%; border-bottom: 1px solid var(--sub2); padding-bottom: 10px; margin-right: 0; padding-right: 0; }
    .step-item .tit::after { display: none; }
    .desc-title { display: block; }
    .kea-footer-msg { margin-top: -420px; position: relative; z-index: 10; padding: 0 20px; }
}

/* KEA Knowledge Section */
.the-kea { width: 100%; padding: 120px 0; background-color: #fff; }
.kea-inner { max-width: 1440px; margin: 0 auto; }
.kea-header { display: flex; justify-content: flex-start; align-items: flex-end; gap: 120px; padding-bottom: 100px; }
.header-left { flex: 0 0 auto; }
.header-right { flex: 1; text-align: left; padding-bottom: 5px; }
.kea-header .sub-eng { display: block; font-size: var(--fs-body); color: var(--bklackC); margin-bottom: 30px; font-weight: 500; }
.kea-header .main-tit { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 800; color: var(--main); margin-bottom: 20px; }
.kea-header .sub-desc { font-size: var(--fs-sub-title-sub); line-height: var(--lh-sub-title-sub); color: var(--sub); font-weight: 500; }
.kea-header .point-txt { color: var(--point); font-weight: 700; }
.kea-header .desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sub); font-weight: 500; display: block; word-break: keep-all; }
.sect-tit { font-size: var(--fs-title); font-weight: 700; color: var(--main); margin-bottom: 60px; }
.kea-sect-1 { margin-bottom: 80px; }
.kea-card-list { display: flex; justify-content: space-between; align-items: flex-start; }
.kea-card { flex: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.3s; }
.kea-card .card-inner { padding: 20px; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kea-card:nth-child(even) .img-box { margin-top: 0; margin-bottom: 30px; }
.kea-card:nth-child(odd) .img-box { margin-top: 70px; margin-bottom: 35px; }
.kea-card .quote { font-family: 'Nanum Myeongjo', serif; font-size: var(--fs-sub-title-sub); line-height: var(--lh-sub-title-sub); font-weight: 700; margin-bottom: 20px; }
.kea-card:nth-child(even) .quote { color: var(--main); }
.kea-card:nth-child(odd) .quote { color: #fff; }
.kea-card .detail { color: #fff; font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: 30px; flex: 1; word-break: keep-all; text-align: center; }
.kea-card .btn-box { width: 100%; }
.btn-action { display: inline-block; color: var(--sub); padding: 14px 32px; border-radius: 32px; font-size: var(--fs-body); font-weight: 500; text-decoration: none; transition: all 0.3s; }
.kea-card.type-dark { height: 680px; background-color: #0d1b2a; color: #fff; border-radius: 0px; }
.kea-card.type-dark .detail { color: #ccc; }
.kea-card.type-dark .btn-action { background: #fff; color: #0d1b2a; }
.kea-card.type-dark .btn-action:hover { background: #ff6b3d; color: #fff; }
.kea-card:nth-child(1) { border-radius: 170px 0px 0px 0px; }
.tops_i { margin-top: 20px !important; }
.kea-card.type-light { height: 680px; margin-top: 80px; background-color: #E5E7EB; color: #111; border-radius: 0px; }
.kea-card.type-light .detail { color: #555; }
.kea-card.type-light .btn-action { background: transparent; border: 1px solid #ccc; color: #333; }
.kea-card.type-light .btn-action:hover { background: #0d1b2a; border-color: #0d1b2a; color: #fff; }
.kea-card:last-child { border-radius: 0px 0px 160px 00px; }
.kea-sect-2 { margin-bottom: 120px; }
.price-box { display: flex; align-items: center; gap: 160px; }
.price-box .text-side { flex: 1.7; }
.price-box .img-side { flex: 0.3; text-align: center; }
.price-box .sect-tit { font-size: var(--fs-title); color: var(--main); margin-bottom: 20px; }
.price-box .sect-tit .sect-point { color: var(--point); }
.price-box .sub-tit { font-size: var(--fs-sub-title-sub); line-height: var(--lh-sub-title-sub); font-weight: 700; padding-bottom: 30px; color: var(--sub); border-bottom: 2px solid #000000; }
.price-box .desc-txt { margin-top: 30px; color: var(--fs-body); line-height: var(--lh-body); color: var(--sub); margin-bottom: 40px; word-break: keep-all; }
.btn-border { display: inline-block; padding: 14px 32px; border: 1px solid var(--sub2); border-radius: 200px; font-size: var(--fs-body); color: var(--sub); font-weight: 500; text-decoration: none; transition: all 0.3s; }
.btn-border:hover { background: var(--point); border-color: var(--point); color: #fff; }
.des-sub-txt { line-height: 1.5; color: var(--sub2); font-size: var(--fs-body); font-weight: 400; margin-top: 30px; }
.book-list-white { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; }
.book-card.white { width: calc(33.333% - 50px); background: #fff; border: 1px solid #eee; border-radius: 20px; padding: 40px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; transition: transform 0.3s; }
.book-card.white:hover { transform: translateY(-10px); }
.book-card.white .img-box { margin-bottom: 25px; }
.book-card.white .quote { font-family: 'Nanum Myeongjo', serif; font-size: var(--fs-sub-title-sub); line-height: var(--lh-sub-title-sub); font-weight: 700; color: var(--main); margin-bottom: 20px; word-break: keep-all; }
.book-card.white .detail { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sub); word-break: keep-all; }
.kea-house { width: 100%; max-width: 2560px; margin: 0 auto; padding: 120px 0; }
.kea-house-img { width: 100%; max-width: 1200px; margin: 0 auto; }

@media screen and (max-width: 1600px) {
    .book-card.white:hover { transform: none !important; }
}


@media screen and (max-width: 1600px) {
    .ticket-txt {
        transform: translateY(0) !important;
    }

    .info-card:hover,
    .rs-card:hover,
    .book-card.white:hover,
    .btn-membership-lock:hover,
    .btn-system-guide:hover {
        transform: none !important;
    }

    .video-item:hover .thumb-img {
        transform: none !important;
        opacity: 0.9 !important;
    }

    .video-item:hover .play-icon {
        transform: translate(-50%, -50%) scale(1) !important;
        background-color: #FF0000 !important;
    }

    .ticker-col {
        transform: translateY(0) !important;
    }
}

@media screen and (max-width: 1024px) {
    .kea-header { flex-direction: column; align-items: flex-start; gap: 40px; padding-bottom: 60px; }
    .kea-header .header-right { width: 100%; text-align: left; }
    .kea-card-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px; }
    .kea-card { width: calc(50% - 7.5px); height: auto !important; flex: none; }
    .kea-card:nth-child(odd) .img-box, .kea-card:nth-child(even) .img-box { margin-top: 0; margin-bottom: 15px; }
    .kea-card:nth-child(1), .kea-card:last-child, .kea-card.type-dark, .kea-card.type-light { border-radius: 15px; }
    .kea-card.type-light { margin-top: 0; }
    .kea-card .card-inner { padding: 20px 15px; min-height: 580px; }
    .price-box { display: flex; flex-direction: column-reverse; gap: 60px; }
    .price-box .text-side, .price-box .img-side { width: 100%; flex: none; text-align: left; }
    .img-side { text-align: center !important; }
    .price-box .img-side img { max-width: 100%; height: auto; }
    .book-list-white { display: flex; flex-wrap: wrap; gap: 15px; }
    .book-card.white { width: calc(50% - 7.5px); margin-bottom: 20px; }
    .detail { text-align: left; }
    .the-kea { padding: 60px 20px; }
}
@media screen and (max-width: 600px) {
    .kea-card, .book-card.white { width: 100% !important; margin-bottom: 30px; }
    .kea-card-list, .book-list-white { gap: 30px; }
    .kea-header .sub-eng { margin-bottom: 15px; }
    .kea-sect-1 .sect-tit { margin-bottom: 30px; }
    .sect-tit { margin-bottom: 30px; }
    .kea-header { gap: 20px; }
    .tops_i { margin-top: auto !important; }
    .kea-house { padding: 80px 0; }
}


