#header{position: absolute; top: 0; left: 0; width: 100%; z-index: 9;}
.nav{position: relative; width: 100%; height: 100px; margin: 0 auto; left: 50%; transform: translate(-50%, 0); backdrop-filter : blur(6px); border-bottom: 1px solid rgba(255,255,255,.3); transition: .4s; z-index: 90;}
.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: absolute; height: 100px; top: 0; z-index: 100; transition:.4s;}
.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; padding: 0 40px; height: 100%; width: 100%; max-width: none; display: flex; justify-content: space-between; align-items: center; transition: .4s;}

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

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

#cssmenu{display: inline-flex; 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; transition: all 0.8s ease;}
#cssmenu > ul > li{position:relative; text-align:left;}
#cssmenu > ul > li > a{font-size: 22px; font-weight: 400; color: #fff; 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 > 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: #101010; box-shadow: 0 0 10px rgba(32, 36, 84, .1);}
#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: 18px; line-height:1.9; text-transform: none; letter-spacing: 0em; word-spacing: 0px; font-style: normal; font-weight: 500; display: block; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; padding: 3px 20px 3px 0; color: #fff; 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: #34A7E2; opacity: 1;}

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

/* 로그인,로그아웃,회원가입 */
/* 로그인_pc */
.nav.open .util{display:none;}
.nav .util{position:absolute;top:0;right:100px;z-index:101;}
.nav .util_l{display:flex;}
.nav .util li{position:relative;}
.nav .util_l > li + li:before{content: ''; display: inline-block; transform: translateY(3px); width: 1px; height: 15px; background: #b2b2b2; margin: 0 8px;}
.nav .util_l li.language:before{display:none;}
.nav .util_l li a{ line-height:90px; font-size:16px; font-weight:300; letter-spacing:.3px;color:#fff; opacity: .5; transition:all .3s;}
.nav .util_l li a i {padding: 0 5px 0 0}
.nav .util_l li a:hover {opacity: 1;}
.nav .util .lang_l{background:#fff;position:absolute;top:calc(100% - 18px);left:18px;border:1px solid #d1d1d1;box-sizing:border-box;right:0;padding:12px 0;display:none;}
.nav.util li.language > a{display:inline-block;padding-right:50px;background:url(/img/common/language_i.jpg) no-repeat right center;}
.nav .util_l .lang_l a{line-height:1.5;display:block;text-align:center;color:#acacac;letter-spacing:.5px;}
.nav .util_l .lang_l li.on a{color:#222;text-decoration:underline;}
.nav .util_l .lang_l li + li{margin-top:5px;}
.nav .util li.language{padding-left:20px;}

.nav .mobileMenu{display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 0; margin-right: 20px;}

.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);
}

.nav .right-utill{display:flex; align-items:center; justify-content: flex-end; position: relative;}
.nav .right-utill .blank-link{font-weight:400; font-size: 14px; color: #fff; border: 1px solid rgb(255,255,255,.3); display: inline-block; transition: .3s; padding: 14px 18px;}
.nav .right-utill .blank-link:hover{background:#fcb516; border-color:#fcb516; color:#fff;}
.nav .right-utill>*+*{margin-left:4rem;}

.nav h1.pc-menu{}
.nav h1.pc-menu button{transition: all .3s ease-out; transform-origin: 50% 50%; display:inline-block; padding:0; background-color:transparent; border:none; font-size:0; line-height:0; z-index:4; cursor: pointer; display:inline-block; position: relative;}
.nav h1.pc-menu button > span{padding-left:6.5rem; font-weight: bold; font-size:16px; line-height:16px; color: #fff; display:inline-block;}
.nav h1.pc-menu button:before,
.nav h1.pc-menu button:after{content: ""; width: 100%; height: 2px; background-color:#fff; display: inline-block; position:absolute; top:50%; transform: translateY(-50%);transition: all .3s ease-out;}

.nav h1.pc-menu button:before{width:5rem; margin-top:-0.7rem; left:0;}
.nav h1.pc-menu button:after{width:2.5rem; margin-top:0.5rem; left:2.5rem;}
.nav h1.pc-menu:hover button:after{width:5rem; left:0;}

.nav h1.pc-menu.open:before{width:2.5rem; margin:0 0 0 2.5rem; transform:rotate(45deg);}
.nav h1.pc-menu.open:after{width:2.5rem; margin:0; transform:rotate(-45deg);}

.allmenu{display:none;position:fixed;left:0;top:0;vertical-align:middle;height:100vh;width:100%;background:rgb(0,0,0,.9);backdrop-filter:blur(10px);z-index:999;}
.allmenu h1{margin: 13px 40px 0;display: flex;align-items: flex-end;gap: 20px;}
.allmenu h1 > a{display:inline-block; width:274px; height:70px; text-indent:-9999px; background:url("/images/common/LOGO_w.svg") no-repeat; background-size:contain; background-position: 0 0;}
.allmenu h1 .utile-wrap{}
.allmenu h1 .utile-wrap > li{}
.allmenu h1 .utile-wrap > li > a{color:#fff; font-weight:600; font-size:14px; opacity:.8;transition:.3s;}
.allmenu h1 .utile-wrap > li > a:hover{text-decoration:underline; opacity:1;}
.allmenu button.btn-x{position:absolute;right: 40px;top: 38px;display:inline-block;padding:0;background-color:transparent;border:none;z-index:91;}
.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: 2px;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;}
.allmenu .allmenuwrap .boxwrap{padding: 4.5rem 0 3.7rem 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:300px;font-size:40px;color:#fff;position: relative;line-height:1;font-weight:600;color: #fff;transition:.3s;}
.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: 24px;font-weight: 400;line-height: 1;opacity: .7; 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 + li a:after{position: absolute; top: 0.3rem; 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{color: #34A7E2; opacity:1;}

@media (min-width: 1820px){
	.nav .hd-wrap{width: 100%; max-width: 1600px;}
}

@media (max-width: 1820px){
	#header a.logo-top{max-width: 270px; height: 38px;}
	#gnb .oneD{width: 160px; font-size: 18px;}
	#gnb .twoD{padding: 5px 10px;}
	#gnb .twoD.one{left:0; width:160px;}
	#gnb .twoD.two{left:160px; width:160px;}
	#gnb .twoD.thr{left:320px; width:160px;}
	#gnb .twoD.fou{left:480px; width:160px;}
	#gnb .twoD.fiv{left:640px; width:160px;}
	#gnb .twoD.six{left:800px; width:160px;}
	.nav .hd-wrap{max-width: none;}
}

@media (max-width: 1600px){
	#cssmenu > ul{gap: 20px; padding: 0 20px;}
	#cssmenu > ul > li > a{font-size: 18px;}
	#cssmenu > ul > li > ul{width: 170px; padding: 10px 15px;}
	#cssmenu > ul > li:nth-child(3) > ul{width: 200px;}
	#cssmenu > ul > li > ul > li > a{font-size: 15px;}
	.nav{height: 80px;}
	.nav .cs-logo a.logo-1{width: 212px; height: 52px;}
	.nav .util{right: 40px;}
	.nav .util_l li a{font-size: 14px; line-height: 80px;}

	.hdWrap{height: 80px;}
	.hdWrap.scrollFx{height: 80px;}
	#header.in-view{height: 70px;}
	#header .util_l li a{line-height: 70px;}
	#gnb{display:none;}
	#header .btn-menu{display:none;}
	.mobileMenu{display:block; z-index:9999;}

	.allmenu h1{margin: 30px 0 0 2%;}
	.allmenu button.btn-x {right: 2%; top: 35px;}
	.allmenu .allmenuwrap {width: 95%;}
}

@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 > ul{display:none;}
	.nav .util{right: 90px;}
	.nav .mobileMenu{display: block;}
	.nav .right-utill{display: none;}
	.nav .hd-wrap{padding: 0 20px;}
}

@media (max-width: 767px){
	.nav{height:80px; border-radius: 0 0 15px 15px;}
	.nav .mobileMenu img{width: 24px;}
	.nav .cs-logo a.logo-1,
	.hdWrap.scrollFx .cs-logo a.logo-1{width: 164px; height: 40px;}

	.hdWrap{height:80px;}
	.hdWrap.scrollFx{height:80px;}
	.hdWrap.scrollFx .nav{height:80px; border-radius: 0 0 15px 15px;}

	.allmenu h1{margin:12px 4% 0 4%;}
	.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; gap: 5px; margin-top: 10px;}
	.allmenu .allmenuwrap .boxwrap > ul > li > a {font-size: 14px;}
	
}

@media (max-width: 700px){
	.nav{height: 60px;}
	.nav .cs-logo{position: relative; padding: 0 20px; border-bottom: 0;}
	.nav .util{right: 64px;}
	.nav .util_l li a{font-size: 12px; line-height: 60px;}
	.nav .mobileMenu{margin-right: 20px;}
	.nav .mobileMenu img{width: 20px;}
	
	.nav .hd-wrap{padding: 0;}
	.hdWrap{height: 60px;}
	.hdWrap.scrollFx{height: 60px;}
	#header a.logo-top{max-width: 220px; height: 31px;}
	#header .util{display: none;}
}

@media (max-width: 500px){
	.nav{height: 60px;}
	.nav .cs-logo{padding: 0 10px;}
	.nav .cs-logo a.logo-1,
	.hdWrap.scrollFx .cs-logo a.logo-1{width: 145px; height: 38px;}
	.nav .util{right: 46px;}
	.nav .util_l li a{font-size: 11px; line-height: 60px;}
	.nav .util_l li a i{display: none;}
	.nav .util_l > li + li:before{height: 11px; margin: 0 6px;}
	.nav .mobileMenu{margin-right: 15px;}
	.nav .mobileMenu img{width: 16px;}
	#header.in-view{height: 60px;}
	#header a.logo-top{max-width: 192px; height: 27px;}
	
}


/*로그인_모바일*/
.menu_top_box{position: absolute; top: 18px; left: 94px; font-size:15px;line-height:15px;letter-spacing:-.4px;}
.menu_top_box .left_link{display:flex;}
.menu_top_box .left_link a {display:block; padding: 5px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; color: rgba(255,255,255,.7)!important;}
.menu_top_box .left_link li {list-style-type: none; opacity: .5px;}
.menu_top_box .left_link li + li{margin-left: 8px;}
.menu_top_box .left_link li .menu_box_btn {font-weight: 300 !important;font-size: 13px;}

#gnbM{display:none; position:absolute; top:0; right:-320px; width:300px; background:#222; z-index:999999999999999999;
	-webkit-box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    -moz-box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    box-shadow: -2px 0 5px rgba(0,0,0,0.2)}
#gnbM .mUtil{padding:0 20px; height:65px; line-height:65px; font-size:17px;letter-spacing:0;position:relative;}
#gnbM .mUtil a{color: #fff; font-weight: 300;}
#gnbM .mUtil span{margin:0 6px; color:#817ab7}
#gnbM .mobileMenuXbt .btn_x{position:absolute; top:15px;right:15px;width:23px;height:23px;transform:rotate(45deg);cursor:pointer;}
#gnbM .mobileMenuXbt .btn_x:before{display:block;content:"";width:100%;height:2px;background:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
#gnbM .mobileMenuXbt .btn_x:after{display:block;content:"";width:2px;height:100%;background:#fff;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}

#gnbM .gnbDiv a{display:block}
#gnbM .gnbDiv .one{padding:15px;font-size: 16px;color: #fff;border-bottom: 1px solid rgba(255,255,255,.2);font-weight: normal;background-size: 18px 18px;}
#gnbM .gnbDiv .one.on{color:#fff; background-size:18px 18px;}
#gnbM .gnbDiv .two{padding:10px 15px;background:#34A7E2;}
#gnbM .gnbDiv .two .twoD{font-size: 15px;font-weight: 500; color: #fff;padding: 7px 5px;}
#gnbM .gnbDiv .two .thr{padding:15px 15px 5px; background:#f7f7f7}
#gnbM .gnbDiv .two .thr .thrD{font-size:13px; color:#777; margin-bottom:10px}
.dimdBg{display:none; position:absolute; top:0; left:0; width:100%; height:; background:rgba(0,0,0,0.5); z-index:999;}
#gnbM .mLang{background:#9b9b9b;height:40px;}
#gnbM .mLang:after{content:'';display:block;clear:both;}
#gnbM .mLang .i_lang{display:block;text-align:center;width:40px;height:100%;line-height:40px;float:left;}
#gnbM .mLang .i_lang img{max-width:80%;}
#gnbM .mLang a{width:80px;height:100%;float:left;display:block;border-left:1px solid #ddd;line-height:40px;color:#fff;text-align: center;font-size: 13px;}

#gnbM .quickDiv {padding:10px;margin-top: 5px;}
#gnbM .quickDiv::after{display: block;clear: both;content: '';}
#gnbM .quickDiv a{border:1px solid #76cc90;background: rgba(255,255,255,0.2);padding:10px; text-align:center;color:#fff;display: inline-block;width: 49%;margin-right: 2%;margin-bottom: 2%;float: left;font-size: 16px;}
#gnbM .quickDiv a.nt7{width: 100%;margin-right: 0;}
#gnbM .quickDiv a:nth-of-type(2n){margin-right: 0;}
#gnbM .quickDiv a i{font-size:0.9em;}


@media (max-width: 1600px){
	#gnbM{display:block;}
}