@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
:root {
    --top-height: 100px; /* 메뉴높이 */
    --menu-bg-h: 500px; /* 마우스오버 배경 높이 */
    --main-color3: #ececec;
	/* 메인&서브 좌우 패딩 */
	--top-padding:2%;
}

#top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transition: all 1s, background 0ms;
    z-index: 190;
    height: 60px;
}
@media (max-width: 767px) {
    #top {
        height: 50px;
        padding:0.5em 0;
    }
}
body.scrolled:not(.fullpage):not(.m-menu-on) #top,
body:not(.m-menu-on) .is-subpage #top,
body:not(.m-menu-on) #top.bg {
    background: #fff;
    transition-duration: 400ms;
}
#top.active{
    background: #fff;
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
#top.active .top-wrap .left .logo{
    background: url("../img/tna/logo.png") left center/contain no-repeat;
}
#top.active #menu .ul .li .a{
    color: #000;
}
#top.active .top-menu-btn div{
    background-color: #000;
}
#top.important{

}
#top:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    right: 0;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .6);
    z-index: -1;
}

.menu-on #top:before {
    height: var(--menu-bg-h);
    transition-duration: 400ms;
}

#top .top-wrap {
    position: relative;
    height: 100%;
    padding: 0 var(--top-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    transition-duration: 700ms;
}

#top .top-wrap .left {
    width: 150px;
    height: 42px;
}

#top .top-wrap .left .logo {
    display: block;
    height: 100%;
    background: url("../img/tna/w_logo.png") left center/contain no-repeat;
    transition-duration: 200ms;
}

body.scrolled:not(.fullpage):not(.m-menu-on) #top .top-wrap .left .logo,
body:not(.m-menu-on) .is-subpage #top .top-wrap .left .logo,
body:not(.m-menu-on).no-bg #top .top-wrap .left .logo {
    background-image: url("../img/tna/logo.png");
}

#top .top-wrap .right {
    position: relative;
    display: flex;
    align-items: center;
    transition-duration: 200ms;
}

#top .top-wrap .right section {
    position: relative;
    margin-right: 20px;
    padding: 20px 0;
}

#top .top-wrap .right section:hover {
    z-index: 3;
}

#top .top-wrap .right section span[class*="-btn"] {
    display: block;
    width: 20px;
    height: 20px;
    background: none no-repeat center/contain;
    filter: invert(92%) sepia(79%) saturate(2%) hue-rotate(128deg) brightness(106%) contrast(101%);
    cursor: pointer;
}

body.scrolled:not(.fullpage):not(.m-menu-on) #top .top-wrap .right section span[class*="-btn"],
body:not(.m-menu-on) .is-subpage #top .top-wrap .right section span[class*="-btn"],
body:not(.m-menu-on).no-bg #top .top-wrap .right section span[class*="-btn"] {
    filter: none;
}


#top .top-wrap .right .top-search .search-btn {
    background-image: url('../img/top-icon-search.png');
}

#top .top-wrap .right .langs .sub {
    width: 110px;
    text-align: left !important;
}

#top .top-wrap .right .langs .sub img {
    width: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

#top .top-wrap .right .langs .lang-btn {
    background-image: url('../img/top-icon-language.png');
}

#top .top-wrap .right .links .member-btn {
    background-image: url('../img/top-icon-login.png');
}

#top .top-wrap .right .sns .sns-btn {
    background-image: url('../img/top-icon-sns.png');
}


#top .top-wrap .right .sns .sub a {
    position: relative;
    text-align: left;
    transition: all 400ms, opacity 400ms var(--sns-delay);
    width: 110px;
    display: block;
    padding: 5px 0 5px 35px;
    z-index: 1;
}

#top .top-wrap .right .sns .sub a:before,
#top .top-wrap .right .sns .sub a:after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    border-radius: 99px;
}

#top .top-wrap .right .sns .sub a:before {
    z-index: -1;
}

#top .top-wrap .right .sns .sub a:after {
    background: none no-repeat center/22px;
    opacity: .8;
    filter: brightness(0);
}


#top .top-wrap .right .sns .sub a.kakao:after {
    background-image: url('../img/sns_icon_kakao_gray.png');
}

#top .top-wrap .right .sns .sub a.instagram:after {
    background-image: url('../img/sns_icon_instagram_gray.png');
}

#top .top-wrap .right .sns .sub a.naver:after {
    background-image: url('../img/sns_icon_naver_gray.png');
}

#top .top-wrap .right .sns .sub a.facebook:after {
    background-image: url('../img/sns_icon_facebook_gray.png');
}

#top .top-wrap .right .sns .sub a.youtube:after {
    background-image: url('../img/sns_icon_youtube_gray.png');
}

#top .top-wrap .right .sns .sub a.twiter:after {
    background-image: url('../img/sns_icon_twiter_gray.png');
}

#top .top-wrap .right .sns .sub a:hover {
    color: #333;
}

#top .top-wrap .right .sns .sub a.kakao:hover:before {
    background: #ffe800;
}

#top .top-wrap .right .sns .sub a.instagram:hover:before {
    background: linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b);
}

#top .top-wrap .right .sns .sub a.naver:hover:before {
    background: #06be34;
}

#top .top-wrap .right .sns .sub a.facebook:hover:before {
    background: #435e99;
}

#top .top-wrap .right .sns .sub a.youtube:hover:before {
    background: #d4262c;
}

#top .top-wrap .right .sns .sub a.twiter:hover:before {
    background: #27a9e0;
}

#top .top-wrap .right .sns .sub a:hover:after {
    opacity: 1;
}

#top .top-wrap .right .sns .sub a:not(.kakao):hover:after {
    filter: brightness(0) invert(1);
}


#top .top-wrap .right .sns:hover .sub a {
    opacity: 1;
}

#top .top-wrap .right .sns:hover .sub a:nth-child(1) {
    --sns-delay: 100ms;
}

#top .top-wrap .right .sns:hover .sub a:nth-child(2) {
    --sns-delay: 200ms;
}

#top .top-wrap .right .sns:hover .sub a:nth-child(3) {
    --sns-delay: 300ms;
}

#top .top-wrap .right .sns:hover .sub a:nth-child(4) {
    --sns-delay: 400ms;
}

#top .top-wrap .right .sns:hover .sub a:nth-child(5) {
    --sns-delay: 500ms;
}

#top .top-wrap .right .sns:hover .sub a:nth-child(6) {
    --sns-delay: 600ms;
}


#top .top-wrap .top-search-box {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

#top .top-wrap .top-search-box form {
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    padding: 7px 8px 8px;
    width: 300px;
}

#top .top-wrap .top-search-box form .searchbox {
    background: transparent;
    border: 0;
    flex: 1;
}

#top .top-wrap .top-search-box form .searchbox::placeholder {
    color: #ddd;
}

#top .top-wrap .top-search-box form .searchbox:focus {
    outline: none;
}

#top .top-wrap .top-search-box form button {
    background: transparent;
    border: 0;
    color: var(--main-color2);
    flex: 0 0 25px;
    margin-left: 5px;
}

#top .top-wrap .top-search-box form button:focus {
    outline: none;
}

#top .top-wrap .top-search-box form .x-close {
    color: #444;
    font-size: 1.8rem;
    margin-left: 5px;
    cursor: pointer;
    display: flex;
}


#top .top-wrap .right section .sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 25px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid transparent;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transition-duration: 300ms;
}

#top .top-wrap .right section:hover .sub,
#top .top-wrap .right section .sub:hover {
    max-height: 300px;
    padding: 15px 25px;
    border-color: #ddd;
    opacity: 1;
    visibility: visible;
    transition-duration: 600ms;
}

#top .top-wrap .right section .sub:before {
    content: "";
    position: absolute;
    bottom: calc(100% - 10px);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    border-radius: 5px 0 0 0;
    background: #fff;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

#top .top-wrap .right section .sub a {
    display: block;
    padding: 2.5px 0;
    text-align: center;
    opacity: 0;
    font-size: .875rem;
    font-weight: 500;
    transition-duration: 400ms;
}

#top .top-wrap .right section:hover .sub a {
    opacity: 1;
}


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn {
    width: 25px;
    height: 26px;
    transition-duration: 300ms;
    z-index: 2;
    cursor: pointer;
}

#top .top-menu-btn div {
    position: relative;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 99px;
}

#top .top-menu-btn div:before,
#top .top-menu-btn div:after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
}

#top .top-menu-btn div:before {
    left: 10px;
}

#top .top-menu-btn div:after {
    left: 20px;
}

#top .top-menu-btn div:nth-child(2) {
    margin: 5px 0;
}

body.scrolled:not(.fullpage):not(.m-menu-on) #top .top-menu-btn div,
body:not(.m-menu-on) .is-subpage #top .top-menu-btn div,
body:not(.m-menu-on).no-bg #top .top-menu-btn div {
    background: #333;
}


@media (max-width: 1024px) {
    :root {
        --top-height: 70px;
    }
}

@media (max-width: 767px) {
    :root {
        --top-height: 60px;
    }

    #top .top-wrap .left {
        height: 36px;
    }

    #top .top-wrap .right section {
        margin-right: 10px;
    }

    #top .top-wrap .right .sns {
        display: none;
    }


    #top .top-wrap .right section .sub {
        padding: 0 15px;
    }

    #top .top-wrap .right section:hover .sub,
    #top .top-wrap .right section .sub:hover {
        padding: 10px 15px;
    }

    #top .top-wrap .right .top-search .sub {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        transform: translateX(0);
        padding: 10px 15px;
        z-index: 999;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        transition-duration: 600ms;
    }

    #top .top-wrap .right .top-search .sub:before {
        display: none;
    }

    #top .top-wrap .right .top-search:hover .sub,
    #top .top-wrap .right .top-search .sub:hover {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
    }

    #top .top-wrap .top-search-box {
        opacity: 0;
    }

    #top .top-wrap .top-search-box form {
        width: 100%;
    }

    .on-searchbox #top .top-wrap .right .top-search .sub {
        max-height: 200px;
        opacity: 1;
        visibility: visible;
    }

    .on-searchbox #top .top-wrap .top-search-box {
        opacity: 1;
        transition-duration: 300ms;
    }


    #top .top-menu-btn {
        margin-left: 10px;
    }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu {
    height: 100%;
}

body.m-menu-on #menu {
    display: none;
}

#menu .ul {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 10;
}

#menu .ul .li {
    position: relative;
    padding: 0 2em;
    z-index: 1;
    transition-duration: 300ms;
}

#menu .ul .li:hover {
    z-index: 9;
}

#menu .ul .li:before,
#menu .ul .li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: -1;
}

body.menu-on #menu .ul .li {
    padding: 0 3rem;
}

body.menu-on #menu .ul .li:before {
    height: var(--menu-bg-h);
}

#menu .ul .li:after {
    backdrop-filter: blur(10px);
    background: rgba(115, 115, 115, .5);
    height: 0;
    transition: all 400ms 0s, height 400ms 100ms;
}

/*#menu:hover .ul .li:after {*/
/*    height: var(--menu-bg-h);*/
/*    background: var(--main-color3);*/
/*}*/

#menu .ul .li:hover {
    z-index: 2;
}

#menu .ul .li:hover:after {
    opacity: 1;
}

#menu .ul .li .a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.125rem;
    color: #fff;
    white-space: nowrap;
}

#menu .ul .li .a:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    height: 2px;
    background: var(--bs-primary);
    width: 0;
    transform: translateX(-50%);
    transition-duration: 400ms;
}

body.menu-on #menu .ul .li:hover .a {
    color: var(--main-color1);
}

body.menu-on #menu .ul .li:hover .a:before {
    width: calc(100% + 30px);
}

body.scrolled:not(.fullpage):not(.m-menu-on) #menu .ul .li:not(:hover) .a,
body:not(.m-menu-on) .is-subpage #menu .ul .li:not(:hover) .a,
body:not(.m-menu-on).no-bg #menu .ul .li:not(:hover) .a {
    color: #111;
}


#menu .sub-wrap {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

#menu .sub-wrap li {
    position: relative;
    transition-duration: 400ms;
    transition-property: all;
}

#menu .sub-wrap .sub-a {
    display: block;
    white-space: nowrap;
}

#menu .sub-wrap .sub-a span {
    position: relative;
    display: inline-block;
}

#menu .sub-wrap .sub-a span:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 0;
    height: 2px;
    background: var(--bs-primary);
    transition-duration: 300ms;
}

#menu .sub-wrap li:hover > .sub-a span:before,
#menu .sub-wrap li.on > .sub-a span:before {
    width: 100%;
}

#menu .depth2 {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
}

body.menu-on #menu .depth2 {
    opacity: 1;
    visibility: visible;
    transition-delay: 300ms;
}

#menu .depth2 > li > .sub-a {

    padding: 10px;
    text-align: center;
    font-weight: 300;
}

#menu .depth2 > li:hover > .sub-a,
#menu .depth2 > li.on > .sub-a {
    font-weight: 600;
}

#menu .depth3 {
    top: 0;
    left: calc(100% - 5px);
    min-width: 120px;
    background: #fff;
    border: 1px solid var(--main-color3);
    padding: 15px;
    z-index: 9;
}

#menu .depth3:before {
    content: "";
    position: absolute;
    top: 12px;
    right: 100%;
    border: 10px solid transparent;
    border-right-color: #fff;
}

#menu .depth2 li:hover .depth3 {
    left: 100%;
    opacity: 1;
    visibility: visible;
}

#menu .depth3 .sub-a {
    padding: 5px;
}

#menu .depth3 li:hover .sub-a {
    color: var(--main-color3);
}

#menu .depth3 .sub-a span:before {
    height: 1px;
    background: var(--main-color3);
}


body.scrolled:not(.fullpage):not(.m-menu-on) #menu .li:not(:hover) .depth2 > li > .sub-a,
.no-bg #menu .li:not(:hover) .depth2 > li > .sub-a,
body.fullpage .is-subpage #menu .li:not(:hover) .depth2 > li > .sub-a {
    color: #333;
}


@media (max-width: 1400px) {
    #menu {
        display: none;
    }
}
body.m-menu-on #top .top-wrap .left .logo{
    background: url(../img/tna/logo.png) left center / contain no-repeat;
}
body.m-menu-on #top .top-menu-btn div{
    background:#000;
}