@charset "utf-8";
/*********************************************************
	pages.css - 페이지 레이아웃 + 유틸리티 + 섹션 스타일
**********************************************************/

@import url("/landing/css/common_footer.css");


/**************************
 LAYOUT
**************************/
.boundary {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 4rem;
    padding-right: 4rem;
}
@media screen and (max-width: 1024px) {
    .boundary {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-linegray);
    z-index: 999999;
    transition: all 0.5s;
}
header h1 a {
    display: inline-flex;
    flex-flow: column;
    justify-content: center;
}
header h1 img {
    height: 3rem;
}
@media screen and (max-width: 768px) {
    header {
        height: 6rem;
    }
}

main.main {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-top: 8rem;
    transition: all 0.5s;
}
@media screen and (max-width: 768px) {
    main.main {
        padding-top: 6rem;
    }
}

footer {
    background-color: var(--color-darkgray);
}


/**************************
 UTILITIES (HTML 에서 사용 중인 것만)
**************************/
.flex_cnt { display: flex; justify-content: center; }
.items_cnt { align-items: center; }
.items_str { align-items: start; }

.gap_half { gap: var(--sep-half); }

.w30 { width: 30%; }
.w33 { width: 33.33%; }
.w70 { width: 70%; }
.w100 { width: 100%; }
.h100 { height: 100%; }

.pd_comm { padding: var(--sep-comm); }
.pd_half { padding: var(--sep-half); }
.pdT_max { padding-top: var(--sep-double); }
.pdB_max { padding-bottom: var(--sep-double); }
.mgB_half { margin-bottom: var(--sep-half); }

.align_cnt { text-align: center; }

.txt_size12 { font-size: 1.2rem; }
.txt_size16 { font-size: 1.6rem; }
.txt_size20 { font-size: 2.0rem; }
.txt_size26 { font-size: 2.6rem; }
.txt_regular { font-weight: var(--txt-regular); }
.txt_extrabold { font-weight: var(--txt-extrabold); }

@media screen and (max-width: 768px) {
    .m_flex_col { flex-flow: column; }
    .m_w100 { width: 100% !important; }
}

/* HIDE & SHOW */
.pc { display: block; }
.m { display: none; }
@media screen and (max-width: 768px) {
    .pc { display: none; }
    .m { display: block; }
}

.img_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}


/**************************
 BUTTON
**************************/
.btn { display: flex; align-items: center; justify-content: center; line-height: 1; text-align: center; font-weight: var(--txt-medium); border: 1px solid transparent; transition: all 0.5s; }
.btn_rnd { border-radius: var(--radius-comm); }
.btn_sm { height: 6rem; font-size: 1.8rem; }
.btn_ylw { color: var(--color-white); background: var(--color-ylw); border: 1px solid transparent; }


/**************************
 SECTION COMMON
**************************/
.section-head {
    margin-bottom: var(--sep-comm);
}
.section-head__eyebrow {
    display: inline-block;
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    letter-spacing: 0.4em;
    color: var(--color-cyan);
}
.section-head__title {
    font-size: 4.2rem;
    font-weight: var(--txt-extrabold);
    line-height: 1.25;
    color: var(--color-black);
}
.section-head__title em {
    font-style: normal;
    color: var(--color-cyan);
}


/**************************
 HERO
**************************/
.hero {
    position: relative;
    width: 100%;
    margin-bottom: var(--sep-double);
}
.hero__inner {
    position: relative;
    width: 100%;
    height: 474px;
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}
.hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sep-comm);
    padding-top: var(--sep-double);
    padding-bottom: var(--sep-double);
}
.hero__copy {
    flex: 1;
    max-width: 60%;
}
.hero__title {
    font-size: 5.6rem;
    font-weight: var(--txt-extrabold);
    line-height: 1.2;
    color: var(--color-black);
    letter-spacing: -0.02em;
}
.hero__badge {
    display: inline-block;
    margin-top: var(--sep-half);
    padding: 1rem 2rem;
    font-size: 1.8rem;
    font-weight: var(--txt-bold);
    color: var(--color-black);
    background: var(--color-cyan);
    border-radius: 0.4rem;
}
.hero__badge em {
    font-style: normal;
    color: var(--color-white);
}
.hero__desc {
    margin-top: var(--sep-half);
    font-size: 1.6rem;
    line-height: 1.7;
    color: var(--color-darkgray);
}
.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: var(--sep-half);
    padding: 1.6rem 2.6rem 1.6rem 3rem;
    font-size: 1.7rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-white);
    background: var(--color-black);
    border-radius: 5rem;
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.18);
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.hero__cta:hover {
    background: var(--color-cyan);
    transform: translateY(-0.3rem);
    box-shadow: 0 1.2rem 2.4rem rgba(34, 184, 207, 0.4);
}
.hero__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.5rem;
    color: var(--color-black);
    background: var(--color-cyan);
    border-radius: 50%;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.hero__cta:hover .hero__cta-arrow {
    color: var(--color-white);
    background: var(--color-black);
    transform: translateX(0.4rem);
}


/**************************
 BENEFITS
**************************/
.benefits {
    background: var(--color-white);
    padding-bottom: var(--sep-double);
}
.benefits__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 2px solid var(--color-cyan);
}
.benefits__item {
    position: relative;
    padding: var(--sep-comm) var(--sep-half);
    background: var(--color-white);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.benefits__item + .benefits__item {
    border-left: 1px solid var(--color-linelightgray);
}
.benefits__num {
    display: inline-block;
    margin-bottom: 1.6rem;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    letter-spacing: 0.3em;
    color: var(--color-lightgray);
}
.benefits__title {
    font-size: 2.2rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-black);
    margin-bottom: 1.2rem;
    line-height: 1.4;
}
.benefits__desc {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-darkgray);
}
.benefits__amount {
    display: inline-block;
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    width: 100%;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}
.benefits__item--featured {
    color: var(--color-white);
    background: var(--color-cyan);
    border-left-color: var(--color-cyan) !important;
    transform: translateY(-1.2rem);
    box-shadow: 0 1.6rem 3.2rem rgba(34, 184, 207, 0.3);
}
.benefits__item--featured .benefits__num,
.benefits__item--featured .benefits__title,
.benefits__item--featured .benefits__desc {
    color: var(--color-white);
}
.benefits__item--featured .benefits__num {
    opacity: 0.7;
}
.benefits__item:hover:not(.benefits__item--featured) {
    transform: translateY(-0.6rem);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.06);
}


/**************************
 CURRICULUM
**************************/
.curriculum {
    padding: var(--sep-double) 0;
    background: var(--color-navy-deep);
    color: var(--color-white);
}
.curriculum__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--sep-comm);
    align-items: start;
}
.curriculum__head {
    position: sticky;
    top: 10rem;
}
.curriculum__title {
    font-size: 4.4rem;
    font-weight: var(--txt-extrabold);
    line-height: 1.25;
    color: var(--color-white);
}
.curriculum__title em {
    font-style: normal;
    color: var(--color-cyan);
}
.curriculum__desc {
    margin-top: var(--sep-half);
    font-size: 1.5rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
}
.curriculum__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.curriculum__item {
    display: grid;
    grid-template-columns: 12rem 1fr 2fr;
    gap: 2rem;
    align-items: center;
    padding: 1.8rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s;
}
.curriculum__item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.curriculum__item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.curriculum__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 3rem;
    font-size: 1.3rem;
    font-weight: var(--txt-bold);
    border-radius: 0.3rem;
}
.curriculum__badge--theory {
    color: var(--color-black);
    background: var(--color-ylw);
}
.curriculum__badge--ai {
    color: var(--color-white);
    background: var(--color-cyan);
}
.curriculum__badge--practice {
    color: var(--color-black);
    background: var(--color-white);
}
.curriculum__name {
    font-size: 1.7rem;
    font-weight: var(--txt-bold);
    color: var(--color-white);
    line-height: 1.5;
}
.curriculum__detail {
    font-size: 1.4rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}


/**************************
 SCHEDULE
**************************/
.schedule {
    padding: var(--sep-double) 0;
    background: var(--color-bggray);
}
.schedule__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--sep-comm);
    align-items: stretch;
}
.schedule__detail {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.04);
}
.schedule__row {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    padding: 2.4rem 2.8rem;
    border-bottom: 1px solid var(--color-linelightgray);
}
.schedule__row:last-child {
    border-bottom: 0;
}
.schedule__row dt {
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    color: var(--color-cyan-deep);
    letter-spacing: 0.05em;
}
.schedule__row dd {
    font-size: 1.7rem;
    font-weight: var(--txt-bold);
    color: var(--color-black);
    line-height: 1.5;
}
.schedule__row dd span {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 1.3rem;
    font-weight: var(--txt-regular);
    color: var(--color-darkgray);
}
.schedule__row dd strong {
    font-size: 2.4rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-cyan-deep);
}
.schedule__row--highlight {
    background: var(--color-cyan-soft);
}
.schedule__map {
    position: relative;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--color-linelightgray);
    min-height: 38rem;
}
/* 카카오 지도퍼가기 위젯 - 부모 너비에 맞춰 늘리기 */
.schedule__map .root_daum_roughmap {
    width: 100% !important;
}
.schedule__map .root_daum_roughmap .wrap_map {
    width: 100% !important;
    height: 38rem !important;
}
@media screen and (max-width: 768px) {
    .schedule__map .root_daum_roughmap .wrap_map {
        height: 32rem !important;
    }
}
.schedule__map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background:
        repeating-linear-gradient(45deg, rgba(34, 184, 207, 0.04) 0 2rem, rgba(34, 184, 207, 0.08) 2rem 4rem),
        var(--color-bggray);
    text-align: center;
}
.schedule__map-pin {
    font-size: 4.4rem;
    line-height: 1;
}
.schedule__map-addr {
    font-size: 1.5rem;
    font-weight: var(--txt-bold);
    color: var(--color-darkgray);
    line-height: 1.6;
}
.schedule__map-link {
    position: absolute;
    right: 1.6rem;
    bottom: 4.6rem;
    padding: 1rem 1.6rem;
    font-size: 1.3rem;
    font-weight: var(--txt-bold);
    color: var(--color-white);
    background: var(--color-navy);
    border-radius: 0.3rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
    z-index: 100;
}
.schedule__map-link:hover {
    background: var(--color-cyan-deep);
}


/**************************
 APPLY
**************************/
.apply {
    padding: var(--sep-double) 0;
    background: var(--color-white);
}
.apply__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: var(--sep-comm);
}
.apply-card {
    padding: var(--sep-half);
    background: var(--color-bggray);
    border-radius: 0.6rem;
    border: 1px solid var(--color-linelightgray);
    transition: transform 0.4s, box-shadow 0.4s;
}
.apply-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.06);
}
.apply-card--alt {
    background: var(--color-cyan-soft);
    border-color: var(--color-cyan);
}
.apply-card__head {
    padding-bottom: 1.6rem;
    margin-bottom: 1.6rem;
    border-bottom: 1px dashed var(--color-linegray);
}
.apply-card__tag {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.3rem 0.8rem;
    font-size: 1.2rem;
    font-weight: var(--txt-bold);
    letter-spacing: 0.15em;
    color: var(--color-white);
    background: var(--color-cyan);
    border-radius: 0.2rem;
}
.apply-card--alt .apply-card__tag {
    background: var(--color-navy);
}
.apply-card__title {
    font-size: 2rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-black);
    line-height: 1.4;
}
.apply-card__sub {
    margin-top: 0.6rem;
    font-size: 1.3rem;
    color: var(--color-darkgray);
}
.apply-card__steps {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
.apply-card__steps li {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 1.2rem;
    align-items: start;
}
.apply-card__steps li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.3rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-cyan-deep);
    background: var(--color-white);
    border: 1px solid var(--color-cyan);
    border-radius: 50%;
}
.apply-card--alt .apply-card__steps li span {
    color: var(--color-white);
    background: var(--color-navy);
    border-color: var(--color-navy);
}
.apply-card__steps li p {
    padding-top: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--color-txtblk);
}
.apply-card__steps li em {
    font-style: normal;
    font-weight: var(--txt-bold);
    color: var(--color-cyan-deep);
}
.apply-card--alt .apply-card__steps li em {
    color: var(--color-navy);
}
.apply-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--sep-half);
    background: var(--color-cyan);
    color: var(--color-white);
    border-radius: 0.6rem;
}
.apply-contact__label {
    margin-bottom: 1.6rem;
    font-size: 1.2rem;
    font-weight: var(--txt-bold);
    letter-spacing: 0.3em;
    opacity: 0.8;
}
.apply-contact__name {
    font-size: 2.2rem;
    font-weight: var(--txt-extrabold);
}
.apply-contact__tel {
    display: block;
    margin-top: 1.2rem;
    font-size: 3.6rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-white);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.apply-contact__hours {
    margin-top: auto;
    padding-top: 2rem;
    font-size: 1.3rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}


/**************************
 NOTICE
**************************/
.notice {
    padding: var(--sep-half);
    background: var(--color-bgylw);
    border-left: 4px solid var(--color-ylw);
    border-radius: 0 0.4rem 0.4rem 0;
}
.notice__title {
    margin-bottom: 1.6rem;
    font-size: 2rem;
    font-weight: var(--txt-extrabold);
    color: var(--color-black);
}
.notice__title em {
    font-style: normal;
    font-size: 1.4rem;
    font-weight: var(--txt-bold);
    color: var(--color-ylw);
    margin-left: 0.6rem;
}
.notice__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.notice__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--color-txtblk);
}
.notice__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-ylw);
    border-radius: 50%;
}
.notice__list li em {
    font-style: normal;
    font-weight: var(--txt-bold);
    color: var(--color-black);
    background: rgba(247, 182, 22, 0.25);
    padding: 0 0.3rem;
}


/**************************
 RESPONSIVE
**************************/
@media screen and (max-width: 1024px) {
    .hero__inner {
        height: auto;
    }
    .hero__bg img {
        object-position: center;
    }
    .hero__content {
        flex-direction: column;
        gap: var(--sep-half);
    }
    .hero__copy {
        max-width: 100%;
    }

    .benefits__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .benefits__item:nth-child(2) {
        border-left: 1px solid var(--color-linelightgray);
    }
    .benefits__item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-linelightgray);
    }
    .benefits__item:nth-child(4) {
        border-left: 1px solid var(--color-linelightgray);
        border-top: 1px solid var(--color-linelightgray);
    }
    .benefits__item--featured {
        transform: none;
    }

    .curriculum__inner {
        grid-template-columns: 1fr;
    }
    .curriculum__head {
        position: static;
    }
    .curriculum__item {
        grid-template-columns: 8rem 1fr;
        grid-template-rows: auto auto;
    }
    .curriculum__badge {
        grid-row: 1 / 2;
    }
    .curriculum__body {
        grid-row: 1 / 3;
        grid-column: 2;
    }

    .schedule__grid {
        grid-template-columns: 1fr;
    }
    .schedule__map {
        min-height: 32rem;
    }

    .apply__grid {
        grid-template-columns: 1fr 1fr;
    }
    .apply-contact {
        grid-column: 1 / -1;
    }
    .apply-contact__tel {
        font-size: 4.2rem;
    }
}

@media screen and (max-width: 768px) {
    .section-head__title {
        font-size: 3rem;
    }
    .hero__title {
        font-size: 3.6rem;
    }
    .hero__badge {
        font-size: 1.5rem;
        padding: 0.8rem 1.4rem;
    }

    .benefits__list {
        grid-template-columns: 1fr;
    }
    .benefits__item + .benefits__item,
    .benefits__item:nth-child(2),
    .benefits__item:nth-child(3),
    .benefits__item:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--color-linelightgray);
    }
    .benefits__item--featured {
        border-top-color: var(--color-cyan) !important;
    }

    .curriculum__title {
        font-size: 3rem;
    }
    .curriculum__item {
        grid-template-columns: 6.4rem 1fr;
        gap: 1.2rem;
        padding: 1.4rem 0;
    }
    .curriculum__badge {
        width: 6rem;
        height: 2.6rem;
        font-size: 1.2rem;
    }
    .curriculum__name {
        font-size: 1.5rem;
    }

    .schedule__row {
        grid-template-columns: 9rem 1fr;
        padding: 1.8rem 2rem;
    }
    .schedule__row dd strong {
        font-size: 2rem;
    }

    .apply__grid {
        grid-template-columns: 1fr;
    }
    .apply-contact__tel {
        font-size: 3.6rem;
    }
}