@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
:root {
    --top-height:100px; /* 메뉴높이 */
}

#top { position: fixed; left:0; right:0; top:0; transition-duration:1s; z-index: 190; height:var(--top-height); }

.menu-on #top,
.scrolled:not(.fullpage) #theme_wrapper:not(.is-subpage) #top { background:#fff; box-shadow:0 0 5px rgba(0,0,0,.2); transition-duration:400ms; }
.is-subpage #top { position:absolute; }

#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:200px; height:50px; }
#top .top-wrap .left .logo { display:block; height:100%; background: url("../img/logo-white.png") left center/contain no-repeat; transition-duration: 200ms; }

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

#top .top-wrap .right { position:relative; display: flex; align-items: center; transition-duration:200ms; z-index:99; }
#top .top-wrap .right section { position: relative; margin-right: 30px; 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(10) brightness(10); cursor:pointer; }

.menu-on #top .top-wrap .right section span[class*="-btn"],
.scrolled:not(.fullpage) #theme_wrapper:not(.is-subpage) #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 .top-search .sub { left:calc(50% - var(--top-padding)); }
#top .top-wrap .right .langs .lang-btn { background-image:url('../img/top-icon-language.png'); }
#top .top-wrap .right .langs .sub { text-align:left !important; }
#top .top-wrap .right .langs .sub img { width:20px; border:1px solid #ddd; border-radius:3px; }
#top .top-wrap .right .links .member-btn { background-image:url('../img/top-icon-login.png'); }


#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 .top-search .sub { left:calc(50% - var(--top-padding)); }
#top .top-wrap .right .langs .sub { top:5px; padding:0 15px; z-index:-1; }

#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 .langs:hover .lang-btn { filter:none; }
#top .top-wrap .right .langs:hover .sub,
#top .top-wrap .right .langs .sub:hover { padding:40px 15px 10px; }

#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 .top-search .sub:before { left:calc(50% + var(--top-padding)); }
#top .top-wrap .right .langs .sub:before { display:none; }

#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; }

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


@media (max-width: 1400px) {
	#top .top-wrap .left { width:150px; }
	#top .top-wrap .right section { margin-right:10px; }
}

@media (max-width: 1200px) {
    :root {
        --top-height:70px;
    }
	#top .top-wrap .left { width:120px; }
}

@media (max-width: 1024px) {
	.menu-on #top { background:none; }
    .scrolled:not(.fullpage) #theme_wrapper:not(.is-subpage) #top { top:calc(-1 * var(--top-height)); }
    .scroll-up #top { top:0; }

    .is-index #top .top-wrap .left .logo { background-image: url("../img/logo.png"); }
	.menu-on .is-subpage #top .top-wrap .left .logo { background-image: url("../img/logo-white.png");  }

    .is-index #top .top-wrap .right section span[class*="-btn"] { filter: none; }
	.menu-on .is-subpage #top .top-wrap .right section span[class*="-btn"] { filter:invert(10) brightness(10); }

    .is-index #top .top-menu-btn div { background:#333; }
	.menu-on .is-subpage #top .top-menu-btn div { background:#fff; }
}

@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 { display: flex; align-items:center; justify-content: center; flex:1; max-width:1300px; padding:0 3em; }
.m-menu-on #menu { opacity:0; visibility: hidden; transition-duration: 0ms; transition-delay: 0ms; }

#menu .nav { display:none; }
#menu .swiper { position:static; margin:0; overflow:visible; flex:1; width:100%; height:100%; z-index:10; }
#menu .swiper .swiper-wrapper { position:static; justify-content: center; transform:none; }
#menu .swiper .li { position:static; flex:1 0 auto; width:auto; max-width:140px; transform: none; }
#menu .swiper .li .a { position:relative; display:flex; justify-content:center; align-items:center; height:var(--top-height); font-size: 1.125rem; color:#fff; }
#menu .swiper .li .a span { position:relative; display:inline-block; }

#menu .swiper .li .a:before,
#menu .swiper .li .a span:before { content: ""; position:absolute; transition-duration: 400ms; width:0; }

#menu .swiper .li .a:before { left:50%; bottom:0; transform:translateX(-50%); height:7px; background:var(--main-color1); }
#menu .swiper .li .a span:before { left:0; top:0; transform:translate(-50%,-50%); height:0; border-radius: 99px; background:rgba(var(--main-color1-rgb), .3); }

.menu-on #menu .swiper .li .a,
.scrolled:not(.fullpage) #theme_wrapper:not(.is-subpage) #top #menu .swiper .li .a,
.no-bg #menu .swiper .li .a { color:#111; }

#menu .swiper .li:hover .a { color:var(--main-color1); }
#menu .swiper .li:hover .a:before { width:100%; }
#menu .swiper .li:hover .a span:before { width:30px; height:30px; }

#menu .sub-wrap { position: absolute; top:100%; left:0; right:0; width:100%; opacity:0; visibility:hidden; height:0; z-index:1; transition-duration:0ms; }
#menu .sub-wrap:before,
#menu .sub-wrap:after { content:""; position:absolute; left:50%; top:0; bottom:0; width:100vw; transform:translateX(-50%); z-index:-1; }
#menu .sub-wrap:before { background:#fff; }
#menu .sub-wrap:after { opacity:.05; }
#menu .li:hover .sub-wrap { opacity:1; visibility:visible; height:auto; min-height:300px; padding:50px 0; z-index:9; transition-duration:400ms; }

#menu .sub-wrap .c { display:flex; align-items:flex-start; width:100%; }

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

#menu .sub-wrap .tit { position:relative; width:20%; min-width:180px; font-size:1.6rem; font-weight:600; line-height:55px; opacity:0; transition-duration:600ms; }
#menu .sub-wrap .tit:before { content:""; position:absolute; left:0; top:100%; width:0; height:3px; border-radius: 3px; background:#222; transition-duration:600ms; }
#menu .sub-wrap .tit span { position:relative; }
#menu .sub-wrap .tit span:before,
#menu .sub-wrap .tit span:after { content: ""; position: absolute; right:0; top:0; border-radius: 99px; width:0; height:0; transition-duration:600ms; }
#menu .sub-wrap .tit span:before { transform: translate(200%, -100%); }
#menu .sub-wrap .tit span:after { transform: translate(100%, -250%); }

#menu .li:hover .sub-wrap .tit { opacity:1; }
#menu .li:hover .sub-wrap .tit:before { width:30px; margin-top:10px; }
#menu .li:hover .sub-wrap .tit span:before { width:14px; height:14px; background:var(--main-color1); }
#menu .li:hover .sub-wrap .tit span:after { width:10px; height:10px; background:var(--main-color3); transition-delay: 300ms; }


#menu .depth2 ul { width:80%; display:flex; flex-wrap: wrap; margin:-10px; }
#menu .depth2 li { width:calc(25% - 30px); margin:10px; transition-duration: 600ms; }
#menu .depth2 li .sub-a { position:relative; display:flex; align-items:center; line-height:53px; z-index:1; }
#menu .depth2 li .sub-a:before,
#menu .depth2 li .sub-a:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-2; }
#menu .depth2 li .sub-a:before { background:#ddd; }
#menu .depth2 li .sub-a:after { width:0; background:linear-gradient(25deg, var(--main-color1), var(--main-color3)) }
#menu .depth2 li .sub-a:hover:after { transition-duration:400ms; width:100%; }
#menu .depth2 li .sub-a span { position:relative; display:block; width:100%; color:#222; padding: 0 40px 0 20px; font-size:1.0rem; margin:1px; z-index:1; overflow:hidden; text-overflow: ellipsis; }
#menu .depth2 li .sub-a:hover span { transition-delay:300ms; transition-duration: 400ms; color:#fff; }
#menu .depth2 li .sub-a span:before,
#menu .depth2 li .sub-a span:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; }
#menu .depth2 li .sub-a span:before { background:#fff; }
#menu .depth2 li .sub-a span:after { opacity:.05; }
#menu .depth2 li .sub-a:hover span:before,
#menu .depth2 li .sub-a:hover span:after { background-color:transparent !important; transition-delay:300ms; transition-duration: 400ms; }
#menu .depth2 li .sub-a span i { position:absolute; right:20px; top:50%; transform:translateY(-50%); }





@media (max-width: 1200px) {
	#menu .swiper .li .a { font-size:1rem; }
}

@media (max-width: 1024px) {
	#menu { position:absolute; left:0; top:100%; right:0; max-width:none; padding:0; background:rgba(120,120,120,.8); transition:all 300ms 0ms; }

    #menu .nav { display:block; color:#fff; margin:0 10px; cursor:pointer; }
	#menu .nav.swiper-button-disabled { opacity:.5; }

	#menu .swiper { width:auto; overflow:hidden; height:40px; }
    #menu .swiper .swiper-wrapper { justify-content: normal; }
	#menu .swiper .li .a { height:100%; padding:0 10px; transition:color 0ms 0ms; }

    .menu-on #menu .swiper .li .a,
    .scrolled:not(.fullpage) #theme_wrapper:not(.is-subpage) #top #menu .swiper .li .a,
    .no-bg #menu .swiper .li .a { color:#fff; }

	#menu .sub-wrap { display:none; }
}


@media (max-width: 767px) {
	#menu .swiper .li { margin:0 5px; }
}