/* =========================================================
   SUB COMMON
========================================================= */
/* 서브페이지 그라데이션 텍스트 기본색 */
.sub_page .fc_gradient {
    color: #e5e5e5;
    letter-spacing: 0;
}

.sub_page .fc_gradient.on {
    color: #f1f1f1;
}


/* 어두운 배경의 그라데이션 텍스트 */
.sub_page .sub_dark .fc_gradient,
.sub_page .sub_dark .fc_gradient.on {
    color: #111;
}


.sub_page {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.sub_section {
    position: relative;
    width: 100%;
    padding: 140px 0;
}


/* Section Head
--------------------------------------------------------- */

.sub_section_head {
    margin-bottom: 70px;
}

.sub_section_label {
    margin: 0 0 20px;

    color: var(--color-primary);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: .04em;
}

.sub_section_title {
    margin: 0;

    color: var(--color-title);

    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: -.045em;

    word-break: keep-all;
}

.sub_section_desc {
    margin: 25px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;

    word-break: keep-all;
}


@media (max-width: 400px) {

    .about_intro_title,
    .website_intro_title,
    .shopping_intro_title,
    .platform_intro_title {
        font-size: 34px;
    }

}



/* Button
--------------------------------------------------------- */

.sub_btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    min-width: 190px;
    height: 58px;

    padding: 0 24px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);

    font-size: 16px;
    font-weight: 600;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.sub_btn span {
    margin-left: 25px;

    font-size: 19px;
    line-height: 1;
}

.sub_btn_line {
    background: #fff;
    color: var(--color-title);
}

.sub_btn_line:hover {
    border-color: var(--color-title);

    transform: translateY(-2px);
}

.sub_btn_primary {
    border-color: var(--color-primary);

    background: var(--color-primary);
    color: #fff;
}

.sub_btn_primary:hover {
    border-color: var(--color-primary-dark);

    background: var(--color-primary-dark);

    transform: translateY(-2px);
}



/* =========================================================
   0101 ABOUT
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.about_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.about_intro_head {
    max-width: 1100px;
}

.about_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;
    word-break: keep-all;
}

.about_intro_title .fc_gradient {
    display: inline-block;
}


.about_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}


.about_intro_keyword {
    margin: 0;

    color: #e5e5e5;

    font-size: clamp(54px, 5.5vw, 88px);
    font-weight: 700;
    line-height: .88;

    letter-spacing: -.06em;
}


.about_intro_text {
    max-width: 650px;
}

.about_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: -.035em;
}

.about_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}



/* =========================================================
   02. Experience
========================================================= */

.about_experience {
    background: var(--color-bg-light);
}


.about_stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: 70px;

    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}


.about_stat {
    position: relative;

    padding: 45px 30px;
}

.about_stat:first-child {
    padding-left: 0;
}

.about_stat + .about_stat {
    border-left: 1px solid var(--color-line);
}

.about_stat strong {
    display: block;

    color: var(--color-title);

    font-size: clamp(42px, 4vw, 64px);
    font-weight: 700;
    line-height: 1;

    letter-spacing: -.05em;
}

.about_stat p {
    margin: 18px 0 6px;

    color: var(--color-title);

    font-size: 15px;
    font-weight: 700;
}

.about_stat > span {
    color: var(--color-subtext);

    font-size: 15px;
}



/* =========================================================
   03. What We Do
========================================================= */

.about_work {
    background: #fff;
}


.about_work_list {
    border-top: 1px solid var(--color-title);
}


.about_work_item {
    display: grid;
    grid-template-columns: 100px minmax(280px, .8fr) minmax(380px, 1fr);
    gap: 40px;

    align-items: center;

    min-height: 190px;

    padding: 35px 0;

    border-bottom: 1px solid var(--color-line);

    transition:
        padding var(--transition),
        background-color var(--transition);
}

.about_work_item:hover {
    padding-left: 20px;
    padding-right: 20px;

    background: var(--color-bg-light);
}


.about_work_num {
    color: var(--color-muted);

    font-size: 14px;
    font-weight: 600;
}


.about_work_name span {
    display: block;

    margin-bottom: 8px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

.about_work_name h4 {
    margin: 0;

    color: var(--color-title);

    font-size: 32px;
    font-weight: 700;

    letter-spacing: -.035em;
}


.about_work_item > p {
    max-width: 520px;
    margin: 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.8;

    word-break: keep-all;
}



/* =========================================================
   04. Approach
========================================================= */

.about_approach {
    background: #111;
}


.about_approach_layout {
    display: grid;
    grid-template-columns: minmax(320px, .75fr) minmax(500px, 1.25fr);
    gap: 120px;
}


.about_approach .sub_section_label {
    color: var(--color-primary);
}

.about_approach .sub_section_title {
    color: #fff;
}

.about_approach .sub_section_desc {
    color: rgba(255, 255, 255, .55);
}


.about_approach_head {
    position: sticky;
    top: 140px;

    align-self: start;
}


.about_approach_list {
    border-top: 1px solid rgba(255, 255, 255, .25);
}


.about_approach_item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 30px;

    padding: 48px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .14);
}


.about_approach_num {
    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.about_approach_item h4 {
    margin: 0 0 16px;

    color: #fff;

    font-size: 27px;
    font-weight: 600;

    letter-spacing: -.03em;
}


.about_approach_item p {
    max-width: 620px;
    margin: 0;

    color: rgba(255, 255, 255, .58);

    font-size: 16px;
    line-height: 1.85;

    word-break: keep-all;
}



/* =========================================================
   05. Fields
========================================================= */

.about_fields {
    padding-top: 160px;
    padding-bottom: 160px;

    background: #fff;
}


.about_fields_head {
    max-width: 800px;
}


.about_field_words {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    max-width: 1250px;

    margin-top: 80px;
}


.about_field_words span {
    display: inline-flex;
    align-items: center;

    min-height: 66px;

    padding: 0 30px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);

    background: #fff;

    color: var(--color-title);

    font-size: 19px;
    font-weight: 600;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.about_field_words span:hover {
    border-color: var(--color-title);

    background: var(--color-title);
    color: #fff;

    transform: translateY(-3px);
}



/* =========================================================
   06. Closing
========================================================= */

.about_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(243, 108, 33, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(23, 105, 232, .08),
            transparent 30%
        ),
        var(--color-bg-light);
}


.about_closing_inner {
    text-align: center;
}


.about_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px, 4.6vw, 72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.055em;

    word-break: keep-all;
}


.about_closing_desc {
    margin: 30px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}


.about_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}



/* =========================================================
   ABOUT RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .sub_section {
        padding: 110px 0;
    }

    .sub_section_title {
        font-size: 40px;
    }


    /* Intro */

    .about_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .about_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    /* Stats */

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

    .about_stat {
        padding: 35px 25px;
    }

    .about_stat:first-child {
        padding-left: 25px;
    }

    .about_stat:nth-child(3) {
        border-left: 0;
    }

    .about_stat:nth-child(n+3) {
        border-top: 1px solid var(--color-line);
    }


    /* Work */

    .about_work_item {
        grid-template-columns: 60px 260px 1fr;
        gap: 25px;
    }


    /* Approach */

    .about_approach_layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .about_approach_head {
        position: static;
    }


    /* Fields */

    .about_fields {
        padding-top: 120px;
        padding-bottom: 120px;
    }

}



@media (max-width: 768px) {

    .sub_section {
        padding: 90px 0;
    }

    .sub_section_head {
        margin-bottom: 50px;
    }

    .sub_section_title {
        font-size: 34px;
    }

    .sub_section_desc {
        margin-top: 20px;

        font-size: 16px;
    }


    /* Intro */

    .about_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .about_intro_title {
        font-size: 44px;
    }

    .about_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .about_intro_keyword {
        font-size: 58px;
    }

    .about_intro_text strong {
        font-size: 26px;
    }

    .about_intro_text p br {
        display: none;
    }


    /* Work */

    .about_work_item {
        grid-template-columns: 45px 1fr;
        gap: 15px 20px;

        min-height: 0;

        padding: 32px 0;
    }

    .about_work_item > p {
        grid-column: 2;

        font-size: 15px;
    }

    .about_work_name h4 {
        font-size: 27px;
    }

    .about_work_item:hover {
        padding-left: 0;
        padding-right: 0;

        background: transparent;
    }


    /* Fields */

    .about_fields {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .about_field_words {
        margin-top: 55px;
    }

    .about_field_words span {
        min-height: 56px;

        padding: 0 22px;

        font-size: 16px;
    }


    /* Closing */

    .about_closing {
        padding-top: 110px;
        padding-bottom: 110px;
    }

}



@media (max-width: 600px) {

    .sub_section {
        padding: 75px 0;
    }

    .sub_section_label {
        margin-bottom: 15px;

        font-size: 14px;
    }

    .sub_section_title {
        font-size: 30px;
    }


    /* Intro */

    .about_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .about_intro_title {
        font-size: 38px;
    }

    .about_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .about_intro_keyword {
        font-size: 48px;
    }

    .about_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .about_intro_text p {
        font-size: 15px;
        line-height: 1.8;
    }

    .about_stats {
        margin-top: 50px;
    }

    .about_stat {
        padding: 28px 15px;
    }

    .about_stat:first-child {
        padding-left: 15px;
    }

    .about_stat strong {
        font-size: 38px;
    }

    .about_stat p {
        margin-top: 12px;

        font-size: 14px;
    }

    .about_stat > span {
        font-size: 14px;
    }


    /* Work */

    .about_work_item {
        grid-template-columns: 35px 1fr;
    }

    .about_work_name h4 {
        font-size: 24px;
    }


    /* Approach */

    .about_approach_layout {
        gap: 50px;
    }

    .about_approach_item {
        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 35px 0;
    }

    .about_approach_item h4 {
        font-size: 23px;
    }

    .about_approach_item p {
        font-size: 15px;
    }


    /* Fields */

    .about_field_words {
        gap: 8px;

        margin-top: 45px;
    }

    .about_field_words span {
        min-height: 50px;

        padding: 0 18px;

        font-size: 15px;
    }


    /* Closing */

    .about_closing h3 {
        font-size: 36px;
    }

    .about_closing_desc {
        margin-top: 22px;

        font-size: 15px;
    }

    .about_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .about_closing_buttons .sub_btn {
        width: 100%;
    }

}





/* =========================================================
   0201 WEBSITE PRODUCTION
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.website_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.website_intro_head {
    max-width: 1200px;
}

.website_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    /* fc_gradient 사용 제목이므로 letter-spacing 사용하지 않음 */

    word-break: keep-all;
}

.website_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.website_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px, 5.5vw, 88px);
    font-weight: 700;
    line-height: .88;
}

.website_intro_text {
    max-width: 650px;
}

.website_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.website_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}



/* =========================================================
   02. Purpose
========================================================= */

.website_purpose {
    background: var(--color-bg-light);
}

.website_purpose_head {
    max-width: 900px;
}

.website_purpose_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;

    margin-top: 80px;
}

.website_purpose_item {
    position: relative;

    min-height: 370px;

    padding: 35px;

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.website_purpose_num {
    display: block;

    color: var(--color-muted);

    font-size: 14px;
    font-weight: 600;
}

.website_purpose_title_row {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 48px;
}

.website_purpose_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 82px;
    height: 82px;

    margin: 0;
}

.website_purpose_icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    border-radius: 24px;

    background: rgba(243,108,33,.10);
    color: var(--color-primary);

    font-size: 30px;
}

.website_purpose_icon.is_blue i {
    background: rgba(23,105,232,.09);
    color: var(--color-blue);
}

.website_purpose_icon.is_mix i {
    background: rgba(138,86,132,.09);
    color: #8a5684;
}

.website_purpose_item h4 {
    flex: 1 1 auto;

    margin: 0;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
}

.website_purpose_item p {
    margin: 30px 0 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.8;

    word-break: keep-all;
}



/* =========================================================
   03. Website Type
========================================================= */

.website_type {
    background: #fff;
}

.website_type_layout {
    display: grid;
    grid-template-columns: minmax(320px, .7fr) minmax(550px, 1.3fr);
    gap: 120px;
}

.website_type_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.website_type_list {
    border-top: 1px solid var(--color-title);
}

.website_type_item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 25px;

    align-items: start;

    padding: 38px 0;

    border-bottom: 1px solid var(--color-line);
}

.website_type_item > span {
    padding-top: 5px;

    color: var(--color-muted);

    font-size: 14px;
    font-weight: 600;
}

.website_type_item strong {
    display: block;

    color: var(--color-title);

    font-size: 24px;
    font-weight: 700;
}

.website_type_item p {
    max-width: 520px;

    margin: 12px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}

.website_type_item em {
    padding-top: 5px;

    color: #bbb;

    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}



/* =========================================================
   04. How We Build
========================================================= */

.website_build {
    background: #111;
}

.website_build .sub_section_label {
    color: var(--color-primary);
}

.website_build .sub_section_title {
    color: #fff;
}

.website_build_head {
    max-width: 900px;
}

.website_build_flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 80px;

    border-top: 1px solid rgba(255,255,255,.3);
    border-bottom: 1px solid rgba(255,255,255,.3);
}

.website_build_item {
    min-height: 390px;

    padding: 38px 35px;
}

.website_build_item + .website_build_item {
    border-left: 1px solid rgba(255,255,255,.16);
}

.website_build_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.website_build_top span {
    color: rgba(255,255,255,.4);

    font-size: 14px;
}

.website_build_top em {
    color: var(--color-primary);

    font-size: 14px;
    font-style: normal;
    font-weight: 700;
}

.website_build_item h4 {
    margin: 100px 0 22px;

    color: #fff;

    font-size: 34px;
    font-weight: 600;
}

.website_build_item p {
    max-width: 380px;

    margin: 0;

    color: rgba(255,255,255,.55);

    font-size: 16px;
    line-height: 1.8;

    word-break: keep-all;
}



/* =========================================================
   05. Included Service
========================================================= */

.website_included {
    background: #fff;
}

.website_included_head {
    max-width: 850px;
}

.website_included_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 80px;

    border-top: 1px solid var(--color-title);
}

.website_included_item {
    min-height: 250px;

    padding: 35px 30px;

    border-bottom: 1px solid var(--color-line);
}

.website_included_item:not(:nth-child(3n+1)) {
    border-left: 1px solid var(--color-line);
}

.website_included_item > span {
    display: block;

    margin-bottom: 55px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

.website_included_item strong {
    display: block;

    color: var(--color-title);

    font-size: 23px;
    font-weight: 700;
}

.website_included_item p {
    max-width: 330px;

    margin: 14px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   06. Operation
========================================================= */

.website_operation {
    background: var(--color-bg-light);
}

.website_operation_box {
    display: grid;
    grid-template-columns: minmax(400px, .9fr) minmax(500px, 1.1fr);
    gap: 100px;

    padding: 80px;

    border-radius: var(--radius-lg);

    background: #fff;
}

.website_operation_head h3 {
    margin: 0;

    color: var(--color-title);

    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;

    /* fc_gradient 포함 제목 */
    word-break: keep-all;
}

.website_operation_content > p {
    max-width: 600px;

    margin: 0 0 45px;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.85;

    word-break: keep-all;
}

.website_operation_content ul {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid var(--color-line);
}

.website_operation_content li {
    display: flex;
    align-items: center;
    gap: 25px;

    min-height: 64px;

    border-bottom: 1px solid var(--color-line);

    color: var(--color-title);

    font-size: 16px;
    font-weight: 600;
}

.website_operation_content li span {
    color: var(--color-primary);

    font-size: 14px;
}



/* =========================================================
   07. Closing
========================================================= */

.website_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.website_closing_inner {
    text-align: center;
}

.website_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px, 4.6vw, 72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.website_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.website_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}



/* =========================================================
   0201 RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .website_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .website_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    .website_purpose_grid {
        gap: 12px;
    }

    .website_purpose_item {
        min-height: 350px;

        padding: 28px;
    }


    .website_type_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .website_type_head {
        position: static;
    }


    .website_build_item {
        padding: 32px 25px;
    }


    .website_operation_box {
        grid-template-columns: 1fr;
        gap: 60px;

        padding: 60px;
    }

}


@media (max-width: 768px) {

    .website_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .website_intro_title {
        font-size: 44px;
    }

    .website_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .website_intro_keyword {
        font-size: 58px;
    }


    .website_purpose_grid {
        grid-template-columns: 1fr;
    }

    .website_purpose_item {
        min-height: 0;
    }


    .website_build_flow {
        grid-template-columns: 1fr;
    }

    .website_build_item {
        min-height: 300px;
    }

    .website_build_item + .website_build_item {
        border-top: 1px solid rgba(255,255,255,.16);
        border-left: 0;
    }

    .website_build_item h4 {
        margin-top: 70px;
    }


    .website_included_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .website_included_item:not(:nth-child(3n+1)) {
        border-left: 0;
    }

    .website_included_item:nth-child(even) {
        border-left: 1px solid var(--color-line);
    }


    .website_operation_box {
        padding: 45px 35px;
    }

    .website_operation_head h3 {
        font-size: 36px;
    }

}


@media (max-width: 600px) {

    .website_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .website_intro_title {
        font-size: 38px;
    }

    .website_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .website_intro_keyword {
        font-size: 48px;
    }

    .website_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .website_intro_text p {
        font-size: 15px;
    }


    .website_purpose_grid {
        margin-top: 50px;
    }

    .website_purpose_item {
        padding: 25px;
    }

    .website_purpose_title_row {
        gap: 16px;

        margin-top: 30px;
    }

    .website_purpose_icon {
        width: 64px;
        height: 64px;
    }

    .website_purpose_icon i {
        width: 64px;
        height: 64px;

        border-radius: 19px;

        font-size: 24px;
    }

    .website_purpose_item h4 {
        font-size: 24px;
        line-height: 1.28;
    }

    .website_purpose_item p {
        margin-top: 22px;

        font-size: 15px;
    }


    .website_type_item {
        grid-template-columns: 35px 1fr;

        padding: 30px 0;
    }

    .website_type_item em {
        display: none;
    }

    .website_type_item strong {
        font-size: 21px;
    }


    .website_build_flow {
        margin-top: 50px;
    }

    .website_build_item {
        min-height: 270px;

        padding: 28px 20px;
    }

    .website_build_item h4 {
        margin-top: 55px;

        font-size: 28px;
    }


    .website_included_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .website_included_item {
        min-height: 0;

        padding: 28px 0;
    }

    .website_included_item:nth-child(even) {
        border-left: 0;
    }

    .website_included_item > span {
        margin-bottom: 30px;
    }


    .website_operation_box {
        gap: 45px;

        padding: 35px 25px;
    }

    .website_operation_head h3 {
        font-size: 30px;
    }

    .website_operation_content > p {
        font-size: 15px;
    }

    .website_operation_content li {
        gap: 15px;

        font-size: 14px;
    }


    .website_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .website_closing h3 {
        font-size: 36px;
    }

    .website_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .website_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .website_closing_buttons .sub_btn {
        width: 100%;
    }

}





/* =========================================================
   0202 SHOPPING MALL
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.shopping_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.shopping_intro_head {
    max-width: 1300px;
}

.shopping_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.shopping_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.shopping_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px, 5.5vw, 88px);
    font-weight: 700;
    line-height: .88;
}

.shopping_intro_text {
    max-width: 650px;
}

.shopping_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.shopping_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}



/* =========================================================
   02. Commerce Flow
========================================================= */

.shopping_flow {
    background: var(--color-bg-light);
}

.shopping_flow_head {
    max-width: 900px;
}

.shopping_flow_track {
    display: flex;
    align-items: stretch;

    margin-top: 80px;

    border-top: 1px solid var(--color-title);
    border-bottom: 1px solid var(--color-title);
}

.shopping_flow_item {
    flex: 1;

    padding: 35px 20px 40px;

    text-align: center;
}

.shopping_flow_item span {
    display: block;

    margin-bottom: 65px;

    color: var(--color-muted);

    font-size: 14px;
}

.shopping_flow_item strong {
    display: block;

    color: var(--color-title);

    font-size: 20px;
    font-weight: 700;
}

.shopping_flow_item p {
    margin: 8px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
}

.shopping_flow_track > i {
    display: flex;
    align-items: center;

    color: var(--color-primary);

    font-size: 24px;
    font-style: normal;
}



/* =========================================================
   03. Shopping System
========================================================= */

.shopping_system {
    background: #111;
}

.shopping_system_layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 120px;

    align-items: center;
}

.shopping_system .sub_section_label {
    color: var(--color-primary);
}

.shopping_system_head h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(54px, 6vw, 96px);
    font-weight: 700;
    line-height: .88;
}

.shopping_system_head h3 span {
    color: var(--color-primary);
}

.shopping_system_content {
    max-width: 680px;
}

.shopping_system_content h4 {
    margin: 0 0 35px;

    color: #fff;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;

    word-break: keep-all;
}

.shopping_system_content > p {
    margin: 0 0 16px;

    color: rgba(255,255,255,.58);

    font-size: 16px;
    line-height: 1.85;

    word-break: keep-all;
}

.shopping_system_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 45px;
}

.shopping_system_tags span {
    padding: 10px 17px;

    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-pill);

    color: rgba(255,255,255,.75);

    font-size: 14px;
}



/* =========================================================
   04. Core Functions
========================================================= */

.shopping_function {
    background: #fff;
}

.shopping_function_head {
    max-width: 900px;
}

.shopping_function_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    margin-top: 80px;

    border-top: 1px solid var(--color-title);
}

.shopping_function_item {
    position: relative;

    min-height: 300px;

    padding: 32px 28px;

    border-bottom: 1px solid var(--color-line);
}

.shopping_function_item:not(:nth-child(4n+1)) {
    border-left: 1px solid var(--color-line);
}

.shopping_function_item > span {
    color: var(--color-muted);

    font-size: 14px;
}

.shopping_function_item em {
    position: absolute;
    top: 32px;
    right: 28px;

    color: #c7c7c7;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}

.shopping_function_title_row {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-top: 52px;
}

.shopping_function_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;

    width: 64px;
    height: 64px;
}

.shopping_function_icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border-radius: 20px;

    background: rgba(243,108,33,.10);
    color: var(--color-primary);

    font-size: 24px;
}

.shopping_function_icon.is_blue i {
    background: rgba(23,105,232,.09);
    color: var(--color-blue);
}

.shopping_function_icon.is_mix i {
    background: rgba(138,86,132,.09);
    color: #8a5684;
}

.shopping_function_item strong {
    display: block;
    flex: 1 1 auto;

    margin: 0;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.shopping_function_item p {
    max-width: none;

    margin: 22px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   05. Custom
========================================================= */

.shopping_custom {
    background: var(--color-bg-light);
}

.shopping_custom_head {
    max-width: 1000px;
}

.shopping_custom_content {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 25px;

    align-items: stretch;

    margin-top: 80px;
}

.shopping_custom_base,
.shopping_custom_add,
.shopping_custom_result {
    min-height: 370px;

    padding: 35px;

    border-radius: var(--radius-lg);

    background: #fff;
}

.shopping_custom_base > span,
.shopping_custom_add > span,
.shopping_custom_result > span {
    display: block;

    color: var(--color-primary);

    font-size: 13px;
    font-weight: 700;
}

.shopping_custom_base strong,
.shopping_custom_add strong,
.shopping_custom_result strong {
    display: block;

    margin-top: 70px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
}

.shopping_custom_base p {
    margin: 25px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;
}

.shopping_custom_add ul {
    margin: 25px 0 0;
    padding: 0;

    list-style: none;
}

.shopping_custom_add li {
    padding: 6px 0;

    color: var(--color-subtext);

    font-size: 14px;
}

.shopping_custom_result {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 85%,
            rgba(23, 105, 232, .24),
            transparent 35%
        ),
        radial-gradient(
            circle at 65% 100%,
            rgba(138, 86, 132, .18),
            transparent 32%
        ),
        radial-gradient(
            circle at 100% 55%,
            rgba(243, 108, 33, .13),
            transparent 30%
        ),
        #111;
}


/* 텍스트는 그래픽보다 위 */

.shopping_custom_result > span,
.shopping_custom_result > strong {
    position: relative;
    z-index: 2;
}


/* =========================================================
   Result Visual
========================================================= */

.shopping_custom_visual {
    position: absolute;

    right: -35px;
    bottom: -35px;

    width: 72%;
    aspect-ratio: 1.25 / 1;

    z-index: 1;

    transform: rotate(-5deg);
}


.shopping_custom_browser {
    position: absolute;

    inset: 0;

    padding: 22px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;

    background: rgba(255,255,255,.035);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.3),
        inset 0 0 40px rgba(255,255,255,.015);
}


/* browser top */

.shopping_custom_browser_top {
    display: flex;
    gap: 6px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255,255,255,.10);
}


.shopping_custom_browser_top i {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255,255,255,.3);
}


/* products */

.shopping_custom_browser_products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;

    margin-top: 22px;
}


.shopping_custom_browser_products i {
    display: block;

    aspect-ratio: 1 / 1.05;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );
}


.shopping_custom_browser_products i:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            rgba(23,105,232,.20),
            rgba(255,255,255,.025)
        );
}


.shopping_custom_browser_products i:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            rgba(243,108,33,.17),
            rgba(255,255,255,.025)
        );
}


/* text lines */

.shopping_custom_browser_line {
    margin-top: 16px;
}


.shopping_custom_browser_line i {
    display: block;

    width: 70%;
    height: 5px;

    margin-top: 8px;

    border-radius: 10px;

    background: rgba(255,255,255,.10);
}


.shopping_custom_browser_line i:last-child {
    width: 42%;
}

.shopping_custom_visual {
    transition:
        transform .6s ease,
        opacity .6s ease;
}


.shopping_custom_result:hover .shopping_custom_visual {
    transform:
        translate(-10px, -10px)
        rotate(-2deg);
}


.shopping_custom_result > span {
    color: var(--color-primary);
}

.shopping_custom_result strong {
    color: #fff;
}

.shopping_custom_plus,
.shopping_custom_equal {
    display: flex;
    align-items: center;

    color: var(--color-primary);

    font-size: 36px;
    font-weight: 300;
}



/* =========================================================
   06. Management
========================================================= */

.shopping_manage {
    background: #fff;
}

.shopping_manage_layout {
    display: grid;
    grid-template-columns: minmax(320px,.75fr) minmax(550px,1.25fr);
    gap: 120px;
}

.shopping_manage_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.shopping_manage_head .sub_section_title span {
    color: var(--color-primary);
}

.shopping_manage_list {
    border-top: 1px solid var(--color-title);
}

.shopping_manage_list article {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 25px;

    padding: 40px 0;

    border-bottom: 1px solid var(--color-line);
}

.shopping_manage_list article > span {
    padding-top: 5px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

.shopping_manage_list strong {
    display: block;

    color: var(--color-title);

    font-size: 23px;
    font-weight: 700;
}

.shopping_manage_list p {
    max-width: 600px;

    margin: 12px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   07. Closing
========================================================= */

.shopping_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.shopping_closing_inner {
    text-align: center;
}

.shopping_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px,4.6vw,72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.shopping_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.shopping_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}



/* =========================================================
   0202 RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .shopping_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .shopping_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    .shopping_system_layout {
        gap: 70px;
    }


    .shopping_function_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .shopping_function_item:not(:nth-child(4n+1)) {
        border-left: 0;
    }

    .shopping_function_item:nth-child(even) {
        border-left: 1px solid var(--color-line);
    }


    .shopping_custom_content {
        grid-template-columns: 1fr 1fr;
    }

    .shopping_custom_plus,
    .shopping_custom_equal {
        display: none;
    }

    .shopping_custom_result {
        grid-column: 1 / -1;

        min-height: 260px;
    }


    .shopping_manage_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .shopping_manage_head {
        position: static;
    }

}


@media (max-width: 768px) {

    .shopping_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .shopping_intro_title {
        font-size: 44px;
    }

    .shopping_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .shopping_intro_keyword {
        font-size: 58px;
    }


    .shopping_flow_track {
        display: grid;
        grid-template-columns: 1fr;
    }

    .shopping_flow_track > i {
        display: none;
    }

    .shopping_flow_item {
        display: grid;
        grid-template-columns: 45px 1fr 1fr;

        align-items: center;

        padding: 24px 0;

        text-align: left;

        border-bottom: 1px solid var(--color-line);
    }

    .shopping_flow_item:last-child {
        border-bottom: 0;
    }

    .shopping_flow_item span {
        margin: 0;
    }

    .shopping_flow_item p {
        margin: 0;

        text-align: right;
    }


    .shopping_system_layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .shopping_system_content h4 {
        font-size: 32px;
    }


    .shopping_custom_content {
        grid-template-columns: 1fr;
    }

    .shopping_custom_result {
        grid-column: auto;
    }

}


@media (max-width: 600px) {

    .shopping_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .shopping_intro_title {
        font-size: 38px;
    }

    .shopping_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .shopping_intro_keyword {
        font-size: 48px;
    }

    .shopping_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .shopping_intro_text p {
        font-size: 15px;
    }


    .shopping_flow_track {
        margin-top: 50px;
    }


    .shopping_system_head h3 {
        font-size: 50px;
    }

    .shopping_system_content h4 {
        font-size: 28px;
    }

    .shopping_system_content > p {
        font-size: 15px;
    }


    .shopping_function_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .shopping_function_item {
        min-height: 245px;

        padding: 28px 0;
    }

    .shopping_function_item:nth-child(even) {
        border-left: 0;
    }

    .shopping_function_item em {
        right: 0;
    }

    .shopping_function_title_row {
        gap: 15px;

        margin-top: 38px;
    }

    .shopping_function_icon {
        flex-basis: 60px;

        width: 60px;
        height: 60px;
    }

    .shopping_function_icon i {
        width: 60px;
        height: 60px;

        border-radius: 18px;

        font-size: 23px;
    }

    .shopping_function_item strong {
        font-size: 22px;
    }

    .shopping_function_item p {
        margin-top: 18px;
    }


    .shopping_custom_content {
        margin-top: 50px;
    }

    .shopping_custom_base,
    .shopping_custom_add,
    .shopping_custom_result {
        min-height: 320px;

        padding: 28px;
    }

    .shopping_custom_base strong,
    .shopping_custom_add strong,
    .shopping_custom_result strong {
        margin-top: 55px;

        font-size: 27px;
    }


    .shopping_manage_list article {
        grid-template-columns: 40px 1fr;

        padding: 30px 0;
    }

    .shopping_manage_list strong {
        font-size: 21px;
    }


    .shopping_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .shopping_closing h3 {
        font-size: 36px;
    }

    .shopping_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .shopping_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .shopping_closing_buttons .sub_btn {
        width: 100%;
    }

}



/* =========================================================
   0203 WEB & PLATFORM DEVELOPMENT
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.platform_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.platform_intro_head {
    max-width: 1350px;
}

.platform_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.platform_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.platform_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.platform_intro_text {
    max-width: 650px;
}

.platform_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.platform_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}



/* =========================================================
   02. Development Area
========================================================= */

.platform_area {
    background: var(--color-bg-light);
}

.platform_area_head {
    max-width: 900px;
}

.platform_area_grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.platform_area_item {
    position: relative;

    min-height: 390px;

    padding: 32px;

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.platform_area_num {
    position: absolute;
    top: 32px;
    right: 32px;

    color: #bbb;

    font-size: 14px;
}

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

    width: 76px;
    height: 76px;

    margin-bottom: 70px;

    border-radius: 22px;

    background: rgba(243, 108, 33, .08);
}

.platform_area_icon i {
    color: var(--color-primary);

    font-size: 30px;

    transition: transform .3s ease;
}

.platform_area_item:hover .platform_area_icon i {
    transform: scale(1.12);
}


.platform_area_item h4 {
    margin: 0;

    color: var(--color-title);

    font-size: 25px;
    font-weight: 700;
}

.platform_area_item p {
    max-width: 340px;

    margin: 15px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}

.platform_area_item em {
    position: absolute;
    right: 32px;
    bottom: 30px;

    color: #c3c3c3;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}



/* =========================================================
   03. Business Flow
========================================================= */

.platform_flow {
    background: #111;
}

.platform_flow .sub_section_label {
    color: var(--color-primary);
}

.platform_flow .sub_section_title {
    color: #fff;
}

.platform_flow_head {
    max-width: 850px;
}

.platform_flow_head > p:last-child {
    margin: 25px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 17px;
    line-height: 1.8;
}

.platform_flow_diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 100px;
}

.platform_flow_item {
    flex: 1;

    text-align: center;
}

.platform_flow_item > span {
    display: block;

    margin-bottom: 20px;

    color: rgba(255,255,255,.35);

    font-size: 14px;
}

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

    width: 150px;
    height: 150px;

    margin: 0 auto 30px;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    background: rgba(255,255,255,.04);
}

.platform_flow_circle i {
    color: var(--color-primary);

    font-size: 38px;

    transition: transform .3s ease;
}

.platform_flow_item:hover .platform_flow_circle i {
    transform: scale(1.12);
}



.platform_flow_item strong {
    display: block;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
}

.platform_flow_item p {
    margin: 8px 0 0;

    color: rgba(255,255,255,.45);

    font-size: 14px;
}

.platform_flow_arrow {
    margin: 30px 15px 0;

    color: var(--color-primary);

    font-size: 26px;
}



/* =========================================================
   04. Custom Development
========================================================= */

.platform_custom {
    background: #fff;
}

.platform_custom_head {
    max-width: 1000px;
}

.platform_custom_compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 45px;

    align-items: center;

    margin-top: 80px;
}

.platform_custom_problem,
.platform_custom_solution {
    min-height: 480px;

    padding: 50px;

    border-radius: var(--radius-lg);

    background: var(--color-bg-light);
}

.platform_custom_solution {
    background: #111;
}

.platform_custom_label {
    display: block;

    color: var(--color-muted);

    font-size: 13px;
    font-weight: 700;
}

.platform_custom_solution .platform_custom_label {
    color: var(--color-primary);
}

.platform_custom_problem h4,
.platform_custom_solution h4 {
    margin: 55px 0 0;

    color: var(--color-title);

    font-size: 34px;
    font-weight: 700;
    line-height: 1.35;
}

.platform_custom_solution h4 {
    color: #fff;
}

.platform_custom_visual {
    display: flex;
    gap: 8px;

    margin-top: 45px;
}

.platform_custom_visual span {
    flex: 1;

    padding: 18px 10px;

    border: 1px solid var(--color-line);
    border-radius: 8px;

    color: var(--color-subtext);

    font-size: 14px;

    text-align: center;
}

.platform_custom_solution .platform_custom_visual span {
    border-color: rgba(255,255,255,.15);

    color: rgba(255,255,255,.7);
}

.platform_custom_problem p,
.platform_custom_solution p {
    margin: 35px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;
}

.platform_custom_solution p {
    color: rgba(255,255,255,.5);
}

.platform_custom_arrow {
    color: var(--color-primary);

    font-size: 36px;
}



/* =========================================================
   05. Development Example
========================================================= */

.platform_example {
    background: var(--color-bg-light);
}

.platform_example_head {
    max-width: 950px;
}

.platform_example_list {
    margin-top: 80px;

    border-top: 1px solid var(--color-title);
}

.platform_example_list article {
    display: grid;
    grid-template-columns: 50px 70px 1fr auto;
    gap: 30px;

    align-items: center;

    min-height: 140px;

    border-bottom: 1px solid var(--color-line);
}

.platform_example_num {
    color: var(--color-muted);

    font-size: 14px;
}

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

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.platform_example_icon i {
    color: var(--color-primary);

    font-size: 20px;
}

.platform_example_text strong {
    display: block;

    color: var(--color-title);

    font-size: 21px;
    font-weight: 700;
}

.platform_example_text p {
    margin: 8px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;
}

.platform_example_list em {
    color: #bbb;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}



/* =========================================================
   06. Development Point
========================================================= */

.platform_point {
    background: #fff;
}

.platform_point_layout {
    display: grid;
    grid-template-columns: minmax(400px,.9fr) minmax(500px,1.1fr);
    gap: 120px;
}

.platform_point_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.platform_point_head h3 {
    margin: 0;

    color: var(--color-title);

    font-size: 44px;
    font-weight: 700;
    line-height: 1.35;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.platform_point_list {
    border-top: 1px solid var(--color-title);
}

.platform_point_list article {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 25px;

    padding: 38px 0;

    border-bottom: 1px solid var(--color-line);
}

.platform_point_list article > span {
    padding-top: 5px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

.platform_point_list strong {
    display: block;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
}

.platform_point_list p {
    max-width: 560px;

    margin: 10px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   07. Closing
========================================================= */

.platform_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.platform_closing_inner {
    text-align: center;
}

.platform_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px,4.6vw,72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.platform_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.platform_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}



/* =========================================================
   0203 RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .platform_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .platform_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    .platform_area_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }


    .platform_flow_circle {
        width: 120px;
        height: 120px;
    }


    .platform_custom_problem,
    .platform_custom_solution {
        padding: 40px;
    }


    .platform_point_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .platform_point_head {
        position: static;
    }

}


@media (max-width: 768px) {

    .platform_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .platform_intro_title {
        font-size: 44px;
    }

    .platform_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .platform_intro_keyword {
        font-size: 58px;
    }


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

        margin-top: 70px;
    }

    .platform_flow_arrow {
        display: none;
    }


    .platform_custom_compare {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .platform_custom_arrow {
        padding: 5px 0;

        text-align: center;

        transform: rotate(90deg);
    }


    .platform_example_list article {
        grid-template-columns: 40px 55px 1fr;
        gap: 20px;

        padding: 25px 0;
    }

    .platform_example_list em {
        display: none;
    }

}


@media (max-width: 600px) {

    .platform_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .platform_intro_title {
        font-size: 38px;
    }

    .platform_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .platform_intro_keyword {
        font-size: 48px;
    }

    .platform_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .platform_intro_text p {
        font-size: 15px;
    }


    .platform_area_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .platform_area_item {
        min-height: 340px;

        padding: 27px;
    }


    .platform_flow_diagram {
        grid-template-columns: 1fr 1fr;
        gap: 45px 10px;
    }

    .platform_flow_circle {
        width: 105px;
        height: 105px;
    }

    .platform_area_icon {
        width: 68px;
        height: 68px;
        margin-bottom: 55px;
    }

    .platform_area_icon i {
        font-size: 27px;
    }

    .platform_flow_circle i {
        font-size: 32px;
    }


    .platform_custom_compare {
        margin-top: 50px;
    }

    .platform_custom_problem,
    .platform_custom_solution {
        min-height: 400px;

        padding: 30px;
    }

    .platform_custom_problem h4,
    .platform_custom_solution h4 {
        margin-top: 40px;

        font-size: 28px;
    }


    .platform_example_list {
        margin-top: 50px;
    }

    .platform_example_list article {
        grid-template-columns: 35px 1fr;
    }

    .platform_example_icon {
        display: none;
    }

    .platform_example_text strong {
        font-size: 19px;
    }


    .platform_point_head h3 {
        font-size: 32px;
    }

    .platform_point_list article {
        grid-template-columns: 40px 1fr;

        padding: 30px 0;
    }

    .platform_point_list strong {
        font-size: 20px;
    }


    .platform_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .platform_closing h3 {
        font-size: 36px;
    }

    .platform_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .platform_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .platform_closing_buttons .sub_btn {
        width: 100%;
    }

}




/* =========================================================
   0204 LANDING PAGE
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.landing_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.landing_intro_head {
    max-width: 1300px;
}

.landing_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.landing_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.landing_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.landing_intro_text {
    max-width: 650px;
}

.landing_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.landing_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   02. One Goal
========================================================= */

.landing_goal {
    background: var(--color-bg-light);
}

.landing_goal_head {
    max-width: 900px;
}

.landing_goal_visual {
    display: grid;
    grid-template-columns: 1fr 70px 1.15fr 70px 1fr;

    align-items: center;

    margin-top: 90px;
}

.landing_goal_source,
.landing_goal_page,
.landing_goal_action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 330px;

    padding: 35px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;

    text-align: center;
}

.landing_goal_page {
    min-height: 390px;

    border: 0;

    background: #111;
}

.landing_goal_source > span,
.landing_goal_page > span,
.landing_goal_action > span {
    margin-bottom: 65px;

    color: var(--color-muted);

    font-size: 13px;
    font-weight: 700;
}

.landing_goal_page > span {
    color: var(--color-primary);
}

.landing_goal_sources {
    display: flex;
    gap: 12px;
}

.landing_goal_sources i,
.landing_goal_action_icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);

    color: var(--color-primary);

    font-size: 19px;
}

.landing_goal_source p {
    margin: 25px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
}

.landing_goal_page > i {
    margin-bottom: 30px;

    color: var(--color-primary);

    font-size: 54px;
}

.landing_goal_page strong {
    color: #fff;

    font-size: 26px;
    font-weight: 700;
}

.landing_goal_action strong {
    margin-top: 28px;

    color: var(--color-title);

    font-size: 21px;
}

.landing_goal_arrow {
    color: var(--color-primary);

    font-size: 30px;

    text-align: center;
}


/* =========================================================
   03. Page Flow
========================================================= */

.landing_flow {
    background: #111;
}

.landing_flow .sub_section_label {
    color: var(--color-primary);
}

.landing_flow .sub_section_title {
    color: #fff;
}

.landing_flow_head {
    max-width: 950px;
}

.landing_flow_head > p:last-child {
    margin: 25px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 17px;
    line-height: 1.8;
}

.landing_flow_list {
    margin-top: 90px;

    border-top: 1px solid rgba(255,255,255,.3);
}

.landing_flow_item {
    display: grid;
    grid-template-columns: 70px 90px 1fr;
    gap: 25px;

    align-items: center;

    min-height: 180px;

    border-bottom: 1px solid rgba(255,255,255,.15);
}

.landing_flow_num {
    color: rgba(255,255,255,.35);

    font-size: 14px;
}

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

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: rgba(243,108,33,.1);
}

.landing_flow_icon i {
    color: var(--color-primary);

    font-size: 23px;
}

.landing_flow_content {
    display: grid;
    grid-template-columns: 140px minmax(230px,.7fr) 1fr;
    gap: 30px;

    align-items: center;
}

.landing_flow_content > span {
    color: var(--color-primary);

    font-size: 13px;
    font-weight: 700;
}

.landing_flow_content strong {
    color: #fff;

    font-size: 23px;
    font-weight: 700;
}

.landing_flow_content p {
    max-width: 520px;

    margin: 0;

    color: rgba(255,255,255,.5);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   04. Purpose
========================================================= */

.landing_purpose {
    background: #fff;
}

.landing_purpose_head {
    max-width: 900px;
}

.landing_purpose_grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.landing_purpose_grid article {
    position: relative;

    min-height: 350px;

    padding: 32px;

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.landing_purpose_top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.landing_purpose_top > span {
    color: var(--color-muted);

    font-size: 14px;
}

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

    width: 64px;
    height: 64px;

    border-radius: 18px;

    background: rgba(243,108,33,.08);
}

.landing_purpose_icon i {
    color: var(--color-primary);

    font-size: 25px;

    transition: transform .3s ease;
}

.landing_purpose_grid article:hover .landing_purpose_icon i {
    transform: scale(1.12);
}

.landing_purpose_grid article > strong {
    display: block;

    margin-top: 80px;

    color: var(--color-title);

    font-size: 24px;
    font-weight: 700;
}

.landing_purpose_grid article > p {
    max-width: 340px;

    margin: 15px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}

.landing_purpose_grid article > em {
    position: absolute;
    right: 32px;
    bottom: 28px;

    color: #c4c4c4;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}


/* =========================================================
   05. Essential Point
========================================================= */

.landing_point {
    background: var(--color-bg-light);
}

.landing_point_layout {
    display: grid;
    grid-template-columns: minmax(380px,.85fr) minmax(550px,1.15fr);
    gap: 120px;
}

.landing_point_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.landing_point_head h3 {
    margin: 0;

    color: var(--color-title);

    font-size: 44px;
    font-weight: 700;
    line-height: 1.35;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.landing_point_head > p:last-child {
    max-width: 450px;

    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.8;
}

.landing_point_list {
    border-top: 1px solid var(--color-title);
}

.landing_point_list article {
    display: grid;
    grid-template-columns: 45px 65px 1fr;
    gap: 20px;

    align-items: center;

    min-height: 130px;

    border-bottom: 1px solid var(--color-line);
}

.landing_point_list article > span {
    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.landing_point_icon i {
    color: var(--color-primary);

    font-size: 18px;
}

.landing_point_list strong {
    display: block;

    color: var(--color-title);

    font-size: 21px;
    font-weight: 700;
}

.landing_point_list p {
    max-width: 520px;

    margin: 8px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;

    word-break: keep-all;
}


/* =========================================================
   06. Process
========================================================= */

.landing_process {
    background: #fff;
}

.landing_process_head {
    max-width: 850px;
}

.landing_process_track {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));

    margin-top: 80px;

    border-top: 1px solid var(--color-title);
    border-bottom: 1px solid var(--color-title);
}

.landing_process_track article {
    position: relative;

    min-height: 360px;

    padding: 32px 26px;
}

.landing_process_track article + article {
    border-left: 1px solid var(--color-line);
}

.landing_process_track article > span {
    color: var(--color-muted);

    font-size: 14px;
}

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

    width: 60px;
    height: 60px;

    margin-top: 65px;

    border-radius: 18px;

    background: rgba(243,108,33,.08);
}

.landing_process_icon i {
    color: var(--color-primary);

    font-size: 22px;
}

.landing_process_track strong {
    display: block;

    margin-top: 30px;

    color: var(--color-title);

    font-size: 21px;
    font-weight: 700;
}

.landing_process_track p {
    margin: 13px 0 0;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.7;

    word-break: keep-all;
}


/* =========================================================
   07. Closing
========================================================= */

.landing_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.landing_closing_inner {
    text-align: center;
}

.landing_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px,4.6vw,72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.landing_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.landing_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}


/* =========================================================
   0204 RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .landing_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .landing_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    .landing_goal_visual {
        grid-template-columns: 1fr 45px 1.15fr 45px 1fr;
    }


    .landing_flow_content {
        grid-template-columns: 110px .8fr 1fr;
        gap: 20px;
    }


    .landing_purpose_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }


    .landing_point_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .landing_point_head {
        position: static;
    }


    .landing_process_track {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .landing_process_track article:nth-child(4) {
        border-left: 0;
    }

    .landing_process_track article:nth-child(n+4) {
        border-top: 1px solid var(--color-line);
    }

}


@media (max-width: 768px) {

    .landing_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .landing_intro_title {
        font-size: 44px;
    }

    .landing_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .landing_intro_keyword {
        font-size: 58px;
    }


    .landing_goal_visual {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 65px;
    }

    .landing_goal_source,
    .landing_goal_page,
    .landing_goal_action {
        min-height: 260px;
    }

    .landing_goal_page {
        min-height: 300px;
    }

    .landing_goal_arrow {
        height: 35px;

        transform: rotate(90deg);
    }


    .landing_flow_item {
        grid-template-columns: 45px 65px 1fr;

        padding: 30px 0;
    }

    .landing_flow_content {
        grid-template-columns: 1fr;
        gap: 8px;
    }


    .landing_process_track {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .landing_process_track article:nth-child(3),
    .landing_process_track article:nth-child(5) {
        border-left: 0;
    }

    .landing_process_track article:nth-child(4) {
        border-left: 1px solid var(--color-line);
    }

    .landing_process_track article:nth-child(n+3) {
        border-top: 1px solid var(--color-line);
    }

}


@media (max-width: 600px) {

    .landing_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .landing_intro_title {
        font-size: 38px;
    }

    .landing_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .landing_intro_keyword {
        font-size: 48px;
    }

    .landing_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .landing_intro_text p {
        font-size: 15px;
    }


    .landing_goal_source > span,
    .landing_goal_page > span,
    .landing_goal_action > span {
        margin-bottom: 45px;
    }


    .landing_flow_list {
        margin-top: 55px;
    }

    .landing_flow_item {
        grid-template-columns: 35px 1fr;
        gap: 15px;
    }

    .landing_flow_icon {
        display: none;
    }


    .landing_purpose_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .landing_purpose-grid article {
        min-height: 320px;
    }


    .landing_point_head h3 {
        font-size: 32px;
    }

    .landing_point_list article {
        grid-template-columns: 35px 50px 1fr;
        gap: 12px;

        padding: 25px 0;
    }

    .landing_point_icon {
        width: 42px;
        height: 42px;
    }

    .landing_point_list strong {
        font-size: 19px;
    }


    .landing_process_track {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .landing_process_track article {
        min-height: 0;

        padding: 28px 0;
    }

    .landing_process_track article + article {
        border-top: 1px solid var(--color-line);
        border-left: 0;
    }

    .landing_process_icon {
        margin-top: 35px;
    }

    .landing_process_track strong {
        margin-top: 22px;
    }


    .landing_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .landing_closing h3 {
        font-size: 36px;
    }

    .landing_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .landing_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .landing_closing_buttons .sub_btn {
        width: 100%;
    }

}


@media (max-width: 400px) {

    .landing_intro_title {
        font-size: 34px;
    }

}






/* =========================================================
   0205 WEB PLANNING
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.planning_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.planning_intro_head {
    max-width: 1300px;
}

.planning_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.planning_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.planning_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.planning_intro_text {
    max-width: 650px;
}

.planning_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.planning_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   02. Why Planning
========================================================= */

.planning_why {
    background: var(--color-bg-light);
}

.planning_why_head {
    max-width: 950px;
}

.planning_why_grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.planning_why_grid article {
    min-height: 390px;

    padding: 32px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.planning_why_grid article > span {
    color: var(--color-muted);

    font-size: 14px;
}

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

    width: 66px;
    height: 66px;

    margin-top: 55px;

    border-radius: 20px;

    background: rgba(243,108,33,.08);
}

.planning_why_icon i {
    color: var(--color-primary);

    font-size: 25px;

    transition: transform .3s ease;
}

.planning_why_grid article:hover .planning_why_icon i {
    transform: scale(1.12);
}

.planning_why_grid strong {
    display: block;

    margin-top: 38px;

    color: var(--color-title);

    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
}

.planning_why_grid p {
    margin: 18px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   03. From Idea To Structure
========================================================= */

.planning_structure {
    background: #111;
}

.planning_structure .sub_section_label {
    color: var(--color-primary);
}

.planning_structure .sub_section_title {
    color: #fff;
}

.planning_structure_head {
    max-width: 950px;
}

.planning_structure_head > p:last-child {
    margin: 25px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 17px;
    line-height: 1.8;
}

.planning_structure_flow {
    display: flex;
    align-items: stretch;

    margin-top: 90px;

    border-top: 1px solid rgba(255,255,255,.28);
    border-bottom: 1px solid rgba(255,255,255,.28);
}

.planning_structure_flow article {
    flex: 1;

    min-width: 0;

    padding: 35px 18px 40px;

    text-align: center;
}

.planning_structure_flow article > span {
    display: block;

    margin-bottom: 55px;

    color: rgba(255,255,255,.35);

    font-size: 14px;
}

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

    width: 70px;
    height: 70px;

    margin: 0 auto 30px;

    border: 1px solid rgba(243,108,33,.35);
    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.planning_structure_icon i {
    color: var(--color-primary);

    font-size: 25px;
}

.planning_structure_flow strong {
    display: block;

    color: #fff;

    font-size: 17px;
    font-weight: 700;
}

.planning_structure_flow article p {
    margin: 9px 0 0;

    color: rgba(255,255,255,.45);

    font-size: 14px;
    line-height: 1.6;
}

.planning_structure_arrow {
    display: flex;
    align-items: center;

    color: var(--color-primary);

    font-size: 24px;
}


/* =========================================================
   04. What We Plan
========================================================= */

.planning_scope {
    background: #fff;
}

.planning_scope_layout {
    display: grid;
    grid-template-columns: minmax(330px,.75fr) minmax(600px,1.25fr);
    gap: 120px;
}

.planning_scope_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.planning_scope_list {
    border-top: 1px solid var(--color-title);
}

.planning_scope_list article {
    display: grid;
    grid-template-columns: 45px 65px 1fr auto;
    gap: 20px;

    align-items: center;

    min-height: 145px;

    border-bottom: 1px solid var(--color-line);
}

.planning_scope_list article > span {
    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.planning_scope_icon i {
    color: var(--color-primary);

    font-size: 18px;
}

.planning_scope_list strong {
    display: block;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
}

.planning_scope_list p {
    max-width: 560px;

    margin: 8px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;

    word-break: keep-all;
}

.planning_scope_list em {
    color: #bbb;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}


/* =========================================================
   05. Planning View
========================================================= */

.planning_view {
    background: var(--color-bg-light);
}

.planning_view_head {
    max-width: 950px;
}

.planning_view_compare {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;

    align-items: stretch;

    margin-top: 80px;
}

.planning_view_before,
.planning_view_after {
    min-height: 480px;

    padding: 45px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.planning_view_after {
    border-color: #111;

    background: #111;
}

.planning_view_before > span,
.planning_view_after > span {
    color: var(--color-muted);

    font-size: 13px;
    font-weight: 700;
}

.planning_view_after > span {
    color: var(--color-primary);
}

.planning_view_before h4,
.planning_view_after h4 {
    margin: 75px 0 50px;

    color: var(--color-title);

    font-size: 36px;
    font-weight: 700;
    line-height: 1.35;
}

.planning_view_after h4 {
    color: #fff;
}

.planning_view_before ul,
.planning_view_after ul {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid var(--color-line);
}

.planning_view_after ul {
    border-color: rgba(255,255,255,.15);
}

.planning_view_before li,
.planning_view_after li {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 55px;

    border-bottom: 1px solid var(--color-line);

    color: var(--color-subtext);

    font-size: 15px;
}

.planning_view_after li {
    border-color: rgba(255,255,255,.15);

    color: rgba(255,255,255,.65);
}

.planning_view_before li i,
.planning_view_after li i {
    width: 20px;

    color: var(--color-primary);

    text-align: center;
}

.planning_view_center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.planning_view_center > span {
    color: var(--color-primary);

    font-size: 13px;
    font-weight: 700;
}

.planning_view_center > div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    margin: 25px 0;

    border-radius: 50%;

    background: var(--color-primary);

    color: #fff;

    font-size: 22px;
}

.planning_view_center p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   06. Planning Point
========================================================= */

.planning_point {
    background: #fff;
}

.planning_point_layout {
    display: grid;
    grid-template-columns: minmax(400px,.85fr) minmax(550px,1.15fr);
    gap: 120px;
}

.planning_point_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.planning_point_head h3 {
    margin: 0;

    color: var(--color-title);

    font-size: 42px;
    font-weight: 700;
    line-height: 1.4;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.planning_point_list {
    border-top: 1px solid var(--color-title);
}

.planning_point_list article {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 25px;

    padding: 42px 0;

    border-bottom: 1px solid var(--color-line);
}

.planning_point_list article > span {
    padding-top: 4px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

.planning_point_list strong {
    display: block;

    color: var(--color-title);

    font-size: 23px;
    font-weight: 700;
}

.planning_point_list p {
    max-width: 600px;

    margin: 12px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   07. Closing
========================================================= */

.planning_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.planning_closing_inner {
    text-align: center;
}

.planning_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px,4.6vw,72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.planning_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.planning_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}


/* =========================================================
   0205 RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .planning_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .planning_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    .planning_why_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }


    .planning_structure_flow {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }

    .planning_structure_arrow {
        display: none;
    }


    .planning_scope_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .planning_scope_head {
        position: static;
    }


    .planning_view_compare {
        grid-template-columns: 1fr 120px 1fr;
    }


    .planning_point_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .planning_point_head {
        position: static;
    }

}


@media (max-width: 768px) {

    .planning_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .planning_intro_title {
        font-size: 44px;
    }

    .planning_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .planning_intro_keyword {
        font-size: 58px;
    }


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

    .planning_structure_flow article {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .planning_structure_flow article:last-child {
        grid-column: 1 / -1;
    }


    .planning_scope_list article {
        grid-template-columns: 40px 55px 1fr;
    }

    .planning_scope_list em {
        display: none;
    }


    .planning_view_compare {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .planning_view_center {
        min-height: 130px;
    }

    .planning_view_center > div {
        margin: 15px 0;

        transform: rotate(90deg);
    }

}


@media (max-width: 600px) {

    .planning_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .planning_intro_title {
        font-size: 38px;
    }

    .planning_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .planning_intro_keyword {
        font-size: 48px;
    }

    .planning_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .planning_intro_text p {
        font-size: 15px;
    }


    .planning_why_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .planning_why_grid article {
        min-height: 340px;

        padding: 28px;
    }


    .planning_structure_flow {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .planning_structure_flow article:last-child {
        grid-column: auto;
    }

    .planning_structure_flow article {
        display: grid;
        grid-template-columns: 35px 55px 1fr;
        gap: 15px;

        align-items: center;

        padding: 25px 0;

        text-align: left;
    }

    .planning_structure_flow article > span {
        margin: 0;
    }

    .planning_structure_icon {
        width: 48px;
        height: 48px;

        margin: 0;
    }

    .planning_structure_icon i {
        font-size: 18px;
    }

    .planning_structure_flow article strong {
        align-self: end;
    }

    .planning_structure_flow article p {
        grid-column: 3;

        margin-top: -8px;
    }


    .planning_scope_list article {
        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 28px 0;
    }

    .planning_scope_icon {
        display: none;
    }

    .planning_scope_list strong {
        font-size: 20px;
    }


    .planning_view_before,
    .planning_view_after {
        min-height: 0;

        padding: 30px 25px;
    }

    .planning_view_before h4,
    .planning_view_after h4 {
        margin: 50px 0 35px;

        font-size: 29px;
    }


    .planning_point_head h3 {
        font-size: 32px;
    }

    .planning_point_list article {
        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 32px 0;
    }

    .planning_point_list strong {
        font-size: 20px;
    }


    .planning_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .planning_closing h3 {
        font-size: 36px;
    }

    .planning_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .planning_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .planning_closing_buttons .sub_btn {
        width: 100%;
    }

}


@media (max-width: 400px) {

    .planning_intro_title {
        font-size: 34px;
    }

}





/* =========================================================
   0206 OPERATION & MAINTENANCE
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.management_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.management_intro_head {
    max-width: 1300px;
}

.management_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.management_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.management_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.management_intro_text {
    max-width: 650px;
}

.management_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.management_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   02. Our Approach
========================================================= */

.management_approach {
    background: var(--color-bg-light);
}

.management_approach_head {
    max-width: 950px;
}

.management_approach_grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.management_approach_item {
    position: relative;

    min-height: 430px;

    padding: 34px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.management_approach_item > span {
    color: var(--color-muted);

    font-size: 14px;
}

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

    width: 70px;
    height: 70px;

    margin-top: 60px;

    border-radius: 22px;

    background: rgba(243,108,33,.08);
}

.management_approach_icon i {
    color: var(--color-primary);

    font-size: 26px;

    transition: transform .3s ease;
}

.management_approach_item:hover .management_approach_icon i {
    transform: scale(1.12);
}

.management_approach_item strong {
    display: block;

    margin-top: 38px;

    color: var(--color-title);

    font-size: 27px;
    font-weight: 700;
    line-height: 1.35;
}

.management_approach_item p {
    max-width: 390px;

    margin: 18px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}

.management_approach_item em {
    position: absolute;
    right: 34px;
    bottom: 30px;

    color: #c2c2c2;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}


/* =========================================================
   03. Easy To Operate
========================================================= */

.management_operation {
    background: #fff;
}

.management_operation_layout {
    display: grid;
    grid-template-columns: minmax(360px,.8fr) minmax(600px,1.2fr);
    gap: 120px;
}

.management_operation_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.management_operation_head > p:last-child {
    max-width: 470px;

    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.8;
}

.management_operation_list {
    border-top: 1px solid var(--color-title);
}

.management_operation_list article {
    display: grid;
    grid-template-columns: 45px 65px 1fr;
    gap: 20px;

    align-items: center;

    min-height: 150px;

    border-bottom: 1px solid var(--color-line);
}

.management_operation_list article > span {
    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

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

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.management_operation_icon i {
    color: var(--color-primary);

    font-size: 19px;
}

.management_operation_list strong {
    display: block;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
}

.management_operation_list p {
    max-width: 580px;

    margin: 8px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;

    word-break: keep-all;
}


/* =========================================================
   04. Maintenance Service
========================================================= */

.management_service {
    background: #111;
}

.management_service .sub_section_label {
    color: var(--color-primary);
}

.management_service .sub_section_title {
    color: #fff;
}

.management_service .sub_section_desc {
    color: rgba(255,255,255,.5);
}

.management_service_head {
    max-width: 950px;
}

.management_service_grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 1px;

    margin-top: 80px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-lg);

    background: rgba(255,255,255,.13);
}

.management_service_grid article {
    min-height: 310px;

    padding: 32px;

    background: #111;
}

.management_service_top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.management_service_top > span {
    color: rgba(255,255,255,.3);

    font-size: 14px;
}

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

    width: 54px;
    height: 54px;

    border-radius: 17px;

    background: rgba(243,108,33,.10);
}

.management_service_icon i {
    color: var(--color-primary);

    font-size: 20px;
}

.management_service_grid strong {
    display: block;

    margin-top: 80px;

    color: #fff;

    font-size: 22px;
    font-weight: 700;
}

.management_service_grid p {
    max-width: 350px;

    margin: 14px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 14px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   05. Support Flow
========================================================= */

.management_flow {
    background: var(--color-bg-light);
}

.management_flow_head {
    max-width: 950px;
}

.management_flow_head > p:last-child {
    margin: 25px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.management_flow_track {
    display: flex;
    align-items: stretch;

    margin-top: 90px;

    border-top: 1px solid var(--color-title);
    border-bottom: 1px solid var(--color-title);
}

.management_flow_track article {
    flex: 1;

    min-width: 0;

    padding: 35px 15px 40px;

    text-align: center;
}

.management_flow_track article > span {
    display: block;

    margin-bottom: 55px;

    color: var(--color-muted);

    font-size: 14px;
}

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

    width: 70px;
    height: 70px;

    margin: 0 auto 30px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.management_flow_icon i {
    color: var(--color-primary);

    font-size: 24px;
}

.management_flow_track strong {
    display: block;

    color: var(--color-title);

    font-size: 17px;
    font-weight: 700;
}

.management_flow_track article p {
    margin: 10px 0 0;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.65;
}

.management_flow_arrow {
    display: flex;
    align-items: center;

    color: var(--color-primary);

    font-size: 24px;
}


/* =========================================================
   06. Management Point
========================================================= */

.management_point {
    background: #fff;
}

.management_point_layout {
    display: grid;
    grid-template-columns: minmax(420px,.85fr) minmax(550px,1.15fr);
    gap: 120px;
}

.management_point_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.management_point_head h3 {
    margin: 0;

    color: var(--color-title);

    font-size: 42px;
    font-weight: 700;
    line-height: 1.4;

    /* fc_gradient 사용 - letter-spacing 적용 금지 */
    word-break: keep-all;
}

.management_point_head > p:last-child {
    max-width: 440px;

    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.8;
}

.management_point_list {
    border-top: 1px solid var(--color-title);
}

.management_point_list article {
    display: grid;
    grid-template-columns: 45px 65px 1fr;
    gap: 20px;

    align-items: center;

    min-height: 145px;

    border-bottom: 1px solid var(--color-line);
}

.management_point_list article > span {
    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(243,108,33,.08);
}

.management_point_icon i {
    color: var(--color-primary);

    font-size: 18px;
}

.management_point_list strong {
    display: block;

    color: var(--color-title);

    font-size: 21px;
    font-weight: 700;
}

.management_point_list p {
    max-width: 550px;

    margin: 8px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;

    word-break: keep-all;
}


/* =========================================================
   07. Closing
========================================================= */

.management_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.management_closing_inner {
    text-align: center;
}

.management_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px,4.6vw,72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.management_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.management_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}


/* =========================================================
   0206 RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .management_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .management_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    .management_operation_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .management_operation_head {
        position: static;
    }


    .management_service_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }


    .management_point_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .management_point_head {
        position: static;
    }

}


@media (max-width: 768px) {

    .management_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .management_intro_title {
        font-size: 44px;
    }

    .management_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .management_intro_keyword {
        font-size: 58px;
    }


    .management_approach_grid {
        grid-template-columns: 1fr;
    }

    .management_approach_item {
        min-height: 370px;
    }


    .management_flow_track {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .management_flow_arrow {
        display: none;
    }

    .management_flow_track article {
        border-bottom: 1px solid var(--color-line);
    }

    .management_flow_track article:last-child {
        grid-column: 1 / -1;
    }

}


@media (max-width: 600px) {

    .management_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .management_intro_title {
        font-size: 38px;
    }

    .management_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .management_intro_keyword {
        font-size: 48px;
    }

    .management_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .management_intro_text p {
        font-size: 15px;
    }


    .management_approach_grid {
        margin-top: 50px;
    }

    .management_approach_item {
        min-height: 340px;

        padding: 28px;
    }


    .management_operation_list article {
        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 28px 0;
    }

    .management_operation_icon {
        display: none;
    }

    .management_operation_list strong {
        font-size: 20px;
    }


    .management_service_grid {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .management_service_grid article {
        min-height: 280px;

        padding: 28px;
    }

    .management_service_grid strong {
        margin-top: 60px;
    }


    .management_flow_track {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .management_flow_track article:last-child {
        grid-column: auto;
    }

    .management_flow_track article {
        display: grid;
        grid-template-columns: 35px 55px 1fr;
        gap: 15px;

        align-items: center;

        padding: 25px 0;

        text-align: left;
    }

    .management_flow_track article > span {
        margin: 0;
    }

    .management_flow_icon {
        width: 48px;
        height: 48px;

        margin: 0;
    }

    .management_flow_icon i {
        font-size: 18px;
    }

    .management_flow_track article strong {
        align-self: end;
    }

    .management_flow_track article p {
        grid-column: 3;

        margin-top: -8px;
    }


    .management_point_head h3 {
        font-size: 32px;
    }

    .management_point_list article {
        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 28px 0;
    }

    .management_point_icon {
        display: none;
    }

    .management_point_list strong {
        font-size: 20px;
    }


    .management_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .management_closing h3 {
        font-size: 36px;
    }

    .management_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .management_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .management_closing_buttons .sub_btn {
        width: 100%;
    }

}


@media (max-width: 400px) {

    .management_intro_title {
        font-size: 34px;
    }

}


/* =========================================================
   0207 OPERATION SUPPORT
========================================================= */


/* =========================================================
   01. Intro
========================================================= */

.provided_intro {
    padding-top: 150px;
    padding-bottom: 160px;
    background: #fff;
}

.provided_intro_head {
    max-width: 1250px;
}

.provided_intro_title {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    word-break: keep-all;
}

/* fc_gradient 사용 제목이므로 letter-spacing 사용하지 않음 */
.provided_intro_title .fc_gradient {
    display: inline-block;
    letter-spacing: 0;
}


.provided_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(420px, 1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}


.provided_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px, 5.5vw, 88px);
    font-weight: 700;
    line-height: .88;
}


.provided_intro_text {
    max-width: 650px;
}

.provided_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.provided_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}



/* =========================================================
   02. Operation Support
========================================================= */

.provided_support {
    background: var(--color-bg-light);
}


.provided_support_head {
    max-width: 900px;
}


.provided_support_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-top: 80px;
}


.provided_support_grid article {
    position: relative;

    min-height: 360px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


.provided_support_grid article:hover {
    border-color: rgba(243, 108, 33, .35);

    transform: translateY(-5px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .06);
}


/* number */

.provided_support_grid article > span {
    display: block;

    color: var(--color-muted);

    font-size: 14px;
    font-weight: 600;
}


/* icon */

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

    width: 72px;
    height: 72px;

    margin: 48px 0 34px;

    border-radius: 22px;

    background: rgba(243, 108, 33, .09);
    color: var(--color-primary);

    font-size: 26px;
}


.provided_support_grid article:nth-child(3n+2) .provided_support_icon {
    background: rgba(23, 105, 232, .08);
    color: var(--color-blue);
}


.provided_support_grid article:nth-child(3n) .provided_support_icon {
    background: rgba(138, 86, 132, .08);
    color: #8a5684;
}


/* title */

.provided_support_grid article strong {
    display: block;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}


/* description */

.provided_support_grid article p {
    margin: 15px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}


/* english */

.provided_support_grid article em {
    position: absolute;
    right: 28px;
    bottom: 25px;

    color: #ccc;

    font-size: 13px;
    font-style: normal;
    font-weight: 600;

    letter-spacing: .02em;
}


/* ownership point */

.provided_support_grid article.is_point {
    border-color: rgba(243, 108, 33, .35);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(243, 108, 33, .09),
            transparent 45%
        ),
        #fff;
}


.provided_support_grid article.is_point .provided_support_icon {
    background: var(--color-primary);
    color: #fff;
}



/* =========================================================
   03. Web Environment
========================================================= */

.provided_environment {
    background: #fff;
}


.provided_environment_head {
    max-width: 900px;
}


.provided_environment_head > p:last-child {
    max-width: 700px;

    margin: 25px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;

    word-break: keep-all;
}


.provided_environment_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 80px;

    border-top: 1px solid var(--color-title);
    border-bottom: 1px solid var(--color-line);
}


.provided_environment_grid article {
    position: relative;

    min-height: 370px;

    padding: 35px;

    border-bottom: 1px solid var(--color-line);
}


.provided_environment_grid article + article {
    border-left: 1px solid var(--color-line);
}


.provided_environment_grid article > span {
    display: block;

    color: var(--color-muted);

    font-size: 14px;
    font-weight: 600;
}


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

    width: 78px;
    height: 78px;

    margin: 48px 0 38px;

    border-radius: 50%;

    background: var(--color-bg-light);
    color: var(--color-primary);

    font-size: 28px;
}


.provided_environment_grid article:nth-child(2) .provided_environment_icon {
    color: var(--color-blue);
}


.provided_environment_grid article:nth-child(3) .provided_environment_icon {
    color: #8a5684;
}


.provided_environment_grid strong {
    display: block;

    margin-bottom: 7px;

    color: var(--color-primary);

    font-size: 13px;
    font-weight: 700;
}


.provided_environment_grid h4 {
    margin: 0;

    color: var(--color-title);

    font-size: 27px;
    font-weight: 700;
}


.provided_environment_grid p {
    max-width: 350px;

    margin: 16px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}


/* notice */

.provided_environment_notice {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 35px;
    padding: 28px 32px;

    border-radius: var(--radius-md);

    background: var(--color-bg-light);
}


.provided_environment_notice > i {
    flex: 0 0 auto;

    color: var(--color-primary);

    font-size: 28px;
}


.provided_environment_notice p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;
}


.provided_environment_notice strong {
    display: block;

    margin-bottom: 3px;

    color: var(--color-title);

    font-size: 16px;
    font-weight: 700;
}



/* =========================================================
   04. Easy Management
========================================================= */

.provided_management {
    background: #111;
}


.provided_management_layout {
    display: grid;
    grid-template-columns: minmax(320px, .75fr) minmax(550px, 1.25fr);
    gap: 120px;
}


.provided_management_head {
    position: sticky;
    top: 140px;

    align-self: start;
}


.provided_management .sub_section_label {
    color: var(--color-primary);
}


.provided_management .sub_section_title {
    color: #fff;
}


.provided_management_head > p:last-child {
    max-width: 480px;

    margin: 28px 0 0;

    color: rgba(255, 255, 255, .52);

    font-size: 16px;
    line-height: 1.85;

    word-break: keep-all;
}


.provided_management_list {
    border-top: 1px solid rgba(255, 255, 255, .25);
}


.provided_management_list article {
    display: grid;
    grid-template-columns: 50px 70px 1fr;
    gap: 25px;

    align-items: center;

    min-height: 180px;

    padding: 35px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .14);
}


.provided_management_list article > span {
    color: rgba(255, 255, 255, .32);

    font-size: 14px;
    font-weight: 600;
}


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

    width: 60px;
    height: 60px;

    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;

    color: var(--color-primary);

    font-size: 21px;
}


.provided_management_list strong {
    display: block;

    color: #fff;

    font-size: 23px;
    font-weight: 600;
}


.provided_management_list p {
    max-width: 520px;

    margin: 11px 0 0;

    color: rgba(255, 255, 255, .5);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   05. Search & Connection
========================================================= */

.provided_connection {
    background: #fff;
}


.provided_connection_head {
    max-width: 950px;
}


.provided_connection_head h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px, 4.5vw, 70px);
    font-weight: 700;
    line-height: 1.2;

    word-break: keep-all;
}


.provided_connection_head h3 .fc_gradient {
    letter-spacing: 0;
}


.provided_connection_head > p:last-child {
    max-width: 650px;

    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;

    word-break: keep-all;
}


.provided_connection_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    margin-top: 90px;

    border-top: 1px solid var(--color-title);
    border-bottom: 1px solid var(--color-line);
}


.provided_connection_grid article {
    position: relative;

    min-height: 390px;

    padding: 35px 30px;
}


.provided_connection_grid article + article {
    border-left: 1px solid var(--color-line);
}


.provided_connection_grid article > span {
    display: block;

    color: var(--color-muted);

    font-size: 13px;
    font-weight: 700;
}


.provided_connection_grid article > i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin: 70px 0 45px;

    border-radius: 24px;

    background: rgba(23, 105, 232, .07);
    color: var(--color-blue);

    font-size: 27px;
}


.provided_connection_grid article:nth-child(even) > i {
    background: rgba(243, 108, 33, .08);
    color: var(--color-primary);
}


.provided_connection_grid strong {
    display: block;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
}


.provided_connection_grid p {
    margin: 15px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   06. Ownership & License
========================================================= */

.provided_ownership {
    background: var(--color-bg-light);
}


.provided_ownership_layout {
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(500px, 1.1fr);
    gap: 110px;

    align-items: center;
}


/* visual */

.provided_ownership_visual {
    position: relative;

    min-height: 570px;

    padding: 50px;

    overflow: hidden;

    border-radius: var(--radius-lg);

    background: #111;
}


.provided_ownership_visual > span {
    color: rgba(255, 255, 255, .35);

    font-size: 14px;
    font-weight: 700;
}


.provided_ownership_visual > div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 140px;
    height: 140px;

    margin: 105px 0 70px;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;

    background: rgba(255, 255, 255, .04);
}


.provided_ownership_visual > div i {
    color: var(--color-primary);

    font-size: 42px;
}


.provided_ownership_visual > strong {
    display: block;

    color: #fff;

    font-size: 38px;
    font-weight: 600;
    line-height: 1.35;

    word-break: keep-all;
}


/* content */

.provided_ownership_content {
    max-width: 650px;
}


.provided_ownership_items {
    margin-top: 65px;

    border-top: 1px solid var(--color-title);
}


.provided_ownership_items article {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 25px;

    padding: 35px 0;

    border-bottom: 1px solid var(--color-line);
}


.provided_ownership_items article > span {
    padding-top: 4px;

    color: var(--color-primary);

    font-size: 14px;
    font-weight: 700;
}


.provided_ownership_items strong {
    display: block;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
}


.provided_ownership_items p {
    max-width: 500px;

    margin: 12px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}



/* =========================================================
   07. Closing
========================================================= */

.provided_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(243, 108, 33, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(23, 105, 232, .08),
            transparent 30%
        ),
        var(--color-bg-light);
}


.provided_closing_inner {
    text-align: center;
}


.provided_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px, 4.6vw, 72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}


.provided_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}


.provided_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}



/* =========================================================
   0207 RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .provided_support_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .provided_connection_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .provided_connection_grid article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--color-line);
    }

    .provided_connection_grid article:nth-child(4) {
        border-top: 1px solid var(--color-line);
    }

}



@media (max-width: 1024px) {

    /* Intro */

    .provided_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .provided_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    /* Support */

    .provided_support_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* Environment */

    .provided_environment_grid article {
        padding: 30px;
    }


    /* Management */

    .provided_management_layout {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .provided_management_head {
        position: static;
    }


    /* Ownership */

    .provided_ownership_layout {
        grid-template-columns: .85fr 1.15fr;
        gap: 60px;
    }

    .provided_ownership_visual {
        min-height: 500px;

        padding: 40px;
    }

}



@media (max-width: 768px) {

    /* Intro */

    .provided_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .provided_intro_title {
        font-size: 44px;
    }

    .provided_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .provided_intro_keyword {
        font-size: 58px;
    }


    /* Support */

    .provided_support_grid {
        margin-top: 60px;
    }

    .provided_support_grid article {
        min-height: 330px;

        padding: 26px;
    }


    /* Environment */

    .provided_environment_grid {
        grid-template-columns: 1fr;

        margin-top: 60px;

        border-bottom: 0;
    }

    .provided_environment_grid article {
        display: grid;
        grid-template-columns: 50px 90px 1fr;
        gap: 20px;

        align-items: center;

        min-height: 0;

        padding: 30px 0;
    }

    .provided_environment_grid article + article {
        border-left: 0;
    }

    .provided_environment_icon {
        width: 70px;
        height: 70px;

        margin: 0;
    }

    .provided_environment_grid p {
        margin-top: 10px;
    }


    /* Management */

    .provided_management_list article {
        grid-template-columns: 40px 60px 1fr;
        gap: 18px;

        min-height: 160px;
    }


    /* Connection */

    .provided_connection_grid {
        margin-top: 65px;
    }

    .provided_connection_grid article {
        min-height: 340px;

        padding: 30px 25px;
    }

    .provided_connection_grid article > i {
        margin: 55px 0 35px;
    }


    /* Ownership */

    .provided_ownership_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .provided_ownership_visual {
        min-height: 420px;
    }

    .provided_ownership_visual > div {
        width: 110px;
        height: 110px;

        margin: 70px 0 55px;
    }

}



@media (max-width: 600px) {

    /* Intro */

    .provided_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .provided_intro_title {
        font-size: 38px;
    }

    .provided_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .provided_intro_keyword {
        font-size: 48px;
    }

    .provided_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .provided_intro_text p {
        font-size: 15px;
    }


    /* Support */

    .provided_support_grid {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 50px;
    }

    .provided_support_grid article {
        min-height: 300px;

        padding: 25px;
    }

    .provided_support_icon {
        width: 62px;
        height: 62px;

        margin: 35px 0 28px;

        border-radius: 18px;

        font-size: 23px;
    }

    .provided_support_grid article strong {
        font-size: 20px;
    }


    /* Environment */

    .provided_environment_head > p:last-child {
        font-size: 15px;
    }

    .provided_environment_grid {
        margin-top: 50px;
    }

    .provided_environment_grid article {
        grid-template-columns: 35px 65px 1fr;
        gap: 12px;

        padding: 25px 0;
    }

    .provided_environment_icon {
        width: 56px;
        height: 56px;

        font-size: 21px;
    }

    .provided_environment_grid h4 {
        font-size: 22px;
    }

    .provided_environment_grid p {
        font-size: 14px;
    }

    .provided_environment_notice {
        align-items: flex-start;
        gap: 15px;

        padding: 22px 20px;
    }


    /* Management */

    .provided_management_layout {
        gap: 50px;
    }

    .provided_management_head > p:last-child {
        font-size: 15px;
    }

    .provided_management_list article {
        grid-template-columns: 30px 1fr;
        gap: 12px 15px;

        min-height: 0;

        padding: 30px 0;
    }

    .provided_management_icon {
        grid-column: 2;

        width: 54px;
        height: 54px;

        margin-bottom: 5px;
    }

    .provided_management_list article > div:last-child {
        grid-column: 2;
    }

    .provided_management_list strong {
        font-size: 21px;
    }

    .provided_management_list p {
        font-size: 14px;
    }


    /* Connection */

    .provided_connection_head h3 {
        font-size: 36px;
    }

    .provided_connection_head > p:last-child {
        font-size: 15px;
    }

    .provided_connection_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .provided_connection_grid article {
        min-height: 0;

        padding: 30px 0;
    }

    .provided_connection_grid article + article {
        border-top: 1px solid var(--color-line);
        border-left: 0;
    }

    .provided_connection_grid article > i {
        width: 62px;
        height: 62px;

        margin: 35px 0 28px;

        border-radius: 18px;

        font-size: 23px;
    }


    /* Ownership */

    .provided_ownership_layout {
        gap: 50px;
    }

    .provided_ownership_visual {
        min-height: 360px;

        padding: 30px;
    }

    .provided_ownership_visual > div {
        width: 90px;
        height: 90px;

        margin: 55px 0 45px;
    }

    .provided_ownership_visual > div i {
        font-size: 32px;
    }

    .provided_ownership_visual > strong {
        font-size: 30px;
    }

    .provided_ownership_items {
        margin-top: 45px;
    }

    .provided_ownership_items article {
        grid-template-columns: 35px 1fr;
        gap: 15px;

        padding: 28px 0;
    }

    .provided_ownership_items strong {
        font-size: 20px;
    }


    /* Closing */

    .provided_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .provided_closing h3 {
        font-size: 36px;
    }

    .provided_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .provided_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .provided_closing_buttons .sub_btn {
        width: 100%;
    }

}



@media (max-width: 400px) {

    .provided_intro_title {
        font-size: 34px;
    }

    .provided_support_grid article {
        min-height: 285px;
    }

    .provided_connection_head h3 {
        font-size: 32px;
    }

}





/* =========================================================
   03 PRODUCTION GUIDE
========================================================= */


/* =========================================================
   0301 PRODUCTION PRICE
========================================================= */


/* =========================================================
   0301 - 01. Intro
========================================================= */

.guide_price_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.guide_price_intro_title {
    max-width: 1300px;
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px, 5vw, 82px);
    font-weight: 700;
    line-height: 1.13;

    word-break: keep-all;
}

.guide_price_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.guide_price_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.guide_price_intro_text {
    max-width: 650px;
}

.guide_price_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.guide_price_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   0301 - 02. Production Plan
========================================================= */

.guide_price_package {
    background: var(--color-bg-light);
}

.guide_price_package_head {
    max-width: 950px;
}

.guide_price_cards {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.guide_price_card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 650px;

    padding: 38px 32px 36px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}


.guide_price_card.is_primary {
    border-color: rgba(243,108,33,.7);
}

.guide_price_card.is_primary::before {
    content: '';

    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;

    height: 3px;

    border-radius: 0 0 3px 3px;

    background: var(--color-primary);
}

.guide_price_card_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.guide_price_card_top span {
    color: var(--color-muted);

    font-size: 14px;
}

.guide_price_card_top em {
    color: var(--color-primary);

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.guide_price_card h4 {
    margin: 0;

    color: var(--color-title);

    font-size: 27px;
    font-weight: 700;
    line-height: 1.35;

    word-break: keep-all;
}

.guide_price_value {
    display: flex;
    align-items: flex-end;
    gap: 7px;

    margin: 15px 0 0;
}

.guide_price_value strong {
    color: var(--color-title);

    font-size: clamp(42px, 3vw, 54px);
    font-weight: 700;
    line-height: 1;
}

.guide_price_value span {
    padding-bottom: 5px;

    color: var(--color-title);

    font-size: 14px;
    font-weight: 700;
}


.guide_price_summary {
    min-height: 52px;

    margin: 38px 0 0;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.7;

    word-break: keep-all;
}

.guide_price_card ul {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.guide_price_card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.55;

    word-break: keep-all;
}

.guide_price_card li:first-child {
    margin-top: 0;
}

.guide_price_card li i {
    flex: 0 0 auto;

    margin-top: 4px;

    color: var(--color-primary);

    font-size: 12px;
}

/* 추천 타입 */

.guide_price_card_badge {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin: 42px 0 16px;
    padding: 7px 11px;

    border-radius: var(--radius-full);

    background: var(--color-bg-light);

    color: var(--color-subtext);

    font-size: 13px;
    font-weight: 600;
}


.guide_price_card.is_primary .guide_price_card_badge {
    background: rgba(243,108,33,.09);

    color: var(--color-primary);
}


/* 구성 기준 */

.guide_price_card_label {
    margin: 0 0 17px;

    color: var(--color-muted);

    font-size: 13px;
    font-weight: 600;
}


/* 구분선 */

.guide_price_card_line {
    width: 100%;
    height: 1px;

    margin: 35px 0 25px;

    background: var(--color-line);
}



/* =========================================================
   0301 - 03. Price Factor
========================================================= */

.guide_price_factor {
    background: #fff;
}

.guide_price_factor_head {
    max-width: 900px;
}

.guide_price_factor_grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 1px;

    margin-top: 80px;

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: var(--color-line);
}

.guide_price_factor_grid article {
    min-height: 330px;

    padding: 32px;

    background: #fff;
}

.guide_price_factor_grid article > span {
    display: block;

    color: var(--color-muted);

    font-size: 14px;
}

.guide_price_factor_heading {
    display: flex;
    align-items: center;
    gap: 24px;

    margin-top: 54px;
}

.guide_price_factor_heading > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    border-radius: 20px;

    background: rgba(243,108,33,.08);

    color: var(--color-primary);

    font-size: 24px;
}

.guide_price_factor_grid strong {
    display: block;

    margin: 0;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

.guide_price_factor_grid p {
    margin: 26px 0 0;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.7;

    word-break: keep-all;
}


/* =========================================================
   0301 - 04. Maintenance Plan
========================================================= */

.guide_maintenance_price {
    background: #111;
}

.guide_maintenance_price .sub_section_label {
    color: var(--color-primary);
}

.guide_maintenance_price .sub_section_title {
    color: #fff;
}

.guide_maintenance_price .sub_section_desc {
    color: rgba(255,255,255,.5);
}

.guide_maintenance_head {
    max-width: 1000px;
}

.guide_maintenance_mobile_hint {
    display: none;
}

.guide_maintenance_table_wrap {
    position: relative;

    margin-top: 80px;

    overflow-x: auto;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-lg);

    background: #171717;

    -webkit-overflow-scrolling: touch;
}

.guide_maintenance_table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
    table-layout: fixed;
}

.guide_maintenance_table th,
.guide_maintenance_table td {
    height: 68px;

    padding: 15px 24px;

    border-bottom: 1px solid rgba(255,255,255,.09);

    color: rgba(255,255,255,.72);

    font-size: 15px;

    text-align: center;
    vertical-align: middle;
}

.guide_maintenance_table thead th {
    height: 90px;

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    background: rgba(255,255,255,.025);
}

.guide_maintenance_table thead th:first-child {
    color: rgba(255,255,255,.4);

    text-align: left;
}

.guide_maintenance_table tbody th {
    width: 28%;

    color: rgba(255,255,255,.72);

    font-weight: 500;

    text-align: left;
}

.guide_maintenance_table strong {
    color: #fff;

    font-weight: 700;
}

.guide_maintenance_table .is_pro {
    background: rgba(243,108,33,.06);
}

.guide_maintenance_table thead .is_pro {
    color: var(--color-primary);
}

.guide_maintenance_table tbody tr:last-child th,
.guide_maintenance_table tbody tr:last-child td {
    border-bottom: 0;
}

.guide_maintenance_notice {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    margin-top: 25px;
    padding: 24px 28px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-md);
}

.guide_maintenance_notice i {
    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--color-primary);

    font-size: 18px;
}

.guide_maintenance_notice p {
    margin: 0;

    color: rgba(255,255,255,.48);

    font-size: 14px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   0301 - FREE MAINTENANCE
========================================================= */

.guide_free_maintenance {
    background: #fff;
}


/* Head
--------------------------------------------------------- */

.guide_free_maintenance_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 80px;

    margin-bottom: 70px;
}

.guide_free_maintenance_head > div:first-child {
    max-width: 800px;
}

.guide_free_maintenance_info {
    flex: 0 0 auto;

    padding-bottom: 5px;

    text-align: right;
}

.guide_free_maintenance_info strong {
    display: block;

    margin-bottom: 12px;

    color: var(--color-blue);

    font-size: 24px;
    font-weight: 700;
}

.guide_free_maintenance_info p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.7;
}


/* Table
--------------------------------------------------------- */

.guide_free_maintenance_table {
    width: 100%;

    border-top: 1px solid var(--color-title);
}

.guide_free_maintenance_row {
    display: grid;
    grid-template-columns:
        minmax(100px, .55fr)
        minmax(180px, 1fr)
        minmax(400px, 2.4fr)
        minmax(90px, .5fr);

    align-items: center;

    min-height: 76px;

    border-bottom: 1px solid var(--color-line);
}

.guide_free_maintenance_row.is_head {
    min-height: 64px;

    background: var(--color-bg-light);

    color: var(--color-title);

    font-size: 15px;
    font-weight: 700;
}

.guide_free_maintenance_row > * {
    padding: 18px 25px;
}

.guide_free_maintenance_row strong {
    color: var(--color-title);

    font-size: 16px;
    font-weight: 700;
}

.guide_free_maintenance_row > span {
    color: var(--color-subtext);

    font-size: 15px;
}

.guide_free_maintenance_row p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.6;

    word-break: keep-all;
}

.guide_free_maintenance_row p small {
    color: var(--color-muted);

    font-size: 14px;
}

.guide_free_maintenance_row em {
    color: var(--color-blue);

    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}


/* Notice
--------------------------------------------------------- */

.guide_free_maintenance_notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 24px;
}

.guide_free_maintenance_notice i {
    margin-top: 4px;

    color: var(--color-primary);

    font-size: 16px;
}

.guide_free_maintenance_notice p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   0301 - 06. Closing
========================================================= */

.guide_price_closing,
.guide_process_closing,
.guide_prepare_closing {
    padding-top: 150px;
    padding-bottom: 150px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(243,108,33,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(23,105,232,.08),
            transparent 30%
        ),
        var(--color-bg-light);
}

.guide_price_closing_inner,
.guide_process_closing_inner,
.guide_prepare_closing_inner {
    text-align: center;
}

.guide_price_closing h3,
.guide_process_closing h3,
.guide_prepare_closing h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(44px,4.6vw,72px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.guide_price_closing_inner > p:not(.sub_section_label),
.guide_prepare_closing_inner > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.guide_price_closing .sub_btn {
    margin-top: 50px;
}



/* =========================================================
   0302 PRODUCTION PROCESS
========================================================= */


/* =========================================================
   0302 - 01. Intro
========================================================= */

.guide_process_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.guide_process_intro_title {
    max-width: 1300px;
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px,5vw,82px);
    font-weight: 700;
    line-height: 1.13;

    word-break: keep-all;
}

.guide_process_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.guide_process_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.guide_process_intro_text {
    max-width: 650px;
}

.guide_process_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.guide_process_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   0302 - 02. 5 Step Process
========================================================= */

.guide_process_overview {
    background: var(--color-bg-light);
}

.guide_process_track {
    display: flex;
    align-items: stretch;

    margin-top: 85px;
}

.guide_process_track article {
    position: relative;

    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;

    min-width: 0;
    min-height: 290px;

    padding: 28px 15px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;

    text-align: center;
}

.guide_process_track article > span {
    align-self: flex-start;

    color: var(--color-muted);

    font-size: 14px;
}

.guide_process_track article > div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin-top: 42px;

    border-radius: 50%;

    background: rgba(243,108,33,.09);
}

.guide_process_track article i {
    color: var(--color-primary);

    font-size: 27px;
}

.guide_process_track article strong {
    display: block;

    margin-top: 28px;

    color: var(--color-title);

    font-size: 19px;
    font-weight: 700;

    word-break: keep-all;
}

.guide_process_track article em {
    margin-top: 5px;

    color: var(--color-muted);

    font-size: 14px;
    font-style: normal;
}

.guide_process_arrow {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    font-size: 23px;
}


/* =========================================================
   0302 - 03. Process Detail
========================================================= */

.guide_process_detail {
    background: #fff;
}

.guide_process_detail_item {
    display: grid;
    grid-template-columns: 130px minmax(250px,.65fr) minmax(400px,1fr);
    gap: 60px;

    align-items: start;

    padding: 80px 0;

    border-bottom: 1px solid var(--color-line);
}

.guide_process_detail_item:first-child {
    border-top: 1px solid var(--color-title);
}

.guide_process_detail_number span {
    display: block;

    color: var(--color-muted);

    font-size: 14px;
    font-weight: 600;
}

.guide_process_detail_number strong {
    display: block;

    margin-top: 8px;

    color: #e6e6e6;

    font-size: 72px;
    font-weight: 700;
    line-height: 1;
}

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

    width: 70px;
    height: 70px;

    margin-bottom: 32px;

    border-radius: 22px;

    background: rgba(243,108,33,.08);
}

.guide_process_detail_icon i {
    color: var(--color-primary);

    font-size: 25px;
}

.guide_process_detail_title em {
    display: block;

    color: var(--color-primary);

    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.guide_process_detail_title h4 {
    margin: 7px 0 0;

    color: var(--color-title);

    font-size: 28px;
    font-weight: 700;
}

.guide_process_detail_content > strong {
    display: block;

    color: var(--color-title);

    font-size: 25px;
    font-weight: 700;
    line-height: 1.45;

    word-break: keep-all;
}

.guide_process_detail_content ul {
    margin: 30px 0 0;
    padding: 0;

    list-style: none;
}

.guide_process_detail_content li {
    position: relative;

    margin-top: 11px;
    padding-left: 17px;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.65;
}

.guide_process_detail_content li:first-child {
    margin-top: 0;
}

.guide_process_detail_content li::before {
    content: '';

    position: absolute;
    top: .72em;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--color-primary);
}


/* =========================================================
   0302 - 04. Communication
========================================================= */

.guide_process_communication {
    background: #111;
}

.guide_process_communication .sub_section_label {
    color: var(--color-primary);
}

.guide_process_communication h3 {
    max-width: 1000px;
    margin: 0;

    color: #fff;

    font-size: clamp(40px,4.2vw,66px);
    font-weight: 700;
    line-height: 1.25;

    word-break: keep-all;
}

.guide_process_communication > .center > p:last-child {
    max-width: 700px;

    margin: 35px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 17px;
    line-height: 1.85;

    word-break: keep-all;
}


/* =========================================================
   0302 - 05. Closing
========================================================= */

.guide_process_closing_buttons,
.guide_prepare_closing_buttons {
    display: flex;
    justify-content: center;
    gap: 10px;

    margin-top: 50px;
}



/* =========================================================
   0303 PROJECT PREPARATION
========================================================= */


/* =========================================================
   0303 - 01. Intro
========================================================= */

.guide_prepare_intro {
    padding-top: 150px;
    padding-bottom: 160px;
}

.guide_prepare_intro_title {
    max-width: 1300px;
    margin: 0;

    color: var(--color-title);

    font-size: clamp(52px,5vw,82px);
    font-weight: 700;
    line-height: 1.13;

    word-break: keep-all;
}

.guide_prepare_intro_bottom {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(420px,1fr);
    gap: 100px;

    align-items: end;

    margin-top: 120px;
    padding-top: 40px;

    border-top: 1px solid var(--color-line);
}

.guide_prepare_intro_keyword {
    margin: 0;

    color: #e8e8e8;

    font-size: clamp(54px,5.5vw,88px);
    font-weight: 700;
    line-height: .88;
}

.guide_prepare_intro_text {
    max-width: 650px;
}

.guide_prepare_intro_text strong {
    display: block;

    margin-bottom: 28px;

    color: var(--color-title);

    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;

    word-break: keep-all;
}

.guide_prepare_intro_text p {
    margin: 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.9;

    word-break: keep-all;
}


/* =========================================================
   0303 - 02. Basic Checklist
========================================================= */

.guide_prepare_check {
    background: var(--color-bg-light);
}

.guide_prepare_check_head {
    max-width: 900px;
}

.guide_prepare_check_grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.guide_prepare_check_grid article {
    position: relative;

    min-height: 350px;

    padding: 32px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);

    background: #fff;
}

.guide_prepare_check_grid article > span {
    display: block;

    color: var(--color-muted);

    font-size: 14px;
}

.guide_prepare_check_heading {
    display: flex;
    align-items: center;
    gap: 24px;

    margin-top: 45px;
}

.guide_prepare_check_heading > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    border-radius: 20px;

    background: rgba(243,108,33,.08);

    color: var(--color-primary);

    font-size: 23px;

    transition: transform .3s ease;
}

.guide_prepare_check_grid article:hover .guide_prepare_check_heading > i {
    transform: scale(1.1);
}

.guide_prepare_check_grid strong {
    display: block;

    margin: 0;

    color: var(--color-title);

    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

.guide_prepare_check_grid p {
    max-width: 360px;

    margin: 24px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}

.guide_prepare_check_grid em {
    position: absolute;
    right: 30px;
    bottom: 27px;

    color: #c5c5c5;

    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}


/* =========================================================
   0303 - 03. File Guide
========================================================= */

.guide_prepare_file {
    background: #fff;
}

.guide_prepare_file_layout {
    display: grid;
    grid-template-columns: minmax(360px,.8fr) minmax(600px,1.2fr);
    gap: 120px;
}

.guide_prepare_file_head {
    position: sticky;
    top: 140px;

    align-self: start;
}

.guide_prepare_file_head > p:last-child {
    max-width: 450px;

    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 16px;
    line-height: 1.8;

    word-break: keep-all;
}

.guide_prepare_file_list {
    border-top: 1px solid var(--color-title);
}

.guide_prepare_file_list article {
    display: grid;
    grid-template-columns: 90px 1fr 30px;
    gap: 20px;

    align-items: center;

    min-height: 140px;

    border-bottom: 1px solid var(--color-line);
}

.guide_prepare_file_list article > span {
    color: var(--color-primary);

    font-size: 13px;
    font-weight: 700;
}

.guide_prepare_file_list strong {
    display: block;

    color: var(--color-title);

    font-size: 21px;
    font-weight: 700;
}

.guide_prepare_file_list p {
    margin: 7px 0 0;

    color: var(--color-subtext);

    font-size: 15px;
    line-height: 1.6;
}

.guide_prepare_file_list article > i {
    color: var(--color-primary);

    font-size: 16px;

    text-align: center;
}


/* =========================================================
   0303 - 04. Reference
========================================================= */

.guide_prepare_reference {
    background: #111;
}

.guide_prepare_reference .sub_section_label {
    color: var(--color-primary);
}

.guide_prepare_reference .sub_section_title {
    color: #fff;
}

.guide_prepare_reference_head {
    max-width: 1000px;
}

.guide_prepare_reference_head > p:last-child {
    max-width: 650px;

    margin: 25px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 17px;
    line-height: 1.8;
}

.guide_prepare_reference_grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;

    margin-top: 80px;
}

.guide_prepare_reference_grid article {
    min-height: 330px;

    padding: 34px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-lg);

    background: rgba(255,255,255,.035);
}

.guide_prepare_reference_heading {
    display: flex;
    align-items: center;
    gap: 24px;
}

.guide_prepare_reference_heading > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;

    width: 68px;
    height: 68px;

    border-radius: 21px;

    background: rgba(243,108,33,.1);

    color: var(--color-primary);

    font-size: 24px;
}

.guide_prepare_reference_grid strong {
    display: block;

    margin: 0;

    color: #fff;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

.guide_prepare_reference_grid p {
    max-width: 350px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.5);

    font-size: 15px;
    line-height: 1.75;

    word-break: keep-all;
}


/* =========================================================
   0303 - 05. Don't Worry
========================================================= */

.guide_prepare_dont {
    background: #fff;

    text-align: center;
}

.guide_prepare_dont .sub_section_label {
    text-align: center;
}

.guide_prepare_dont h3 {
    margin: 0;

    color: var(--color-title);

    font-size: clamp(42px,4.3vw,68px);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: -.05em;

    word-break: keep-all;
}

.guide_prepare_dont > .center > p:not(.sub_section_label) {
    margin: 28px 0 0;

    color: var(--color-subtext);

    font-size: 17px;
    line-height: 1.8;
}

.guide_prepare_dont_tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    max-width: 900px;

    margin: 55px auto 0;
}

.guide_prepare_dont_tags span {
    display: inline-flex;
    align-items: center;

    min-height: 52px;

    padding: 0 24px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);

    background: var(--color-bg-light);

    color: var(--color-body);

    font-size: 15px;
    font-weight: 500;
}


/* =========================================================
   0303 - 06. Closing
========================================================= */

.guide_prepare_closing_inner > p:not(.sub_section_label) {
    margin-top: 28px;
}



/* =========================================================
   0301 / 0302 / 0303 RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .guide_price_cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .guide_price_card {
        min-height: 0;
        padding: 38px 34px;
    }

    .guide_price_value strong {
        font-size: 52px;
    }


    .guide_price_factor_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }


    .guide_process_track {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 12px;
    }

    .guide_process_arrow {
        display: none;
    }

    .guide_process_track article {
        min-height: 280px;
    }


    .guide_process_detail_item {
        grid-template-columns: 100px minmax(220px,.65fr) 1fr;
        gap: 40px;
    }

}


@media (max-width: 1024px) {

    /* INTRO COMMON */

    .guide_price_intro,
    .guide_process_intro,
    .guide_prepare_intro {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .guide_price_intro_bottom,
    .guide_process_intro_bottom,
    .guide_prepare_intro_bottom {
        grid-template-columns: .75fr 1fr;
        gap: 60px;

        margin-top: 90px;
    }


    /* 0301 */

    .guide_price_cards {
        grid-template-columns: 1fr;
    }

    .guide_price_card {
        min-height: auto;
    }

    .guide_price_summary {
        min-height: 0;
    }

    .guide_free_maintenance_head {
        gap: 50px;

        margin-bottom: 60px;
    }

    .guide_free_maintenance_row {
        grid-template-columns:
            100px
            170px
            minmax(300px, 1fr)
            80px;
    }

    .guide_free_maintenance_row > * {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* 0302 */

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

    .guide_process_detail_item {
        grid-template-columns: 80px 240px 1fr;
        gap: 30px;
    }

    .guide_process_detail_number strong {
        font-size: 58px;
    }


    /* 0303 */

    .guide_prepare_check_grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .guide_prepare_file_layout {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .guide_prepare_file_head {
        position: static;
    }

}


@media (max-width: 768px) {

    /* INTRO COMMON */

    .guide_price_intro,
    .guide_process_intro,
    .guide_prepare_intro {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .guide_price_intro_title,
    .guide_process_intro_title,
    .guide_prepare_intro_title {
        font-size: 44px;
    }

    .guide_price_intro_bottom,
    .guide_process_intro_bottom,
    .guide_prepare_intro_bottom {
        grid-template-columns: 1fr;
        gap: 45px;

        margin-top: 70px;
    }

    .guide_price_intro_keyword,
    .guide_process_intro_keyword,
    .guide_prepare_intro_keyword {
        font-size: 58px;
    }


    /* 0301 */

    .guide_price_factor_grid {
        grid-template-columns: 1fr 1fr;
    }

    .guide_free_maintenance_head {
        display: block;

        margin-bottom: 45px;
    }

    .guide_free_maintenance_info {
        margin-top: 35px;

        text-align: left;
    }

    .guide_free_maintenance_info strong {
        font-size: 21px;
    }


    .guide_free_maintenance_table {
        border-top: 1px solid var(--color-title);
    }

    .guide_free_maintenance_row.is_head {
        display: none;
    }

    .guide_free_maintenance_row {
        display: grid;
        grid-template-columns: 70px 1fr auto;
        gap: 7px 15px;

        min-height: 0;

        padding: 24px 0;
    }

    .guide_free_maintenance_row > * {
        padding: 0;
    }

    .guide_free_maintenance_row strong {
        grid-row: 1 / 3;

        font-size: 15px;
    }

    .guide_free_maintenance_row > span {
        grid-column: 2;

        color: var(--color-title);

        font-size: 15px;
        font-weight: 600;
    }

    .guide_free_maintenance_row p {
        grid-column: 2;

        font-size: 14px;
    }

    .guide_free_maintenance_row em {
        grid-column: 3;
        grid-row: 1 / 3;

        align-self: center;

        font-size: 14px;
    }
    .guide_price_cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .guide_price_card {
        padding: 32px 28px;
    }

    .guide_price_card_badge {
        margin-top: 32px;
    }

    .guide_price_card h4 {
        font-size: 25px;
    }

    .guide_price_value strong {
        font-size: 48px;
    }

    .guide_price_summary {
        min-height: 0;

        margin-top: 28px;
    }

    .guide_price_card_line {
        margin: 30px 0 24px;
    }



    /* 0302 */

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

    .guide_process_detail_item {
        grid-template-columns: 70px 1fr;
        gap: 25px;

        padding: 60px 0;
    }

    .guide_process_detail_content {
        grid-column: 2;
    }


    /* 0303 */

    .guide_prepare_reference_grid {
        grid-template-columns: 1fr;
    }

    .guide_prepare_reference_grid article {
        min-height: 280px;
    }

    .guide_prepare_reference_heading {
        gap: 20px;
    }


    /* CLOSING */

    .guide_price_closing,
    .guide_process_closing,
    .guide_prepare_closing {
        padding-top: 110px;
        padding-bottom: 110px;
    }

}


@media (max-width: 600px) {

    /* INTRO COMMON */

    .guide_price_intro,
    .guide_process_intro,
    .guide_prepare_intro {
        padding-top: 75px;
        padding-bottom: 85px;
    }

    .guide_price_intro_title,
    .guide_process_intro_title,
    .guide_prepare_intro_title {
        font-size: 38px;
    }

    .guide_price_intro_bottom,
    .guide_process_intro_bottom,
    .guide_prepare_intro_bottom {
        margin-top: 55px;
        padding-top: 30px;
    }

    .guide_price_intro_keyword,
    .guide_process_intro_keyword,
    .guide_prepare_intro_keyword {
        font-size: 48px;
    }

    .guide_price_intro_text strong,
    .guide_process_intro_text strong,
    .guide_prepare_intro_text strong {
        margin-bottom: 20px;

        font-size: 23px;
    }

    .guide_price_intro_text p,
    .guide_process_intro_text p,
    .guide_prepare_intro_text p {
        font-size: 15px;
    }


    /* =====================================================
       0301 MOBILE
    ====================================================== */

    .guide_price_cards {
        margin-top: 50px;
    }

    .guide_price_card {
        padding: 28px;
    }

    .guide_price_card h4 {
        margin-top: 45px;

        font-size: 26px;
    }

    .guide_price_value strong {
        font-size: 48px;
    }

    /* .guide_price_value.guide_price_consult strong {
        font-size: 29px;
    } */

    .guide_price_factor_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .guide_price_factor_grid article {
        min-height: 280px;

        padding: 28px;
    }

    .guide_price_factor_heading {
        gap: 18px;

        margin-top: 40px;
    }

    .guide_price_factor_heading > i {
        flex-basis: 60px;

        width: 60px;
        height: 60px;

        border-radius: 18px;

        font-size: 21px;
    }


    .guide_maintenance_mobile_hint {
        display: flex;
        align-items: center;
        gap: 8px;

        width: fit-content;
        max-width: 100%;
        margin: 34px 0 12px;
        padding: 9px 13px;

        border: 1px solid rgba(243,108,33,.34);
        border-radius: 999px;

        background: rgba(243,108,33,.08);
        color: rgba(255,255,255,.68);

        font-size: 12px;
        line-height: 1.35;
        letter-spacing: -.15px;
        word-break: keep-all;
    }

    .guide_maintenance_mobile_hint_icon {
        flex: 0 0 auto;

        color: var(--color-primary);
        font-size: 16px;
        line-height: 1;
    }

    .guide_maintenance_mobile_hint strong {
        color: #fff;
        font-weight: 700;
    }

    .guide_maintenance_table_wrap {
        margin-top: 0;

        box-shadow: inset -22px 0 20px -22px rgba(243,108,33,.72);

        scrollbar-width: thin;
        scrollbar-color: rgba(243,108,33,.55) rgba(255,255,255,.08);
    }

    .guide_maintenance_table_wrap::-webkit-scrollbar {
        height: 5px;
    }

    .guide_maintenance_table_wrap::-webkit-scrollbar-track {
        background: rgba(255,255,255,.08);
    }

    .guide_maintenance_table_wrap::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(243,108,33,.55);
    }

    .guide_maintenance_table {
        /* 서비스 + LIGHT 뒤로 BASIC 열 일부가 보이도록 폭을 조정 */
        min-width: 600px;
    }

    .guide_maintenance_table th,
    .guide_maintenance_table td {
        padding: 14px 16px;

        font-size: 14px;
    }

    .guide_maintenance_notice {
        padding: 20px;
    }


    /* =====================================================
       0302 MOBILE
    ====================================================== */

    .guide_process_track {
        grid-template-columns: 1fr;

        margin-top: 55px;
    }

    .guide_process_track article {
        display: grid;
        grid-template-columns: 35px 60px 1fr;
        gap: 15px;

        align-items: center;

        min-height: auto;

        padding: 24px;

        text-align: left;
    }

    .guide_process_track article > span {
        align-self: center;
    }

    .guide_process_track article > div {
        width: 52px;
        height: 52px;

        margin: 0;
    }

    .guide_process_track article i {
        font-size: 19px;
    }

    .guide_process_track article strong {
        margin: 0;

        font-size: 18px;
    }

    .guide_process_track article em {
        grid-column: 3;

        margin-top: -13px;
    }


    .guide_process_detail_item {
        grid-template-columns: 1fr;
        gap: 25px;

        padding: 50px 0;
    }

    .guide_process_detail_number {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .guide_process_detail_number span {
        color: var(--color-primary);
    }

    .guide_process_detail_number strong {
        margin: 0;

        color: #dedede;

        font-size: 40px;
    }

    .guide_process_detail_title {
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 2px 15px;

        align-items: center;
    }

    .guide_process_detail_icon {
        grid-row: 1 / 3;

        width: 52px;
        height: 52px;

        margin: 0;

        border-radius: 16px;
    }

    .guide_process_detail_icon i {
        font-size: 19px;
    }

    .guide_process_detail_title h4 {
        margin: 0;

        font-size: 23px;
    }

    .guide_process_detail_content {
        grid-column: auto;
    }

    .guide_process_detail_content > strong {
        font-size: 21px;
    }

    .guide_process_detail_content ul {
        margin-top: 22px;
    }


    .guide_process_communication h3 {
        font-size: 34px;
    }

    .guide_process_communication > .center > p:last-child {
        font-size: 15px;
    }


    /* =====================================================
       0303 MOBILE
    ====================================================== */

    .guide_prepare_check_grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .guide_prepare_check_grid article {
        min-height: 320px;

        padding: 28px;
    }

    .guide_prepare_check_heading {
        gap: 18px;

        margin-top: 36px;
    }

    .guide_prepare_check_heading > i {
        flex-basis: 58px;

        width: 58px;
        height: 58px;

        border-radius: 18px;

        font-size: 20px;
    }


    .guide_prepare_file_list article {
        grid-template-columns: 70px 1fr 20px;
        gap: 12px;

        min-height: 125px;
    }

    .guide_prepare_file_list strong {
        font-size: 19px;
    }

    .guide_prepare_file_list p {
        font-size: 14px;
    }


    .guide_prepare_reference_grid {
        margin-top: 55px;
    }

    .guide_prepare_reference_grid article {
        min-height: 240px;

        padding: 28px;
    }

    .guide_prepare_reference_heading {
        gap: 18px;
    }

    .guide_prepare_reference_heading > i {
        flex-basis: 58px;

        width: 58px;
        height: 58px;

        border-radius: 18px;

        font-size: 20px;
    }

    .guide_prepare_reference_grid strong {
        font-size: 21px;
    }

    .guide_prepare_reference_grid p {
        margin-top: 22px;
    }


    .guide_prepare_dont h3 {
        font-size: 34px;
    }

    .guide_prepare_dont > .center > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .guide_prepare_dont_tags {
        gap: 8px;

        margin-top: 40px;
    }

    .guide_prepare_dont_tags span {
        min-height: 48px;

        padding: 0 18px;

        font-size: 14px;
    }


    /* =====================================================
       CLOSING MOBILE
    ====================================================== */

    .guide_price_closing,
    .guide_process_closing,
    .guide_prepare_closing {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .guide_price_closing h3,
    .guide_process_closing h3,
    .guide_prepare_closing h3 {
        font-size: 36px;
    }

    .guide_price_closing_inner > p:not(.sub_section_label),
    .guide_prepare_closing_inner > p:not(.sub_section_label) {
        font-size: 15px;
    }

    .guide_process_closing_buttons,
    .guide_prepare_closing_buttons {
        flex-direction: column;

        width: 100%;

        margin-top: 40px;
    }

    .guide_process_closing_buttons .sub_btn,
    .guide_prepare_closing_buttons .sub_btn {
        width: 100%;
    }

    .guide_price_closing .sub_btn {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .guide_price_card {
        padding: 28px 22px;
    }

    .guide_price_card h4 {
        font-size: 23px;
    }

    .guide_price_value strong {
        font-size: 44px;
    }
    
    .guide_free_maintenance_row {
        grid-template-columns: 55px 1fr auto;
        gap: 6px 10px;
    }

    .guide_free_maintenance_info p br {
        display: none;
    }

}



@media (max-width: 400px) {

    .guide_price_intro_title,
    .guide_process_intro_title,
    .guide_prepare_intro_title {
        font-size: 34px;
    }

}


/* =========================================================
   SERVICE CARD ICON + TITLE CONSISTENCY 261002
========================================================= */

/* 웹·플랫폼 개발 */
.platform_area_item {
    min-height: 335px;
}

.platform_area_title_row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 44px;
}

.platform_area_title_row .platform_area_icon {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    margin: 0;
}

.platform_area_title_row .platform_area_icon i {
    font-size: 27px;
}

.platform_area_title_row h4 {
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.35;
}

.platform_area_item p {
    margin-top: 24px;
}

.platform_area_item:nth-child(3n+2) .platform_area_icon {
    background: rgba(23,105,232,.09);
}
.platform_area_item:nth-child(3n+2) .platform_area_icon i {
    color: var(--color-blue);
}
.platform_area_item:nth-child(3n) .platform_area_icon {
    background: rgba(138,86,132,.09);
}
.platform_area_item:nth-child(3n) .platform_area_icon i {
    color: #8a5684;
}

/* 랜딩페이지 */
.landing_purpose_grid article {
    min-height: 315px;
}

.landing_purpose_num {
    display: block;
    color: var(--color-muted);
    font-size: 14px;
}

.landing_purpose_title_row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 44px;
}

.landing_purpose_title_row .landing_purpose_icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

.landing_purpose_title_row > strong {
    flex: 1 1 auto;
    margin: 0;
    color: var(--color-title);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

.landing_purpose_grid article > p {
    margin-top: 24px;
}

.landing_purpose_grid article:nth-child(3n+2) .landing_purpose_icon {
    background: rgba(23,105,232,.09);
}
.landing_purpose_grid article:nth-child(3n+2) .landing_purpose_icon i {
    color: var(--color-blue);
}
.landing_purpose_grid article:nth-child(3n) .landing_purpose_icon {
    background: rgba(138,86,132,.09);
}
.landing_purpose_grid article:nth-child(3n) .landing_purpose_icon i {
    color: #8a5684;
}

/* 웹기획 */
.planning_why_grid article {
    min-height: 335px;
}

.planning_why_title_row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 42px;
}

.planning_why_title_row .planning_why_icon {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    margin: 0;
}

.planning_why_title_row strong {
    flex: 1 1 auto;
    margin: 0;
    font-size: 25px;
    line-height: 1.3;
}

.planning_why_grid p {
    margin-top: 24px;
}

.planning_why_grid article:nth-child(3n+2) .planning_why_icon {
    background: rgba(23,105,232,.09);
}
.planning_why_grid article:nth-child(3n+2) .planning_why_icon i {
    color: var(--color-blue);
}
.planning_why_grid article:nth-child(3n) .planning_why_icon {
    background: rgba(138,86,132,.09);
}
.planning_why_grid article:nth-child(3n) .planning_why_icon i {
    color: #8a5684;
}

/* 운영·유지관리 */
.management_approach_item {
    min-height: 360px;
}

.management_approach_title_row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
}

.management_approach_title_row .management_approach_icon {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    margin: 0;
}

.management_approach_title_row strong {
    flex: 1 1 auto;
    margin: 0;
    font-size: 25px;
    line-height: 1.3;
}

.management_approach_item p {
    margin-top: 24px;
}

.management_approach_item:nth-child(3n+2) .management_approach_icon {
    background: rgba(23,105,232,.09);
}
.management_approach_item:nth-child(3n+2) .management_approach_icon i {
    color: var(--color-blue);
}
.management_approach_item:nth-child(3n) .management_approach_icon {
    background: rgba(138,86,132,.09);
}
.management_approach_item:nth-child(3n) .management_approach_icon i {
    color: #8a5684;
}

/* 제공 서비스 */
.provided_support_grid article {
    min-height: 320px;
}

.provided_support_title_row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 42px;
}

.provided_support_title_row .provided_support_icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 20px;
    font-size: 24px;
}

.provided_support_title_row strong {
    flex: 1 1 auto;
    margin: 0;
    font-size: 21px;
    line-height: 1.35;
}

.provided_support_grid article p {
    margin-top: 22px;
}

@media (max-width: 600px) {
    .platform_area_item,
    .planning_why_grid article,
    .management_approach_item {
        min-height: 285px;
        padding: 25px;
    }

    .landing_purpose_grid article,
    .provided_support_grid article {
        min-height: 265px;
        padding: 25px;
    }

    .platform_area_title_row,
    .landing_purpose_title_row,
    .planning_why_title_row,
    .management_approach_title_row,
    .provided_support_title_row {
        gap: 14px;
        margin-top: 28px;
    }

    .platform_area_title_row .platform_area_icon,
    .landing_purpose_title_row .landing_purpose_icon,
    .planning_why_title_row .planning_why_icon,
    .management_approach_title_row .management_approach_icon,
    .provided_support_title_row .provided_support_icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 17px;
    }

    .platform_area_title_row .platform_area_icon i,
    .landing_purpose_title_row .landing_purpose_icon i,
    .planning_why_title_row .planning_why_icon i,
    .management_approach_title_row .management_approach_icon i,
    .provided_support_title_row .provided_support_icon i {
        font-size: 22px;
    }

    .platform_area_title_row h4,
    .landing_purpose_title_row > strong,
    .planning_why_title_row strong,
    .management_approach_title_row strong,
    .provided_support_title_row strong {
        font-size: 21px;
        line-height: 1.3;
    }

    .platform_area_item p,
    .landing_purpose_grid article > p,
    .planning_why_grid p,
    .management_approach_item p,
    .provided_support_grid article p {
        margin-top: 20px;
        font-size: 15px;
    }
}


/* =========================================================
   MOBILE CARD COMPACT OVERRIDE 261002
   아이콘 + 제목 → 내용 구조 모바일 여백/높이 최종 보정
   PC 레이아웃에는 영향 없음
========================================================= */
@media (max-width: 600px) {
    /* 공통: 기존 세로형 카드용 최소높이를 해제하여 내용 높이에 맞춤 */
    .website_purpose_item,
    .shopping_function_item,
    .platform_area_item,
    .landing_purpose_grid article,
    .planning_why_grid article,
    .management_approach_item,
    .provided_support_grid article,
    .guide_price_factor_grid article,
    .guide_prepare_check_grid article,
    .guide_prepare_reference_grid article {
        min-height: 0 !important;
    }

    /* 홈페이지 제작 */
    .website_purpose_item {
        padding: 22px;
    }
    .website_purpose_title_row {
        gap: 13px;
        margin-top: 22px;
    }
    .website_purpose_icon,
    .website_purpose_icon i {
        width: 56px;
        height: 56px;
    }
    .website_purpose_icon i {
        border-radius: 17px;
        font-size: 21px;
    }
    .website_purpose_item h4 {
        font-size: 21px;
    }
    .website_purpose_item p {
        margin-top: 15px;
        line-height: 1.65;
    }

    /* 쇼핑몰 제작 */
    .shopping_function_item {
        padding: 22px 0;
    }
    .shopping_function_title_row {
        gap: 13px;
        margin-top: 24px;
    }
    .shopping_function_icon {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }
    .shopping_function_icon i {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 20px;
    }
    .shopping_function_item strong {
        font-size: 21px;
    }
    .shopping_function_item p {
        margin-top: 14px;
        line-height: 1.65;
    }

    /* 웹·플랫폼 / 랜딩 / 웹기획 / 운영·유지관리 / 제공서비스 */
    .platform_area_item,
    .landing_purpose_grid article,
    .planning_why_grid article,
    .provided_support_grid article {
        padding: 22px;
    }
    .management_approach_item {
        padding: 22px 22px 48px;
    }
    .platform_area_title_row,
    .landing_purpose_title_row,
    .planning_why_title_row,
    .management_approach_title_row,
    .provided_support_title_row {
        gap: 13px;
        margin-top: 22px;
    }
    .platform_area_title_row .platform_area_icon,
    .landing_purpose_title_row .landing_purpose_icon,
    .planning_why_title_row .planning_why_icon,
    .management_approach_title_row .management_approach_icon,
    .provided_support_title_row .provided_support_icon {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }
    .platform_area_title_row .platform_area_icon i,
    .landing_purpose_title_row .landing_purpose_icon i,
    .planning_why_title_row .planning_why_icon i,
    .management_approach_title_row .management_approach_icon i,
    .provided_support_title_row .provided_support_icon i {
        font-size: 20px;
    }
    .platform_area_title_row h4,
    .landing_purpose_title_row > strong,
    .planning_why_title_row strong,
    .management_approach_title_row strong,
    .provided_support_title_row strong {
        font-size: 20px;
        line-height: 1.3;
    }
    .platform_area_item p,
    .landing_purpose_grid article > p,
    .planning_why_grid p,
    .management_approach_item p,
    .provided_support_grid article p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.65;
    }
    .platform_area_item em,
    .landing_purpose_grid article > em,
    .management_approach_item em {
        right: 22px;
        bottom: 18px;
    }

    /* 제작비용 - 비용 결정요인 */
    .guide_price_factor_grid article {
        padding: 22px;
    }
    .guide_price_factor_heading {
        gap: 13px;
        margin-top: 24px;
    }
    .guide_price_factor_heading > i {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 19px;
    }
    .guide_price_factor_grid strong {
        font-size: 20px;
    }
    .guide_price_factor_grid p {
        margin-top: 15px;
        line-height: 1.65;
    }

    /* 준비사항 - 기본 체크리스트 */
    .guide_prepare_check_grid article {
        padding: 22px 22px 50px;
    }
    .guide_prepare_check_heading {
        gap: 13px;
        margin-top: 24px;
    }
    .guide_prepare_check_heading > i {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 19px;
    }
    .guide_prepare_check_grid strong {
        font-size: 20px;
    }
    .guide_prepare_check_grid p {
        margin-top: 15px;
        line-height: 1.65;
    }
    .guide_prepare_check_grid em {
        right: 22px;
        bottom: 18px;
    }

    /* 준비사항 - REFERENCE */
    .guide_prepare_reference_grid article {
        padding: 22px;
    }
    .guide_prepare_reference_heading {
        gap: 13px;
    }
    .guide_prepare_reference_heading > i {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 19px;
    }
    .guide_prepare_reference_grid strong {
        font-size: 20px;
    }
    .guide_prepare_reference_grid p {
        margin-top: 15px;
        line-height: 1.65;
    }
}