@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1450px;	position:relative;	margin-left:auto;	margin-right:auto;}
.w-inner {	width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1620px) {	
.w-inner {width:94%;}
}
@media all and (max-width:1399px) {	
.inner {width:94%;}
.s-inner {width:94%;}
}

#header { position:fixed; width:100%; height:100px; box-sizing:border-box; z-index:300;  margin: 0 auto; background:#FFF; display:flex; justify-content:space-between;align-items: center; }
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }

#header #logo { font-size:0; padding-left:60px; z-index:103; position:relative}
#header #logo a { width:308px; height:39px;}
#header #logo a.logo { display: block; background:url("/images/common/logo_250414.png") no-repeat left center; background-size:100% auto; }


.menuToggle { position: relative; right:0; top:0; width:80px; height:80px; cursor:pointer; z-index:101; }
.menuToggle span { display:block;  height:2px; border-radius:3px;   position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s; background:#222;}
.menuToggle span.t { margin-top: -11px; width:27px;}
.menuToggle span.m { margin-top:-1px; width: 27px; }
.menuToggle span.b { margin-top: 9px; width:27px; }

#header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:27px;  margin-top: 0;} 

#header.mo_on .menuToggle span { background:#FFF} 


#header .call{background: linear-gradient(to right, #12234b, #0290c5); padding: 0 50px; height: 100%;}
#header .call a{display: flex; align-items: center; gap: 15px; color: #fff; height: 100%;}
#header .call .txt{}
#header .call span{font-size: 1.5rem;font-weight: 500;}
#header .call h3{font-size: 2.6rem; font-weight: 800;}



#gnb_pc {margin: 0 auto; }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:2rem; text-transform:uppercase; line-height:100px; position:relative; width: auto; padding: 0 35px; cursor: pointer;letter-spacing:0; }
#gnb_pc > ul > li > div  a { color:#222;  font-weight:600 }
#gnb_pc > ul > li > ul { display: none; padding:15px 0; width:180px; background:#112248; position: absolute; top: 100px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%;padding:10px; color:#fff;box-sizing: border-box; font-size: 1.6rem;}
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li:hover > div {}
#gnb_pc > ul > li > ul > li > a:hover {text-decoration:underline}

#gnb_pc > ul > li > ul > li > ul {display:none}


#header.mo_on #logo a.logo { background:url("/images/common/logo.png") no-repeat left center; background-size:100% auto; }



#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:500px; padding: 80px 0; background:rgba(5,5,5, 0.90); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left; transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0); -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0); transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:2.0rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:10px 1.5em; position:relative; cursor: pointer; font-weight: 600;}
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.7rem; color:#4b4b4b;padding:0 2em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em; font-weight: 600;}
#gnb_mo > ul > li > div.on { background: #112248; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }


@media all and (max-width:1699px){
    #header #logo { padding-left:30px }  
    #gnb_pc > ul > li > div {padding: 0 30px;}
}
@media all and (max-width:1599px){
    #t-loca {display:none}
    #gnb_pc > ul > li > div {font-size:1.8rem;}
    #gnb_mo > ul > li > ul > li > a {font-size:1.6rem;}
    #header #logo a { width:280px; height:39px;}
    #header .call{padding: 0 30px;}
    #header .call a span{font-size: 1.3rem;}
    #header .call a h3{font-size: 2.3rem;}
}
@media all and (max-width:1399px){
    #header #logo a { width:200px;}
    #gnb_pc > ul > li > div {padding: 0 25px;}
    #gnb_pc > ul > li > ul { padding:10px 0; width:150px; margin-left: -75px;}
}
@media all and (max-width:1280px){
    #header { height:80px; text-align: center}
    #header .hd_bx { line-height:80px; }
    #header .hd_mbx { display: block; }
    #header .call{right: 85px; position: absolute; text-align: left;}
    
    #gnb_pc {display:none;}
    #gnb_mo { text-align: left; }
}
@media all and (max-width:976px){
    #header { height:70px; }
    #header #logo a { width:240px;}
    .menuToggle { width:70px; height:70px }
    #gnb_mo { padding: 70px 0; }	
    #header .call{right: 75px; padding: 0 20px;gap: 10px;}
    #header .call img{width: 40px;}
    #header .call span{font-size: 1.2rem;}
    #header .call h3{font-size: 2rem;}
}
@media all and (max-width:767px) {
    #header { height:60px; }
    #header #logo { padding-left:20px }
    #header #logo a { width:200px;}
    .menuToggle span{margin-left: -10px;}
    .menuToggle span.t { margin-top: -8px; width:21px;}
    .menuToggle span.m { margin-top:-0px; width: 21px; }
    .menuToggle span.b { margin-top: 8px; width:21px; }
    #header.mo_on .menuToggle span.b {width:21px;} 
    .menuToggle { width:60px; height:60px }
    #gnb_mo { max-width: 100%; padding: 60px 0; }
    #header.mo_on #logo a.logo { background:url("/images/common/logo_w.png") no-repeat left center; background-size:100% auto; }
    #header .call{padding: 0; right: 65px; height: 40px; border-radius: 100px;}
    #header .call .txt{display: none;}
}
@media all and (max-width:480px) {
    .menuToggle { width:50px;}
    #header #logo a { width:180px;}
    #header #logo { padding-left:10px;}
    #header .call{right: 50px; height: 35px;}
    #header .call img{width: 35px; height: 35px;}
}


/* footer */
#footer {width: 100%; padding: 60px 0; text-align: center; border-top: 1px solid #eee;}
#footer ul{margin: 30px 0 20px; display: flex; gap: 5px 30px; justify-content: center; flex-wrap: wrap;}
#footer li{color: #777;font-weight: 500; font-size: 1.6rem;}
#footer li span{color: #112248; margin-right: 15px; font-weight: 600;}
#footer p{color: #777; opacity: 0.5; font-size: 1.4rem; font-weight: 500;}


@media all and (max-width:1280px){
    #footer {padding: 50px 0;}
    #footer .logo img{width: 220px;}
}
@media all and (max-width:680px){
    #footer .logo img{width: 170px;}
    #footer {padding: 40px 0;}
    #footer ul{margin: 20px 0 10px; gap: 5px 20px;}
    #footer li{font-size: 1.5rem;}
    #footer li span{margin-right: 7px;}
    #footer p{font-size: 1.3rem;}
}


#Quick { position: fixed; width: 85px; top: 50%; right:20px; z-index:99; transform: translateY(-50%);}
#Quick ul {padding:20px 10px;  border-radius:40px; background:rgba(255,255,255,0.95); border:1px solid #f9f9f9;  box-shadow:3px 3px 5px rgba(85,85,85,0.1);  }
#Quick ul li {  text-align:center;margin-top:0.7em;}
#Quick ul li + li {margin-top: 20px;}
#Quick ul li:first-child{margin-top: 0;}
#Quick ul li:last-child {}
#Quick ul li a { display: block;}
#Quick ul li a p { font-size:1.4rem; font-weight:600; color:#686868}
#Quick ul li a img {width:100%; max-width: 46px;}
#Quick ul li a:hover p {color:#222}

@media all and (max-width:1140px) {
    #Quick {  width: 64px; }
	#Quick ul {padding:8px}
	#Quick ul li a p {display:none}
}
@media all and (max-width:976px) {
    #Quick { width: 100%; top: auto; bottom: 0; transform: translateY(0%); right: 0;}
    #Quick ul li a img{width: 40px;}
    #Quick ul {padding:5px; border-radius: 0; box-shadow: none; display: flex; align-items: flex-end; background-color: #fff;}
    #Quick ul li{width: 50%;}
    #Quick ul li a p {display:block; font-size: 1.3rem; margin-top: 5px;}
    #Quick ul li a p br{display:none}
    #Quick ul li + li {margin-top: 0px;}
}