/* header 고정 */
#header{width:100%; position:fixed; height:80px; top:0; z-index: 100; 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(5px); -webkit-backdrop-filter: blur(5px); transition: background 0.4s;}

#header.scrollFx{width:100%; position:fixed; height:80px; top:0; box-shadow:0 4px 12px rgba(0,0,0,0.08); z-index: 100;}
#header.scrollFx:before {background: rgb(255 255 255 / 88%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.4s;}
#header.scrollFx .nav{height:80px; }
#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: #809918;}
#header.scrollFx h1.pc-menu span{border-color:#474747 !important;}
#header.scrollFx h1.pc-menu:hover span {background: #474747;}

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

/* nav */
.nav{width:100%; margin:0 auto; height:80px; 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;}
.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-uni-w.svg"); background-repeat:no-repeat; background-position: center; background-size: contain; width: 125px; height: 36px;}
.nav .cs-logo a.logo-2{display:inline-block; background-image:url("../images/common/logo-w.svg"); background-repeat:no-repeat; background-position: center; background-size: contain; width: 300px; height: 70px;}

.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%;}
#cssmenu a{display:block;}
#cssmenu > ul{display:flex; justify-content:center; gap:75px; transition:all 0.8s ease; height:100%;}
#cssmenu > ul > li{position:relative; text-align:left;}
#cssmenu > ul > li > a{font-size:19px; font-weight:400; color:#fff; height:100%; display:flex; line-height:1; align-items:center; justify-content:center; position: relative; font-family: 'Nippo';}

/* depth02 메뉴 */
/* #cssmenu > ul > li > ul.depth02{height:0; position:absolute; top:85px; 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;} */
#cssmenu > ul > li > ul.depth02{position:absolute; top: 75px; left:50%; background: rgb(0 0 0 / 65%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding: 18px 15px; border-radius: 8px; opacity: 0; visibility: hidden; transform: translateX(-50%) rotateX(-90deg); transform-origin: 0 0;  transition: all 0.2s ease;}
#cssmenu > ul > li > ul.depth02 > li {width: 215px; 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:400; color: #fff; opacity: 0.8; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-family: 'Nippo'; transition: all 0.1s; text-align: center;}
#cssmenu > ul > li > ul > li > a{font-size:16px; line-height:1.9; font-weight:400;}
#cssmenu ul.depth02 > li > a:hover {opacity: 1; color: #a5c520;}

/* 메뉴 hover */
#cssmenu > ul > li:hover > ul{opacity: 1;visibility: visible; transform: translateX(-50%) rotateX(0);}
#cssmenu > ul > li:hover > ul > li {opacity: 1; visibility: visible; transform: translateY(0);}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+1) {-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+2) {-webkit-transition-delay: 0.15s; transition-delay: 0.15s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+3) {-webkit-transition-delay: 0.2s; transition-delay: 0.2s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+4) {-webkit-transition-delay: 0.25s; transition-delay: 0.25s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+5) {-webkit-transition-delay: 0.3s; transition-delay: 0.3s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+6) {-webkit-transition-delay: 0.35s; transition-delay: 0.35s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+7) {-webkit-transition-delay: 0.4s; transition-delay: 0.4s;}
#cssmenu > ul > li:hover > ul > li:nth-child(2n+8) {-webkit-transition-delay: 0.45s; transition-delay: 0.45s;}


/*햄버거메뉴*/
.nav .nav-right{margin-left: 75px;}
.nav h1.pc-menu{position:relative; text-align:center; cursor:pointer; z-index:100; transition: all 0.3s;}
.nav h1.pc-menu button{border: 0; display: grid; grid-template-columns: repeat(2, 1fr); justify-items:center; align-items: center; gap: 2px; background: none;}
.nav h1.pc-menu span {border: 2px solid #fff; background: transparent; width: 10px; height: 10px; transition: all 0.3s;}
.nav h1.pc-menu button:hover span {background: #fff;}

/* 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: 1500px){
    #header.scrollFx {height: 90px;}
    #header.scrollFx .nav {height: 90px;}
    #header {height: 90px;}
    .nav {height: 90px;}

    .nav .cs-logo a.logo-1 {width: 115px; height: 33px;}
    .nav .cs-logo a.logo-2 {width: 230px; }
    .nav .nav-right {margin-left: 55px;}

	#cssmenu > ul{gap:55px;}
	#cssmenu > ul > li > a{font-size:18px;}
    #cssmenu > ul > li.contact a {padding: 8px 20px;}
    #cssmenu > ul > li > ul.depth02 {top: 75px;}
    #cssmenu > ul > li > ul.depth02 > li > a {font-size: 16px;}
}

@media (max-width: 1200px){
    #cssmenu{display:none;}
}

@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: 99px; height: 27px;}
    .nav .cs-logo a.logo-2 {width: 220px;}
    .nav h1.pc-menu span {width: 9px; height: 9px;}
}

@media (max-width:480px){
    .nav .cs-logo a.logo-1 {width: 83px; height: 24px;}
    .nav .cs-logo a.logo-2 {width: 180px; }
}




/* 모바일 메뉴 */
.allmenu{display:none;position:fixed;left:0;top:0;height:100vh;width:100%; background: rgb(40 40 40 / 90%); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index: 999; max-height:100%; overflow:auto; -ms-overflow-style: none; /* IE, Edge 스크롤바 숨기기 */ scrollbar-width: none; /* Firefox 스크롤바 숨기기 */}
/* 스크롤바 숨기기 (Chrome, Safari) */
.allmenu::-webkit-scrollbar {display: none;}
/* allmenu 오픈시 body의 스크롤 막기 */
body.no-scroll {overflow: hidden; position: fixed; width: 100%; height: 100%;}

.allmenu .menu_top{margin:3rem auto 0; max-width: 1300px; width: 90%; display: flex;align-items: flex-end; justify-content: space-between; gap: 20px;}
.allmenu .menu_top h1 {opacity: 0; transform: translateX(-20px); transition: opacity 1s, transform 1s;}
.allmenu.open .menu_top h1 {opacity: 1;transform: translateX(0px);}
.allmenu h1{display: flex;align-items: flex-end;gap: 20px;}
.allmenu h1 > a{display:inline-block;width: 330px;height: 70px;text-indent:-9999px;background:url("../images/common/logo-w.svg") no-repeat;background-size: 100%;}

/* 로그인 버튼 */
.allmenu h1 .utile-wrap > li > a{color:#fff;font-family: 'Nippo', sans-serif;font-weight:400;font-size: 18px;opacity:.8;transition:.3s;}
.allmenu h1 .utile-wrap > li > a:hover{text-decoration:underline; opacity:1;}
.allmenu h1 .utile-wrap > li > a > i{font-weight:normal;}

.allmenu button.btn-x{position:relative; display:inline-block;padding:0;background-color:transparent;border:none;z-index:4;}
.allmenu button.btn-x > span{padding-left: 46px;font-size:18px;line-height:16px;color: #ffffffd8;display:inline-block;text-transform: uppercase; position: relative; font-family: 'Nippo';}
.allmenu button.btn-x > span:before,
.allmenu button.btn-x > span:after{content: "";width: 100%;height: 0.2rem;background-color:#ffffffd8;display: inline-block;position:absolute;top:39%;left: 0;transform: translateY(-50%); transition:.3s;}
.allmenu button.btn-x > span:before{width:2.5rem;margin:0;transform: rotate(45deg);}
.allmenu button.btn-x > span:after{width:2.5rem;margin:0;transform: rotate(135deg);}
.allmenu button.btn-x:hover span {color: #fff;}
.allmenu button.btn-x:hover span:before, .allmenu button.btn-x:hover span:after {background-color:#fff;}


.allmenu .allmenuwrap{max-width:1310px;width: 90%;margin: 0 auto; margin-top: 3%;}
.allmenu .allmenuwrap .boxwrap{padding: 3rem 0;width: 100%;display: flex;/* flex-wrap: wrap; */align-items: center;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.2);transition: border-bottom-color 0.5s;overflow: hidden;transition:.3s;}
.allmenu .allmenuwrap .boxwrap:hover{border-color:#fff;}
.allmenu .allmenuwrap .boxwrap > h2{width:311px;font-size: 34px;position: relative;line-height:1;font-weight:600;transition:.3s;}
.allmenu .allmenuwrap .boxwrap > h2 > a{color:#fff; opacity:.7; transition:.3s; font-family: 'Nippo'; font-weight: 500;}
.allmenu .allmenuwrap .boxwrap:hover > h2 > a{color:#a5c520; opacity:1;}
.allmenu .allmenuwrap .boxwrap > ul{display:flex;flex-wrap: wrap;justify-content: flex-end;transition: all 0.4s;}
.allmenu .allmenuwrap .boxwrap > ul > li{position:relative;box-sizing:border-box;}
.allmenu .allmenuwrap .boxwrap >ul > li + li{margin-left:2.2rem;}
.allmenu .allmenuwrap .boxwrap > ul > li > a {position: relative;display: block;color: #fff;font-size: 19px;font-weight: 400;opacity: .8;transition:.3s; font-family: 'Nippo';}
.allmenu .allmenuwrap .boxwrap > ul > li > ul{margin-top:10px;}
.allmenu .allmenuwrap .boxwrap > ul > li > ul > li > a{font-size:15px; color:rgba(255,255,255,0.5); font-weight:300;}
.allmenu .allmenuwrap .boxwrap > ul > li > a:before{position:absolute; bottom:-4px; left:50%; width:0; height:0.2rem; background-color: #fff; content: ''; transition:.3s;}
.allmenu .allmenuwrap .boxwrap > ul > li + li a:after{position: absolute;top: 0rem;left: -1.3rem;font-size: 1.4rem;color: rgba(255, 255, 255, 0.3);content: '|';font-weight: 300;pointer-events: none;}
.allmenu .allmenuwrap .boxwrap > ul > li > a:hover{opacity:1;}
.allmenu .allmenuwrap .boxwrap > ul > li > a:hover:before{width: 100%; margin-left: -50%;}

@media (max-width: 1500px){
	.allmenu .menu_top {width: 88%; align-items: center; margin: 40px auto 30px;}
    .allmenu .menu_top h1 > a {width: 340px;}

    .allmenu .allmenuwrap .boxwrap {padding: 28px 20px;}
	.allmenu .allmenuwrap .boxwrap > h2 {width: 200px; font-size: 30px;}
	.allmenu .allmenuwrap .boxwrap > ul {width: auto;}
    .allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 18px;}
    .allmenu .allmenuwrap .boxwrap > ul > li.eng > a {font-size: 22px;}

    .allmenu button.btn-x > span {padding-left: 36px;}
	.allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {height: 2px; width: 32px;}
}

@media (max-width: 1340px){
	.allmenu .menu_top {width: 90%; margin: 30px auto 20px;}
    .allmenu .menu_top h1 > a {width: 300px;}

    .allmenu .allmenuwrap {position: relative; left: initial; top: initial; transform: translate(0);}
	.allmenu .allmenuwrap .boxwrap{padding:28px 0;}
    .allmenu .allmenuwrap .boxwrap > h2 {font-size: 25px;}
    .allmenu .allmenuwrap .boxwrap > h2 > a {color: #a5c520; opacity: 1;}

	.allmenu .allmenuwrap .boxwrap > ul {width: 100%; justify-content: flex-start; row-gap: 10px; margin-top: 15px;}
    .allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 16px;}
    .allmenu .allmenuwrap .boxwrap > ul > li.eng > a {font-size: 19px;}

    .allmenu .allmenuwrap .boxwrap > ul > li + li a:after {display: none;}
    .allmenu .allmenuwrap .boxwrap > ul > li + li {margin-left: 0;}
    .allmenu .allmenuwrap .boxwrap > ul > li + li:before {content: ''; display: inline-block; background: rgba(255, 255, 255, 0.3); width: 1px; height: 14px; margin: 0 20px; position: relative; top: 2px;}
    .allmenu .allmenuwrap .boxwrap > ul > li > a {display: inline-block;}
}

@media (max-width: 1200px){
	.allmenu .allmenuwrap {padding-bottom: 80px;}
	.allmenu .allmenuwrap .boxwrap{flex-wrap: wrap;}
	.allmenu .allmenuwrap .boxwrap > h2{width:100%;}
    .allmenu .menu_top {flex-direction: column; gap: 20px;}
    .allmenu .menu_top h1 {transform: translateY(-20px); flex-direction: column; align-items: center;}
    .allmenu .menu_top h1 > a {width: 270px;}
    .allmenu.open .menu_top h1 {opacity: 1;transform: translateY(0px);}

    .allmenu button.btn-x {padding: 16px 14px 16px 18px; background: #ffffff21; border-radius: 100px; display:flex; justify-content: center; align-items: center;}
    .allmenu button.btn-x > span {padding-left: 22px; font-size: 15px;}
    .allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {width: 19px; top: 39%;}

    .allmenu .allmenuwrap .boxwrap > ul {flex-direction: column; align-items: flex-start;}
    .allmenu .allmenuwrap .boxwrap > ul > li + li:before {display: none;}
}

@media (max-width: 350px) {
    .allmenu .menu_top {gap: 10px;}
    .allmenu .menu_top h1 > a {width: 235px;}

    .allmenu button.btn-x > span {font-size: 15px; padding-left: 22px;}
    .allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {width: 17px;}
}