@charset "UTF-8";

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

#top { position: fixed; left:0; right:0; top:0; height:var(--top-height); background:#fff; transition-duration:400ms; z-index:100; }
.scrolled #top { top:calc(-1 * var(--top-height)); }
.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:0 var(--top-padding); height:calc(var(--top-height) - var(--top-menu-height)); display:flex; align-items:center; justify-content: space-between; z-index:3; }

#top .top-wrap .left a { display:flex; align-items: center; font-weight:600; font-size:.875rem; }
#top .top-wrap .left i { width:var(--top-link-box); height:var(--top-link-box); border:1px solid #222; display: flex; align-items: center; justify-content: center; font-size:.875rem; margin-right:10px; transition-duration: .2s; }
#top .top-wrap .left .arrow { position:relative; width:14px; margin-left:10px; animation:transform .2s ease; transform: translateX(0); }
#top .top-wrap .left .arrow:before,
#top .top-wrap .left .arrow:after { content: ""; position: absolute; height:1px; background:#111; }
#top .top-wrap .left .arrow:before { left:0; top:50%; right:0; }
#top .top-wrap .left .arrow:after { right:0; top:50%; width:6px; transform: rotate(40deg); margin-top:-2px; }

#top .top-wrap .left a:hover i { background:#222; color:#fff; }
#top .top-wrap .left a:hover .arrow { animation: moveArrow .2s linear alternate 2; }

@keyframes moveArrow {
	from { margin-left:10px; }
	to { margin-left:20px; }
}


#top .top-wrap .logo { position:absolute; left:50%; top:50%; width:250px; height:80px; transform:translate(-50%, -50%); transition-duration: 200ms; }
#theme_wrapper:not(.is-subpage) #top .top-wrap .logo { opacity:0; }
.load-on #theme_wrapper:not(.is-subpage) #top .top-wrap .logo { opacity:1; transition-delay: 0s; }

#top .top-wrap .logo img { width:100%; height:100%; object-fit: contain; }


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

#top .top-wrap .right .call { display: flex; align-items: center; }
#top .top-wrap .right .call i { font-size:1.125rem; margin-right:10px; }
#top .top-wrap .right .call strong { font-size: 1.5rem; }



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

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





@media (max-width: 1024px) {
    :root {
		--top-height:115px;
        --top-menu-height:44px;
        --top-link-box:30px;
    }

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


    #top .top-wrap .right .call i { font-size:1rem; }
    #top .top-wrap .right .call strong { font-size: 1.375rem; }

    #top .top-menu-btn div:nth-child(2) { margin:3px 0; }

}


@media (max-width: 767px) {
    :root {
        --top-height:90px;
        --top-menu-height:34px;
        --top-link-box:26px;
    }
    #top .top-wrap { justify-content:flex-end; }
    #top .top-wrap .left,
    #top .top-wrap .right .call { display:none; }

    #top .top-wrap .logo { height:36px; }

	#top .top-wrap .right section { margin-right:5px; }

    #top .top-menu-btn { padding:0 5px; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { position:relative; display: flex; align-items:center; }
#menu:before,
#menu:after { content:""; position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%); width:calc(100vw - var(--top-padding)*2); z-index:-1; }
#menu:before { border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.menu-on #menu:after { top:100%; height:100%; background:var(--main-color3); }


#menu .nav { display:none; }
#menu .swiper { overflow:visible; }
#menu .swiper .li { width:auto !important; }
#menu .swiper .li:hover { z-index:9; }
#menu .swiper .li .a { padding:0 40px; font-weight: 600; z-index:2; font-size: 1.125rem; }
#menu .swiper:hover .li .a { display:block; color:#aaa; }
#menu .swiper:hover .li:hover .a { color:#000; }
#menu .swiper .li .a span { position:relative; height:100%; display:flex; justify-content:center; align-items:center; }
#menu .swiper .li .a span:before { content:""; position:absolute; left:50%; bottom:0; width:0; height:3px; background:var(--main-color1); transform: translateX(-50%); transition-duration: .2s; }
#menu .swiper .li:hover .a span,
#menu .swiper .li.on .a span { color:var(--main-color1); }
#menu .swiper .li:hover .a span:before,
#menu .swiper .li.on .a span:before { width:100%; }

#menu .swiper .li a { display:block; height:var(--top-menu-height); }

#menu .sub-wrap { position: absolute; opacity:0; visibility:hidden; transition-duration:500ms; display:flex; }
#menu .sub-wrap .sub-a { white-space: nowrap; }
#menu li:hover > .sub-wrap { opacity:1; visibility:visible; }

#menu .depth2 { top:100%; left:50%; transform:translateX(-50%); padding:0 20px; }
#menu .depth2 > li { position:relative; }
#menu .depth2 > li:not(:last-child)::before { content:""; position:absolute; left:calc(100% - 1px); top:50%; transform: translateY(-50%); width:3px; height:3px; border-radius: 99px; background:rgba(255,255,255,.3); }
#menu .depth2 > li > .sub-a { display:flex; justify-content:center; align-items:center; color: #fff; padding: 10px 15px; }
#menu .depth2 > li:hover > .sub-a { color:var(--main-color1); }

#menu .swiper .li:nth-last-child(1) .depth2 { left:auto; right:0; transform:translateX(0); }
#menu .swiper .li:nth-child(1) .depth2 { left:0; right:auto; transform:translateX(0); }

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 li { padding:5px; cursor:pointer; }
#menu .depth3 .sub-a { display:inline-block; font-size:1rem; color:#fff; border-bottom:1px solid transparent; opacity:.f; }
#menu li:hover > .depth3 { top:0; }
#menu .depth3 li:hover .sub-a { opacity:1; border-color:#fff; }


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

	#menu .swiper .li { margin:0 10px; }
	#menu .swiper .li .a { padding:0 15px; }
}

@media (max-width: 1024px) {
	#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.on .a span:before { bottom:100%; height:2px; }

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


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