/* header 고정 */
#header{width:100%; position:fixed; height:100px; top:0; z-index: 10000; transition:all 0.8s ease;}

/* 스크롤픽스 */
#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 .nav{height:100px; background: #fff;}
#header.scrollFx .cs-logo a.logo-1{background-image:url("/images/common/logo.png") !important;}
#header.scrollFx .sch-btn a{color:#fff !important;}
#header.scrollFx .sch-btn a:hover{color:#fff !important; background:#2766d6 !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;}
.sub-hd.scrollFx{margin-top:0px;}
.sub-hd.scrollFx .headDiv{margin-top:0px !important;}

/* 서브일때 header - 흰색 */
.sub-hd{background:#fff;}
.sub-hd #cssmenu ul > li > a{color:#222;}
.sub-hd .nav .sch-btn a{color:#fff !important;}
.sub-hd .nav .sch-btn a:hover{color:#fff !important; background:#2766d6 !important;}
.sub-hd .nav h1.pc-menu span{background:#000 !important;}


.nav{position:relative; width:100%; z-index: 10000; margin:0 auto; height:100px; position:fixed; background: #fff; transition: all .2s;}
.nav:hover .sch-btn a{color:#fff !important;}
.nav:hover .sch-btn a:hover{color:#fff !important; background:#2766d6 !important;}

.nav .hd-wrap{/* max-width:1700px; margin:0 auto;  */height:100%; width:100%; 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.png"); background-repeat:no-repeat; background-position: center; background-size: contain; width: 292px; height: 86px;}

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

#cssmenu{display:inline-block; height:100%;}
#cssmenu a{display:block;}
#cssmenu > ul{display:flex; justify-content:center; gap:90px; transition:all 0.8s ease; height:100%; margin-right: 23%;}
#cssmenu > ul > li{position:relative; text-align:left;}
#cssmenu > ul > li > a{font-size:20px; font-weight:600; color:#333; letter-spacing: 0.36px; height:100%; display:flex; line-height:1; align-items:center; justify-content:center; position: relative;}


/* contact메뉴 */
#cssmenu > ul > li.contact {display: flex; justify-content: center; align-items: center; transition: all 0.2s;}
#cssmenu > ul > li.contact a {color: #fff; border: 1px solid rgba(255, 255, 255, 0.50); font-size: 13px; font-weight: 500; letter-spacing: 0.5px; padding: 11px 20px; border-radius: 30px;  height: auto; transition: all 0.2s; opacity: 0.85;}
.contact a {overflow: hidden;}
.contact a span{display: inline-block; color: var(--main); position: relative; }
#cssmenu > ul > li.contact a:hover {opacity: 1;  background: #fff; color: #00599d;}



/* depth02 메뉴 */
#cssmenu > ul > li > ul.depth02{height:0; position:absolute; top:100px; left:50%; transform: translateX(-50%);background: rgb(0 0 0 / 65%); box-shadow: 0px 5px 24.3px 2.7px rgb(0 0 0 / 9%); padding: 18px 15px; border-top: 2px solid #b9b9c0; display: none; }
#cssmenu > ul > li > ul.depth02 > li {width: 180px; margin-bottom: 18px;}
#cssmenu > ul > li > ul.depth02 > li:last-child {margin-bottom: 0;}
#cssmenu > ul > li > ul.depth02 > li > a{font-size:16px; font-weight:500; color: #fff; opacity: 0.8; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transform: 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 !important; font-weight: 600;}

.nav .nav-right{display:none; align-items:center;}
.nav .sch-btn{display:flex; gap:10px;}
.nav .sch-btn a{font-size:17px; color:#fff; background: #1e4ec4; font-weight:600; width:142px; height:56px; display:flex; border-radius:3px; line-height:1; justify-content:center; align-items:center; transition:0.3s;}

/*햄버거메뉴*/
.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:#333; display:block; transition:0.3s;}

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

	#cssmenu > ul{gap:50px;}
	#cssmenu > ul > li > a{font-size:17px;}
	#cssmenu > ul > li > ul.depth02 {top: 90px;}
	#cssmenu > ul > li > ul > li > a{font-size:14px;}
	.nav .sch-btn a{width:133px; height:44px;}
    .nav .cs-logo a.logo-1{position: absolute; left: 0;}
    .nav .cs-logo a.logo-uni {height: 68px;}
}
@media (max-width: 1280px){
    #cssmenu{display:none;}
	.nav .nav-right {display: flex; padding-right: 20px;}
	.nav h1.pc-menu{display:flex; justify-content:center; align-items:center; }
	.nav .sch-btn{margin-right:17px;}
	.nav .sch-btn a{font-size:12px; padding:10px 15px; width:auto; height:auto;}
}

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

    .nav .cs-logo h1 {gap: 8px;}
    .nav .cs-logo a.logo-1{width: 190px;}
    .nav .cs-logo a.logo-uni {height: 57px;}
	.nav .sch-btn{display:none;}
}


@media (max-width:360px){
    .nav .cs-logo a.logo-1{width: 170px;}
    .nav .cs-logo a.logo-uni {height: 52px;}
    .nav h1.pc-menu{width:27px; height:18px;}
}

.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:1; transition:all 1s 0.2s ease;}
.nav.in-view #cssmenu > ul > li{opacity:1; transition:all 1s 0.2s ease;}


.nav .cs-logo {opacity:0; transform:translateX(-25px); transition:all 1s 0.2s ease;}
.nav.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;}



/* 우측-전체메뉴 */
.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:1s 0.1s;}
.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 .sub-logo{position:relative;}
.all-menu .menu-h .sub-logo a{position:relative; display: block; width: 100%; height: 100%; color: #00599d; font-size: 30px;}
.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:#00599d; 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; margin-top: 10px;}
.all-menu .right-info li{position:relative;}
.all-menu .right-info li a{color:#00599d; font-weight: 600; font-size:13px;}
.all-menu .right-info > li + li:before{content:""; display:inline-block; width:1px; height:8px; background:#b2b2b2; margin:0 8px; position: absolute; top: 50%; transform: translateY(-50%);}

.all-menu .side-lang{display:none; padding:0px 60px;}
.all-menu .side-lang span{display:inline-block; padding-right:15px; padding-top:20px;}
.all-menu .side-lang span a{font-size:14px; color:#fff;}

.all-menu .menu-box{padding-top:30px; height:calc(100% - 90px); margin-top: 10px;}
.all-menu .menu-box .box{position:relative; padding:20px 60px; transition:0.5s;}
.all-menu .menu-box .box:hover{background:#7d7d7d; transition:0.7s;}
.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: #00599d; letter-spacing: 0.3px; font-weight:700; font-size:22px; letter-spacing:-0.25px; line-height:1; display: block; width: 100%;}
.all-menu .menu-box ul{display:flex; flex-direction: column; margin-top: 10px;}
.all-menu .menu-box ul li a{display:inline-block; font-size:17px; line-height:1.6; color:#0f1f39; font-weight:500; vertical-align:top; letter-spacing: 0.3px; transition:0.2s; position: relative; padding-left: 10px;}
.all-menu .menu-box ul li a:before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #00599d; display: inline-block; margin-right: 6px; vertical-align: middle; position: absolute; top: 9px; left: 0;}

.all-menu .menu-box ul li a:hover{font-weight: 600; opacity: 1;}
.all-menu .menu-box ul li a:hover:before {background: #00599d;}
.all-menu .menu-box ul li.detph2:before{display:none;}

.all-menu .contact {margin-left: 20px;}
.all-menu .contact a {padding: 4px 12px; border-radius: 50px; border: 1px solid #0f0f708f; color: #00599d !important; transition: all 0.2s;}
.all-menu .contact a:hover {background: #00599d; border-color: #00599d; color: #fff !important;}


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

@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:85%;}
	.all-menu.open{left:15%;}
    .all-menu .menu-h {height: 62px; margin-bottom: 0;}
    .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 .box{padding:15px 5%;}
	.all-menu .menu-box ul{margin-top:10px;}
	.all-menu .menu-box ul li a{font-size:16px;}
    .all-menu .menu-box ul li + li {margin-top: 5px;}
	.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%;}
}