/* header 고정 */
#header{width:100%; position:fixed; height:100px; top:0; z-index: 300; transition:all 0.8s ease; }
#header:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.4s;}

#header.scrollFx{width:100%; position:fixed; height:100px; top:0; box-shadow:0 4px 12px rgba(0,0,0,0.08); z-index: 10000;}
#header.scrollFx:before {background: rgb(255 255 255 / 88%); transition: background 0.4s;}
#header.scrollFx .nav{height:100px; }
#header.scrollFx #cssmenu > ul > li > ul.depth02 {background: rgb(255 255 255 / 90%); box-shadow:0 4px 12px rgba(0,0,0,0.08);}
#header.scrollFx #cssmenu ul > li > a{color:#222;}
#header.scrollFx #cssmenu > ul > li > ul.depth02 > li > a:hover {opacity: 1; color: #222; font-weight: 600;}
#header.scrollFx .nav .lang {background: rgba(0, 0, 0, 0.08); color: #081b51;}
#header.scrollFx .nav .lang a:nth-of-type(1):after {background: #333;}


#header.scrollFx h1.pc-menu span{background:#474747 !important;}
#header.scrollFx .cs-logo{top:42px;}
#header.scrollFx .cs-logo a.logo-top{height:50px !important;}
#header.scrollFx #gnb .oneD{color:#000;}
#header.scrollFx #gnb .oneD{line-height:75px;}
#header.scrollFx .hd-right .login-top a{color:#10344a !important; border:1px solid rgb(16,52,74,.5) !important;}
#header.scrollFx .hd-right .login-top a:hover{background:#082b4c !important; border-color:#082b4c !important; color:#fff !important;}
#header.scrollFx .hd-right .lang-top a{color:#333 !important;}
#header.scrollFx .hd-right .lang-top li a:before{background:#333 !important;}

/* 로고 변경 */
#header.scrollFx .cs-logo a.logo-1{background-image:url("/images/common/logo.svg") !important;}

/* nav */
.nav{width:100%; margin:0 auto; height:100px; position:relative; transition:all 0.8s ease;}
.nav .hd-wrap{max-width:1700px; margin:0 auto; height:100%; width:90%; display:flex; align-items:center; justify-content:space-between; position: relative;}
.nav .cs-logo{display:flex; align-items:center;}
.nav .cs-logo h1 {display: flex; align-items: center; gap: 16px;}
.nav .cs-logo a.logo img {max-width: 100%; transition: all 0.4s;}
.nav .cs-logo a.logo-uni img{max-width: 100%; max-height: 100%;}

/* 로고 이미지 */
.nav .cs-logo a.logo-1{display:inline-block; background-image:url("/images/common/logo-w.svg"); background-repeat:no-repeat; background-position: center; background-size: contain; width: 402px; height: 60px;}

.nav.active{box-shadow:0px 1px 3px rgba(0,0,0,12%); }
.nav:after{display:block; content:''; clear:both;}

.nav .menu-wrap {display: flex; align-items: center; height: 100%;}
#cssmenu{display:inline-block; height:100%; margin-right: 190px;}
#cssmenu a{display:block;}
#cssmenu > ul{display:flex; justify-content:center; gap:70px; transition:all 0.8s ease; height:100%;}
#cssmenu > ul > li{position:relative; text-align:left;}
#cssmenu > ul > li > a{font-size:19px; font-weight:500; color:#fff; letter-spacing: 0.36px; height:100%; display:flex; line-height:1; align-items:center; justify-content:center; position: relative; font-family: 'SCoreDream';}

/* depth02 메뉴 */
#cssmenu > ul > li > ul.depth02{height:0; position:absolute; top:80px; left:50%; transform: translateX(-50%);background: rgb(0 0 0 / 65%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 18px 15px; border-radius: 8px; display: none;}
#cssmenu > ul > li > ul.depth02 > li {width: 190px; margin-bottom: 18px;}
#cssmenu > ul > li > ul.depth02 > li:last-child {margin-bottom: 0;}
#cssmenu > ul > li > ul.depth02 > li > a{font-size:17px; font-weight:500; color: #fff; opacity: 0.8; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: all 0.1s;}
#cssmenu > ul > li:hover > ul{transition:all 0.8s ease; z-index:999; text-align:center; height: auto; display: block;}
#cssmenu ul.depth02 > li > a:hover {opacity: 1; color: #fff; font-weight: 600;}


.nav .nav-right{align-items:center; position: absolute; right: 0;}

/* 영문페이지 버튼 */
.nav .lang {border-radius: 50px; background: rgba(255, 255, 255, 0.15); transition: all 0.3s; margin-left: 70px; color: #fff; padding: 7px 20px; padding-left: 16px;}
.nav .lang i {font-size: 17px;}
.nav .lang a {display: inline-flex; justify-content: center; align-items: center; color: inherit; font-size: 15px; font-family: 'SUIT'; font-weight: 600; position: relative; opacity: 0.45; transition: all 0.3s;}
.nav .lang a:nth-of-type(1):after {content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 6px; background: #fff; opacity: 0.3;}
.nav .lang a.active {opacity: 1;}
.nav .lang a:hover {opacity: 1;}

/*햄버거메뉴*/
.nav h1.pc-menu{display:none; position:relative; width:30px; height:20px; text-align:center; cursor:pointer; transition:0.3s;}
.nav h1.pc-menu button{background:none; border:none; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between;}
.nav h1.pc-menu span{width:100%; height:2px; border-radius:1px; background:#fff; display:block; transition:0.3s;}

/* ani 효과 */
.nav.ani .cs-logo {transform:translateX(-25px); opacity:0; transition:all 1s 0.2s ease;}
.nav.in-view .cs-logo {transform: translateX(0); opacity:1; transition:all 1s 0.2s ease;}
.nav #cssmenu > ul > li {transform: translateX(25px); opacity:0; transition:all 1s 0.2s ease;}
.nav.in-view #cssmenu > ul > li {transform: translateX(0); opacity:1; transition:all 1s 0.2s ease;}
.nav h1.pc-menu {transform: translateX(25px); opacity: 0; transition:all 1s 0.2s ease;}
.nav.in-view h1.pc-menu {transform: translateX(0); opacity: 1; transition:all 1s 0.2s ease;}

@media (max-width: 1600px) {
    #cssmenu > ul {gap: 55px;}
    #cssmenu > ul > li > a {font-size: 18px;}
}

@media (max-width: 1440px){
    #header.scrollFx {height: 90px;}
    #header.scrollFx .nav {height: 90px;}
    #header {height: 90px;}
    .nav {height: 90px;}

    .nav .cs-logo a.logo-1 {width: 340px; height: 52px;}
    #cssmenu > ul > li.contact a {padding: 8px 20px;}
    #cssmenu > ul > li > ul.depth02 > li > a {font-size: 15px;}
}

@media (max-width: 1300px){
    #cssmenu{display:none;}
    .nav .lang {display: none;}

	.nav .nav-right {display: flex;}
	.nav h1.pc-menu{display:flex; justify-content:center; align-items:center; }
}

@media (max-width:767px){
    .nav{height:80px; padding: 0;}
	#header{height:80px;}
	#header.scrollFx{height:80px;}
	#header.scrollFx .nav{height:80px;}

    .nav .cs-logo a.logo-1 {width: 280px; height: 42px;}
    .nav h1.pc-menu {width: 27px; height: 18px;}
}

@media (max-width: 360px) {
    .nav .cs-logo a.logo-1 {width: 246px; height: 36px;}
}



/* 모바일 사이드메뉴 */
.all-menu{position:fixed; top:0; left:calc(100% - 0px); width:450px; height:100%; background: #ffffffdb; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); overflow:hidden; z-index:11000; font-weight:400; transition:all 0.6s; box-shadow: -10px 0 28px rgba(0,0,0,0.04);}
.all-menu.open{left:calc(100% - 450px);}
.all-menu > *{color:#fff;}
.all-menu .inner{position:relative;}
.all-menu .menu-h{position:relative; width:100%; height:80px; padding:37px 60px 0 60px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.all-menu .menu-h .left{position:relative; display: flex; flex-direction: column;}
.all-menu .menu-h .left .home {font-size: 30px; font-weight: 800; color: #333; font-family: 'SUIT';}

/* .all-menu .menu-h .left .lang {padding: 3px 15px; border-radius: 50px; background: rgb(179 179 179 / 40%); transition: all 0.3s;} 
.all-menu .menu-h .left .lang a {color: #888888; font-size: 15px;}
.all-menu .menu-h .left .lang:hover a {color: #333;} */


.all-menu .lang {display: inline-block; border-radius: 50px; background: rgb(179 179 179 / 20%); transition: all 0.3s; color: #5a5a5a; padding: 7px 20px; padding-left: 16px; margin-left: 60px; margin-top: 15px;}
.all-menu .lang i {font-size: 17px;}
.all-menu .lang a {display: inline-flex; justify-content: center; align-items: center; color: inherit; font-size: 15px; font-family: 'SUIT'; font-weight: 600; position: relative; opacity: 0.45; transition: all 0.3s;}
.all-menu .lang a:nth-of-type(1):after {content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 6px; background: #777; opacity: 0.3;}
.all-menu .lang a.active {opacity: 1;}
.all-menu .lang a:hover {opacity: 1;}

.all-menu .menu-h .close{position:relative; width:33px; height:33px; background:none; border:0;}
.all-menu .menu-h .close span{position:absolute; top:0; background:#000; width:2px; height:100%;}
.all-menu .menu-h .close span:first-child{transform:rotate(-45deg); left:15px;}
.all-menu .menu-h .close span:last-child{transform:rotate(45deg); left:15px;}

.all-menu .right-info{padding:15px 60px; display:flex;}
.all-menu .right-info li{position:relative;}
.all-menu .right-info li a{color:#656565; font-weight: 600; font-size:14px;}
.all-menu .right-info > li + li:before{content:""; display:inline-block; width:1px; height:10px; background:#b2b2b2; margin:0 10px; position: absolute; top: 50%; transform: translateY(-50%);}

.all-menu .menu-box{padding-top:30px; height:calc(100% - 90px);}
.all-menu .menu-box .box{position:relative; padding:20px 60px; transition:0.5s;}
.all-menu .menu-box .box:after{display:block; content:""; position:absolute; bottom:0; transform:translateX(-50%); left:50%; width:calc(100% - 120px); height:1px; background:rgb(0 0 0 / 15%); padding: 0 20px;}
.all-menu .menu-box a{color: #333; font-weight:600; font-size:22px; line-height:1; display: block; width: 100%; display: flex; align-items: center;justify-content: space-between;}
.all-menu .menu-box a i {font-weight: 500;}
.all-menu .menu-box ul{display:flex; flex-direction: column; margin-top: 20px;}
.all-menu .menu-box ul li a{display:inline-block; font-size:17px; line-height:1.6; color:#2a374d; font-weight:500; vertical-align:top; letter-spacing: 0.3px; transition:0.2s; position: relative; padding-left: 10px;}
.all-menu .menu-box ul li + li {margin-top: 10px;}
.all-menu .menu-box ul li a{display:inline-block; font-size:17px; line-height:1.6; color:#ffffffe0; font-weight:400; vertical-align:top; transition:0.2s; position: relative; padding: 8px; padding-left: 10px; background: #535353; border-radius: 5px; transition: all 0.2s;}
.all-menu .menu-box ul li a:hover{color: #fff; font-weight: 600; opacity: 1;}
.all-menu .menu-box ul li:hover a {background: #232323; color: #fff;}
.all-menu .menu-box ul li.detph2:before{display:none;}


@media(max-width: 1280px){
	.all-menu .menu-h{padding:20px 6% 0 5%;}
	.all-menu .right-info{padding:20px 6% 10px;}
	.all-menu .menu-box{height: calc(100% - 150px);padding: 0; margin-top: 10px;}
	.all-menu .menu-box .box{padding: 20px 6%;}
	.all-menu .menu-box .box:after{width:calc(100% - 10%);}
	.all-menu .menu-box .box:hover{background:transparent;}

    .all-menu .lang {margin-left: 5.6%;}
}

@media(max-width: 1024px){
.all-menu .menu-box .box:nth-of-type(3) h2 {margin-bottom: 0;}
.all-menu .menu-box .box:nth-of-type(4) h2 {margin-bottom: 0;}
.all-menu .menu-box .box:nth-of-type(5) h2 {margin-bottom: 0;}
}

@media(max-width:767px){
	.all-menu{width:100%;}
	.all-menu.open{left:0%;}
    .all-menu .menu-h {height: 62px; margin-bottom: 0; padding: 8px 6% 0 5%;}
    .all-menu .menu-h .sub-logo {height: 42px;}
    .all-menu .menu-h .sub-logo img{height: 46px;}
	.all-menu .menu-h .close{width:27px; height:27px; margin-top:6px;}	
	.all-menu .menu-box{height:calc(100% - 105px);}
    .all-menu .menu-box a {font-size: 20px;}
	.all-menu .menu-box .box{padding:17px 5%;}
	.all-menu .menu-box ul li a{font-size:15px;}
    .all-menu .menu-box ul li a:before {top: 10px;}
    .all-menu .menu-box ul li + li {margin-top: 6px;}
	.all-menu .menu-box ul li + li:before{height:12px; margin:0 10px 0 9px; margin-top:6px;}
}

@media(max-width:640px){
	.all-menu .side-lang{display:block; padding:0px 5%;}
}