@charset "UTF-8";

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

#top { position: fixed; left:0; right:0; top:50px; z-index: 100; height:var(--top-height); padding:0 var(--top-padding); transition-duration:200ms; --btn-padding:25px; }
.scrolled #top { top:0; padding:0; margin-top:0; }

#top .top-wrap { position:relative; height:100%; border-radius:10px 15px 15px 10px; background:#fff; transition-duration:200ms; display:flex; align-items:center; justify-content: space-between; z-index:3; }
.scrolled #top .top-wrap { border-radius:0; border-bottom:1px solid #eee; }

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

#top .top-wrap .right { position:relative; display: flex; align-items: center; height:100%; transition-duration:200ms; }
#top .top-wrap .right section { position: relative; display: flex; align-items: center; margin-left:20px; padding:20px 0; }
#top .top-wrap .right section:hover { z-index:3; }
#top .top-wrap .right section span[class*="-btn"] { display:block; width:25px; height:25px; background:none no-repeat center/contain; cursor:pointer; }


#top .top-wrap .right .sns .sns-btn { background-image:url('../img/top-icon-sns.png'); }
#top .top-wrap .right .langs .lang-btn { background-image:url('../img/top-icon-language.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 .links .member-btn { background-image:url('../img/top-icon-login.png'); }
#top .top-wrap .right .cart .cart-btn { background-image:url('../img/top-icon-cart.png'); }
#top .top-wrap .right .cart .count { position:absolute; top:15px; right:0; width:16px; height:16px; line-height:16px; border-radius: 20px; background:#111; color:#fff; font-size:9px; text-align:center; white-space: nowrap; transform: translateX(40%); }
#top .top-wrap .right .top-search { padding:0 var(--btn-padding); margin-left:25px; background:var(--main-color1); height:100%; }
#top .top-wrap .right .top-search .search-btn { background-image:url('../img/top-icon-search.png'); filter:invert(1) brightness(100); }


#top .top-wrap .right .sns .sub a { position:relative; text-align:left; transition:all 400ms, opacity 400ms var(--sns-delay); margin-left:-5px; 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.kakao:hover:before { background:var(--kakao-color); }
#top .top-wrap .right .sns .sub a.instagram:hover:before { background:var(--instagram-color); }
#top .top-wrap .right .sns .sub a.naver:hover:before { background:var(--naver-color); }
#top .top-wrap .right .sns .sub a.facebook:hover:before { background:var(--facebook-color); }
#top .top-wrap .right .sns .sub a.youtube:hover:before { background:var(--youtube-color); }
#top .top-wrap .right .sns .sub a.twiter:hover:before { background:var(--twiter-color); }
#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: 5px 10px; 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-wrap .right .top-search .sub { left:auto; right:0; transform:translateX(0); max-height:none; padding:15px 25px; }
#top .top-wrap .right .top-search .sub:before { left:auto; right:25px; transform:translateX(0) rotate(45deg); }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { width:80px; height:100%; padding:0 var(--btn-padding); transition-duration: 200ms; z-index:2; cursor:pointer; background:var(--main-color3); display:flex; align-items: flex-end; justify-content: center; flex-direction: column; border-radius:0 10px 10px 0; }
#top .top-menu-btn div { background:#fff; width:30px; border-radius:99px; height:1px; width:100%; }
#top .top-menu-btn div:nth-child(2) { position:relative; margin: 8px 0; width:10px; }
#top .top-menu-btn div:nth-child(2):before { content:"MENU"; position:absolute; top:50%; right:100%; transform:translateY(-50%); font-size:.563rem; margin-right:2px; color:#fff; white-space: nowrap; opacity:0; }
#top .top-menu-btn:hover { padding:0 calc(var(--btn-padding) - 5px); }
#top .top-menu-btn:hover div:nth-child(2):before { opacity:1; transition-duration: 200ms; transition-delay: 300ms; }

.scrolled #top .top-menu-btn { border-radius: 0; }


@media (max-width: 1400px) {
    #top .top-wrap .left { margin-left:30px; }
}

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

    #top { top:auto; margin-top:var(--top-padding); }
}


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

    #top { --btn-padding:15px; }
	#top .top-wrap .left { height:30px; margin-left: 10px; }

	#top .top-wrap .right section { margin-left:5px; padding:10px 0; }
    #top .top-wrap .right section span[class*="-btn"] { width:22px; height:22px; }

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

    #top .top-wrap .right .top-search { margin-left:15px; }


	#top .top-wrap .right .top-search .sub { position:fixed; left:0; top:0; right:0; transform:translateX(0); padding:0 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%; padding:0; }

	.on-searchbox #top .top-wrap .right .top-search .sub { height:100%; max-height:var(--top-height); opacity:1; visibility:visible; }
	.on-searchbox #top .top-wrap .top-search-box { opacity:1; transition-duration:300ms; }

    #top .top-menu-btn { width:55px; }
    #top .top-menu-btn div:nth-child(2):before { font-size:.5rem; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { transition-duration: 200ms; }
#menu .ul { position:relative; width:100%; display: flex; justify-content: center; height:100%; z-index:10; }
#menu .ul .li { position:relative; padding:0 1.5vw; }
#menu .ul .li:hover { z-index:9; }
#menu .ul .li .a { display:flex; align-items:center; justify-content:center; white-space: nowrap; padding:20px 0; font-weight:600; font-size:1.125rem; color:#111; }
#menu .ul .li.all .a { color:var(--main-color1); }

#menu .sub-wrap { position: absolute; transition-duration:200ms; padding:10px; opacity:0; visibility:hidden; border-radius: 10px; }
#menu .sub-wrap .sub-a { display: block; white-space: nowrap; padding: 10px; border-radius:5px; }
#menu li:hover > .sub-wrap { opacity:1; visibility:visible; }


#menu .depth2 { top:120%; left:50%; transform: translateX(-50%); min-width:160px; background:var(--main-color3); }
#menu .depth2 > li { position:relative; transition-duration: 400ms; }
#menu .depth2 > li > .sub-a { color: #fff; display:flex; align-items:center; justify-content:space-between; width:100%; }
#menu .depth2 > li > .sub-a span { flex:1; }
#menu .depth2 > li > .sub-a i { font-size:6px; }
#menu li:hover > .depth2 { top:100%; }
#menu .depth2 > li:hover > .sub-a { background:#fff; color:var(--main-color3); }

#menu .depth3 { top:-10px; left:120%; min-width:150px; border:1px solid var(--main-color3); background:#fff; }
#menu .depth3 .sub-a { color:var(--main-color3); }
#menu li:hover > .depth3 { left:calc(100% + 10px); }
#menu .depth3 li:hover .sub-a { background:var(--main-color3); color:#fff; }


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



/********************************************************
■ Ad : 메인 상단 메뉴
********************************************************/
#main-notice { position:fixed; left:0; top:0; right:0; transform:translateY(-100%); transition-duration:400ms; background:#111; z-index:9; }
#main-notice.on { transform:translateY(0); }
#main-notice .swiper { height:30px; }
#main-notice .swiper-slide { font-size:.813rem; color:#fff; text-align:center; }
#main-notice .swiper-slide .head { --ellipsis-height:30px; }

#main-notice .btn-closed { position:absolute; right:0; top:50%; transform:translateY(-50%); color:#fff; font-size:.75rem; display:flex; align-items: center; z-index:9; }
#main-notice .btn-closed i { width:10px; height:10px; }


@media (max-width: 1440px) {
    #main-notice .btn-closed { right:var(--c-padding); }
}

@media (max-width: 1024px) {
    #theme_wrapper { transition-duration:400ms; }
    #theme_wrapper:has(#main-notice.on) { padding-top:30px; }
}