.nav{position: relative; width: 100%; z-index: 100; margin: 15px auto 0; left: 50%; transform: translate(-50%, -80px); padding: 0 3%; height: 100px; transition: .4s;}
.nav.in-view{transform: translate(-50%, 0%);}
.nav:hover #cssmenu ul > li > a{}
.nav:hover .cs-logo a.logo-1{}
.nav:hover .sch-btn a{color:#474747 !important; border-color:#474747 !important;}
.nav:hover .sch-btn a:hover{color:#000 !important;}

/* 상단 고정 */
.hdWrap{width:100%;position:fixed;height: 100px;top:0;z-index:100;transition:.4s;}
.hdWrap.scrollFx{width:100%;position:fixed;height:100px;top:0;}
.hdWrap.scrollFx .nav{width: 100%; height: 80px; margin: 0; transform: translateX(-50%); border-radius: 0 0 30px 30px; background: #fff; box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);}
.hdWrap.scrollFx #cssmenu ul > li > a{}
.hdWrap.scrollFx #cssmenu > ul{box-shadow: none;}
.hdWrap.scrollFx #cssmenu > ul > li:hover > ul{}
.hdWrap.scrollFx .cs-logo{align-items:center; transition:.4s;}
.hdWrap.scrollFx .cs-logo a.logo-1{}
.hdWrap.scrollFx .sch-btn a{color:#777 !important;}

/* 서브일때-흰색 */
.sub-hd{}
.sub-hd #cssmenu ul > li > a{color:#222;}
.sub-hd .nav .cs-logo a.logo-1{background-image:url("../images/common/logo.svg");}
.sub-hd .nav .sch-btn a{color:#777 !important;}
.sub-hd .nav .sch-btn a:hover{color:#000 !important;}

.sub-hd.scrollFx{margin-top:0px;}
.sub-hd.scrollFx .headDiv{margin-top:0px !important;}
.hdWrap.scrollFx #gnb .oneD{color:#333;}
.hdWrap.scrollFx #gnb .oneD{line-height:75px;}
.hdWrap.scrollFx .hd-right .login-top a{color:#10344a !important; border:1px solid rgb(16,52,74,.5) !important;}
.hdWrap.scrollFx .hd-right .login-top a:hover{background:#082b4c !important; border-color:#082b4c !important; color:#fff !important;}
.hdWrap.scrollFx .hd-right .lang-top a{color:#333 !important;}
.hdWrap.scrollFx .hd-right .lang-top li a:before{background:#333 !important;}

.nav .hd-wrap{position:relative;margin:0 auto;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;transition:.4s;}

.nav .cs-logo{display:flex;align-items: center;height:100%;transition:.4s;}
.nav .cs-logo a.logo-1{display:inline-block;width: 260px;height: 52px;overflow:hidden;background-image:url("../images/common/logo.svg");background-repeat:no-repeat;background-position:0 0;transition:all .1s;background-size:contain;transition:.4s;}
.nav .cs-logo a.logo-1:hover{opacity:.8;}

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

#cssmenu{display: inline-flex;margin:0 auto;height:100%;align-items: center;}
#cssmenu a{display:block;}
#cssmenu > ul{display: flex; justify-content: center; align-items: center; gap: 35px; height: 60px; padding: 0 40px; background: #fff; border-radius: 100px; box-shadow: 0 0 10px rgba(32,36,84,.1); transition: all 0.8s ease;}
#cssmenu > ul > li{position:relative; text-align:left;}
#cssmenu > ul > li > a{font-size: 18px; font-weight: 600; text-align: center; color: #212121; height: 100%; border-radius: 100px; padding: 12px 25px; line-height: 1; position: relative; display: inline-block; overflow: hidden;}
#cssmenu > ul > li > a > span:not(.on) {position: absolute; padding: inherit; left: 0; top: 0; opacity: 0; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%);}
#cssmenu > ul > li > a > .on {display: inline-block; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;}
#cssmenu > ul > li > a:hover > .on {opacity: 0; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%);}
#cssmenu > ul > li > a:hover:hover > span:not(.on) {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
#cssmenu > ul > li > a:hover{background-color: #f5f9ff;}

#cssmenu > ul > li > ul{margin: 1px 0 0; position: absolute; top: 100%; left: 0; width: 200px; padding: 15px 17px; opacity: 0; visibility: hidden; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; z-index: 4; -webkit-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; text-align: left; background-color: #fff; box-shadow: 0 0 10px rgba(32, 36, 84, .1);}
#cssmenu > ul > li:nth-child(5) > ul{width: 210px;}
#cssmenu > ul > li:nth-child(2) > ul,
#cssmenu > ul > li:nth-child(5) > ul{width: 170px;}
#cssmenu > ul > li:nth-child(3) > ul{width: 220px;}
#cssmenu > ul > li > ul > li{position: relative; list-style: none; margin: 0; opacity: 0; visibility: hidden; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); -webkit-transition: all 0.2s cubic-bezier(0.4, 0.28, 0.31, 1.28) 0s; transition: all 0.2s cubic-bezier(0.4, 0.28, 0.31, 1.28) 0s;}
#cssmenu > ul > li > ul > li > a{font-size: 17px; line-height:1.9; text-transform: none; letter-spacing: 0em; word-spacing: 0px; font-style: normal; font-weight: 600; display: block; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 3px 20px 3px 0; color: #0f1b20; opacity: .7;}
#cssmenu > ul > li:hover > ul{opacity: 1; visibility: visible; -webkit-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0);}
#cssmenu > ul > li:hover > ul > li { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); 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;}
#cssmenu > ul > li > ul > li > a:hover{color: #2b65fe; opacity: 1;}

.nav .nav-right{display: flex; align-items: center;}

/* 로그인,로그아웃,회원가입 */
.nav .util{}
.nav .util ul.util_l{display: flex; gap: 8px;}
.nav .util ul.util_l li{}
.nav .util ul.util_l li a{position: relative; display: inline-block; overflow: hidden; display: flex; align-items: center; padding: 12px 18px; border-radius: 50px; border: 1px solid #000;}
.nav .util ul.util_l li a .txt span{font-weight: 600; font-size: 14px;}
.nav .util ul.util_l li a .arrow{margin-left: 3px; width: 18px; height: 18px; background: url('../images/common/arrow-right-up-line.svg') no-repeat 50% 50% /contain;}
.nav .util ul.util_l li.mypage a,
.nav .util ul.util_l li.login a{background: #0f1b20; border-color: #0f1b20;}
.nav .util ul.util_l li.mypage a .txt span,
.nav .util ul.util_l li.login a .txt span{color: #fff;}
.nav .util ul.util_l li.mypage a .arrow,
.nav .util ul.util_l li.login a .arrow{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.nav .util ul.util_l li a .txt > span:not(.on) {position: absolute; padding: inherit; top: 50%; left: 18px; opacity: 0; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%);}
.nav .util ul.util_l li a .txt > .on {display: inline-block; -webkit-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;}
.nav .util ul.util_l li a:hover .txt > .on {opacity: 0; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%);}
.nav .util ul.util_l li a:hover:hover .txt > span:not(.on) {opacity: 1; top: 50%; left: 18px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}


/*햄버거메뉴*/
.nav h1.pc-menu{position: relative;}
.nav h1.pc-menu button.pc-sm {position: relative; width: 48px; height: 48px; margin-left: 15px; border-radius: 50%; background: #e8e8e8; border: none;}
.nav h1.pc-menu button.pc-sm .hambergerIcon{width: 18px; height: 2px; position: absolute; top: 50%; left: 50%; background-color: #0f1b20; transform: translate(-50%, -50%) rotate(0deg); transition: all ease 0.5s;}
.nav h1.pc-menu button.pc-sm .hambergerIcon::before,
.nav h1.pc-menu button.pc-sm .hambergerIcon::after{content: ""; position: absolute; height: inherit; border-radius: inherit; background-color: inherit; margin: auto; width: 11px; transition: all ease 0.5s;}
.nav h1.pc-menu button.pc-sm .hambergerIcon::before{top: -6px; right: 0; transform-origin: right;}
.nav h1.pc-menu button.pc-sm .hambergerIcon::after{bottom: -6px; left: 0; transform-origin: left;}



.shadow{
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1600px){
	.nav .cs-logo a.logo-1{width: 228px; height: 45px;}
	#cssmenu > ul{padding: 0 20px; gap: 15px;}
	#cssmenu > ul > li > a{font-size: 17px;}
	#cssmenu > ul > li > ul{width: 180px;}
	#cssmenu > ul > li:nth-child(2) > ul,
	#cssmenu > ul > li:nth-child(5) > ul{width: 130px;}
	#cssmenu > ul > li > ul > li > a{font-size: 15px;}
	
}

@media (max-width: 1400px){
	.nav{padding: 0 40px;}
	.nav .hd-wrap{gap: 20px;}
	#cssmenu{display:none;}
	#cssmenu > ul {gap: 10px;}
	#cssmenu > ul > li > a {font-size: 18px; padding: 12px 20px;}
}
@media (max-width: 1170px){
	#cssmenu > ul > li > a {font-size: 17px; padding: 12px 15px;}
}

@media (max-width: 990px){
	.hdWrap{height: auto;}
	.nav{height: 70px;}
	.hdWrap.scrollFx{height:auto;}
	.hdWrap.scrollFx .nav{height:70px; border-radius: 0 0 15px 15px;}
}

@media (max-width: 767px){
	.nav{height: 50px; padding: 0 30px;}
	.nav .cs-logo a.logo-1{width: 180px; height: 38px;}
	.nav .util ul.util_l li a{padding: 10px 12px;}
	.nav .util ul.util_l li a .txt span{font-size: 12px;}
	.nav .util ul.util_l li a .arrow{margin-left: 2px; width: 15px; height: 15px;}
	.nav h1.pc-menu button.pc-sm{width: 40px; height: 40px; margin-left: 5px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon{width: 16px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon::before,
	.nav h1.pc-menu button.pc-sm .hambergerIcon::after{width: 9px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon::before{top: -5px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon::after{bottom: -5px;}
	.hdWrap.scrollFx .nav{height:60px; border-radius: 0 0 15px 15px;}
}

@media (max-width: 500px){
	.nav{padding: 0 20px;}
	.nav .cs-logo a.logo-1, .hdWrap.scrollFx .cs-logo a.logo-1{width: 160px; height: 32px;}
	.nav h1.pc-menu button.pc-sm{width: 35px; height: 35px;}
	.nav .util ul.util_l li a{padding: 0; border: 0; border-radius: 0;}
	.nav .util ul.util_l li a:hover .txt > .on{opacity: 1; transform: translateY(0);}
	.nav .util ul.util_l li a:hover:hover .txt > span:not(.on){display: none;}
	.nav .util ul.util_l li.mypage{position: relative;}
	.nav .util ul.util_l li.mypage::before{content: ''; position: absolute;	top: 3px; right: -5px; display: block; width: 1px; height: 13px; background: #999;}
	.nav .util ul.util_l li.mypage a{background: none;}
	.nav .util ul.util_l li.mypage a .txt span{color: #000;}
	.nav .util ul.util_l li.mypage a .arrow,
	.nav .util ul.util_l li.logout a .arrow{display: none;}

}

@media (max-width: 380px){
	.nav .cs-logo a.logo-1, .hdWrap.scrollFx .cs-logo a.logo-1{width: 135px; height: 28px;}
	.nav .util ul.util_l li a .txt span{font-size: 11px;}
	.nav h1.pc-menu button.pc-sm{width: 30px; height: 30px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon{width: 12px; height: 1px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon::before{top: -4px;}
	.nav h1.pc-menu button.pc-sm .hambergerIcon::after{bottom: -4px;}
}

.nav .nav_logo a img{opacity:0; transform:translate(20px, 0%); transition:all 1s 0.2s ease;}
.nav .nav_logo.in-view a img{opacity:1; transform:translate(0, 0%); transition:all 1s 0.2s ease;}

.nav #cssmenu > ul > li{opacity:0; transition:all 1s 0.2s ease;}
.nav.in-view #cssmenu > ul > li{opacity:1; transition:all 1s 0.2s ease;}

/*우측-전체메뉴*/
.allmenu_wr{position: relative; top: 0; left: 0; /* width: 100%; height: 100%; */ opacity: 0; visibility: hidden; z-index: 998;}
.allmenu_wr.open{position: fixed; width: 100%; height: 100%; opacity: 1; visibility: visible;}
.allmenu{display: none; position: fixed; left: 0; top: 0; vertical-align: middle; height: 100vh; width: 100%; z-index: 999;}
.allmenu h1{position: relative; margin: 38px 0 0 3%; display: flex; align-items: flex-end; gap: 20px; z-index: 1;}
.allmenu h1 > a{display: inline-block; width: 260px; height: 52px; text-indent: -9999px; background: url("/images/common/logo.svg") no-repeat; background-size: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.allmenu h1 .utile-wrap{}
.allmenu h1 .utile-wrap > li{}
.allmenu h1 .utile-wrap > li > a{color:#fff;font-family: 'Pretendard', sans-serif;font-weight:600;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: absolute; right: 100px; top: 50px; display: inline-block; width: 30px; height: 30px; padding: 0; background-color: transparent; border: none; background: url('../images/common/close-large-line.svg') no-repeat 50% 50% /contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); z-index:4;}

.allmenu .allmenuwrap{position: relative; max-width: 1400px; width: 100%; margin: 40px auto 0; padding: 0 100px; z-index: 1;}
.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{position: relative; width: 300px; padding-left: 40px; font-size: 34px; color: #fff; line-height: 1; font-weight: 600; color: #fff; transition:.3s;}
.allmenu .allmenuwrap .boxwrap > h2 > span.num{position: absolute; top: 0; left: 0; display: inline-block; font-size: 16px; opacity: .6;}
.allmenu .allmenuwrap .boxwrap > h2 > a{color:#fff; transition:.3s;}
.allmenu .allmenuwrap .boxwrap:hover > h2 > a{color:#fff; opacity:1;}
.allmenu .allmenuwrap .boxwrap > ul{display:flex;flex-wrap: wrap;width:calc(100% - 300px);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:4.2rem;}
.allmenu .allmenuwrap .boxwrap > ul > li > a {position: relative; display: block; color: #fff; font-size: 19px; font-weight: 500; line-height: 1; opacity: .8; transition: .3s;}
.allmenu .allmenuwrap .boxwrap > ul > li > ul{margin-top:10px;}
.allmenu .allmenuwrap .boxwrap > ul > li > ul > li{}
.allmenu .allmenuwrap .boxwrap > ul > li > ul > li > a{position: relative; font-size:15px; color:rgba(255,255,255,0.5); font-weight:300;}
.allmenu .allmenuwrap .boxwrap > ul > li + li a::before{content: ''; position: absolute; top: 50%; left: -33px; transform: translateY(-50%); display: block; width: 1px; height: 15px; background: #fff; opacity: .5; pointer-events: none;}
.allmenu .allmenuwrap .boxwrap > ul > li > a:hover{opacity:1;}
.allmenu_wr .bg_wr{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0 45 163 / 90%); backdrop-filter : blur(8px); opacity: 0; visibility: hidden; z-index: 997;}
.allmenu_wr .bg_wr.open{opacity: 1; visibility: visible;}
.allmenu_wr .bg_wr svg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; display: block; background-image: linear-gradient(to bottom, rgba(14, 65, 102, 0.86)); opacity: .5; z-index: -1;}

@media (max-width: 1500px){
	.allmenu h1{margin: 30px 0 0 2%;}
	.allmenu button.btn-x {right: 2%; top: 35px;}
	.allmenu .allmenuwrap {width: 95%;}
}
@media (max-width: 1400px){
	.allmenu .allmenuwrap .boxwrap > h2 {width: 200px; font-size: 30px;}
	.allmenu .allmenuwrap .boxwrap > ul {width: calc(100% - 200px);}
}
@media (max-width: 1170px){
	.allmenu .allmenuwrap .boxwrap {padding: 25px 0;}
	.allmenu .allmenuwrap .boxwrap > h2 {width: 200px;font-size: 24px;}
	.allmenu .allmenuwrap .boxwrap > ul {width: calc(100% - 200px); row-gap: 10px;}
	.allmenu .allmenuwrap .boxwrap >ul > li + li {margin-left: 30px;}
	.allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 16px;}
	.allmenu .allmenuwrap .boxwrap > ul > li + li a::before{left: -14px;}
	.allmenu .allmenuwrap .boxwrap > ul > li + li a:after {left: -18px; font-size: 18px;}
	.allmenu button.btn-x > span {padding-left: 36px;}
	.allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {height: 2px; width: 30px;}
}
@media (max-width: 767px){
	.allmenu button.btn-x > span {font-size: 14px; line-height: 14px; padding-left: 25px;}
	.allmenu button.btn-x > span:before, .allmenu button.btn-x > span:after {width: 20px;}
	.allmenu h1 .utile-wrap > li > a {font-size: 15px;}
	.allmenu h1 > a{width:240px; height:40px;}
	.allmenu h1 {margin: 12px auto; width: 95%;align-items: flex-start; gap: 10px; flex-direction: column;}
	.allmenu button.btn-x{right: 4%; top:27px; width: 24px; height: 24px;}
	.allmenu .allmenuwrap{padding: 0 60px 0 20px;}
	.allmenu .allmenuwrap .boxwrap{padding:20px 0;}
	.allmenu .allmenuwrap .boxwrap > h2 {width: 100%; padding-left: 26px; font-size: 18px;}
	.allmenu .allmenuwrap .boxwrap > h2 > span.num{top: 2px; font-size: 14px;}
	.allmenu .allmenuwrap .boxwrap > h2 > a br{display: none;}
	.allmenu .allmenuwrap .boxwrap > ul {width: 100%;justify-content: flex-start;row-gap: 10px;margin-top: 10px;}
	.allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 14px;}
}
@media (max-width: 500px){
	.allmenu .allmenuwrap{margin: 20px auto 0;}
}