/* add 2022.05.24 jj */
.ml-0{
    margin-left: 0 !important;
}
.mr-0{
    margin-right: 0 !important;
}
.sticky-top{
    position: sticky !important;
    top:0;
    z-index: 30 !important;
}
.top-nav{
    --def-text-color: #000;
    --container-min-width: 1048px;
    position: sticky;
    top:0;
    z-index: 30;
    transition: top 0.3s ease-in-out;
}
.top-nav.visible-hide{
    opacity: 0;
    pointer-events: none;
}

.top-utils{
    display:flex;
    align-items:center;
    border-bottom: 1px solid #d5d9e2;
    min-width: 1048px;
    height: 44px;
    background: #fff;
}
.top-utils .top-util-nav{
    display: flex;
    justify-content: flex-end;
    width: 1048px;
    height: inherit;
    margin: 0 auto;
}

.top-utils .top-nav-list{
    display: flex;
    align-items: center;
    height: inherit;
}
.top-utils .nav-item{
    display: flex;
    align-items: center;
    height: inherit;
    margin-right: 12px;
}
.top-utils .nav-item .nav-link-text{
    font-size: 12px;
    color: var(--def-text-color);
}
.top-utils .nav-item:not(.none-vline):not(:first-child):before{
    display: inline-block;
    width:1px; height: 24px;
    background-color: #d5d9e2;
    margin-right: 12px;
    vertical-align: middle;
    content:'';
}
.top-utils .nav-item.ml-0:before{
    margin-right: 0 !important;
}
.top-utils .nav-item-email + .nav-item-intersect:before{
    display: none !important;
}
.top-utils .nav-item:last-child{
    margin-right: 0;
}

.top-utils .nav-link{
    padding: 4px 0;
    line-height: 1;
    color: var(--def-text-color);
    text-decoration:none;
}

.top-utils .nav-link.box-link{
    padding: 3px 6px;
    background: #fff;
    border: 1px solid #00CE7C;
}
.top-utils .nav-link.box-link:hover{
    background: #ECFFF7;
}
.top-utils .nav-link.box-link .nav-link-text{
    position: relative;
    top: 1px;
    font-size: 10px;
    color: #00CE7C;
    line-height: 1;
    vertical-align: top;
}
.top-utils .nav-link.box-link .icon-intersect{
    width: 14px; height: 14px;
    vertical-align: top;
}
.top-utils .nav-link img{
    margin-right: 4px;
    width: 20px; height: auto;
    vertical-align: middle;
}
.top-utils .nav-link .nav-link-text{
    vertical-align: middle;
}
.custom-dropdown{
    --drop-border-color: #D5D9E2;
    --hover-color: #00ce7c;
    position: relative;
    height: 100%;
    background-color: transparent;
}
.custom-dropdown .btn-dropdown{
    display: block;
    width: 100%;
    padding: 0 12px;
    height: inherit;
    font-size: 0;
}
.custom-dropdown button[type=button]{
    height: inherit;
    background: transparent;
    font-weight: normal;
    box-shadow: none !important;
}
.custom-dropdown button[type=button]:hover,
.custom-dropdown button[type=button]:focus{
    background: transparent;
}
.custom-dropdown .btn-dropdown:before,
.custom-dropdown .btn-dropdown:after{
    background: no-repeat center center / contain;
    content:'';
    vertical-align: middle;
}
.custom-dropdown .btn-dropdown .nav-link-text{
    font-size: 12px;
}
.custom-dropdown .btn-dropdown *{
    vertical-align: middle;
}
.custom-dropdown .dropdown-menu{
    display: none;
    position: absolute;
    top: 44px;
    left:50%;
    z-index: 100;
    background: white;
    border: 1px solid var(--drop-border-color);
    padding: 4px 0 7px;
    box-sizing: border-box;
    transform: translateX(-50%)
}
.custom-dropdown .dropdown-menu:before{
    display: block;
    position: absolute; left: calc(50% - 5px); top:-4px;
    width: 10px; height: 10px;
    background: white;
    transform: rotate(45deg);
    box-shadow: -1px -1px  var(--drop-border-color);
    content:'';
}
.custom-dropdown .dropdown-menu .menu-item{

}
.custom-dropdown .dropdown-menu .menu-link{
    display: block;
    width: 100%;
    padding: 4px 15px 3px;
    font-size: 12px;
    color: var(--def-text-color);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}
.custom-dropdown .dropdown-menu .menu-link:hover{
    color: var(--hover-color);
}

.top-utils .select-lang{
    width: 90px;
}
.top-utils .select-lang .btn-dropdown:before,
.top-utils .select-lang .btn-dropdown:after{
    display: inline-block;
}

.top-utils .select-lang .btn-dropdown:before{
    width: 20px; height: 20px;
    margin-right: 4px;
    background-image: url('./images/img_mul_language.png');
}
.top-utils .select-lang .btn-dropdown:after{
    width: 6px; height: 6px;
    margin-left: 4px;
    background-image: url('./images/img_down_arrow.png');
}
.top-utils .select-lang:before,
.top-utils .select-lang:after{
    position: absolute; top:0;
    display: inline-block;
    width:1px; height: 100%;
    background-color: #d5d9e2;
    content:'';
}
.top-utils .select-lang:before{
    left:0;
}
.top-utils .select-lang:after{
    right:0;
}

.top-utils .manager-box .btn-dropdown:before{
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 4px;
    background-image: url('./images/img_setting.png');
}
.top-utils .manager-box .dropdown-menu:before{

}

.top-utils .manager-box .dropdown-menu.en{
    width:209px;
    left: calc(-50% - 12px);
}

.header{
    height:57px;
}

.header__inner{
    position: relative; left:0; right:0; top:0;
    z-index: 19;
    height: inherit;
    padding: 0 12px;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 1px rgba(0,0,0, 0.1);
    backdrop-filter: blur(4px);
    transform: translateY(0);
    transition: translateY 1s ease-in-out;
}
.header__inner-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--container-min-width);
    height: 100%;
    margin: 0 auto;
}
.header__inner .site-logo,
.header__inner .client-logo{
    display: inline-block;
    max-width: 190px;
    margin-right: 8px;
    vertical-align: middle;
}
.header__inner .site-logo img,
.header__inner .client-logo img{
    width: 100%;
    max-height: 26px;
}


.gnb{
    --gnb-font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
}
.gnb .custom-dropdown{

}
.gnb .nav-link,
.gnb .custom-dropdown .btn-dropdown{
    display: block;
    width: auto;
    height: auto;
    padding: 7px 15px 23px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    color: var(--def-text-color);
}
.gnb .nav-link-text,
.gnb .custom-dropdown .btn-dropdown .nav-link-text{
    font-size: var(--gnb-font-size);
    font-weight: 500;
}
.gnb .custom-dropdown .btn-dropdown:hover,
.gnb .nav-link:hover{
    color: #00ce7c;
}

.active {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 2px solid #00ce7c;
    box-sizing: border-box;
}

.customer-box .dropdown-menu{
    top: 43px;
}

.customer-box .dropdown-menu .menu-link{
    font-size: var(--gnb-font-size);
    line-height: 1.4;
}

.on{
    color: #00ce7c !important
}