@charset "UTF-8";

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

#top { left:0; position: fixed; right:0; top:0; z-index:100; height:var(--top-height); border-bottom:1px solid rgba(255,255,255,.1); transform: skew(-0.05deg); /*글씨깨짐방지*/ }
body.scrolled #top { border-color:#eee; background:#fff; }

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

#top .top-wrap .left { width:200px; height:50px; }
#top .top-wrap .logo { display:block; height:100%; background: url("../img/logo-white.png") left center/contain no-repeat; }

body.scrolled #top .top-wrap .logo{ background-image:url("../img/logo.png"); }




#top .top-wrap .top-search { position:relative; padding:20px 0; }
#top .top-wrap .top-search .search-btn { display:block; width:20px; height:20px; background:url('../img/top-icon-search.png') no-repeat center/contain; cursor:pointer; filter:invert(1) brightness(100); }
.scrolled:not(.fullpage) #top .top-wrap .top-search .search-btn ,
.no-bg #top .top-wrap .top-search .search-btn  { filter:none; }

#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 .top-search .sub { position:absolute; top:100%; right:-30px; 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 .top-search:hover .sub,
#top .top-wrap .top-search .sub:hover { max-height:300px; padding:15px 25px; border-color:#ddd; opacity:1; visibility:visible; transition-duration:600ms; }

#top .top-wrap .top-search .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); right:30px; transform: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 { position:fixed; top:0; right:0; width:var(--top-right-w); height:100vh; padding:120px 10px 80px; display:flex; flex-direction:column; align-items:center; justify-content: space-between; z-index:9; }
#top .top-wrap .right:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.2); z-index:1; }

body.scrolled #top .top-wrap .right:before,
.is-subpage #top .top-wrap .right:before { background:rgba(255,255,255,.9); border-left:1px solid #ddd; }

#top .top-wrap .right section { position:relative; z-index:2; }

#top .top-wrap .right .langs {  }
#top .top-wrap .right .langs .item li { margin-top:15px; }
#top .top-wrap .right .langs .item a { display:block; color:#999; transform:rotate(90deg); }
#top .top-wrap .right .langs .item a.on { color:#fff; }


body.scrolled #top .top-wrap .right .langs .item a.on,
.is-subpage #top .top-wrap .right .langs .item a.on { color:#333; }
.is-subpage #top .top-wrap .right .langs .item a.on { color:#fff; }

#top .top-wrap .right .links { }
#top .top-wrap .right .links a { position:relative; display:block; font-size:.875rem; padding:20px 5px 5px; white-space: nowrap; margin-top:10px; overflow:hidden; background:none no-repeat center/35px; transition-duration:300ms; filter:invert(1) brightness(100); }
#top .top-wrap .right .links a:hover { background-position:400% center; }
#top .top-wrap .right .links a:before { content:""; position:absolute; left:0; right:0; bottom:0; width:0; height:1px; background:#fff; transition-duration:300ms; }
#top .top-wrap .right .links a:hover:before { width:100%; }
#top .top-wrap .right .links a span { display:block; text-align:center; color:#eee; transform:translateY(30px); transition-duration:300ms; }
#top .top-wrap .right .links a:hover span { transform:translateY(0); }

#top .top-wrap .right .links a.link1 { background-image:url('../img/top-links-icon1.png'); }
#top .top-wrap .right .links a.link2 { background-image:url('../img/top-links-icon2.png'); }
#top .top-wrap .right .links a.logout { background-image:url('../img/top-links-login.png'); }
#top .top-wrap .right .links a.login { background-image:url('../img/top-links-login.png'); }


body.scrolled #top .top-wrap .right .links a:before, .is-subpage  #top .top-wrap .right .links a:before { background:#666; }
body.scrolled #top .top-wrap .right .links a span, .is-subpage #top .top-wrap .right .links a span { color:#333; }


body.scrolled #top .top-wrap .right .links a,
.is-subpage #top .top-wrap .right .links a { filter:none; }





/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { position:fixed; right:25px; top:calc(50% - 25px); height:50px; width:30px; transition-duration: 300ms; z-index:19; cursor: pointer ;}
#top .top-menu-btn div { background: #fff; border-radius: 99px; height:3px; left:50%; position: absolute; top:50%; transform: translate(-50%, -50%); transition: all 0.5s; width:100%; }
#top .top-menu-btn div:nth-child(1) { margin-top: -8px; }
#top .top-menu-btn div:nth-child(3) { margin-top: 8px; }

body.scrolled #top .top-menu-btn div,
.is-subpage #top .top-menu-btn div { background:#111; }


body.m-menu-on #top .top-menu-btn div { margin-top: 0; }
body.m-menu-on #top .top-menu-btn div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.3); }
body.m-menu-on #top .top-menu-btn div:nth-child(2) { opacity: 0; }
body.m-menu-on #top .top-menu-btn div:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.3); }



@media (max-width: 1600px) {
	#top .top-wrap { margin-right:calc(20px + var(--top-right-w)); }
}

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

    #top .top-wrap { margin-right:auto; }
	#top .top-wrap .left { width:150px; height:30px; }
	#top .top-wrap .top-search { display:none; }

	#top .top-wrap .right { position:absolute; right:var(--top-right-w); bottom:auto; width:auto; height:100%; padding:0; flex-direction:row;  }
	#top .top-wrap .right:before,
    #top .top-wrap .right .links { display:none; }

	#top .top-wrap .right .langs .item { display:flex; }
	#top .top-wrap .right .langs .item li { margin:0 5px; }
	#top .top-wrap .right .langs .item a { transform:rotate(0deg); }


	#top .top-menu-btn { position:absolute; width:22px; right:var(--c-padding); }
	#top .top-menu-btn div { height:2px; }
	#top .top-menu-btn div:nth-child(1) { margin-top: -6px; }
	#top .top-menu-btn div:nth-child(3) { margin-top: 6px; }
}


/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { transition-duration: 200ms; height:100%; flex:1; }
#menu .ul { position:relative; width:100%; padding-left:15%; display: flex; height:100%; z-index:10; }
#menu .ul:after { display:none; }
#menu .ul .li { position: relative; height:100%; flex:1; display:flex; align-items:center; justify-content: center; }
#menu .ul .li .a { position:relative; font-size:1.15rem; font-weight:500; z-index:2; color:#fff; padding:10px; }
body.scrolled #menu .ul .li .a { color:#333; }
#menu .ul .li .a:before { content:""; position:absolute; top:100%; left:0; right:0; height:5px; border-radius:10px; display:none; background:var(--main-color1); }
#menu .ul .li:hover .a:before { display:block; }


#menu .depth2 { position:absolute; left:0; right:0; top:100%; transition-duration:300ms; padding:0 10px; max-height:0; overflow: hidden; background:var(--main-color1); }
#menu .ul .li:hover .depth2 { padding:20px 10px; box-shadow:5px 5px 10px rgba(0,0,0,.2); max-height:500px; }
#menu .depth2 .sub-wrap li { position:relative; transition-duration:400ms; }
#menu .depth2 .sub-a { display:block; padding:10px 20px; color:rgba(255,255,255,1); font-weight:400; line-height:1.3; }
#menu .depth2 .sub-a .new { display:inline-block; margin-left:5px; font-size:.75rem; animation:twinkle 1s ease-in-out infinite; color:var(--main-color2); transition-duration:300ms; }

@keyframes twinkle {
	0%   { color:var(--main-color2); }
	50% { opacity:.1; }
	100% { color:var(--main-color2); }
}

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

#menu .depth3 { position:absolute; top:0; left:100%; min-width:100%; padding:10px 0; background:#fff; border:1px solid #666; box-shadow:5px 5px 10px rgba(0,0,0,.2); display:none; }
#menu .depth3 .sub-a { color:#aaa; padding:10px 20px; font-size:1rem; line-height:1.3; }



@media (max-width: 1400px) {
	#menu .ul { padding-left:8%; }
}

@media (max-width: 1024px) {
	#menu { display:none; }
}