@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { left: 0; position: fixed; right: 0; top: 0; z-index: 10; background:#fff; height:195px; transition-duration:300ms; }
body.scrolled #top { box-shadow:5px 0 10px #aaa; top:-135px; }

#top .top-wrap { position:relative; top:0; padding:0 100px; margin:40px 0 30px; display:flex; justify-content: space-between; align-items:center; }
#top .top-wrap .sns p { font-size:.75rem; color:#aaa; margin-bottom:5px; padding-left:5px; font-family: 'NanumSquareNeo-Variable'; }
#top .top-wrap .sns a { position:relative; display:inline-block; width:30px; height:30px; border-radius:99px; background:none no-repeat center/22px; opacity:.5; overflow:hidden; }
#top .top-wrap .sns a:hover { opacity:1; background-color:#333; }
#top .top-wrap .sns .kakao { background-image:url('../img/sns_icon_kakao_gray.png'); }
#top .top-wrap .sns .kakao:hover { background-color:#ffe800; }
#top .top-wrap .sns .instagram { background-image:url('../img/sns_icon_instagram_gray.png'); transition-duration:0ms; }
#top .top-wrap .sns .instagram:hover { background:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b); }
#top .top-wrap .sns .instagram:hover:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:url('../img/sns_icon_instagram_white.png') no-repeat center/22px; }
#top .top-wrap .sns .naver { background-image:url('../img/sns_icon_naver_gray.png'); }
#top .top-wrap .sns .naver:hover { background-image:url('../img/sns_icon_naver_white.png'); background-color:#06be34; }
#top .top-wrap .sns .facebook { background-image:url('../img/sns_icon_facebook_gray.png'); }
#top .top-wrap .sns .facebook:hover { background-image:url('../img/sns_icon_facebook_white.png'); background-color:#435e99; }
#top .top-wrap .sns .youtube { background-image:url('../img/sns_icon_youtube_gray.png'); }
#top .top-wrap .sns .youtube:hover { background-image:url('../img/sns_icon_youtube_white.png'); background-color:#d4262c; }
#top .top-wrap .sns .twiter { background-image:url('../img/sns_icon_twiter_gray.png'); }
#top .top-wrap .sns .twiter:hover { background-image:url('../img/sns_icon_twiter_white.png'); background-color:#27a9e0; }

#top .top-wrap .logo { position:absolute; left:50%; top:50%; width:188px; height:110px; transform:translate(-50%, -50%); background: url("../img/logo.png") center/contain no-repeat; image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; transition-duration: 200ms; }


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

#top .top-wrap .right .lang { position:absolute; top:2px; right:0; border:1px solid #333; color:#333; border-radius: 20px; transition-duration: 300ms; padding:5px 15px; z-index:9; margin-right:0; display:none; }
#top .top-wrap .right .lang.on { background: #fff; color: #111; }
#top .top-wrap .right .lang .item .fa { margin:0 2.5px; }
#top .top-wrap .right .lang .sub { display: none; padding:10px 5px 5px; }
#top .top-wrap .right .lang .sub a { display: block; padding: 5px 0; color: #333; }
#top .top-wrap .right .lang.on .sub a { color: #111; }
#top .top-wrap .right .lang .sub img { max-width: 16px; }

#top .top-wrap .right .links { position:relative; display:none; }
#top .top-wrap .right .links .member-btn { display:block; width:25px; height:25px; background:url('../img/top-icon-login.png') no-repeat center/contain; }
#top .top-wrap .right .links .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:20px 30px; background:#fff; border:1px solid #ddd; display: none; }
#top .top-wrap .right .links:hover .sub, #top .top-wrap .right .links .sub:hover { display:block; }
#top .top-wrap .right .links .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); left:50%; transform:translateX(-50%) rotate(45deg); width:20px; height:20px; background:#fff; border-left:1px solid #ddd; border-top:1px solid #ddd; }
#top .top-wrap .right .links .sub a { display:block; color:#aaa; padding:5px 0; text-align:center; }


#top .top-wrap .right .btn-reserve { display:inline-block; border-radius:99px; padding:5px 20px; border:1px solid #333; margin-right:20px; font-size:.875rem; }
#top .top-wrap .right .btn-reserve:hover { background:#333; color:#fff; }


@media (max-width: 1200px) {
    #top .top-wrap { padding:0 50px; }
}

/* 검색버튼 */
#top .top-search { width:80px; text-align:right; margin-right:-80px; }
#top .top-search a { display:block; width:25px; height:25px; margin-left:auto; }
#top .top-search .search-btn { background:url('../img/top-icon-search.png') no-repeat center/contain; }
#top .top-search .search-close { position:relative; display:none; background:none; }
#top .top-search .search-close:before, #top .top-search .search-close:after { content:""; position:absolute; left:50%; top:50%; width:1px; height:25px; background:#aaa; }
#top .top-search .search-close:before { transform:translate(-50%, -50%) rotate(45deg); }
#top .top-search .search-close:after { transform:translate(-50%, -50%) rotate(-45deg); }

#top .top-search-box { display: none; left: 50%; padding: 20px 10px; position: absolute; top: 50%; transform: translate(-50%, -50%); }
#top .top-search-box .wrap { align-items: center; display: flex; height: 100%; justify-content: center; }
#top .top-search-box .wrap form { border: 1px solid #333; display: flex; padding: 7px 8px 8px; width: 300px; }
#top .top-search-box .wrap form .searchbox { background: transparent; border: 0; flex: 1; font-family: "NanumSquareNeo-Variable"; }
#top .top-search-box .wrap form .searchbox::placeholder { color: #888; }
#top .top-search-box .wrap form .searchbox:focus { outline: none; }
#top .top-search-box .wrap form button { background: transparent; border: 0; color: #666; flex: 0 0 25px; margin-left: 5px; }
#top .top-search-box .wrap form button:focus { outline: none; }
#top .top-search-box .search-close { position:absolute; left:100%; top:35%; padding-left:5px; width:20px; height:20px; }

@media (max-width: 1200px) {
    #top .top-search { margin-right:50px; }
}

#menu-wrap-bottom-bg { position:absolute; left:0; right:0; top:100%; transition-duration: 500ms; }
body.menu-on #menu-wrap-bottom-bg { background:#fff; transition-duration: 300ms; }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { width:25px; height:25px; display:flex; justify-content:center; align-items: flex-end; flex-direction: column; }
#top .top-menu-btn div { background:#333; width:100%; height:2px; border-radius:2px; transition-duration:400ms; margin:3px 0; }
#top .top-menu-btn div:nth-child(2) { width:70%; }

#top .top-menu-btn:hover div { width:70%; }
#top .top-menu-btn:hover div:nth-child(2) { width:100%; }



/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { position:relative; height:65px; margin-top:10px; transition-duration: 200ms; display: flex; align-items:center; justify-content: center;  }

#menu .ul { position:relative; display: flex; justify-content: space-between; height:100%; z-index:10; }
#menu .ul.hid { opacity:0; visibility:hidden; }
#menu .ul:after { display:none; }
#menu .ul .li { position: relative; height:calc(100% + 20px); margin:-10px 15px 0; }
#menu .ul .li .a { display:flex; justify-content:center; align-items:center; padding:0 30px; height:100%; z-index:2; font-size: 1.125rem; color:#111; }
#menu .ul:hover .li .a { color:#888; }
#menu .ul:hover .li.on .a, #menu .ul:hover .li .a:hover { color:#048025; font-weight: 500}
#menu .ul .li.on .a{ color:#048025; font-weight: 500}
/*#menu .ul .li .a span { position:relative; display:inline-block; }
#menu .ul .li.on .a span:before { content:""; position:absolute; bottom:100%; left:100%; border:1px solid #333; border-radius:99px; width:8px; height:8px; */
#menu .ul .li .a span font { position:relative; }

#menu .depth2 { position: absolute; top:100%; margin-top:20px; left:50%; transform:translateX(-50%); opacity:0; visibility:hidden; padding:15px 25px; background:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.15); transition-duration:500ms; }
#menu .depth2 .sub-a { color: #666; display: block; padding: 10px 0; white-space: nowrap; }
body.scrolled #menu .depth2 { margin-top:40px; }

#menu .ul .li:hover .depth2 { margin-top:-20px; opacity:1; visibility:visible; }
body.scrolled #menu .ul .li:hover .depth2 { margin-top:0; }

#menu .depth3 { visibility:hidden; opacity:0; position:absolute; top:40px; transition-duration: 0ms; }
#menu .depth3.on { visibility:visible; opacity:1; transition-duration: 200ms; }
#menu .depth3 .sub-a { color:#aaa; padding:5px 0; font-size:.938rem; }
#menu .depth3 .sub-a:before { content:"- "; }

@media (max-width: 1200px) {
    #menu .ul { width:calc(100% - 80px); }
}
@media (max-width: 1024px) {
    #top { display:none; }
}