@charset "utf-8";

:root{
    --workspace_height : 160px;
}

/* == gnb == */
.gnb_container{ position: fixed; padding-top: 37px; width: var(--gnb_width); left: calc(-1 * var(--gnb_width)); top: var(--header_height); bottom:0; z-index: 1000; background-color: #000; overflow: hidden auto; transition: .2s; }
.gnb_container::-webkit-scrollbar{ display: none; }
/*.gnb_container::-webkit-scrollbar{ width: 6px; }*/
/*.gnb_container::-webkit-scrollbar-thumb{ background-color: #fff; background-clip:padding-box; border: 2px solid transparent; }*/
/*.gnb_container::-webkit-scrollbar-track{ background-color: transparent; }*/
.is_expand .gnb_container{ left: 0; }


/* == 1depth == */
.gnb_container .gnb_wrap{ max-height: calc(100vh - var(--workspace_height)); padding: 0px 13px 20px 12px; opacity: 0; transition: opacity .2s; }
.gnb_container .gnb_wrap > li{ position: relative; margin-bottom: 11px; }
.is_folded .gnb_container .gnb_wrap > li{ overflow: hidden; border-radius: 100px; }
.is_folded .gnb_container:hover .gnb_wrap > li{ overflow: unset; border-radius: unset; }
.gnb_container .gnb_wrap > li:last-child{ margin-bottom: 0; }
.gnb_container .gnb_wrap > li.has_top_margin{ margin-top: 20px; padding-top: 20px; position: relative; }
.gnb_container .gnb_wrap > li.has_top_margin::before{ content: ''; width: 100%; height: 1px; background-color: #ecedef; position: absolute; top: 0; left: 0; }
.gnb_container .gnb_wrap > li > a{ display: block; position: relative; padding: 9px 15px 9px 48px; border-radius: 100px; font-size: 13px; font-size: 1.3rem; line-height: 20px; line-height: 2.0rem; font-weight: 600; color:#a2a2a7; transition: color .3s; white-space: nowrap; }
.gnb_container .gnb_wrap > li > a:hover{ color: #fff; background-color: var(--color_background_3); }
.gnb_container .gnb_wrap > li.has_child:hover > a{ color: #fff; }
.gnb_container .gnb_wrap > li.has_child.list_on > a{ color: #fff; }
.gnb_container .gnb_wrap > li.real > a{ color: #fff; }
.gnb_container .gnb_wrap > li.real:not(.has_child) > a{ background-color: var(--color_background_3); }
.gnb_container .gnb_wrap > li.real.has_child:not(.list_on) > a{ color: #fff; background-color: var(--color_background_3); }
.is_folded .gnb_container:not(:hover) .gnb_wrap > li.real.has_child > a{ background-color: var(--color_background_3); }

/* a::before : 아이콘 */
.gnb_container .gnb_wrap > li > a::before{ content: ''; position: absolute; top: 10px; left: 18px; display: inline-block; height: 18px; width: 18px; background-position: center center; background-size: contain; background-repeat: no-repeat; transition: .2s; }
.is_folded .gnb_container .gnb_wrap > li > a::before{ left: 11px; }
/*(아이콘 2023.01 ver)*/
.gnb_container .gnb_wrap > li > a.gnb_approval::before{background-image: url("../img/gnb_approval_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_approval::before{background-image: url("../img/retina/gnb_approval_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_approval::before{background-image: url("../img/retina/gnb_approval_icon_mac.png"); }
.gnb_container .gnb_wrap > li > a.gnb_sales::before{background-image: url("../img/gnb_sales_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_sales::before{background-image: url("../img/retina/gnb_sales_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_sales::before{background-image: url("../img/retina/gnb_sales_icon_mac.png"); }
.gnb_container .gnb_wrap > li > a.gnb_calculate::before{background-image: url("../img/gnb_calculate_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_calculate::before{background-image: url("../img/retina/gnb_calculate_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_calculate::before{background-image: url("../img/retina/gnb_calculate_icon_mac.png"); }
.gnb_container .gnb_wrap > li > a.gnb_review::before{background-image: url("../img/gnb_review_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_review::before{background-image: url("../img/retina/gnb_review_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_review::before{background-image: url("../img/retina/gnb_review_icon_mac.png"); }
.gnb_container .gnb_wrap > li > a.gnb_customer::before{background-image: url("../img/gnb_customer_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_customer::before{background-image: url("../img/retina/gnb_customer_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_customer::before{background-image: url("../img/retina/gnb_customer_icon_mac.png"); }
.gnb_container .gnb_wrap > li > a.gnb_menu_template::before{height: 13px; top: 16px; background-image: url("../img/gnb_menu_template_icon.png"); background-size: 17px 13px;}
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_menu_template::before{background-image: url("../img/retina/gnb_info_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_menu_template::before{background-image: url("../img/retina/gnb_info_icon_mac.png"); }
.gnb_container .gnb_wrap > li > a.gnb_block_template::before{background-image: url("../img/gnb_block_template_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_block_template::before{background-image: url("../img/retina/gnb_info_icon_mac.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_block_template::before{background-image: url("../img/retina/gnb_info_icon_mac.png"); }
/*(아이콘 2023.05 ver)*/
.gnb_container .gnb_wrap > li > a.gnb_page_template::before{background-image: url("../img/gnb_page_template_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_page_template::before{background-image: url("../img/gnb_page_template_icon.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_page_template::before{background-image: url("../img/gnb_page_template_icon.png"); }
.gnb_container .gnb_wrap > li > a.gnb_confirm::before{background-image: url("../img/gnb_confirm_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_confirm::before{background-image: url("../img/gnb_confirm_icon.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_confirm::before{background-image: url("../img/gnb_confirm_icon.png"); }
.gnb_container .gnb_wrap > li > a.gnb_invite::before{background-image: url("../img/gnb_invite_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_invite::before{background-image: url("../img/gnb_invite_icon.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_invite::before{background-image: url("../img/gnb_invite_icon.png"); }
.gnb_container .gnb_wrap > li > a.gnb_credit::before{background-image: url("../img/gnb_credit_icon.png"); }
[data-wv-os="Mac"] .gnb_container .gnb_wrap > li > a.gnb_credit::before{background-image: url("../img/gnb_credit_icon.png"); }
[data-wv-pc="mobile"] .gnb_container .gnb_wrap > li > a.gnb_credit::before{background-image: url("../img/gnb_credit_icon.png"); }
/*(아이콘 2024.04 ver)*/
.gnb_container .gnb_wrap > li > a.gnb_dashboard::before{ background-image: url("../img/gnb_dashboard_icon.png"); }
.gnb_container .gnb_wrap > li.real > a.gnb_dashboard::before{ background-image: url("../img/gnb_dashboard_icon_white.png"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_dashboard::before{ background-image: url("../img/gnb_dashboard_icon_white.png"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_dashboard::before{ background-image: url("../img/gnb_dashboard_icon_white.png"); }
.gnb_container .gnb_wrap > li > a.gnb_template::before{background-image: url("../img/gnb_template_icon.png"); }
.gnb_container .gnb_wrap > li.real > a.gnb_template::before{ background-image: url("../img/gnb_template_icon_white.png"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_template::before{ background-image: url("../img/gnb_template_icon_white.png"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_template::before{ background-image: url("../img/gnb_template_icon_white.png"); }
.gnb_container .gnb_wrap > li > a.gnb_reseller::before{background-image: url("../img/gnb_reseller_icon.png"); }
.gnb_container .gnb_wrap > li.real > a.gnb_reseller::before{ background-image: url("../img/gnb_reseller_icon_white.png"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_reseller::before{ background-image: url("../img/gnb_reseller_icon_white.png"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_reseller::before{ background-image: url("../img/gnb_reseller_icon_white.png"); }
.gnb_container .gnb_wrap > li > a.gnb_info::before{background-image: url("../img/gnb_info_icon.png"); }
.gnb_container .gnb_wrap > li.real > a.gnb_info::before{ background-image: url("../img/gnb_info_icon_white.png"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_info::before{ background-image: url("../img/gnb_info_icon_white.png"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_info::before{ background-image: url("../img/gnb_info_icon_white.png"); }
.gnb_container .gnb_wrap > li > a.gnb_site::before{background-image: url("../img/gnb_site_icon.png"); }
.gnb_container .gnb_wrap > li.real > a.gnb_site::before{ background-image: url("../img/gnb_site_icon_white.png"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_site::before{ background-image: url("../img/gnb_site_icon_white.png"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_site::before{ background-image: url("../img/gnb_site_icon_white.png"); }
.gnb_container .gnb_wrap > li > a.gnb_payment::before{background-image: url("../img/gnb_payment_icon.png"); }
.gnb_container .gnb_wrap > li.real > a.gnb_payment::before{ background-image: url("../img/gnb_payment_icon_white.png"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_payment::before{ background-image: url("../img/gnb_payment_icon_white.png"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_payment::before{ background-image: url("../img/gnb_payment_icon_white.png"); }
.gnb_container .gnb_wrap > li > a.gnb_all_comment::before{background-image: url("../img/gnb_all_comment_icon_a2a2a7.svg"); transform: scale(-1, 1); top: 11px; }
.gnb_container .gnb_wrap > li.real > a.gnb_all_comment::before{ background-image: url("../img/gnb_all_comment_icon_white.svg"); }
.gnb_container .gnb_wrap > li:hover > a.gnb_all_comment::before{ background-image: url("../img/gnb_all_comment_icon_white.svg"); }
.gnb_container .gnb_wrap > li.has_child.list_on > a.gnb_all_comment::before{ background-image: url("../img/gnb_all_comment_icon_white.svg"); }

/* a::after(has_child 한정) : 화살표 */
.gnb_container .gnb_wrap > li.has_child > a::after{ content: ''; opacity: 1; border-top: 4px solid #828291; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; top: 16px; right: 18px; transition: opacity .2s; }
.gnb_container .gnb_wrap > li.has_child.list_on > a::after{ transform: rotate(180deg); }
.gnb_container .gnb_wrap > li.has_child.real > a::after{ border-top-color: #fff; }
.gnb_container .gnb_wrap > li.has_child:hover > a::after{ border-top-color: #fff; }
.gnb_container .gnb_wrap > li.has_child.has_child.list_on > a::after{ border-top-color: #fff; }
.is_folded .gnb_container .gnb_wrap > li.has_child > a::after{ opacity: 0; }

.gnb_container .gnb_wrap > li > a > span{ margin-left: -5px; display: inline-block; position: relative; }
.is_folded .gnb_container .gnb_wrap > li > a > span { /*display: none;*/ opacity: 0; }


/* == 2depth == */
.gnb_container .gnb_wrap > li > ul{display: block; position: relative; width: 100%; height:0; box-sizing: border-box; overflow: hidden; }
.gnb_container .gnb_wrap > li.active > ul { height: auto; margin: 8px 0 27px 0; }
.gnb_container .gnb_wrap > li > ul > li{ position: relative; display: block; transition: .05s; margin-bottom: 2px; }
.gnb_container .gnb_wrap > li > ul > li > a{ display: block; position: relative; padding: 9px 15px 9px 48px; border-radius: 100px; font-size: 13px; font-size: 1.3rem; line-height: 20px; line-height: 2.0rem; font-weight: 600; color: #a2a2a7; transition: color .3s; white-space: nowrap; }
.gnb_container .gnb_wrap > li > ul > li > a:hover{ color: #fff; background-color: var(--color_background_3); }
.gnb_container .gnb_wrap > li > ul > li.real > a{ color: #fff; background-color: var(--color_background_3); }
.gnb_container .gnb_wrap > li > ul > li:hover > ul{display: block!important;}
/* (3depth 있을 때) */
.gnb_container .gnb_wrap > li > ul > li.has_child.active > a{ color: #fff; background-color: var(--color_background_3); }
.gnb_container .gnb_wrap > li > ul > li > ul.hidden-important{display: none !important;}


/* == 3depth == */
/*.gnb_container .gnb_wrap > li > ul > li > ul{overflow: hidden; position: absolute; width: 0; height: 0; top:calc(-50% - 18px); right: 0; padding-left:30px; padding-top: 26px; padding-bottom: 33px; box-sizing: border-box;*/
    /*transform: translateX(100%); background-color: #6738ff;}*/
/*.gnb_container .gnb_wrap > li > ul > li > ul > li{position: relative; padding-top: 5px; padding-bottom: 7px;}*/
/*.gnb_container .gnb_wrap > li > ul > li > ul > li > a{position: relative; display: block; font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color:#b587ff; transition: all 0.3s;}*/
/*.gnb_container .gnb_wrap > li > ul > li > ul > li:hover > a{color:#fff;}*/
/*.gnb_container .gnb_wrap > li > ul > li > ul > li.active > a{color:#fff;}*/


/* == 하단 로고 == */
/*.gnb_container .gnb_bottom_logo{ position: fixed; width: var(--gnb_width); height: 40px; bottom: 10px; left: 0; background-image: url("/weven_service/asset/img/zstudio_logo.png"); background-size: 130px; background-position: center center; background-repeat: no-repeat; }*/
/*.is_folded .gnb_container .gnb_bottom_logo{ width: 0; }*/
/*.is_folded .gnb_container:hover .gnb_bottom_logo{ width: 100%; }*/


@media all and (min-width: 992px){
    /* gnb */
    .gnb_container { width: var(--gnb_width); left: 0; }
    .is_folded .gnb_container { width: var(--gnb_fold_width); }
    .is_folded .gnb_container:hover { width: var(--gnb_width); }
    .is_folded .gnb_container .gnb_wrap > li > ul { display: none !important; }
    .is_folded .gnb_container .gnb_wrap > li > ul > li { opacity: 0;}
    .is_folded .gnb_container:hover .gnb_wrap > li.has_child::before, .is_folded .gnb_container:hover .gnb_wrap > li.has_child::after { opacity: 1; }
    .is_folded .gnb_container:hover .gnb_wrap > li > a > span { /*display: inline-block;*/ opacity: 1; }
    .is_folded .gnb_container:hover .gnb_wrap > li > ul { display: block !important; }
    .is_folded .gnb_container:hover .gnb_wrap > li > ul > li { opacity: 1; }

    .gnb_container .gnb_wrap > li:not(.has_child):not(.real){transition: background 0.15s;}
    .gnb_container .gnb_wrap > li:not(.has_child):not(.real) > a{transition: color 0.15s;}
    .gnb_container .gnb_wrap > li > ul > li:not(.active){transition: background 0.15s;}
    .gnb_container .gnb_wrap > li > ul > li:not(.active) > a{transition: color 0.15s;}
}

@media (min-width: 1440px) {

}