@charset "utf-8"; 

/* 공통 inner */
.inner{position: relative; max-width:1328px; margin:0 auto;}
.inner::after{content: ""; display: block; position: relative;}
@media(max-width:1400px){
	.inner{margin:0 2rem;}
}

/* header */
#header{position:relative; width:100%; height:16rem; left:0; top:0; z-index:99;background: #FFFFFF;}
#header .inner{position: relative; margin:0 auto;}
#header .inner .logo{position: absolute; top: 50%; left: auto; transform:translateY(-50%); width: 281px; height: 56px;}
#header .inner .logo > a{display: block; width: 100%; height: 100%; background:url(../img/common/img_logo.png) no-repeat 0 50%; background-size: contain;}
@media(max-width:1400px){
	/*#header .inner .logo{width: 220px; height: 44px;}*/
}
@media(max-width:1024px){
	#header .inner .logo{width: 200px; height: 40px;}
}

#header #nav{transition:all 0.2s ease;box-shadow: 0px 4px 4px 0px #00000040;}
.menu-toggle-btn{display: block; position: relative; padding:14px 12px; width:48px; height:48px; font-size: 0; text-indent: 100%; background:transparent; cursor:pointer; transition:top 300ms;}
.menu-toggle-btn .menu-btn{display: block; position:relative; width:100%; height:100%;}
.menu-toggle-btn .btn-line{display:block; position:absolute; width:100%; height:2px; background:#333; transition:all 280ms ease;}
.menu-toggle-btn .line-01{top:0;}
.menu-toggle-btn .line-02{top:50%; margin-top:-1px;}
.menu-toggle-btn .line-03{bottom:0;}
.menu-toggle-btn.menu-open .line-01{top:50%; margin-top:-1px; transform:rotate(45deg);}
.menu-toggle-btn.menu-open .line-03{top:50%; margin-top:-1px; transform:rotate(-45deg);}
.menu-toggle-btn.menu-open .line-02{width:0;}

@media (min-width:1024px){
	.header-menu-btn{display:none;}
	#header .navigation nav{text-align: center;}
	#header .navigation .gnb{display: inline-block; vertical-align: top;position:relative;left:10%;}
	#header .navigation .gnb > li{display: inline-block; position: relative; vertical-align: top;}
	#header .navigation .gnb > li > a{display: inline-block; margin:0 2.1rem; height: 11rem; line-height:11rem; font-size: 2rem; font-weight: 600; color:#333333; transition:color .3s;}
	#header .navigation .gnb > li:hover > a{color:#111;}
	#header .navigation .gnb > li > a.active{color:#4e30b0; font-weight: 800;}
	#header .navigation .submenu{opacity: 0; visibility: hidden; position:absolute; top:100%; left:50%; width:26rem; margin-left: -13rem; padding:3rem 0; text-align:left; background:#fff; box-shadow: 5px 5px 1rem rgba(0,0,0,.1); border:1px solid #d6d6d6; border-top:1px solid #d6d6d6; margin-top: -1px; transform:translateY(0); transition:all 350ms;}
	#header .navigation .submenu > li{display: block; font-size: 1.7rem; color:#111; font-weight:500;}
	#header .navigation .submenu > li > a{display:block; width:100%; padding:0 3.8rem 1.8rem 3.8rem; font-size: 1.6rem; color:#555; font-weight:500; transition:color .3s;}
	#header .navigation .submenu > li > a:hover{color:#0052CC;}
	#header .navigation .submenu > li:last-child > a{padding-bottom:0;}
	#header .navigation .submenu > li > a span{display:inline-block; position:relative; padding-bottom:1px; z-index:2; line-height:1.6; vertical-align: middle;}
	#header .navigation .gnb > li:hover .submenu{opacity: 1; visibility: visible; transform:translateY(0px);}
	#header .navigation .gnb > li:hover > a{color:#002D72; border-bottom:4px solid #002D72;}
}
@media (max-width:1400px){  
	#header .inner{margin:0 2rem;}
	#header .navigation .gnb > li > a{font-size: 1.9rem;}
}
@media (max-width:1023px){
  #header{position: fixed;}
	#header{height: 12rem; z-index:80;}
	#header #nav{height: 7rem; min-height: 7rem; transition: all 0s ease;}
	#header .inner .logo{margin-top: 32px;}
	#header .logo,
	.header-menu-btn{transform: translateY(0);}
	.header-menu-btn{position: absolute; top:8px; left:auto; right:15px; z-index:80; margin:0 -24px 0 0; padding: 17px 12px;}
	#header .navigation{position:fixed; top:0; right:-360px; z-index:2; width:360px; height:100%; padding-top:13rem; background: #002D72; transition:right .5s; text-align:left;}
	#header .navigation nav{overflow:hidden; overflow-y:auto; width:100%; height:100%; background: #fff;}
	#header .navigation .gnb > li{display:block; width:100%;}
	#header .navigation .gnb > li > a{display:block; padding:3rem; font-size:2.5rem; color:#111; font-weight:700; border-bottom:1px solid rgba(0,0,0,0.08); transition:color .3s;}
	#header .navigation .gnb > li.active > a{color:#002D72;}
	#header .navigation .submenu{display:none; padding:3rem 4rem; background: #f4f4f4;}
	#header .navigation .submenu > li{display:block; width:100%;}
	#header .navigation .submenu > li > a{display:block; padding:1.3rem 0; font-size:1.8rem; font-weight:400; line-height: 1.8; color:#111;}
   .menu-toggle-btn .btn-line{background:#111;}
	body.menu-open .menu-toggle-btn .btn-line{background: #fff;}
	.mask{display:none;position:fixed; top:0; left:0; z-index:-1; width:100%; height:100%; background:rgba(0,0,0,.7);}
	body.menu-open .mask{display:block; z-index: 5;}
	body.menu-open #header .navigation{right:0; z-index: 10;}
}
@media (max-width:480px){
	#header .navigation{right:-100%; width:100%;}
}

/* util */
#header .util{position: relative;background:#002D72;}
#header .util .util-inner{position: relative; max-width: 1328px;margin:0 auto;height: 5rem;}
#header .util .inner{position: absolute;right: 0px;top: 17px;display: flex;align-items: center;}
#header .util li{display: inline-block; font-size: 1.5rem; font-weight: 400; color:#FFF;}
@media (max-width:1023px){
	#header .util .btn-menu{display: none;}
	#header .navigation .util {position: absolute;top: 8rem;right: inherit;left: 3rem;transform: translateY(0);display:block;}
	#header .util .util-inner{width: 100%; padding: 0 2rem;} 
	#header .navigation .util .inner{position: relative; right: auto; top: auto; justify-content: flex-end;}
	#header .util ul{padding-right: 0;}
	#header .util li{color:#fff; font-size: 1.6rem;} 
}

@media (max-width: 768px){
	#header .util .util-inner{padding: 0 1.5rem;} 
	#header .util li:first-child{margin-left: 0;}
}

@media (max-width: 420px){
	#header .util .util-inner{padding: 0 1rem;}
	#header .util ul{display: flex; gap: 1rem; flex-wrap: wrap;}
}

/* footer */
#footer{position: relative; padding-bottom:8rem; font-size: 1.5rem; font-weight: 300; color:#888888;background: #0a0a0a;}
@media (max-width: 768px) {
	#footer{padding-bottom:5rem;}
}
#footer .footer-bg{background:#0a0a0a;padding:1rem 0;}
#footer .inner{max-width: 1340px;}
#footer address{position: relative; display:block; line-height: 1.8;}
#footer i{position: relative;}
#footer i + i{margin-left:3rem;}
#footer i + i::before{position: absolute; content: ""; display: block; /* width: 2px; height: 2px;*/ background: rgba(255,255,255,0.2);}
#footer i,
#footer p{line-height: 1.6;}
#footer strong{color:#888888;}
#footer hr{background: rgba(255,255,255,0.1);}

#footer .btn-top{display:block; position:absolute; z-index: 2; top:-5rem; right:0px; width:7.5rem; height:7.5rem; font-size: 1.5rem; font-weight: 400; text-align: center; color:#fff;}
@media (max-width: 768px) {
	#footer .btn-top{position: relative; top:0;color:#888888;}
}
#footer .inner .family-site {position: absolute; right: 0; bottom: 4.5rem; z-index: 3;}
#footer .inner .family-site button {position: relative; display: block; width: 22rem; height: 6.5rem; text-align: left; padding: 0 2rem; font-size: 1.5rem; color: #fff; font-weight: 300; background: #1b1b1b;}
#footer .inner .family-site button::after {display: inline-block; width: 6.5rem; height: inherit; right: 0; top: 0; background: url(../img/common/icon_family_more.svg) no-repeat center;}
#footer .inner .family-site button.active::after {background-image: url(../img/common/icon_family_more_focus.svg);}
#footer .inner .family-site button + ul {display: none; position: absolute; width: 100%; left: 0; bottom: 6.5rem; background: #fff; color:#111; border: 1px solid rgba(0,0,0,0.1); border-bottom: 0;overflow-y: auto;	height: 19.8rem;}
#footer .inner .family-site button + ul li {border-bottom: 1px solid rgba(0,0,0,0.1);}
#footer .inner .family-site button + ul li:last-child {border-bottom: 0;}
#footer .inner .family-site button + ul li a {display: block; height: 6.5rem; line-height: 6.5rem; padding: 0 2rem; font-size: 1.5rem; font-weight: 400; transition: background 0.3s ease;}
#footer .inner .family-site button + ul li a:hover {background: #eee;}
#footer .inner .fnb {height: 6.5rem; line-height: 7.5rem;}
#footer .inner .fnb ul li {position: relative; margin-right: 3rem;}
#footer .inner .fnb ul li::after{position: absolute;	display: inline-block; width: 1px; height: 1rem; right: calc(-1.5rem - 2px); top: 50%; transform: translateY(-0.5rem); background: #FFFFFF;}
#footer .inner .fnb ul li a {display: block; font-size: 1.5rem; color: #FFFFFF; font-weight: 400;}
#footer .inner .fnb ul li:last-child {margin-right: 0;}
#footer .inner .fnb ul li:last-child::after {display: none;}
@media (max-width: 768px) {
  #footer .inner .family-site{position: relative; right: auto; top: auto; left: 0; bottom: 0;}
	#footer .inner .family-site button{width: 100%; margin-bottom: 5rem;}
	#footer .inner .fnb{padding:1.5rem 0; height: auto; line-height: 3;}
}

/* 전체메뉴 */
.hamburger {display:block;z-index: 101; position:absolute; top:4rem; right:0px; width:34px;height:26px; vertical-align:middle; overflow: hidden;}
.hamburger.toggled{z-index:9999;}
.hamburger i {
  position:absolute;
	z-index: 999;
  width:100%;
  height:2px;
  background:#333333;
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6), width 0.2s ease 0.2s;
}
.hamburger.toggled i{background:#fff;}
.hamburger i:nth-child(1) {
  top:50%;
  right:0;
  margin:-1px 0 0 0;
  transform-origin:50% 50%;
}
.hamburger i:nth-child(2) {
  top:4px;
  right:0;
  transform-origin:0 50%;
	width:80%;
}
.hamburger i:nth-child(3) {
  bottom:4px;
  right:0;
  transform-origin:100% 50%;
	width:80%;
}
.hamburger.toggled i:nth-child(1) {
  transform:scale(0);
  transition:all 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s;
}
.hamburger.toggled i:nth-child(2) {
  transform:translate(5px, 1px) rotate(45deg);
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s, width 0.2s ease;
}
.hamburger.toggled i:nth-child(3) {
  transform:translate(-2px, -15px) rotate(-45deg);
  transition:transform 0.45s cubic-bezier(0.9, -0.6, 0.3, 1.6) 0.1s, width 0.2s ease;
}
.hamburger.dark i{background:#111;}
@media(max-width:1024px){
  .hamburger{display: none;}
}
.anb{position:fixed; width:100%; height:0; line-height:100vh; left:0; top:-100%; color:#fff; text-align:center; font-size:0; overflow:scroll;;}
.anb .inner .anb-util{position:absolute; right:6rem; top:4.5rem; line-height:1; font-size:1.7rem;}
.anb .inner .anb-util::before{display:inline-block; width:1px; height:1rem; left:calc(50% - 0.8rem); top:50%; margin-top:-0.5rem; background:#fff; opacity:0.1;}
.anb .inner .anb-util a{height:2rem; line-height:2rem; padding:0 1rem; opacity:0; transform: translateY(-2rem); transition:all 0.5s ease;}
.anb.toggled .inner .anb-util a{opacity:1; transform: translateY(0);}
.anb.toggled .inner .anb-util a:nth-child(1){transition-delay: 0.6s;}
.anb.toggled .inner .anb-util a:nth-child(2){transition-delay: 0.7s;}
.anb .inner > ul{width:100%; display:inline-block; line-height:1; vertical-align:middle;}
.anb .inner > ul > li{display:inline-block; vertical-align:top; width:16%; padding-top:5rem; min-height:40rem; border-right:1px solid rgba(255,255,255,0.1);}
.anb .inner > ul > li:last-child{border-right:0;}
.anb .inner > ul > li > a{display:block; margin-bottom:5rem; font-size:3.2rem; font-weight:700;}
.anb .inner > ul > li > a + ul{}
.anb .inner > ul > li > a + ul li{}
.anb .inner > ul > li > a + ul li a{display:block; line-height:1.6; margin-bottom: 2.5rem; font-size:1.7rem; color:#ddd; transition:all 0.2s ease;}
.anb .inner > ul > li > a + ul li a span{position:relative;}
.anb .inner > ul > li > a + ul li a:hover{color:#F0F5FF;}
.anb:after,
.anb:before{display:inline-block; position:fixed; width:100vw; height:100vh; left:0; top:0; background:#1b2e60; z-index:-1; transition:transform .8s cubic-bezier(.77,0,.175,1); transform:translateX(0) translateY(-100%)}
.anb:after{/*background:rgb(0, 45, 114);*/background : url(../img/common/anb_bg.png) no-repeat center; background-size:cover; transition-delay:0s;}
.anb:before{transition-delay:.1s; opacity:0.8;}
.anb.toggled:after,
.anb.toggled:before{transform:translateX(0) translateY(0)}
.anb.toggled:after{transition-delay:.1s}
.anb.toggled:before{transition-delay:0s}
.anb li{opacity:0; transform: translateY(-2rem); transition:all 0.5s ease;}
.anb.toggled li{opacity:1; transform: translateY(0); transition:all 0.3s ease;}
.anb.toggled .inner > ul > li:nth-child(1){transition-delay: 0.7s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(1){transition-delay: 0.8s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(2){transition-delay: 0.9s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(3){transition-delay: 1s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(4){transition-delay: 1.1s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(5){transition-delay: 1.2s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(6){transition-delay: 1.3s;}
.anb.toggled .inner > ul > li:nth-child(1) > ul > li:nth-child(7){transition-delay: 1.4s;}
.anb.toggled .inner > ul > li:nth-child(2){transition-delay: 1.1s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(1){transition-delay: 1.2s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(2){transition-delay: 1.3s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(3){transition-delay: 1.4s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(4){transition-delay: 1.5s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(5){transition-delay: 1.6s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(6){transition-delay: 1.7s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(7){transition-delay: 1.8s;}
.anb.toggled .inner > ul > li:nth-child(2) > ul > li:nth-child(8){transition-delay: 1.9s;}
.anb.toggled .inner > ul > li:nth-child(3){transition-delay: 1.1s;}
.anb.toggled .inner > ul > li:nth-child(3) > ul > li:nth-child(1){transition-delay: 1.2s;}
.anb.toggled .inner > ul > li:nth-child(3) > ul > li:nth-child(2){transition-delay: 1.3s;}
.anb.toggled .inner > ul > li:nth-child(4){transition-delay: 1.4s;}
.anb.toggled .inner > ul > li:nth-child(4) > ul > li:nth-child(1){transition-delay: 1.5s;}
.anb.toggled .inner > ul > li:nth-child(4) > ul > li:nth-child(2){transition-delay: 1.6s;}
.anb.toggled .inner > ul > li:nth-child(5){transition-delay: 1.7s;}
.anb.toggled .inner > ul > li:nth-child(5) > ul > li:nth-child(1){transition-delay: 1.8s;}
.anb.toggled .inner > ul > li:nth-child(5) > ul > li:nth-child(2){transition-delay: 1.9s;}
.anb.toggled .inner > ul > li:nth-child(6){transition-delay: 1.7s;}
.anb.toggled .inner > ul > li:nth-child(6) > ul > li:nth-child(1){transition-delay: 1.8s;}
.anb.toggled .inner > ul > li:nth-child(6) > ul > li:nth-child(2){transition-delay: 1.9s;}