@charset "UTF-8";

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

#top { position: sticky; left:0; right:0; top:0; height:var(--top-height); background:#fff; box-shadow:5px 0 15px rgba(0,0,0,.1); transition-duration:400ms; z-index:100; }
.scrolled #top { top:calc(-1 * var(--top-height)); }
.scroll-up #top { top:calc(-1 * (var(--top-height) - var(--top-menu-height))); }

#top .top-wrap { position:relative; padding:10px var(--top-padding); height:calc(var(--top-height) - var(--top-menu-height)); display:flex; align-items:center; justify-content: space-between; background:var(--main-color1) linear-gradient(20deg, rgba(var(--main-color3-rgb), .2), var(--main-color1), rgba(var(--main-color2-rgb), .2)); z-index:3; }

#top .top-wrap .logo { position:absolute; left:50%; top:50%; width:200px; height:50px; transform:translate(-50%, -50%); transition-duration: 200ms; }
#top .top-wrap .logo img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; filter:invert(1) grayscale(1) brightness(10); }


#top .top-wrap .top-left { position:relative; height:100%; display:flex; flex-direction: column; }
#top .top-wrap #google_translate_element { position:absolute; left:0; top:0; }
#top .top-wrap .goog-te-gadget { display:flex; align-items: center; color:rgba(255,255,255,.5); }
#top .top-wrap .goog-te-gadget > div { order:3; margin-left:5px; }
#top .top-wrap .goog-te-gadget .goog-te-combo { width:100px; border:1px solid rgba(255,255,255,.7); border-radius:99px; padding:1px 27px 1px 6px !important; font-size:.75rem; background-position:right 5px center !important; margin:0; background-color:transparent !important; background-image:url('../img/select-arrow-white.png') !important; }
#top .top-wrap .goog-te-gadget .goog-te-combo option { color:#111; }
#top .top-wrap .goog-te-gadget .VIpgJd-ZVi9od-l4eHX-hSRGPd { filter:grayscale(1) brightness(10) opacity(.7); }


#top .top-wrap .txt { width:240px; height:100%; padding-top:25px; line-height:1.2; }
#top .top-wrap .txt .swiper { height:100%; padding:0 15px 7px 0; margin:3.5px -7px 0 0; font-size:.875rem; }
#top .top-wrap .txt .swiper-slide { border-radius:20px; background:#fff; box-shadow: 3px 3px 3px rgba(0,0,0,.2); display:flex; justify-content: space-between; align-items: center; padding:10px 5px 10px 20px; }
#top .top-wrap .txt .swiper-slide:before { content:""; position:absolute; left:100%; top:50%; transform: translateY(-50%); border-left:13px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; }
#top .top-wrap .txt .swiper-slide img { width:40px; height:40px; object-fit: contain; }



#top .top-wrap .top-right { position:relative; display: flex; align-items: flex-end; justify-content: space-between; flex-direction: column; height:100%; transition-duration:200ms; }
#top .top-wrap .top-right .ad-wrap { width:100%; display:flex; justify-content: flex-end; }
#top .top-wrap .top-right .ad-wrap a { display:flex; align-items: center; color:#fff; font-size:.813rem; font-weight: 600; margin-left:20px; }
#top .top-wrap .top-right .ad-wrap img { width:22px; margin-right:2px; filter:grayscale(1) brightness(10); }

#top .top-wrap .top-right .links { display:flex; align-items: center; justify-content: flex-end; }
#top .top-wrap .top-right .links .link-btn { display:flex; flex-direction: column; align-items: center; color:#fff; font-size:.875rem; font-weight: 600; margin-left:10px; }
#top .top-wrap .top-right .links .link-btn img { width:30px; height:30px; object-fit: contain; filter: brightness(10); }
#top .top-wrap .top-right .links .link-btn span { display:block; }



#top .top-wrap .top-search-box { position:absolute; left:0; top:0; right:0; bottom:0; transform: translateY(-100%); align-items: center; display: flex; background:rgba(0,0,0,.95); justify-content: center; transition-duration: 200ms; z-index:9; }
#top .top-wrap .top-search-box form { position:relative; border: 2px solid #fff; border-radius:99px; display: flex; align-items:center; padding:10px 20px; width:80%; max-width: 320px; }
#top .top-wrap .top-search-box form .searchbox { background: transparent; border: 0; flex: 1; color:#eee; }
#top .top-wrap .top-search-box form .searchbox::placeholder { color: #ddd; }
#top .top-wrap .top-search-box form .submit-btn { color:var(--main-color1); margin-left: 5px; }
#top .top-wrap .top-search-box form .x-close { position:absolute; left:100%; margin-left:10px; top:50%; transform: translateY(-50%); color:#fff; font-size:1.5rem; }
.on-searchbox  #top .top-wrap .top-search-box { transform: translateY(0); }



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

#top .top-wrap .top-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 .top-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 .top-right section:hover .sub a { opacity:1; }



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

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



/* 서브페이지에서 세로길이 줄이기 */
.is-subpage #top { --top-height:140px; }

.is-subpage #top .top-wrap .top-left { display:none; }
.is-subpage #top .top-wrap .logo { position:relative; width:170px; left:0; top:0; transform: none; }

.is-subpage #top .top-wrap .top-right .ad-wrap { display:none; }

.is-subpage #top .top-wrap .top-right { height:auto; }
.is-subpage #top .top-wrap .top-right .links .top-menu-btn { display:flex !important; }
.is-subpage #top .top-wrap .top-right .links .link-btn { margin-left:15px; }
/* .is-subpage #top .top-wrap .top-right .links .link-btn span { display:none; } */


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

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

	#top .top-wrap { margin:0; padding:0 var(--top-padding); }
	#top .top-wrap .logo { position:relative; left:0; top:0; width:140px !important; height:40px; transform:none; }

    #top .top-wrap .top-left,
	#top .top-wrap .top-right .ad-wrap,
	#top .top-wrap .top-right .link-btn:not(.top-menu-btn) { display:none; }

	#top .top-wrap .top-right { height:auto; }
	#top .top-wrap .top-right .links .top-menu-btn { display:block !important; }
	#top .top-wrap .top-right .links .top-menu-btn span { display:none; }


    /* 서브페이지에서 세로길이 줄이기 */
    .is-subpage #top { --top-height:70px; }
}

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

    #top .top-wrap .logo { width:110px !important; height:30px; }

    /* 서브페이지에서 세로길이 줄이기 */
    .is-subpage #top { --top-height:50px; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { display: flex; align-items:center; }
#menu .nav { display:none; }
#menu .swiper { overflow:visible; width:100%; }
#menu .swiper .swiper-wrapper { justify-content: space-between; }
#menu .swiper .li { position: relative; width:auto !important; }
#menu .swiper .li:hover { z-index:9; }
#menu .swiper .li .a { display:flex; justify-content:center; align-items:center; height:var(--top-menu-height); z-index:2; font-size: 1.25rem; color:#333; font-weight: 600; }
#menu .swiper:hover .li .a { color:#aaa; }
#menu .swiper:hover .li:hover .a { color:#000; }
#menu .swiper .li .a span { position:relative; }
#menu .swiper .li.on .a span:before { content:""; position:absolute; left:calc(50% - 10px); bottom:calc(100% + 3px); width:20px; height:3px; background:var(--main-color1); }

#menu .sub-wrap { position: absolute; opacity:0; visibility:hidden; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.15); transition-duration:500ms; }
#menu .sub-wrap .sub-a { display: block; white-space: nowrap; }
#menu li:hover > .sub-wrap { opacity:1; visibility:visible; }

#menu .depth2 { top:100%; margin-top:20px; left:50%; transform:translateX(-50%); padding:15px 30px; background:#fff; }
#menu .depth2 > li { position:relative; }
#menu .depth2 > li > .sub-a { color: #666; padding: 10px 0; }
#menu li:hover > .depth2 { margin-top:-10px; }
#menu .depth2 > li:hover > .sub-a { color:var(--main-color1); }


body.scrolled #menu .depth2 { margin-top:40px; }
body.scrolled #menu .swiper .li:hover .depth2 { margin-top:0; }


#menu .depth3 { left:calc(100% + 5px); top:-15px; min-width:120px; padding:15px; background:var(--main-color3); }
#menu .depth3 .sub-a { padding:5px; font-size:1rem; color:#fff; }
#menu li:hover > .depth3 { top:0; }


@media (max-width: 1200px) {
	#menu .swiper .li .a { padding:0 15px; }
}

@media (max-width: 1024px) {
	#menu { background:#fff; border-bottom:1px solid #ddd; }
	#menu .nav { display:block; margin:0 10px; cursor:pointer; }
	#menu .nav.swiper-button-disabled { opacity:.5; }

	#menu .swiper { width:auto; overflow:hidden; }
	#menu .swiper .swiper-wrapper { justify-content: normal; }
	#menu .swiper .li .a { font-size:1rem; }

    #menu .swiper .li.on .a span:before { bottom:100%; height:2px; }

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


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