/* =========================================================
    SUB VISUAL
========================================================= */

.sub_visual {
    position: relative;

    width: 100%;

    background: #fff;
}



/* =========================================================
    VISUAL
========================================================= */

.sub_visual_top {
    position: relative;

    width: 100%;
    height: 700px;

    overflow: hidden;
}


.sub_visual_top .inner_w {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 0 7.8vw;

    box-sizing: border-box;
}



/* =========================================================
    BACKGROUND
========================================================= */

.sub_visual_bg {
    position: absolute;

    z-index: 1;

    inset: 0;
}


.sub_visual_bg::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.30);
}


.sub_visual_bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.04);

    animation:
        subVisualZoom
        2.2s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


@keyframes subVisualZoom {

    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }

}



/* =========================================================
    TEXT
========================================================= */

.sub_visual .txt {
    color: #fff;

    text-align: center;
}


.sub_visual .txt p {
    margin: 0 0 28px;

    color: #fff;

    font-size: 24px;
    line-height: 1;

    font-weight: 500;

    text-transform: uppercase;
}


.sub_visual .txt h2 {
    margin: 0;

    color: #fff;

    font-size: 60px;
    line-height: 1.4;

    font-weight: 700;

    word-break: keep-all;
}



/* =========================================================
    SUB NAV
========================================================= */

.sub_visual_nav {
    position: relative;

    z-index: 5;

    width: 100%;

    padding: 80px 20px;

    background: #fff;

    box-sizing: border-box;
}


.sub_visual_nav_inner {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}



/* =========================================================
    NAV ITEM
========================================================= */

.sub_visual_nav_inner a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 50px;

    padding: 0 30px;

    border: 1px solid #ddd;
    border-radius: 100px;

    background: #fff;

    color: #666;

    font-size: 18px;
    line-height: 1;

    font-weight: 600;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.sub_visual_nav_inner a:hover {
    border-color: #72B44B;

    color: #72B44B;

    transform: translateY(-2px);
}



/* ACTIVE */

.sub_visual_nav_inner a.active {
    border-color: #72B44B;

    background: #72B44B;

    color: #fff;
}












/* =========================================================
   COMPANY COMMON
========================================================= */
.company01_page {
    overflow: hidden;

}

.company_inner {
    width: 100%;
 
    margin: 0 auto;

    box-sizing: border-box;
    padding: 0 7.8vw;
}

/* 공통 타이틀 */
.sub_common_head {
    margin-bottom: 60px;
}

.sub_common_head_center {
    text-align: center;
}

.sub_common_head_white .sub_common_title,
.sub_common_head_white .sub_common_desc {
    color: #fff;
}

.sub_common_title {
    margin: 0;
    color: #222;
    font-size: 48px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.04em;
    word-break: keep-all;
}



.sub_common_desc {
    margin: 24px 0 0;
    color: #666;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
    word-break: keep-all;
}

/* =========================================================
   SECTION 01 : INTRO
========================================================= */
.company_intro {
    padding: 50px 0 0px;
 
}

.company_intro_visual {
    overflow: hidden;
}

.company_intro_visual_inner {
    overflow: hidden;
    border-radius: 0;
}

.company_intro_visual img {
    display: block;
    width: 100%;
    height: 60vh;
    object-fit: cover;
    object-position: center;
}

/* =========================================================
   MARQUEE
========================================================= */
.company_marquee {
    position: relative;
    overflow: hidden;
    padding: 16px 0 150px;
}

.company_marquee_track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: companyMarquee 26s linear infinite;
}

.company_marquee_track span {
    display: inline-block;
    flex: 0 0 auto;
    padding-right: 70px;
    color: rgba(34, 34, 34, 0.08);
    font-size: 78px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

@keyframes companyMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================================
   SECTION 02 : VALUE
========================================================= */
.company_value {
    padding: 160px 0;
    background: #F8F3E8;
}

.company_value_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.company_value_item {
    display: block;
}

.company_value_thumb {
    overflow: hidden;
    border-radius: 20px;
}

.company_value_thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
}

.company_value_item:hover .company_value_thumb img {
    transform: scale(1.05);
}

.company_value_txt {
    padding-top: 24px;
}

.company_value_txt h4 {
    margin: 0 0 20px;
    color: #2F6B3F;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.company_value_txt p {
    margin: 0;
    color: #666;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 400;
}

/* =========================================================
   SECTION 03 : GLANCE
========================================================= */
.company_glance {
    padding: 160px 0;

}

.company_glance_wrap {
    display: grid;
    grid-template-columns: 1.06fr 0.94fr;
    gap: 120px;
    align-items: center;
}

.company_glance_visual {
    overflow: hidden;
    border-radius: 20px;
}

.company_glance_visual img {
    display: block;
    width: 100%;
    object-fit: cover;
    max-height: 80vh
}

.company_glance_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 40px;
}

.company_glance_item {
    
}

.company_glance_item .icon_box {
    display: inline-flex;
    width: 40px;
    height: 40px;
  
    align-items: center;
    justify-content: center;
}

.company_glance_item .icon_box svg {
    width: 40px;
    height: 40px;
    fill: #222;
}

.company_glance_item .txt p {
	border-top: 1px solid #ddd;
    margin: 20px 0 0 0;
    color: #222;
    font-size: 20px;
    line-height: 1.4;
    padding-top: 20px
}

.company_glance_item .txt strong {
    display: block;
    color: #222;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* =========================================================
    CORE COMPETITIVENESS
========================================================= */

.company_core {
    position: relative;

    width: 100%;

    padding: 160px 0;

    background: #2F6B3F;

    overflow: hidden;
}


.company_core .sub_common_head {
    
}


.company_core .sub_common_title {
    color: #fff;
}



/* =========================================================
    CARD AREA
========================================================= */

.company_core_list {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;


    margin: 0 auto;

    box-sizing: border-box;
}



/* =========================================================
    CARD
========================================================= */

.company_core_item {
    position: relative;

    flex: 1;


    height: 520px;



    overflow: hidden;

    z-index: 1;

    cursor: pointer;

    transform: scale(1);

    transform-origin: center center;

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        filter .55s ease;

    will-change: transform;
    text-align: center
}


.company_core_item:first-child {
    margin-left: 0;
}



/* 이미지 */

.company_core_item > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1);

    transition:
        transform .8s cubic-bezier(.22,1,.36,1);

    will-change: transform;
}



/* =========================================================
    DIM
========================================================= */

.company_core_dim {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.58) 0%,
            rgba(0,0,0,.13) 45%,
            rgba(0,0,0,.05) 100%
        );

    transition:
        background .5s ease;
}



/* =========================================================
    TEXT
========================================================= */

.company_core_txt {
    position: absolute;

    z-index: 3;

    left: 28px;
    right: 28px;

    bottom: 60px;

    color: #fff;

    transform: translate(0,0);

    transition:
        top .5s cubic-bezier(.22,1,.36,1),
        left .5s cubic-bezier(.22,1,.36,1),
        right .5s cubic-bezier(.22,1,.36,1),
        bottom .5s cubic-bezier(.22,1,.36,1),
        transform .5s cubic-bezier(.22,1,.36,1),
        text-align .2s ease;
}


.company_core_txt h4 {
    margin: 0;

    color: #fff;

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

    font-weight: 700;

    letter-spacing: -0.04em;

    word-break: keep-all;
}


.company_core_txt p {
    margin: 0;

    color: #fff;

    font-size: 20px;
    line-height: 1.5;

    font-weight: 400;

    text-align: center;

    word-break: keep-all;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity .4s ease .08s,
        transform .5s cubic-bezier(.22,1,.36,1) .08s;
        height: 0
}



/* =========================================================
    HOVER
========================================================= */

/*
    디자인처럼

    - 카드 자체 확대
    - 이미지도 안에서 확대
    - 현재 카드만 앞으로
    - 제목/설명 가운데 정렬
*/

.company_core_item:hover {
    z-index: 20;

    transform: scale(1.07);
}


.company_core_item:hover > img {
    transform: scale(1.07);
}


.company_core_item:hover .company_core_dim {
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.30) 45%,
            rgba(0,0,0,.48) 100%
        );
}


.company_core_item:hover .company_core_txt {
    top: 50%;

    left: 25px;
    right: 25px;

    bottom: auto;

    text-align: center;

    transform: translateY(-50%);
    bottom: auto
}


.company_core_item:hover .company_core_txt h4 {
    text-align: center;
}


.company_core_item:hover .company_core_txt p {
    opacity: 1;
	margin: 24px 0 0;
    transform: translateY(0);
}

/* =========================================================
    ORGANIZATION
========================================================= */

.company_org {
    position: relative;

    width: 100%;

    padding: 160px 0;

    background: #F9F8F7;
}


.company_org .sub_common_head {
    margin-bottom: 50px;
}


.company_org_chart {
    position: relative;

    width: 100%;

  

    margin: 0 auto;
}



/* =========================================================
    CEO
========================================================= */

.org_ceo {
    position: relative;

    display: flex;

    justify-content: center;

    z-index: 3;
}


.org_ceo_outer {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 350px;
    height: 350px;

    padding: 24px;

    border: 1px dashed #2F6B3F;
    border-radius: 50%;

    box-sizing: border-box;

    background: #f7f7f7;
}


.org_ceo_inner {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border: 2px solid #2F6B3F;
    border-radius: 50%;

    background: #fff;

    box-sizing: border-box;
}


.org_ceo_inner img {
    display: block;

    width: 148px;
    height: auto;

    margin-bottom: 20px;
}


.org_ceo_inner strong {
    color: #222;

    font-size: 30px;
    line-height: 1;

    font-weight: 700;
}



/* CEO 세로 점선 */

.org_ceo_line {
    display: block;

    width: 1px;
    height: 25px;

    margin: 0 auto;

    border-left: 1px dashed #9fc2a7;
}



/* =========================================================
    DEPARTMENT AREA
========================================================= */

.org_department_wrap {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, 1fr);

    gap: 20px;

    width: 100%;
}



/* 생산부 ↔ 총무부 연결선 */

.org_department_line {
    position: absolute;

    top: 0;

    left: 30%;

    right: 19.5%;

    height: 1px;

    border-top: 1px dashed #9fc2a7;
}



/* =========================================================
    DEPARTMENT
========================================================= */

.org_department {
    position: relative;

    padding-top: 25px;
}


.org_department::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 25px;

    border-left: 1px dashed #9fc2a7;

    transform: translateX(-50%);
}



/* 생산부 / 총무부 */

.org_department_title {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 70px;

    border: 1px solid #2F6B3F;
    border-radius: 10px;

    background: #EEF6F0;

    color: #2F6B3F;

    font-size: 20px;
    line-height: 1;

    font-weight: 600;

    box-sizing: border-box;
}



/* =========================================================
    MANAGER
========================================================= */

.org_middle_line {
    display: block;

    width: 1px;
    height: 16px;

    margin: 0 auto;

    border-left: 1px dashed #b8cfbd;
}


.org_manager {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 205px;
    height: 70px;

    margin: 0 auto;

    border: 1px solid #9dbca5;
    border-radius: 10px;

    background: #fff;

    color: #2F6B3F;

    font-size: 20px;
    line-height: 1;

    font-weight: 500;

    box-sizing: border-box;
}



/* =========================================================
    TEAM CONNECTOR
========================================================= */

.org_team_top_line {
    position: relative;

    display: block;

    width: 68%;
    height: 30px;

    margin: 0 auto;
}

.org_department.org_admin .org_team_top_line{width: 51%}

.org_team_top_line::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 15px;

    border-left: 1px dashed #bdcfbf;

    transform: translateX(-50%);
}


.org_team_top_line::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 15px;

    border-top: 1px dashed #bdcfbf;
}



/* =========================================================
    TEAM GRID
========================================================= */

.org_team_grid {
    position: relative;

    display: grid;

    gap: 20px;
}



/* 생산부 */

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



/* 총무부 */

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



/* 팀 */

.org_team {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 70px;

    padding: 5px 10px;

    border: 1px solid #e2e2e2;
    border-radius: 10px;

    background: #fff;

    color: #222;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 500;

    text-align: center;

    box-sizing: border-box;
}


.org_team:not(.org_empty)::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -15px;

    width: 1px;
    height: 15px;

    border-left: 1px dashed #ccd9cf;

    transform: translateX(-50%);
}


.org_team.org_empty {
    visibility: hidden;
}



/* 총무부 마지막 재무팀 */

.admin_grid .org_team:last-child {
    grid-column: 1 / 2;
}

/* =========================================================
   INTERSECTION MOTION
========================================================= */
.js-io {
    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1),
        clip-path 1.1s cubic-bezier(.22,1,.36,1);
}

.io-up {
    opacity: 0;
    transform: translateY(50px);
}

.io-left {
    opacity: 0;
    transform: translateX(-60px);
}

.io-right {
    opacity: 0;
    transform: translateX(60px);
}

.io-reveal-center {
    opacity: 1;
    transform: none;
}

.io-reveal-center .company_intro_visual_inner {
    clip-path: inset(0 22% 0 22%);
    transition: clip-path 1.35s cubic-bezier(.22,1,.36,1);
}

.io-reveal-center img {
    transform: scale(1.12);
    transition: transform 1.35s cubic-bezier(.22,1,.36,1);
}

.js-io.is-show {
    opacity: 1;
    transform: none;
}

.io-reveal-center.is-show .company_intro_visual_inner {
    clip-path: inset(0 0 0 0);
}

.io-reveal-center.is-show img {
    transform: scale(1);
}

/* =========================================================
    1024
========================================================= */

@media (max-width: 1024px) {

    .company_core_list {
        max-width: 900px;
    }

    .company_core_item {
        flex-basis: 240px;

        width: 240px;
        height: 330px;

        margin-left: -25px;
    }

    .company_core_txt {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .company_core_txt h4 {
        font-size: 19px;
    }


    .company_org_chart {
        max-width: 900px;
    }

}


/* =========================================================
    819
========================================================= */

@media (max-width: 819px) {

    .company_core_list {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 14px;

        padding: 0;
    }

    .company_core_item {
        width: 100%;
        height: 300px;

        margin: 0;
    }

    .company_core_item:hover {
        transform: scale(1.04);
    }


    .org_ceo_outer {
        width: 160px;
        height: 160px;
    }

    .org_ceo_inner img {
        width: 76px;
    }

    .org_ceo_inner strong {
        font-size: 18px;
    }


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

        gap: 32px;
    }


    .org_department_line,
    .org_department::before,
    .org_ceo_line {
        display: none;
    }


    .org_department {
        padding-top: 0;
    }


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

}


/* =========================================================
    580
========================================================= */

@media (max-width: 580px) {

    .company_core {
        padding: 75px 0;
    }


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


    .company_core_item {
        height: 260px;
    }


    /*
        모바일에서는 hover가 없으므로
        제목은 하단 유지
    */

    .company_core_item:hover {
        transform: none;
    }


    .company_org {
        padding: 75px 0 90px;
    }


    .org_department_title {
        height: 46px;

        font-size: 15px;
    }


    .org_manager {
        width: 160px;
        height: 44px;

        font-size: 14px;
    }


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


    .org_team {
        min-height: 44px;

        font-size: 13px;
    }

}



/* =========================================================
    R&D PROCESS
========================================================= */

.rnd_process_page {
    position: relative;

    width: 100%;

    background: #000;

    overflow: hidden;
}


/* =========================================================
    100VH STAGE
========================================================= */

.rnd_process_stage {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 700px;

    overflow: hidden;

    background: #000;
}


/* =========================================================
    SLIDE
========================================================= */

.rnd_process_slide {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    visibility: hidden;

    overflow: hidden;

    will-change:
        opacity,
        visibility;
}


.rnd_process_slide:first-child {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
    BACKGROUND
========================================================= */

.rnd_process_bg {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.rnd_process_bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.08);

    will-change: transform;
}


/* =========================================================
    DIM
========================================================= */

.rnd_process_dim {
    position: absolute;

    z-index: 2;

    inset: 0;

    background:
        rgba(0,0,0,.32);

    pointer-events: none;
}


.rnd_process_dim_last {
    background:
        rgba(0,0,0,.25);
}


/* =========================================================
    COPY COMMON
========================================================= */

.rnd_process_copy {
    position: absolute;

    z-index: 5;

    color: #fff;

    opacity: 0;

    will-change:
        opacity,
        transform;
}


.rnd_process_copy h2 {
    margin: 0;

    color: #fff;

    font-size: 48px;
    line-height: 1.4;

    font-weight: 700;


    word-break: keep-all;

    text-shadow:
        0 2px 14px
        rgba(0,0,0,.15);
}


.rnd_process_copy p {
    margin: 24px 0 0;

    color:
        #fff;

    font-size: 20px;
    line-height: 1.5;

    font-weight: 500;

    word-break: keep-all;
}


/* =========================================================
    STEP LABEL
========================================================= */

.rnd_process_step {
    display: inline-flex;

    align-items: center;
    justify-content: center;

 
    height: 44px;

    margin-bottom: 40px;

    padding: 0 30px;

    border:
        1px solid
        rgba(255,255,255,.6);

    border-radius: 100px;

    color: #fff;

    font-size: 18px;
    line-height: 1;

    font-weight: 500;

    box-sizing: border-box;
}




/* =========================================================
    POSITION : CENTER
========================================================= */

.rnd_copy_center {
    top: 50%;
    left: 50%;

    width: min(
        900px,
        calc(100% - 80px)
    );

    text-align: center;

    transform:
        translate(
            -50%,
            -50%
        );
}


.rnd_copy_center p {
    text-align: center;
}


/* =========================================================
    POSITION : LEFT
========================================================= */

.rnd_copy_left {
    top: 55%;
    left: 8.5vw;

    width: 620px;

    max-width: 42vw;

    text-align: left;

    transform:
        translateY(-50%);
}


.rnd_copy_left p {
    text-align: left;
}


/* =========================================================
    POSITION : RIGHT
========================================================= */

.rnd_copy_right {
    top: 55%;
    left: 56%;

    width: 620px;

    max-width: 38vw;

    text-align: left;

    transform:
        translateY(-50%);
}


.rnd_copy_right p {
    text-align: left;
}


/* =========================================================
    각각 디자인 위치 미세조정
========================================================= */

.rnd_slide_01 .rnd_process_copy {
    top: 46%;
}


.rnd_slide_02 .rnd_process_copy {
    top: 54%;
    left: 8%;
}


.rnd_slide_03 .rnd_process_copy {
    top: 53%;
    left: 55%;
}


.rnd_slide_04 .rnd_process_copy {
    top: 63%;
    left: 8%;
}


.rnd_copy_05 {
    top: 72%;
}


.rnd_slide_06 .rnd_process_copy {
    top: 54%;
    left: 8%;
}


.rnd_copy_07 {
    top: 58%;
}


.rnd_slide_08 .rnd_process_copy {
    top: 61%;
    left: 56%;
}


.rnd_copy_09 {
    top: 65%;
    left: 56%;
}


.rnd_final_copy {
    top: 48%;
}


/* =========================================================
    FINAL
========================================================= */

.rnd_final_eng {
    display: block;

    margin-bottom: 20px;

    color: #79D84A;

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

    font-weight: 700;

    letter-spacing: .04em;
}


.rnd_final_copy h2 {
    font-size: 50px;
}


/* =========================================================
    CTA
========================================================= */

.rnd_final_btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    min-width: 180px;
    height: 50px;

    margin-top: 60px;

    padding: 0 24px;

    border-radius: 100px;

    background: #72B44B;

    color: #fff;

    font-size: 18px;
    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background .3s ease,
        transform .3s ease;
}


.rnd_final_btn svg {
    display: block;
}


.rnd_final_btn:hover {
    background: #549E34;

    color: #fff;

    transform:
        translateY(-3px);
}


/* =========================================================
    IMAGE POSITION
========================================================= */

.rnd_slide_01 img {
    object-position:
        center center;
}

.rnd_slide_02 img {
    object-position:
        center center;
}

.rnd_slide_03 img {
    object-position:
        center center;
}

.rnd_slide_04 img {
    object-position:
        center center;
}

.rnd_slide_05 img {
    object-position:
        center center;
}

.rnd_slide_06 img {
    object-position:
        center center;
}

.rnd_slide_07 img {
    object-position:
        center center;
}

.rnd_slide_08 img {
    object-position:
        center center;
}

.rnd_slide_09 img {
    object-position:
        center center;
}

.rnd_slide_10 img {
    object-position:
        center center;
}


/* =========================================================
    SUB PAGE COMMON
========================================================= */

.sub_content_inner {
    width: 100%;
    max-width: 1460px;

    margin: 0 auto;

    padding: 0 60px;

    box-sizing: border-box;
}


.sub_common_head {
    position: relative;
}


.sub_common_head_center {
    text-align: center;
}





/* =========================================================
    HISTORY
========================================================= */

.history_page {
    position: relative;

    width: 100%;

    background: #fff;
}


.history_section {
    position: relative;

    width: 100%;

    padding: 50px 0 160px;

    background: #fff;

    overflow: hidden;
}



/* =========================================================
    TITLE
========================================================= */

.history_head {
    margin-bottom: 90px;
}




/* =========================================================
    CONTENT
========================================================= */

.history_content {
    display: grid;

    grid-template-columns:
        550px
        minmax(0, 1fr);

    column-gap: 150px;

    align-items: start;

    width: 100%;
}



/* =========================================================
    LEFT
========================================================= */

.history_left {
    position: relative;
}


.history_since_card {
    position: relative;

    width: 100%;
    height: 645px;

    padding:
        88px
        60px
        68px;

    border: 1px solid #2F6B3F;
    border-radius: 22px;

    background: #F9F8F7;

    box-sizing: border-box;

    overflow: hidden;
}



/* =========================================================
    2024 / SINCE
========================================================= */

.history_since_top {
    position: relative;

    height: 205px;
}


.history_since_year {
    position: relative;

    z-index: 2;

    display: block;

    color: #2F6B3F;

    font-size: 100px;
    line-height: 1;

    font-weight: 700;

}


.history_since_word {
    position: absolute;

    z-index: 1;

    top: 67px;
    left: 75px;

    color: #2F6B3F;

    font-size: 90px;
    line-height: 1;

    font-weight: 700;


    white-space: nowrap;
    opacity: 0.1 !important;
}



/* =========================================================
    SLOGAN
========================================================= */

.history_since_slogan {
    margin-top: 6px;
}


.history_since_slogan p {
    margin: 0;

    color: #222;

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

    font-weight: 500;

    letter-spacing: -0.035em;
}



/* =========================================================
    2020's
========================================================= */

.history_since_bottom {
    position: absolute;

    left: 60px;
    bottom: 72px;
}


.history_since_bottom strong {
    color: #222;

    font-size: 50px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.035em;
}



/* =========================================================
    RIGHT TIMELINE
========================================================= */

.history_timeline {
    position: relative;

    width: 100%;

    padding-top: 4px;
}



/* =========================================================
    ROW
========================================================= */

.history_row {
    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr);

    column-gap: 45px;

    width: 100%;

    padding:
        0
        0
        45px;

    margin-bottom: 45px;

    border-bottom: 1px solid #ddd;

    box-sizing: border-box;
}


.history_row:last-child {
    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0;
}



/* =========================================================
    YEAR
========================================================= */

.history_year {
    color: #2F6B3F;

    font-size: 30px;
    line-height: 1.3;

    font-weight: 700;

  
}



/* =========================================================
    LIST
========================================================= */

.history_list ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.history_list li {
    position: relative;

    padding-left: 18px;

    color: #666;

    font-size: 20px;
    line-height: 1.5;

    font-weight: 500;


    word-break: keep-all;
}

.history_list li + li{margin-top: 5px;}

.history_list li::before {
    content: "•";

    position: absolute;

    top: 0;
    left: 0;

    color: #666;
}



/* =========================================================
    HISTORY MOTION
========================================================= */

/*
    JS 실행 전에는 무조건 보임.
    그래서 JS 오류가 나도 빈 화면 안 됨.
*/

.history_head,
.history_since_card,
.history_since_year,
.history_since_word,
.history_since_slogan,
.history_since_bottom,
.history_row {
    opacity: 1;
    transform: none;
}


/*
|--------------------------------------------------------------------------
| JS가 정상 실행됐을 때만 초기 모션 상태 적용
|--------------------------------------------------------------------------
*/

.history_page.history-motion-ready .history_head {
    opacity: 0;

    transform:
        translateY(50px);

    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1);
}


.history_page.history-motion-ready .history_since_card {
    opacity: 0;

    transform:
        translateY(60px)
        scale(.96);

    transition:
        opacity 1s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1);
}


.history_page.history-motion-ready .history_since_year,
.history_page.history-motion-ready .history_since_word,
.history_page.history-motion-ready .history_since_slogan,
.history_page.history-motion-ready .history_since_bottom {
    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity .75s cubic-bezier(.22,1,.36,1),
        transform .75s cubic-bezier(.22,1,.36,1);
}


.history_page.history-motion-ready .history_row {
    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
}



/* =========================================================
    SHOW
========================================================= */

.history_page.history-motion-ready .history_head.is-show {
    opacity: 1;

    transform:
        translateY(0);
}


.history_page.history-motion-ready .history_since_card.is-show {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.history_page.history-motion-ready .history_since_year.is-show,
.history_page.history-motion-ready .history_since_word.is-show,
.history_page.history-motion-ready .history_since_slogan.is-show,
.history_page.history-motion-ready .history_since_bottom.is-show {
    opacity: 1;

    transform:
        translateY(0);
}


.history_page.history-motion-ready .history_row.is-show {
    opacity: 1;

    transform:
        translateY(0);
}



/* =========================================================
    LOCATION
========================================================= */

.location_page {
    position: relative;

    width: 100%;

    background: #fff;
}


.location_section {
    position: relative;

    width: 100%;

    padding:
        50px
        0
        160px;

    background: #fff;

    overflow: hidden;
}



/* =========================================================
    TITLE
========================================================= */

.location_head {
    margin-bottom: 70px;
}


.location_head .sub_common_title {
    font-size: 48px;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -.045em;
}



/* =========================================================
    MAP
========================================================= */

.location_map {
    position: relative;

    width: 100%;
    height: 590px;

    overflow: hidden;

    border-radius: 20px;

    background: #eee;
}


.location_map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}



/* =========================================================
    INFO
========================================================= */

.location_info {
    position: relative;

    margin-top: 60px;
}



/* =========================================================
    COMPANY NAME
========================================================= */

.location_company_name {
    padding-bottom: 40px;
}


.location_company_name h3 {
    margin: 0;

    color: #222;

    font-size: 40px;
    line-height: 1.4;

    font-weight: 700;


    word-break: keep-all;
}



/* =========================================================
    INFO GRID
========================================================= */

.location_info_grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    width: 100%;

    border-top: 1px solid #ddd;
}



/* =========================================================
    ITEM
========================================================= */

.location_info_item {
    position: relative;

    min-height: 210px;

    padding:
        40px;


    border-left: 1px solid #ddd;

    box-sizing: border-box;
}


.location_info_item:first-child {
    border-left: 0;
}



/* =========================================================
    ITEM TOP
========================================================= */

.location_info_top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.location_info_top strong {
    color: #222;

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

    font-weight: 700;

}



/* =========================================================
    ICON
========================================================= */

.location_info_icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    color: #111;
}


.location_info_icon svg {
    display: block;

    max-width: 100%;
}



/* =========================================================
    TEXT
========================================================= */

.location_info_item p {
    margin:
        40px
        0
        0;

    color: #666;

    font-size: 20px;
    line-height: 1.5;

    font-weight: 400;


    word-break: keep-all;
}



/* =========================================================
    CERTIFICATE BOARD
========================================================= */

.cert_board {
    position: relative;

    width: 100%;
    max-width: 1520px;

    margin: 0 auto;

    padding:
        50px
        60px
        150px;

    box-sizing: border-box;
}



/* =========================================================
    HEAD
========================================================= */

.cert_head {
    position: relative;

    margin-bottom: 55px;

    text-align: center;
}


.cert_head h2 {
    margin: 0;

    color: #222;

    font-size: 48px;
    line-height: 1.4;

    font-weight: 700;


    word-break: keep-all;
}



/* =========================================================
    CATEGORY
========================================================= */

.cert_category {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 24px;

    margin-top: 40px;
}


.cert_category a {
    color: #aaa;

    font-size: 24px;
    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    transition:
        color .25s ease;
}


.cert_category a:hover {
    color: #2F6B3F;
}


.cert_category a.active {
    color: #2F6B3F;

    font-weight: 700;
}


.cert_category i {
    display: block;

    width: 1px;
    height: 12px;

    background: #ddd;
}



/* =========================================================
    ADMIN TOP
========================================================= */

.cert_admin_top {
    position: absolute;

    right: 0;
    bottom: -3px;
}


.cert_write_btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 90px;
    height: 42px;

    padding: 0 22px;

    border-radius: 100px;

    background: #2F6B3F;

    color: #fff;

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

    font-weight: 600;

    text-decoration: none;

    transition:
        background .25s ease,
        transform .25s ease;
}


.cert_write_btn:hover {
    background: #245933;

    color: #fff;

    transform:
        translateY(-2px);
}



/* =========================================================
    GRID
========================================================= */

.cert_grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        40px
        30px;

    width: 100%;
}



/* =========================================================
    ITEM
========================================================= */

.cert_item {
    position: relative;

    min-width: 0;
}


.cert_item_open {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    text-align: left;

    cursor: pointer;
}



/* =========================================================
    THUMB
========================================================= */

.cert_thumb {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    aspect-ratio: 32.8 / 46;

    overflow: hidden;

    border: 1px solid #ddd;
    border-radius: 20px;

    background: #fff;

    box-sizing: border-box;
}


.cert_thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform:
        scale(1);

    transition:
        transform
        .6s
        cubic-bezier(.22,1,.36,1);
}


.cert_item_open:hover
.cert_thumb img {
    transform:
        scale(1.025);
}



/* =========================================================
    NO IMAGE
========================================================= */

.cert_no_image {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #aaa;

    font-size: 14px;
}



/* =========================================================
    TITLE
========================================================= */

.cert_item_title {
    display: block;

    margin-top: 24px;

    color: #222;

    font-size: 24px;
    line-height: 1.45;

    font-weight: 700;



    word-break: keep-all;

    transition:
        color .25s ease;
}


.cert_item_open:hover
.cert_item_title {
    color: #2F6B3F;
}



/* =========================================================
    ADMIN EDIT
========================================================= */

.cert_card_edit {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 5;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 56px;
    height: 32px;

    padding: 0 12px;

    border-radius: 100px;

    background:
        rgba(47,107,63,.92);

    color: #fff;

    font-size: 13px;
    line-height: 1;

    font-weight: 600;

    text-decoration: none;
}


.cert_card_edit:hover {
    background: #214e2e;

    color: #fff;
}



/* =========================================================
    EMPTY
========================================================= */

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

    padding:
        120px
        20px;

    color: #888;

    font-size: 16px;

    text-align: center;
}



/* =========================================================
    PAGING
========================================================= */

.cert_paging {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 90px;
}


/*
|--------------------------------------------------------------------------
| 그누보드 기본 페이지네이션
|--------------------------------------------------------------------------
*/

.cert_paging .pg_wrap {
    margin: 0;
}


.cert_paging .pg {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 4px;
}


.cert_paging .pg_page,
.cert_paging .pg_current {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

    color: #555;

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

    text-decoration: none;
}


.cert_paging .pg_current {
    color: #2F6B3F;

    font-weight: 700;
}


.cert_paging .pg_page:hover {
    color: #2F6B3F;
}



/* =========================================================
    MODAL
========================================================= */

body.cert_modal_open {
    overflow: hidden;
}


.cert_modal {
    position: fixed;

    z-index: 99999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 40px;

    box-sizing: border-box;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.cert_modal.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



/* =========================================================
    DIM
========================================================= */

.cert_modal_dim {
    position: absolute;

    inset: 0;

    background:
        rgba(0,0,0,.68);

    backdrop-filter:
        blur(3px);
}



/* =========================================================
    MODAL BOX
========================================================= */

.cert_modal_box {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width: min(
        900px,
        calc(100vw - 80px)
    );

    max-height:
        calc(100vh - 80px);

    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.25);

    transform:
        translateY(25px)
        scale(.98);

    transition:
        transform
        .4s
        cubic-bezier(.22,1,.36,1);
}


.cert_modal.active
.cert_modal_box {
    transform:
        translateY(0)
        scale(1);
}



/* =========================================================
    MODAL HEAD
========================================================= */

.cert_modal_head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    flex: 0 0 auto;

    padding:
        30px
        75px
        25px
        35px;

    border-bottom:
        1px solid #eee;

    box-sizing: border-box;
}


.cert_modal_head h3 {
    margin: 10px 0 0;

    color: #222;

    font-size: 22px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -.03em;

    word-break: keep-all;
}


.cert_modal_category {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 54px;
    height: 28px;

    padding: 0 12px;

    border-radius: 100px;

    background: #edf5ef;

    color: #2F6B3F;

    font-size: 12px;
    line-height: 1;

    font-weight: 600;
}



/* =========================================================
    MODAL IMAGE
========================================================= */

.cert_modal_content {
    flex: 1 1 auto;

    min-height: 0;

    overflow: auto;

    padding: 30px;

    background: #f7f7f7;

    box-sizing: border-box;

    text-align: center;
}


.cert_modal_content img {
    display: block;

    max-width: 100%;
    max-height: none;

    margin: 0 auto;

    width: auto;
    height: auto;

    background: #fff;
}



/* =========================================================
    CLOSE
========================================================= */

.cert_modal_close {
    position: absolute;

    z-index: 10;

    top: 24px;
    right: 27px;

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.cert_modal_close span {
    position: absolute;

    top: 17px;
    left: 5px;

    width: 26px;
    height: 1px;

    background: #222;
}


.cert_modal_close span:first-child {
    transform:
        rotate(45deg);
}


.cert_modal_close span:last-child {
    transform:
        rotate(-45deg);
}



/* =========================================================
    MODAL EDIT
========================================================= */

.cert_modal_edit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 75px;
    height: 38px;

    padding: 0 18px;

    border-radius: 100px;

    background: #2F6B3F;

    color: #fff;

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

    font-weight: 600;

    text-decoration: none;
}


.cert_modal_edit:hover {
    background: #214e2e;

    color: #fff;
}





/* =========================================================
    CERT WRITE
========================================================= */

.cert_write_page {
    position: relative;

    width: 100%;

    background: #fff;
}


.cert_write_inner {
    width: 100%;
    max-width: 1460px;

    margin: 0 auto;

    padding:
        50px
        60px
        150px;

    box-sizing: border-box;
}



/* =========================================================
    HEAD
========================================================= */

.cert_write_head {
    margin-bottom: 60px;

    text-align: center;
}


.cert_write_head h2 {
    margin: 0;

    color: #222;

    font-size: 48px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: -.045em;
}


.cert_write_head p {
    margin: 18px 0 0;

    color: #777;

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

    font-weight: 400;
}



/* =========================================================
    BOX
========================================================= */

.cert_write_box {
    width: 100%;

    border-top: 2px solid #222;
}



/* =========================================================
    ROW
========================================================= */

.cert_form_row {
    display: grid;

    grid-template-columns:
        180px
        minmax(0,1fr);

    width: 100%;

    min-height: 100px;

    border-bottom: 1px solid #ddd;

    box-sizing: border-box;
}



/* =========================================================
    LABEL
========================================================= */

.cert_form_label {
    display: flex;

    align-items: center;

    padding:
        30px
        25px;

    background: #fafafa;

    color: #222;

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

    font-weight: 600;

    box-sizing: border-box;
}


.cert_form_label label,
.cert_form_label span {
    color: inherit;

    font: inherit;
}


.cert_form_label b {
    margin-left: 4px;

    color: #2F6B3F;

    font-weight: 700;
}



/* =========================================================
    CONTENT
========================================================= */

.cert_form_content {
    display: flex;

    align-items: center;

    min-width: 0;

    padding:
        22px
        30px;

    box-sizing: border-box;
}



/* =========================================================
    INPUT
========================================================= */

.cert_input {
    display: block;

    width: 100%;
    height: 54px;

    padding: 0 18px;

    border: 1px solid #ddd;
    border-radius: 8px;

    outline: 0;

    background: #fff;

    color: #222;

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

    font-family: inherit;

    box-sizing: border-box;

    transition:
        border-color .25s ease;
}


.cert_input:focus {
    border-color: #2F6B3F;
}


.cert_input::placeholder {
    color: #aaa;
}



/* =========================================================
    SELECT
========================================================= */

.cert_select_wrap {
    position: relative;

    width: 360px;
    max-width: 100%;
}


.cert_select_wrap::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 20px;

    width: 7px;
    height: 7px;

    border-right: 1px solid #555;
    border-bottom: 1px solid #555;

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events: none;
}


.cert_select_wrap select {
    display: block;

    width: 100%;
    height: 54px;

    padding:
        0
        45px
        0
        18px;

    border: 1px solid #ddd;
    border-radius: 8px;

    outline: 0;

    background: #fff;

    color: #333;

    font-size: 16px;

    font-family: inherit;

    appearance: none;

    box-sizing: border-box;
}


.cert_select_wrap select:focus {
    border-color: #2F6B3F;
}



/* =========================================================
    EDITOR
========================================================= */

.cert_form_row_content
.cert_form_content {
    display: block;
}


.cert_editor {
    width: 100%;
}


.cert_editor textarea {
    width: 100% !important;
    min-height: 180px;

    padding: 18px;

    border: 1px solid #ddd !important;
    border-radius: 8px;

    box-sizing: border-box;

    font-family: inherit;

    font-size: 15px;
}


.cert_help {
    margin: 12px 0 0;

    color: #999;

    font-size: 13px;
    line-height: 1.5;
}



/* =========================================================
    FILE
========================================================= */

.cert_form_row_file
.cert_form_content {
    display: block;
}


.cert_file_area {
    width: 100%;
}


.cert_file_item {
    width: 100%;

    margin-top: 18px;
}


.cert_file_item:first-child {
    margin-top: 0;
}


.cert_file_upload {
    display: flex;

    align-items: center;

    width: 100%;
    min-height: 95px;

    padding:
        20px
        25px;

    border: 1px dashed #aaa;
    border-radius: 10px;

    background: #fafafa;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        border-color .25s ease,
        background .25s ease;
}


.cert_file_upload:hover {
    border-color: #2F6B3F;

    background: #f6faf7;
}


.cert_file_icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    margin-right: 18px;

    border-radius: 50%;

    background: #2F6B3F;

    color: #fff;

    font-size: 25px;
    line-height: 1;

    font-weight: 300;
}


.cert_file_text strong {
    display: block;

    color: #222;

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

    font-weight: 600;
}


.cert_file_text em {
    display: block;

    margin-top: 5px;

    color: #999;

    font-size: 13px;
    line-height: 1.3;

    font-style: normal;
}


.cert_file_input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip: rect(0,0,0,0);
}



/* =========================================================
    FILE NAME
========================================================= */

.cert_file_name {
    margin-top: 10px;

    padding:
        13px
        16px;

    border-radius: 6px;

    background: #f6f6f6;

    color: #777;

    font-size: 14px;

    box-sizing: border-box;
}



/* =========================================================
    EXISTING FILE
========================================================= */

.cert_existing_file {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 10px;

    padding:
        15px
        17px;

    border: 1px solid #eee;
    border-radius: 6px;

    box-sizing: border-box;
}


.cert_existing_file strong {
    display: block;

    margin-bottom: 4px;

    color: #333;

    font-size: 13px;
}


.cert_existing_file span {
    color: #777;

    font-size: 13px;
}


.cert_existing_file label {
    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

    cursor: pointer;
}



/* =========================================================
    FILE DESC
========================================================= */

.cert_file_desc {
    margin-top: 10px;
}



/* =========================================================
    OPTION
========================================================= */

.cert_option {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;
}


.cert_check {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #555;

    font-size: 14px;

    cursor: pointer;
}



/* =========================================================
    BUTTONS
========================================================= */

.cert_write_buttons {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 55px;
}


.cert_btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 130px;
    height: 50px;

    padding: 0 25px;

    border: 0;
    border-radius: 100px;

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

    font-weight: 600;

    font-family: inherit;

    text-decoration: none;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.cert_btn_cancel {
    border: 1px solid #ddd;

    background: #fff;

    color: #555;
}


.cert_btn_cancel:hover {
    border-color: #999;

    color: #222;

    transform: translateY(-2px);
}


.cert_btn_submit {
    background: #2F6B3F;

    color: #fff;
}


.cert_btn_submit:hover {
    background: #245833;

    transform: translateY(-2px);
}



/* =========================================================
    CERT PAGING
========================================================= */

.cert_paging {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin-top: 95px;
}


.cert_paging .pg_wrap {
    display: block;

    margin: 0;

    padding: 0;

    text-align: center;
}


.cert_paging .pg {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 3px;
}



/* =========================================================
    COMMON PAGE BUTTON
========================================================= */

.cert_paging .pg_page,
.cert_paging .pg_current {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent !important;

    color: #555;

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

    font-weight: 400;

    text-decoration: none;

    box-shadow: none;

    box-sizing: border-box;
}



/* =========================================================
    CURRENT
========================================================= */

.cert_paging .pg_current {
    color: #2F6B3F;

    font-weight: 700;
}


/*
    디자인처럼 현재 번호 아래 얇은 초록선
*/

.cert_paging .pg_current::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 9px;
    height: 1px;

    background: #2F6B3F;

    transform: translateX(-50%);
}



/* =========================================================
    HOVER
========================================================= */

.cert_paging .pg_page:hover {
    color: #2F6B3F;
}



/* =========================================================
    FIRST / PREV / NEXT / LAST
========================================================= */

.cert_paging .pg_start,
.cert_paging .pg_prev,
.cert_paging .pg_next,
.cert_paging .pg_end {
    overflow: hidden;

    text-indent: -9999px;

    background-image: none !important;
}



/*
|--------------------------------------------------------------------------
| 화살표 직접 그림
|--------------------------------------------------------------------------
*/

.cert_paging .pg_start::before,
.cert_paging .pg_prev::before,
.cert_paging .pg_next::before,
.cert_paging .pg_end::before {

    position: absolute;

    top: 50%;
    left: 50%;

    color: #888;

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

    font-family: Arial, sans-serif;

    text-indent: 0;

    transform:
        translate(-50%,-50%);
}



/* << */

.cert_paging .pg_start::before {
    content: "«";
}



/* < */

.cert_paging .pg_prev::before {
    content: "‹";

    font-size: 18px;
}



/* > */

.cert_paging .pg_next::before {
    content: "›";

    font-size: 18px;
}



/* >> */

.cert_paging .pg_end::before {
    content: "»";
}



/* hover */

.cert_paging .pg_start:hover::before,
.cert_paging .pg_prev:hover::before,
.cert_paging .pg_next:hover::before,
.cert_paging .pg_end:hover::before {
    color: #2F6B3F;
}



/* =========================================================
    INQUIRY
========================================================= */

.inquiry_page {
    width:100%;
    background:#fff;
}

.inquiry_section {
    padding:50px 0 150px;
}

.inquiry_head {
    margin-bottom:75px;
}

.inquiry_head .sub_common_title {
    font-size:48px;
}

.inquiry_head .sub_common_desc {
    margin-top:22px;
    color:#777;
    font-size:17px;
    line-height:1.7;
}


/* =========================================================
    FORM
========================================================= */

.inquiry_form_box {
    border-top:2px solid #222;
}

.inquiry_form_row {
    display:grid;
    grid-template-columns:180px minmax(0,1fr);

    border-bottom:1px solid #ddd;
}

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

    padding:35px 30px;

    background:#fafafa;

    color:#222;

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

    box-sizing:border-box;
}

.inquiry_form_label b {
    margin-left:5px;
    color:#2F6B3F;
}

.inquiry_form_field {
    padding:28px 35px;

    box-sizing:border-box;
}


/* =========================================================
    TYPE
========================================================= */

.inquiry_type_list {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.inquiry_type input {
    position:absolute;
    opacity:0;
}

.inquiry_type span {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:110px;
    height:46px;

    padding:0 22px;

    border:1px solid #ddd;
    border-radius:100px;

    background:#fff;

    color:#666;

    font-size:15px;

    box-sizing:border-box;

    cursor:pointer;

    transition:.25s ease;
}

.inquiry_type input:checked + span {
    border-color:#2F6B3F;
    background:#2F6B3F;
    color:#fff;
}


/* =========================================================
    INPUT
========================================================= */

.inquiry_field_grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:20px;
}

.inquiry_input_wrap label {
    display:block;

    margin-bottom:10px;

    color:#555;

    font-size:14px;
}

.inquiry_input_wrap input,
.inquiry_input_wrap textarea {
    display:block;

    width:100%;

    border:1px solid #ddd;
    border-radius:10px;

    outline:none;

    background:#fff;

    color:#222;

    font-family:inherit;
    font-size:15px;

    box-sizing:border-box;

    transition:border-color .25s ease;
}

.inquiry_input_wrap input {
    height:54px;
    padding:0 18px;
}

.inquiry_input_wrap textarea {
    min-height:220px;
    padding:18px;

    line-height:1.7;

    resize:vertical;
}

.inquiry_input_wrap input:focus,
.inquiry_input_wrap textarea:focus {
    border-color:#2F6B3F;
}


/* =========================================================
    PRIVACY
========================================================= */

.inquiry_privacy_box {
    padding:22px 25px;

    border-radius:10px;

    background:#f8f8f8;
}

.inquiry_privacy_box strong {
    display:block;

    margin-bottom:10px;

    color:#333;

    font-size:15px;
}

.inquiry_privacy_box p {
    margin:0;

    color:#777;

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

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

    gap:9px;

    margin-top:18px;

    color:#555;

    font-size:14px;

    cursor:pointer;
}

.inquiry_agree input {
    width:17px;
    height:17px;

    accent-color:#2F6B3F;
}

.inquiry_agree b {
    color:#2F6B3F;
}


/* =========================================================
    BUTTON
========================================================= */

.inquiry_buttons {
    display:flex;
    justify-content:center;

    margin-top:55px;
}

.inquiry_submit {
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:14px;

    min-width:180px;
    height:50px;

    padding:0 26px;

    border:0;
    border-radius:100px;

    background:#72B44B;

    color:#fff;

    font-family:inherit;
    font-size:17px;
    font-weight:500;

    cursor:pointer;

    transition:
        background .3s ease,
        transform .3s ease;
}

.inquiry_submit:hover {
    background:#549E34;

    transform:translateY(-3px);
}


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

@media(max-width:1024px) {

    .inquiry_head .sub_common_title {
        font-size:38px;
    }

    .inquiry_form_row {
        grid-template-columns:150px minmax(0,1fr);
    }

}

@media(max-width:819px) {

    .inquiry_section {
        padding:30px 0 100px;
    }

    .inquiry_head {
        margin-bottom:50px;
    }

    .inquiry_head .sub_common_title {
        font-size:31px;
    }

    .inquiry_form_row {
        display:block;
    }

    .inquiry_form_label {
        padding:22px 10px 8px;

        background:#fff;
    }

    .inquiry_form_field {
        padding:12px 10px 25px;
    }

}

@media(max-width:620px) {

    .inquiry_head .sub_common_title {
        font-size:27px;
    }

    .inquiry_head .sub_common_desc {
        font-size:14px;
    }

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

    .inquiry_type span {
        min-width:auto;
        height:42px;

        padding:0 17px;

        font-size:14px;
    }

}
/* ========================================================================
   FINAL CERTIFICATE MOBILE AUDIT — 2026-09-07
   Certificate list + write page. Prevents desktop grid/form widths from
   squeezing fields and causing vertical text on 360–430px screens.
======================================================================== */
@media (max-width:1024px){
    .cert_board{padding:42px 32px 110px;}
    .cert_head{margin-bottom:44px;}
    .cert_head h2{font-size:34px;}
    .cert_category{gap:18px;margin-top:30px;}
    .cert_category a{font-size:19px;}
    .cert_grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px;}
    .cert_item_title{margin-top:18px;font-size:19px;}

    .cert_write_inner{padding:42px 32px 110px;}
    .cert_write_head{margin-bottom:44px;}
    .cert_write_head h2{font-size:34px;}
    .cert_write_head p{font-size:15px;}
    .cert_form_row{grid-template-columns:150px minmax(0,1fr);min-height:86px;}
    .cert_form_label{padding:24px 20px;font-size:15px;}
    .cert_form_content{padding:18px 22px;}
}

@media (max-width:819px){
    .cert_board{padding:32px 22px 90px;}
    .cert_head{margin-bottom:34px;}
    .cert_head h2{font-size:27px;line-height:1.38;letter-spacing:-.035em;}
    .cert_category{justify-content:flex-start;gap:13px;margin-top:24px;overflow-x:auto;scrollbar-width:none;}
    .cert_category::-webkit-scrollbar{display:none;}
    .cert_category a{flex:0 0 auto;font-size:15px;white-space:nowrap;}
    .cert_category i{flex:0 0 1px;height:10px;}
    .cert_admin_top{position:static;margin-top:20px;text-align:right;}
    .cert_write_btn{min-width:76px;height:38px;padding:0 17px;font-size:13px;}
    .cert_grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;}
    .cert_thumb{border-radius:14px;}
    .cert_item_title{margin-top:14px;font-size:17px;line-height:1.45;}
    .cert_card_edit{top:9px;right:9px;min-width:48px;height:29px;padding:0 10px;font-size:11px;}
    .cert_paging{margin-top:55px;}

    .cert_modal{padding:20px;}
    .cert_modal_box{width:calc(100vw - 40px);max-height:calc(100svh - 40px);border-radius:14px;}
    .cert_modal_head{gap:14px;padding:20px 54px 17px 20px;}
    .cert_modal_head h3{font-size:18px;}
    .cert_modal_content{padding:18px;}

    .cert_write_inner{padding:32px 22px 90px;}
    .cert_write_head{margin-bottom:34px;}
    .cert_write_head h2{font-size:28px;line-height:1.35;letter-spacing:-.04em;}
    .cert_write_head p{margin-top:12px;font-size:14px;line-height:1.6;}
    .cert_form_row{display:block;min-height:0;}
    .cert_form_label{padding:18px 2px 8px;background:#fff;font-size:14px;}
    .cert_form_content{display:block;width:100%;padding:0 0 18px;}
    .cert_input,.cert_select_wrap select{height:48px;padding-left:14px;padding-right:38px;font-size:14px;}
    .cert_select_wrap{width:100%;max-width:none;}
    .cert_editor textarea{min-height:190px;padding:14px;font-size:14px;line-height:1.6;}
    .cert_file_upload{min-height:82px;padding:16px 17px;}
    .cert_file_icon{width:36px;height:36px;margin-right:13px;font-size:21px;}
    .cert_file_text strong{font-size:14px;}
    .cert_file_text em,.cert_help{font-size:12px;}
    .cert_write_buttons{margin-top:38px;}
    .cert_btn{min-width:110px;height:46px;padding:0 20px;font-size:14px;}
}

@media (max-width:620px){
    .cert_board{padding:26px 16px 70px;}
    .cert_head{margin-bottom:28px;}
    .cert_head h2{font-size:24px;line-height:1.42;}
    .cert_category{gap:11px;margin-top:20px;}
    .cert_category a{font-size:14px;}
    .cert_write_btn{height:36px;min-width:70px;padding:0 15px;font-size:12px;}
    .cert_grid{grid-template-columns:1fr;gap:32px;}
    .cert_item_title{font-size:16px;}

    .cert_write_inner{padding:26px 18px 70px;}
    .cert_write_head{margin-bottom:28px;}
    .cert_write_head h2{font-size:25px;}
    .cert_write_head p{font-size:13px;}
    .cert_form_label{padding-top:15px;font-size:13px;}
    .cert_form_content{padding-bottom:16px;}
    .cert_input,.cert_select_wrap select{height:46px;font-size:13px;border-radius:7px;}
    .cert_editor textarea{min-height:170px;font-size:13px;}
    .cert_file_upload{min-height:74px;padding:14px;}
    .cert_file_icon{width:32px;height:32px;font-size:19px;}
    .cert_file_text strong{font-size:13px;}
    .cert_existing_file{display:block;padding:12px 13px;}
    .cert_existing_file label{margin-top:8px;}
    .cert_write_buttons{gap:8px;margin-top:30px;}
    .cert_btn{min-width:0;flex:1;height:44px;padding:0 14px;font-size:13px;}
}

/* ========================================================================
   FINAL CERTIFICATE / SUBPAGE SPACING AUDIT — 2026-09-07 v3
======================================================================== */
@media (max-width:620px){
    .cert_board{
        padding:28px 18px 64px !important;
    }
    .cert_head{
        margin-bottom:30px !important;
    }
    .cert_head h2{
        font-size:22px !important;
        line-height:1.42 !important;
        letter-spacing:-.03em !important;
    }
    .cert_category{
        gap:10px !important;
        margin-top:22px !important;
        padding-bottom:4px;
    }
    .cert_category a{
        font-size:13px !important;
        line-height:1.4;
    }
    .cert_admin_top{
        margin-top:18px !important;
    }
    .cert_write_btn{
        min-width:66px !important;
        height:34px !important;
        padding:0 14px !important;
        font-size:11px !important;
    }
    .cert_grid{
        gap:28px !important;
    }
    .cert_item_title{
        margin-top:12px !important;
        font-size:15px !important;
        line-height:1.5 !important;
    }
    .cert_write_inner{
        padding:28px 18px 64px !important;
    }
    .cert_write_head{
        margin-bottom:30px !important;
    }
    .cert_write_head h2{
        font-size:23px !important;
    }
    .cert_write_head p{
        margin-top:10px !important;
        font-size:12px !important;
        line-height:1.65 !important;
    }
    .cert_form_label{
        padding:14px 0 7px !important;
        font-size:12px !important;
    }
    .cert_form_content{
        padding:0 0 15px !important;
    }
}

@media (max-width:430px){
    .cert_board,
    .cert_write_inner{
        padding-left:16px !important;
        padding-right:16px !important;
    }
    .cert_head h2{font-size:21px !important;}
    .cert_write_head h2{font-size:22px !important;}
}