/* =========================================================
    HEADER
========================================================= */

:root {
    --header-height: 90px;
    --mega-height: 155px;

    --green: #2d7445;
    --beige: #f4efe3;

    --menu-col: 150px;
    --menu-width: max-content;
}


body.header_lock {
    overflow: hidden;
}


#wgd_header {
    position: fixed;
    z-index: 9000;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

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


.wgd_header_inner {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;

    padding: 0 5%;

    box-sizing: border-box;
}



/* =========================================================
    LOGO
========================================================= */

.wgd_logo {
    position: relative;

    display: block;

    width: 164px;
    height: 44px;

    flex: none;
}


.wgd_logo img {
    position: absolute;

    top: 50%;
    left: 0;

    display: block;

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

    transform: translateY(-50%);

    transition: opacity .22s ease;
}


.wgd_logo .logo_white {
    opacity: 1;
}


.wgd_logo .logo_color {
    opacity: 0;
}



/* =========================================================
    GNB
========================================================= */

/*
    핵심

    기존:
    flex + gap

    변경:
    서브메뉴와 동일한 130px × 4열

    그래서 COMPANY / PRODUCT / R&D / COMMUNITY
    아래에 서브메뉴가 정확하게 맞음
*/

.wgd_gnb {
    position: absolute;

    top: 0;
    left: 50%;

    display: grid;

    grid-template-columns:
        var(--menu-col)
        var(--menu-col)
        var(--menu-col)
        var(--menu-col);

    width: var(--menu-width);
    height: 100%;

    transform: translateX(-50%);
}


.wgd_gnb_item {
    position: relative;

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

    width: 100%;
    height: 100%;

    color: #fff;

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

    text-align: center;
    text-decoration: none;

    white-space: nowrap;

    transition: color .2s ease;
}



/* =========================================================
    UTIL
========================================================= */

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

    gap: 34px;

    margin-left: auto;
}


.wgd_login,
.wgd_cart {
    color: #fff;

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

    text-decoration: none;

    transition: color .2s ease;
}



/* =========================================================
    LANGUAGE
========================================================= */

.wgd_lang {
    position: relative;
}


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

    gap: 8px;

    padding: 0;

    border: 0;

    background: none;

    color: #fff;

    cursor: pointer;

    transition: color .2s ease;
}


.wgd_globe {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    border: 1.4px solid currentColor;
    border-radius: 50%;

    box-sizing: border-box;

    color: inherit;
}


.wgd_globe:before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 6px;
    height: 100%;

    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;

    border-radius: 50%;

    transform: translateX(-50%);

    box-sizing: border-box;
}


.wgd_globe:after {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: translateY(-50%);
}


.wgd_arrow,
.wgd_member_arrow {
    display: block;

    width: 6px;
    height: 6px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform: rotate(45deg) translateY(-2px);
}



/* language dropdown */

.wgd_lang_drop {
    position: absolute;

    top: 31px;
    left: 50%;

    display: block;

    min-width: 76px;

    padding: 7px 0;

    border: 1px solid #ddd;

    background: #fff;

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(-5px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


.wgd_lang.open .wgd_lang_drop {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


.wgd_lang_drop a {
    display: block;

    padding: 7px 15px;

    color: #222;

    font-size: 16px;

    text-align: center;
    text-decoration: none;
}


.wgd_lang_drop a:hover {
    color: var(--green);
}



/* =========================================================
    MEMBER
========================================================= */

.wgd_member {
    position: relative;
}


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

    gap: 8px;

    padding: 0;

    border: 0;

    background: none;

    color: #fff;

    cursor: pointer;

    transition: color .2s ease;
}


.wgd_member_avatar {
    position: relative;

    display: block;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #eee;
}


.wgd_member_avatar:before {
    content: "";

    position: absolute;

    top: 7px;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #bbb;

    transform: translateX(-50%);
}


.wgd_member_avatar:after {
    content: "";

    position: absolute;

    bottom: 6px;
    left: 50%;

    width: 13px;
    height: 7px;

    border-radius: 8px 8px 5px 5px;

    background: #bbb;

    transform: translateX(-50%);
}


.wgd_member_name {
    font-size: 16px;
    font-weight: 600;
}


.wgd_member_drop {
    position: absolute;

    top: 42px;
    right: 0;

    display: block;

    width: 150px;

    border: 1px solid #ddd;

    background: #fff;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


.wgd_member.open .wgd_member_drop {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.wgd_member_drop a {
    display: block;

    padding: 11px 16px;

    color: #333;

    font-size: 13px;

    text-decoration: none;
}


.wgd_member_drop a:hover {
    background: #f8f8f8;
}


.wgd_member_drop a em {
    float: right;

    min-width: 25px;

    padding: 2px 7px;

    border-radius: 20px;

    background: #25b995;

    color: #fff;

    font-style: normal;

    text-align: center;
}


.wgd_member_drop a.logout {
    margin-top: 6px;

    border-top: 1px solid #eee;

    color: #287cff;

    text-align: center;
}



/* =========================================================
    HAMBURGER
========================================================= */

.wgd_allmenu_btn {
    position: relative;
    z-index: 9200;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;
}


.wgd_allmenu_btn span {
    display: block;

    width: 26px;
    height: 2px;

    margin: 3.5px 0;

    background: #fff;

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



/* X */

body.allmenu_open
.wgd_allmenu_btn span:nth-child(1) {
    transform:
        translateY(8.5px)
        rotate(45deg);
}


body.allmenu_open
.wgd_allmenu_btn span:nth-child(2) {
    opacity: 0;
}


body.allmenu_open
.wgd_allmenu_btn span:nth-child(3) {
    transform:
        translateY(-8.5px)
        rotate(-45deg);
}



/* =========================================================
    WHITE HEADER STATE
========================================================= */


#wgd_header.mega_open,
#wgd_header.scrolled,
body.allmenu_open #wgd_header {
    background: #fff;

    border-bottom: 1px solid #e8e8e8;
}



/* logo */


#wgd_header.mega_open .logo_white,
#wgd_header.scrolled .logo_white,
body.allmenu_open #wgd_header .logo_white {
    opacity: 0;
}



#wgd_header.mega_open .logo_color,
#wgd_header.scrolled .logo_color,
body.allmenu_open #wgd_header .logo_color {
    opacity: 1;
}



/* gnb */


#wgd_header.mega_open .wgd_gnb_item,
#wgd_header.scrolled .wgd_gnb_item,
body.allmenu_open #wgd_header .wgd_gnb_item {
    color: #111;
}



/* login cart */


#wgd_header.mega_open .wgd_login,
#wgd_header.scrolled .wgd_login,
body.allmenu_open #wgd_header .wgd_login,


#wgd_header.mega_open .wgd_cart,
#wgd_header.scrolled .wgd_cart,
body.allmenu_open #wgd_header .wgd_cart {
    color: #111;
}



/* member */


#wgd_header.mega_open .wgd_member_btn,
#wgd_header.scrolled .wgd_member_btn,
body.allmenu_open #wgd_header .wgd_member_btn {
    color: #111;
}



/*
    ★ 중요

    언어 아이콘 + 화살표까지 currentColor 사용

    그래서 스크롤 후에도 검정으로 보임
*/


#wgd_header.mega_open .wgd_lang_btn,
#wgd_header.scrolled .wgd_lang_btn,
body.allmenu_open #wgd_header .wgd_lang_btn {
    color: #111;
}



/* hamburger */


#wgd_header.mega_open .wgd_allmenu_btn span,
#wgd_header.scrolled .wgd_allmenu_btn span,
body.allmenu_open #wgd_header .wgd_allmenu_btn span {
    background: #111;
}



/* =========================================================
    MEGA MENU
========================================================= */

.wgd_mega {
    position: absolute;

    top: var(--header-height);
    left: 0;

    width: 100%;
    height: 0;

    overflow: hidden;

    background: #fff;

    opacity: 0;

    pointer-events: none;

    border-bottom: 0 solid #eee;

    transition:
        height .28s ease,
        opacity .2s ease;
}


#wgd_header.mega_open .wgd_mega {
    height: var(--mega-height);

    opacity: 1;

    pointer-events: auto;

    border-bottom-width: 1px;
}



/*
    GNB와 완전히 같은 폭/같은 열
*/

.wgd_mega_inner {
    display: grid;

    grid-template-columns:
        var(--menu-col)
        var(--menu-col)
        var(--menu-col)
        var(--menu-col);

    width: var(--menu-width);
    height: 100%;

    margin: 0 auto;
}



/* =========================================================
    MEGA COLUMN
========================================================= */

.wgd_mega_col {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 15px;

    height: 100%;

    padding: 24px 10px ;

    overflow: hidden;

    box-sizing: border-box;
}



/*
    초록 배경

    그냥 색상변경 X

    위 -> 아래로 내려오면서 채워짐
*/

.wgd_mega_col:before {
    content: "";

    position: absolute;

    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: var(--green);

    transform: scaleY(0);

    transform-origin: top center;

    transition:
        transform .38s
        cubic-bezier(.65, 0, .35, 1);
}


.wgd_mega_col.active:before {
    transform: scaleY(1);
}



/* submenu */

.wgd_mega_col a {
    position: relative;
    z-index: 2;

    display: inline-block;



    color: #222;

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

    text-decoration: none;



    transition:
        color .18s ease;
        text-align: center
}



/* 밑줄 */

.wgd_mega_col a:after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;
    height: 1px;

    background: currentColor;

    transition: width .25s ease;
}


.wgd_mega_col a:hover:after {
    width: 100%;
}



/* active column text */

.wgd_mega_col.active a {
    color: #fff;

    transition-delay: .08s;
}



/* 상단 active menu */

#wgd_header.mega_open
.wgd_gnb_item.active {
    color: var(--green);
}



/* =========================================================
    FULL MENU
========================================================= */

.wgd_allmenu {
    position: fixed;
    z-index: 8500;

    top: var(--header-height);
    left: 0;

    display: grid;

    grid-template-columns:
        50%
        50%;

    width: 100%;
    height: calc(
        100vh - var(--header-height)
    );

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

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


body.allmenu_open .wgd_allmenu {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}



/* =========================================================
    FULL MENU LEFT
========================================================= */

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

    padding-left: 7.8vw;

    background: #fff;

    box-sizing: border-box;
}


.wgd_allmenu_left_inner {
    transform: translateY(-2vh);
}


.wgd_allmenu_left h2 {
    margin: 0;

    color: #202020;

    font-size:60px;

    line-height: 1.42;


    font-weight: 700;
}


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

    gap: 14px;

    height: 50px;

    margin-top: 55px;

    padding: 0 24px;

    border-radius: 30px;

    background: #72B44B;

    color: #fff;

    font-size: 18px;

    text-decoration: none;
}

.wgd_contact_btn svg{display: block}


/* =========================================================
    FULL MENU RIGHT
========================================================= */

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

    padding-left: 6.3vw;

    background: var(--beige);

    box-sizing: border-box;
}


.wgd_allmenu_nav {
    display: flex;
    flex-direction: column;

    gap: 60px;

    transform: translateY(-1vh);
}



/*
    기본 상태

    전부 원래색 그대로
*/

.wgd_allmenu_group h3 {
    margin: 0 0 30px;

    color: #222;

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

    font-weight: 700;

    transition: color .2s ease;
}


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

    gap: 14px;
}


.wgd_allmenu_links a {
    position: relative;

    padding-bottom: 4px;

    color: #666;

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

    text-decoration: none;

    transition: color .2s ease;
}


.wgd_allmenu_links i {
    display: block;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ccc;
}



/* =========================================================
    FULL MENU HOVER
========================================================= */

/*
    기존처럼 COMPANY가 처음부터 초록색 X

    마우스 올린 그룹만 초록
*/

.wgd_allmenu_group:hover h3 {
    color: var(--green);
}


.wgd_allmenu_links a:hover {
    color: var(--green);
}



/* underline */

.wgd_allmenu_links a:after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;
    height: 1px;

    background: currentColor;

    transition: width .25s ease;
}


.wgd_allmenu_links a:hover:after {
    width: 100%;
}



/*
    기존 active class가 HTML에 있어도
    강제로 기본색 유지
*/

.wgd_allmenu_group.active h3 {
    color: #222;
}


.wgd_allmenu_links a.active {
    color: #707070;
}


.wgd_allmenu_group.active:hover h3 {
    color: var(--green);
}


.wgd_allmenu_links a.active:hover {
    color: var(--green);
}



/* =========================================================
    GNUBOARD
========================================================= */

#hd_login_msg {
    display: none !important;
}



/* =========================================================
    1500
========================================================= */

@media (max-width:1500px) {

    .wgd_header_inner {
        padding:
            0
            4%;
    }

}



/* =========================================================
    1280
========================================================= */

@media (max-width:1280px) {

    :root {
        --header-height: 76px;

        --menu-col: 116px;
        --menu-width: 464px;
    }


    .wgd_logo {
        width: 138px;
    }


    .wgd_gnb_item {
        font-size: 14px;
    }


    .wgd_util {
        gap: 22px;
    }


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

}



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

@media (max-width:1024px) {

    .wgd_gnb {
        display: none;
    }


    .wgd_allmenu {
        grid-template-columns:
            42%
            58%;
    }


    .wgd_allmenu_left h2 {
        font-size: 36px;
    }


    .wgd_allmenu_right {
        padding-left: 5vw;
    }

}



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

@media (max-width:819px) {

    :root {
        --header-height: 70px;
    }


    .wgd_header_inner {
        padding:
            0
            20px;
    }


    .wgd_logo {
        width: 128px;
        height: 38px;
    }


    .wgd_util {
        gap: 17px;
    }


    .wgd_lang,
    .wgd_cart {
        display: none;
    }


    .wgd_member_name {
        display: none;
    }


    .wgd_allmenu {
        display: block;

        overflow-y: auto;

        background: var(--beige);
    }


    .wgd_allmenu_left {
        display: none;
    }


    .wgd_allmenu_right {
        min-height: 100%;

        padding:
            45px
            28px
            80px;
    }


    .wgd_allmenu_nav {
        gap: 42px;

        transform: none;
    }


    .wgd_allmenu_group h3 {
        margin-bottom: 18px;

        font-size: 28px;
    }


    .wgd_allmenu_links {
        flex-wrap: wrap;

        gap: 10px;
    }

}



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

@media (max-width:580px) {

    .wgd_logo {
        width: 118px;
    }


    .wgd_login {
        font-size: 13px;
    }


    .wgd_allmenu_btn {
        width: 24px;
    }


    .wgd_allmenu_btn span {
        width: 23px;
    }

}










/* =========================================================
    FOOTER
========================================================= */

#wgd_footer {
    width: 100%;

    padding: 80px 0 ;

    background: #fff;

    box-sizing: border-box;
    border-top: 1px solid #DDD
}


.wgd_footer_inner {
    padding: 0 5%;

    margin: 0 auto;
}



/* =========================================================
    FOOTER TOP
========================================================= */

.wgd_footer_top {
    display: grid;

    grid-template-columns:
        320px
        250px
        350px
        1fr;

    min-height: 128px;

    padding-bottom: 42px;

    border-bottom: 1px solid #ddd;

    box-sizing: border-box;
}



/* =========================================================
    LOGO
========================================================= */

.wgd_footer_logo {
    
}


.wgd_footer_logo a {
    display: inline-block;
}


.wgd_footer_logo img {
    display: block;

    width: 162px;
    height: auto;
}



/* =========================================================
    COMMON COLUMN
========================================================= */

.wgd_footer_policy,
.wgd_footer_company,
.wgd_footer_contact {
    position: relative;

    padding:0 25px;

    box-sizing: border-box;
}


/*
    시안처럼 세로 구분선
*/

.wgd_footer_policy:before,
.wgd_footer_company:before,
.wgd_footer_contact:before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 1px;
    height: 80px;

    background: #ddd;
}



/* =========================================================
    POLICY
========================================================= */

.wgd_footer_policy {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.wgd_footer_policy a {
    display: inline-block;

    width: fit-content;

    color: #666;

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

    font-weight: 400;

    text-decoration: none;

    transition: color .2s ease;
}


.wgd_footer_policy a:hover {
    color: #222;
}



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

.wgd_footer_company {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.wgd_footer_company p {
    margin: 0;

    color: #666;

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

    font-weight: 400;
}



/* =========================================================
    CONTACT
========================================================= */

.wgd_footer_contact {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.wgd_footer_contact p {
    margin: 0;

    color: #666;

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

    font-weight: 400;
    word-break: keep-all
}


.wgd_footer_contact p span {
    display: inline-block;

    margin-right: 4px;

    color: #666;
}



/* =========================================================
    FOOTER BOTTOM
========================================================= */

.wgd_footer_bottom {
    padding-top: 50px;
}


.wgd_footer_bottom p {
    margin: 0;

    color: #5f5f5f;

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

    font-weight: 400;

    text-transform: uppercase;
}



/* =========================================================
    1500
========================================================= */

@media (max-width: 1500px) {

    #wgd_footer {
        padding:
            70px
            0
            65px;
    }


    .wgd_footer_inner {
        width: calc(100% - 100px);
    }


    .wgd_footer_top {
        grid-template-columns:
            240px
            210px
            300px
            1fr;
    }


    .wgd_footer_logo img {
        width: 150px;
    }


    .wgd_footer_policy a,
    .wgd_footer_company p,
    .wgd_footer_contact p,
    .wgd_footer_bottom p {
        font-size: 15px;
    }

}



/* =========================================================
    1280
========================================================= */

@media (max-width: 1280px) {

    .wgd_footer_inner {
        width: calc(100% - 70px);
    }


    .wgd_footer_top {
        grid-template-columns:
            200px
            190px
            260px
            1fr;
    }


    .wgd_footer_policy,
    .wgd_footer_company,
    .wgd_footer_contact {
        padding-left: 20px;
    }


    .wgd_footer_policy a,
    .wgd_footer_company p,
    .wgd_footer_contact p {
        font-size: 14px;
    }

}



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

@media (max-width: 1024px) {

    #wgd_footer {
        padding:
            60px
            0;
    }


    .wgd_footer_top {
        grid-template-columns:
            190px
            1fr
            1fr;

        row-gap: 38px;
    }


    .wgd_footer_contact {
        grid-column:
            2 /
            4;
    }


    .wgd_footer_contact:before {
        display: none;
    }


    .wgd_footer_bottom {
        padding-top: 35px;
    }

}



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

@media (max-width: 819px) {

    #wgd_footer {
        padding:
            50px
            0;
    }


    .wgd_footer_inner {
        width: calc(100% - 40px);
    }


    .wgd_footer_top {
        display: block;

        padding-bottom: 35px;
    }


    .wgd_footer_logo {
        margin-bottom: 35px;
    }


    .wgd_footer_logo img {
        width: 145px;
    }


    .wgd_footer_policy,
    .wgd_footer_company,
    .wgd_footer_contact {
        padding-left: 0;

        margin-top: 28px;
    }


    .wgd_footer_policy:before,
    .wgd_footer_company:before,
    .wgd_footer_contact:before {
        display: none;
    }


    .wgd_footer_policy {
        flex-direction: row;

        gap: 20px;
    }


    .wgd_footer_company,
    .wgd_footer_contact {
        gap: 7px;
    }


    .wgd_footer_bottom {
        padding-top: 30px;
    }


    .wgd_footer_bottom p {
        font-size: 13px;
    }

}



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

@media (max-width: 580px) {

    #wgd_footer {
        padding:
            45px
            0;
    }


    .wgd_footer_inner {
        width: calc(100% - 32px);
    }


    .wgd_footer_logo {
        margin-bottom: 28px;
    }


    .wgd_footer_logo img {
        width: 135px;
    }


    .wgd_footer_policy {
        gap: 15px;
    }


    .wgd_footer_policy a,
    .wgd_footer_company p,
    .wgd_footer_contact p {
        font-size: 13px;
    }


    .wgd_footer_contact p {
        line-height: 1.5;
    }


    .wgd_footer_bottom {
        padding-top: 25px;
    }


    .wgd_footer_bottom p {
        font-size: 12px;
    }

}