.nav{position:relative;width:100%;z-index:100;margin:0 auto;/* max-width: 1830px; */left: 50%;/* top: 18px; */transform:translate(-50%, -80px);/* border: 1px solid rgb(255,255,255,.2); *//* background: rgb(255, 255, 255, .1); *//* border-radius: 25px; */padding: 0 3%;height: 100px;position:fixed;transition:.4s;background: #fff;}
.nav.in-view{transform:translate(-50%, 0%);}
.nav:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;opacity:0;backdrop-filter:blur(20px);transition:.4s;}
/*.nav:hover{background:#fff;}*/
.nav:hover #cssmenu > ul > li > a{/* color:#222; */}
.nav:hover .cs-logo a.logo-1{/* background-image:url("/images/common/logo.png"); */}
.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{height: 100px;max-width: 100%;top: 0;border-radius: 0 0 30px 30px;background: #fff;box-shadow: 0px 5px 23px 4px rgba(0, 0, 0, 0.1);}
.hdWrap.scrollFx .nav:before{/* opacity:1; */}
.hdWrap.scrollFx #cssmenu > ul > li > a{color:#222;}
.hdWrap.scrollFx #cssmenu > ul > li:hover > ul{/*margin-top:-20px;*/}
.hdWrap.scrollFx .cs-logo{align-items:center; transition:.4s;}
.hdWrap.scrollFx .cs-logo a.logo-1{/* width:180px; *//* height:56px; */background-image: url(/images/common/logo_c.png);}
.hdWrap.scrollFx .sch-btn a{color:#777 !important;}

/* 서브일때-흰색 */
.sub-hd{/*background:#fff; border-bottom: 1px solid #ddd;*/}
.sub-hd #cssmenu ul > li > a{color:#222;}
.sub-hd .nav .cs-logo a.logo-1{background-image:url("/images/common/logo.png");}
.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: 265px;height:82px;overflow:hidden;background-image:url("/images/common/logo_c.png");background-repeat:no-repeat;background-position:0 0;transition:all .1s;background-size:100%;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;gap: 35px;transition:all 0.8s ease;/* height:100%; */align-items: center;}
#cssmenu > ul > li{position:relative; text-align:left;}
#cssmenu > ul > li > a{font-size: 20px;font-weight:600;color: #212121;height:100%;border-radius:100px;padding: 12px 25px;line-height:1;position: relative;display: inline-block;overflow: hidden;font-family: 'Paperozi';}
#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: #f0f2f4;color: #222;}
#cssmenu > ul > li > ul{
    margin: 1px 0 0;
    position: absolute;
    top: 100%;
    width: 20px;
    width: 210px;
    padding: 20px 25px;
    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;
    backdrop-filter: blur(10px);
    background-color: #44464cb5;
}
#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 + li{margin-top:8px;}
#cssmenu > ul > li > ul > li > a {
    font-size: 17px;
    text-transform: none;
    letter-spacing: 0em;
    word-spacing: 0px;
    font-style: normal;
    font-weight: 400;
    display: block;
    position: relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    padding: 3px 0;
    font-family: 'Paperozi';
    color:#fff;
}
#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{font-size:16px;line-height: 1.3;font-weight:400;opacity: .6;}
#cssmenu > ul > li > ul > li > a:hover{opacity: 1; color: #cee8ff;}

.nav .nav-right{display:flex; align-items:center; gap:20px;}
.nav .srch{color: #3a4962;font-size:30px;}
.nav .sch-btn{display:flex; padding:10px 35px; align-items:center; justify-content:center;}
.nav .sch-btn a{font-size:14px; color:#777; font-family:'GmarketSansMedium'; line-height:1; transition:0.3s; padding:10px 0; position:relative;}
.nav .sch-btn > a + a:before{
    content:""; display:inline-block; width:1px; height:13px; background:#e0e0e0; margin:0 0 0 10px;
    position:absolute; left:0; top:50%; transform:translate(0%, -50%);
}
.nav .sch-btn > a + a{padding-left:20px;}
.nav .sch-btn a.log{padding-left:23px;}
.nav .sch-btn a > i{font-size:20px; position:absolute; left:0; top:7px;}

/*햄버거메뉴*/
.nav h1.pc-menu{position:relative;width: 50px;height: 50px;text-align:center;cursor:pointer;display: flex;justify-content:center;align-items:center;transition:.3s;}
.nav h1.pc-menu button{background:none;border:none;width: 24px;height: 24px;position: relative;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;transition:.3s;}
.nav h1.pc-menu button span{width:9px;height:9px;border-radius:50%;background: #3a4962;position:absolute;}
.nav h1.pc-menu button span:nth-child(1){left:0; top:0;}
.nav h1.pc-menu button span:nth-child(2){right:0; right:0;}
.nav h1.pc-menu button span:nth-child(3){left:0; bottom:0;}
.nav h1.pc-menu button span:nth-child(4){right:0; bottom:0;}
.nav h1.pc-menu:hover button{background: url("/images/common/allmenu_on.png") no-repeat 50% 50%;}

.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: 1400px){
	#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){
	#cssmenu{display:none;}
}
@media (max-width: 767px){
	.nav{height:80px; border-radius: 0 0 15px 15px;}
	.hdWrap{height:80px;}
	.hdWrap.scrollFx{height:80px;}
	.hdWrap.scrollFx .nav{height:80px; border-radius: 0 0 15px 15px;}
	.nav .cs-logo a.logo-1,
	.hdWrap.scrollFx .cs-logo a.logo-1{width:240px; height:40px;}
}

.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{display:none;position:fixed;left:0;top:0;vertical-align:middle;height:100vh;width:100%;background: rgb(31 32 71 / 90%);backdrop-filter:blur(10px);z-index: 999;}
.allmenu h1{margin: 30px 0 0 76px;display: flex;align-items: flex-end;gap: 20px;}
.allmenu h1 > a{display:inline-block;width: 265px;height: 82px;text-indent:-9999px;background:url("/images/common/logo_w.png") no-repeat;background-size: 100%;}
.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;padding:0;background-color:transparent;border:none;z-index:4;}
.allmenu button.btn-x > span{padding-left: 3.5rem;font-weight: bold;font-size:16px;line-height:16px;color: #fff;display:inline-block;text-transform: uppercase;}
.allmenu button.btn-x > span:before,
.allmenu button.btn-x > span:after{content: "";width: 100%;height: 0.2rem;background-color:#fff;display: inline-block;position:absolute;top:50%;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 .allmenuwrap{max-width:1200px;width: 90%;margin: 0 auto;height: 100vh;display: flex;flex-direction: column;align-items: center;padding: 70px 0 0;}
.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: 200px;font-size: 34px;color:#fff;position: relative;line-height:1;font-weight:600;color: #fff;transition:.3s;}
.allmenu .allmenuwrap .boxwrap > h2 > a{color:#fff;opacity:.7;transition:.3s;font-weight: 700;font-family: 'Paperozi';}
.allmenu .allmenuwrap .boxwrap:hover > h2 > a{color:#fff; opacity:1;}
.allmenu .allmenuwrap .boxwrap > ul{display:flex;flex-wrap: wrap;width: calc(100% - 200px);gap: 10px 0;transition: all 0.4s;justify-content: flex-end;}
.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.5;opacity: .8;font-family: 'Paperozi';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{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: -2.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 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: 130px;font-size: 24px;}
	.allmenu .allmenuwrap .boxwrap > ul {width: calc(100% - 130px); row-gap: 10px;}
	.allmenu .allmenuwrap .boxwrap >ul > li + li {margin-left: 30px;}
	.allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 18px;}
	.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;}
	.allmenu .allmenuwrap .boxwrap{padding:20px 0;}
	.allmenu .allmenuwrap .boxwrap > h2 {font-size: 20px;}
	.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;}
}



/* 검색 팝업 스타일 */
.search-popup{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:10000; animation:fadeIn 0.3s ease;}
.search-popup.active{display:flex; align-items:center; justify-content:center;}
.search-popup-content{position:relative; background:#fff; border-radius:20px; padding:60px 40px 40px; max-width:600px; width:90%; animation:slideUp 0.3s ease;}
.search-close{position:absolute; top:20px; right:20px; background:none; border:none; font-size:28px; cursor:pointer; color:#666; transition:all 0.3s ease; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%;}
.search-close:hover{background:#f5f5f5; color:#000; transform:rotate(90deg);}
.search-container h2{font-size:28px; font-weight:700; margin-bottom:30px; text-align:center; color: #01348b; font-family: 'Paperozi';}
.search-input-wrapper{position:relative; display:flex; gap:10px;}
#search_input{flex:1;padding: 15px 25px;font-size:16px;border:2px solid #e0e0e0;border-radius:50px;outline:none;transition:all 0.3s ease;}
#search_input:focus{border-color:#667eea; box-shadow:0 0 0 4px rgba(102,126,234,0.1);}
.search-submit-btn{padding: 15px 32px;background:linear-gradient(135deg, #0064f0 0%, #01348b 100%);color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.search-submit-btn:hover{transform:translateY(-2px); box-shadow:0 10px 25px rgba(102,126,234,0.3);}
.search-submit-btn i{font-size:18px;}
.srch{cursor:pointer; transition:all 0.3s ease;}
.srch:hover{transform:scale(1.1);}

@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes slideUp{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}

@media (max-width:768px){
.search-popup-content{padding:50px 25px 30px; width:95%;}
.search-container h2{font-size:24px; margin-bottom:25px;}
.search-input-wrapper{flex-direction:column;}
#search_input{padding:15px 20px; font-size:15px;}
.search-submit-btn{padding:15px 30px; width:100%; justify-content:center;}
}