@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
:root {
	--top-height:170px; /* top 전체높이 */
    --top-menu-height:60px; /* 메뉴높이 */
}

#top { position: fixed; left:0; right:0; top:0; height:var(--top-height); background:#fff; transition-duration:400ms; z-index:100; }

/* 상단 탑메뉴 스크롤 중지시키기 */
/*  body.scrolled #top { top:calc(-1 * var(--top-height)); }
body.scroll-up #top { box-shadow:5px 0 10px #aaa; top:calc(-1 * (var(--top-height) - var(--top-menu-height))); } */

#top .top-wrap { position:relative; padding:15px var(--top-padding) 0; height:calc(var(--top-height) - var(--top-menu-height)); display:flex; align-items:center; justify-content: space-between; z-index:3; }


#top .top-wrap .logo { position:absolute; left:50%; top:calc(50% + 7.5px); width:160px; height:50px; 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 .sns { --sns-size:30px; display:flex; }
#top .top-wrap .sns a { position:relative; width:var(--sns-size); height:var(--sns-size); border-radius:99px; overflow:hidden; font-size:0; }
#top .top-wrap .sns a:before,
#top .top-wrap .sns a:after { content:""; position:absolute; left:0; top:calc(50% - var(--sns-size)/2); width:var(--sns-size); height:var(--sns-size); border-radius:99px; }
#top .top-wrap .sns a:before { z-index:-1; }

#top .top-wrap .sns a:after { background:none no-repeat center/22px; opacity:.5; }

#top .top-wrap .sns a.kakao:after { background-image:url('../img/sns_icon_kakao_gray.png'); }
#top .top-wrap .sns a.instagram:after { background-image:url('../img/sns_icon_instagram_gray.png'); }
#top .top-wrap .sns a.naver:after { background-image:url('../img/sns_icon_naver_gray.png'); }
#top .top-wrap .sns a.facebook:after { background-image:url('../img/sns_icon_facebook_gray.png'); }
#top .top-wrap .sns a.youtube:after { background-image:url('../img/sns_icon_youtube_gray.png'); }
#top .top-wrap .sns a.twiter:after { background-image:url('../img/sns_icon_twiter_gray.png'); }

#top .top-wrap .sns a:hover { color:#333; }
#top .top-wrap .sns a.kakao:hover:before { background:#ffe800; }
#top .top-wrap .sns a.instagram:hover:before { background:linear-gradient(to bottom, #8452a1, #ea2d87, #ef4c3e, #efcb6b); }
#top .top-wrap .sns a.naver:hover:before { background:#06be34; }
#top .top-wrap .sns a.facebook:hover:before { background:#435e99; }
#top .top-wrap .sns a.youtube:hover:before { background:#d4262c; }
#top .top-wrap .sns a.twiter:hover:before { background:#27a9e0; }
#top .top-wrap .sns a:hover:after { opacity:1; }
#top .top-wrap .sns a:not(.kakao):hover:after { filter:brightness(0) invert(1); }

/* 상단메뉴 오른쪽 섹션 설정 */
#top .top-wrap .right { position:relative; display: flex; align-items: center; transition-duration:200ms; }
#top .top-wrap .right section {
    position: relative;
    margin-right: 10px; /* 우측 여백 10px */
    margin-left: 10px; /* 좌측 여백 10px */
    padding: 0; /* 내부 패딩 초기화 */
    display: flex;
    justify-content: center; /* 수직 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}
#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; cursor:pointer; filter:brightness(500%) invert(100%); }  */
#top .top-wrap .right section span[class*="-btn"] { display:block; width:30px; height:30px; background:none no-repeat center/cover; cursor:pointer; border-radius: 50%; }



#top .top-wrap .right .top-search .search-btn { background-image:url('../img/top-icon-search.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 {
      display: flex; /* member-btn 컨테이너에 flexbox 사용 */
    align-items: center; /* member-btn 내부 내용을 세로 중앙 정렬 */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden; /* 이미지를 원 모양으로 자르기 */
}

#top .top-wrap .right .links .member-btn img {
    display: block;
    width: 100%;
    height: auto;
}


#top .top-wrap .right .bgm { display:flex; }
#top .top-wrap .right .bgm i { margin-left:5px; cursor:pointer; font-size:20px; }
#top .top-wrap .right .bgm audio { width:0; height:0; }


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




#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; color:#1B1B1B; padding:2.5px 0; text-align:center; opacity:0; font-size:1rem; transition-duration:400ms; line-height: 2; /* 줄간격 설정 */ }
#top .top-wrap .right section:hover .sub a { opacity:1; }



/* 상단 우측 삼지창 메뉴버튼 */
#top .top-menu-btn { width:25px; height:25px; display:flex; justify-content:center; align-items: flex-end; flex-direction: column; cursor:pointer; }
#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%; }


/* 아이콘 세부 스타일 */
#top .top-menu-xbtn div { 
    background:#333; 
    width:100%; 
    height:2px; 
    border-radius:2px; 
    transition-duration:400ms; 
    margin:3px 0; 
}
/* 아이콘 간 간격 조정 */
#top .top-menu-xbtn div:nth-child(2) { 
    width:70%; 
}

/* 호버 시 아이콘 너비 변화 */
#top .top-menu-xbtn:hover div { 
    width:70%; 
}
/* 호버 시 두 번째 아이콘의 너비 변화 */
#top .top-menu-xbtn:hover div:nth-child(2) { 
    width:100%; 
}




/* 반응형 디자인 */
@media (max-width: 1024px) {
    :root {
		--top-height:70px;
        --top-menu-height:40px;
    }

	body.scrolled #top { top:calc(-1 * var(--top-height) - var(--top-menu-height)); }
	body.scroll-up #top { top:calc(-1 * var(--top-height)); }

	#top .top-wrap { margin:0; height:var(--top-height); padding:0 var(--top-padding); }
	#top .top-wrap .logo { top:50%; height:40px; }

	#top .top-wrap .sns { --sns-size:25px; margin-left:-10px; }
	#top .top-wrap .sns a:after { background-size:19px; }

}


@media (max-width: 767px) {

   /* 상단 탑메뉴 스크롤 중지시키기 */
   body #top { position: fixed; } /* 스크롤 중에도 탑 메뉴를 고정 */
    body.scrolled #top { top: 0; } /* 스크롤 중에도 탑 메뉴를 고정 */
    body.scroll-up #top { box-shadow: 5px 0 10px #aaa; }

    /* 상단 탑메뉴 스타일 */
    #top .top-wrap { margin: 0; height: var(--top-height); padding: 0 var(--top-padding); }
    #top .top-wrap .logo { top: 50%; height: 40px; }

    /* 기타 스타일들을 모바일에 맞게 조정 */
  	#top .top-wrap .right section { margin-right:10px; } /* 검색, 로그인등 아이콘 간의 간격을 조정 */
    #top .top-wrap .right section span[class*="-btn"] { width:16px; height:16px; }

    #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 .langs,  
 

/* 모바일 로그인버튼 노출 */
	#top .top-wrap .right .links { display:block; }
/* 이전에는 'display: none;' 이었음 */


    #top .top-wrap .right .bgm i { font-size:16px; }

	#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%; }
    #top .top-wrap .top-search-box form .searchbox { height:40px; }
	#top .top-wrap .top-search-box form .btn { display:flex; justify-content:center; align-items:center; }
	#top .top-wrap .top-search-box form .btn i { line-height:0; }

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


    #top .top-menu-btn { width:20px; margin-left:5px; }
}


/* 멤버 로그인 상태표시 */
.member-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 0px; /* 원하는 여백 값으로 설정 */
}

.member-name {
    font-size: 12px; /* 원하는 폰트 크기로 설정 */
    color: #333; /* 원하는 색상으로 설정 */
}

.login-status {
    font-size: 10px; /* 원하는 폰트 크기로 설정 */
    color: #666; /* 원하는 색상으로 설정 */
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { position:sticky; left:0; top:0; right:0; display: flex; align-items:center; justify-content: center; background-color: #e9d256; }
#menu .nav { display:none; }

/*스와이퍼 컨테이너의 글꼴을 설정*/
#menu .swiper-container { font-family: var(--font-serif); font-weight: 600; /* 폰트를 굵게 설정 */ margin:0; overflow:visible; }

#menu .swiper-container .swiper-slide { position: relative; margin:0 15px; width:auto !important; }
#menu .swiper-container .swiper-slide .a { display:flex; justify-content:center; align-items:center; padding:0 30px; height:var(--top-menu-height); z-index:2; font-size: 1.5rem; color:#111; }
#menu .swiper-container:hover .swiper-slide .a { color:#aaa; }
#menu .swiper-container:hover .swiper-slide.on .a,
#menu .swiper-container:hover .swiper-slide .a:hover { color:#000; }
#menu .swiper-container .swiper-slide .a span { position:relative; }
#menu .swiper-container .swiper-slide.on .a span:before { content:""; position:absolute; left:calc(50% - 7px); bottom:calc(100% + 3px); width:14px; height:3px; background:var(--main-color1); }

#menu .depth2 { position: absolute; top:100%; margin-top:20px; left:50%; transform:translateX(-50%); opacity:0; visibility:hidden; padding:15px 30px; 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 .swiper-container .swiper-slide:hover .depth2 { margin-top:-10px; opacity:1; visibility:visible; }
body.scrolled #menu .swiper-container .swiper-slide:hover .depth2 { margin-top:0; }



@media (max-width: 1200px) {
	#menu .swiper-wrapper { justify-content: space-between; }

	#menu .swiper-container .swiper-slide { margin:0 10px; }
	#menu .swiper-container .swiper-slide .a { padding:0 15px; }
}

@media (max-width: 1024px) {

/* 메뉴 배경색상 투명도 */	
/* #menu { background:rgba(120,120,120,.8); }  */
   #menu { background:#e9d256; }
	#menu .nav {  display:block;  margin:0 10px; }
	#menu .nav.swiper-button-disabled { opacity:.5; }

	#menu .swiper-container { width:auto; overflow:hidden; }
	#menu .swiper-container .swiper-slide .a { font-size:1.25rem;  }

	#menu .swiper-container:hover .swiper-slide.on .a,
	#menu .swiper-container:hover .swiper-slide .a:hover { color:#000; }
    #menu .swiper-container .swiper-slide.on .a span:before { bottom:100%; height:2px; }

	#menu .depth2 { display:none; }
}


@media (max-width: 767px) {
/*스와이퍼 컨테이너의 글꼴을 설정*/
#menu .swiper-container { font-weight: 600; /* 폰트를 굵게 설정*/}

#menu { 
        padding:0; background:#e9d256; 
        padding-left: 0px !important;
        padding-right: 0px !important;
}

#menu .swiper-container .swiper-slide { margin: 0 2px;}
#menu .nav {margin: 0px 4px;}

#menu .swiper-container .swiper-slide .a { padding:0 3px; font-size: 1.22rem !important;}

    /* 모바일 에서만 상단 검색 버튼 숨기기 */
    #top .top-wrap .right .top-search {
        display: none;
    }

}