@charset "utf-8";
/* common.css */

body {font-family: "Noto Sans KR", sans-serif !important;}
a {color:#555;}
/*skip*/
.skip {width:100%; position:absolute;top:0px; z-index: 50000000;}  
.skip a {width:100%;top:-1000px; text-align: center; font-size: 1.3em; display: block;  position: absolute; z-index: 50000;}  
.skip a:hover {background: rgb(29, 96, 167); padding: 10px 0px; top: 0px; color: rgb(255, 255, 255); font-weight: bold;display: block; position: absolute; z-index: 500;}  
.skip a:focus {background: rgb(29, 96, 167); padding: 10px 0px; top: 0px; color: rgb(255, 255, 255); font-weight: bold;display: block; position: absolute; z-index: 500;}  
.skip a:active {background: rgb(29, 96, 167); padding: 10px 0px; top: 0px; color: rgb(255, 255, 255); font-weight: bold;display: block; position: absolute; z-index: 500;}
/*page-top*/
a.totop {position: fixed; right:20px; bottom:0; display:none;}
a.totop span {display:block; width:60px; height:60px; background:url("../images/common/top_arrow.png") no-repeat center / 22px 12px rgb(68, 97, 157); opacity: 0.3; text-indent:500000em;}
a.totop:hover span {opacity: 0.5;}
#wrap {overflow:hidden;}

/*footer*/
footer {border-top:1px solid #ccc; background:#F3F4F8; padding-bottom:20px;}
footer .container {position:relative; padding:0;}
footer .container .col-sm-5, footer .container .col-sm-7 {padding:0;}
.f-menu ul {overflow:hidden; padding:0; margin:20px 0 0 0;}
.f-menu ul li {float:left; list-style:none; padding-left:10px; margin-top:0;}
.f-menu ul li::before {content:"|"; color:#ccc; padding-right:10px;}
.f-menu ul li:first-child {padding-left:0; font-weight:bold;}
.f-menu ul li:first-child a {color:#333;}
.f-menu ul li:first-child::before {content:""; padding-right:0;}
.f-relation {float:right; text-align:right; margin-top:15px;}
.f-relation .dropup {display:inline-block; margin-left:4px;}
.f-relation .dropup button {background-color:#999; border:none; color: #fff; width:175px; text-align:left; position:relative;}
.f-relation .dropup .txt {display:inline-block; height:30px; line-height:30px; padding-left:5px; color:#fff;}
.f-relation .dropup .ico {background:url('../images/common/f_family_icon.png') no-repeat center top; width:12px; height:30px; display:inline-block; background-size:100%; position:absolute; right:20px; top:0;}
.f-info {clear:both;padding-top:20px; font-size:13px; color:#777;}
address {margin:0;}
.f-info p {margin:0;}
.f-sns {position:absolute; right:0; top:80px;}

/*family-site*/
#view_family {display:none; position:absolute; bottom:48px; right:-75px; border:1px solid #aaa; width:1000px; background:#999; margin:0; padding:0;}
#view_family li {text-align:left; list-style:none; color:#fff; padding:0 5px; margin-top:0}
#view_family li h4 {margin-left:0.5%; font-weight:bold; padding-left:5px;}
#view_family li ul {overflow:hidden; margin:0; padding:0;}
#view_family li li {float:left; width:19.5%; margin:2px 0.25%;}
#view_family li li a {display:block; color:#eee; border:1px solid #ccc; padding:5px 10px;}
#view_family li li a:hover {text-decoration:none; background-color:#555;}
#view_family li.btn-close-line {margin:10px 0 0 0; padding:0;}
#view_family li a.btn-close {display:block; text-align:center; height:25px; background:#666; color:#fff;}
#view_network {display:none; position:absolute;bottom:32px; right:0; border:1px solid #aaa; width:240px; background:#999; margin:0; padding:0;}
#view_network li {list-style:none; text-align:left; border-bottom:1px solid #aaa; margin-top:0;}
#view_network li:last-child {border-bottom:0;}
#view_network li a {display:block; height:25px; line-height:25px; padding:0 10px; color:#eee;}
#view_network li a.btn-close {background:#777;}
#view_network li a:hover {color:#fff; background-color:#555; text-decoration:none;}

@media screen and (min-width: 1200px) { 
	footer .container {width:1200px;}
}
@media screen and (max-width: 1199px) { 
	#view_family {width:970px; right:-182px;}
}
@media screen and (max-width: 991px) {
	#view_family {width:750px; right:-182px;} 
	#view_family li li a {font-size:13px;}
	.f-sns {clear:both; position:relative; width:100%; top:0; right:0; text-align:center; padding-top:20px;}
	.f-sns a {display:inline-block; padding:0 5px;}
}
@media screen and (max-width: 767px) {
	footer .container {padding:0 10px;}
	.f-relation {clear:both; text-align:center; width:100%;}
	.f-relation .dropup {width:calc(50% - 10px);}
	.f-relation .dropup button {width:100%;}
	#view_family {width:calc(200% - 5px); right:-100%; bottom:35px;}
	#view_network {width:100%; bottom:35px;}
	#view_family li {padding:0 1px;}
	#view_family li li {width:25%; margin:1px 0;}
	#view_family li li a {padding:5px; font-size:12px;}
}
@media screen and (max-width: 569px) {
	#view_family li li {width:33.333333%; margin:1px 0;} 
	.copyright span {display:block;}
}
@media screen and (max-width: 399px) {
	#view_family li li a {font-size:11px;}
}

/*main-menu*/
#header {width:100%; left:0; top:0; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; z-index:5000000;background-color:rgba(255,255,255,1); position:relative; border-bottom:1px solid #ddd;}
#header a {text-decoration:none;}
#header.bgc {background-color:rgba(255,255,255,1);}
#header.on {background-color:#fff;}

.gnbWrap {width:1580px; margin:0 auto;}
.gnbWrap h1{float:left; margin:0; font-size:0; line-height:100%;}
.gnbWrap h1 a {display: inline-block; padding:25px 10px 25px 0;}
.gnbWrap ul, .gnbWrap ul li {padding:0; margin:0; list-style:none;}
.gnbWrap .global {float:right; overflow:hidden; margin-top:25px;}
.gnbWrap .global li {float:left; margin-left:15px;}
.gnbWrap .global li a {color:#666;}
.gnbWrap .global li a:hover, 
.gnbWrap .global li a:focus {color:#333;}
.global-mb {display:none;}

.gnbWrap #gnb {float:left; margin-left:90px;}
.gnbWrap #gnb > li {float:left;}
.gnbWrap #gnb > li > a {display:block; color:#111; line-height:70px; font-weight:500; font-size:17px; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; padding-right:56px; font-weight:bold;}
.gnbWrap #gnb > li > span {display:none; color:#111; line-height:70px; font-weight:500; font-size:17px; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; padding:0 30px;}
.gnbWrap #gnb > li > a > span {display:block; position:relative;}
.gnbWrap #gnb > li > a > span:after {content:''; position:absolute; width:100%; height:3px; background-color:#253A93; bottom:0px; left:0; transform:scale(0); transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out}
.gnbWrap #gnb > li .dep2Box {height:0; overflow:hidden; opacity:0; position:absolute; width:100%; box-sizing:border-box; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbWrap #gnb > li .dep2Box h3 {display:none;}

#header.on .gnbWrap #gnb > li .dep2Box {transition:all .0s ease-in-out; -webkit-transition:all .0s ease-in-out;}

.gnbWrap #gnb > li .dep2Box .dep2{margin:0 auto; box-sizing:border-box; padding-top:15px;}
.gnbWrap #gnb > li .dep2 li a{display:block; color:#333; font-size:14px; border:0px solid #ddd; font-weight:normal; padding:10px 0;}
.gnbWrap #gnb > li .dep2 li a:hover {color:#253A93;}
.gnbWrap #gnb:hover > li .dep2Box{opacity:1; height:215px;}
.gnbWrap #gnb > li:hover > a{color:#253A93;}
.gnbWrap #gnb > li:hover > a > span:after{transform:scale(1);}

.gnbBg {z-index:-1; position:absolute; width:100%; background-color:rgba(255,255,255,1); left:0; top:0; height:0; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbBg.active {height:320px; border-bottom:1px solid #ddd; top:71px; }
.gnbBg.on {}

/*moblie_menu_btn*/
.headerR{float:right; position:relative; width:210px; height:100px; display:none;}
.menuBtn{display:none; position:absolute; width:37px; height:32px; right:10px; top:50%; margin-top:-16px;}
.menuBtn span{position:absolute; width:100%; height:4px; right:0; background-color:#666; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.menuBtn span.menuBtnT{top:0;}
.menuBtn span.menuBtnM{top:14px;}
.menuBtn span.menuBtnB{bottom:0;}
.menuBtn.on span.menuBtnT{transform:rotate(45deg); top:14px;}
.menuBtn.on span.menuBtnB{transform:rotate(-45deg); bottom:14px;}
.menuBtn.on span.menuBtnM{width:0;}

@media screen and (min-width:993px){
	.gnbWrap #gnb > li:hover > .dep2Box, .gnbWrap #gnb > li .dep2Box:hover {background-color:rgba(1,1,1,.1);}
	#header.on .gnbWrap #gnb > li .dep2Box {height:320px;}
	.gnbWrap #gnb > li .dep2Box ul {overflow:hidden;}
	.gnbWrap #gnb > li .dep2 li a {padding:10px;}
	.gnbWrap #gnb > li .dep2 li a:hover {background:#1272BE; color:#fff;}
	.gnbWrap #gnb > li .dep2Box h3 {display:block; text-align:center; margin:0; font-size:18px; font-weight:bold; height:50px; line-height:70px; color:#1272BE;}
	.gnbWrap #gnb > li .dep2Box h3 span {display:inline-block; border-bottom:0px solid #1272BE;}
}
@media screen and (min-width:1581px){
	.gnbWrap #gnb > li > a {padding-right:125px;}
	.gnbWrap #gnb > li .dep2Box {width:184px; left:50%; padding:0 20px;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-492px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-308px; border-left:1px solid #ddd; width:268px;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box li {float:left; width:50%;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:-40px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:144px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(5) .dep2Box {margin-left:328px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
}
@media (min-width: 1200px) and (max-width:1580px) {
	.gnbWrap #gnb {margin-left:30px;}
	.gnbWrap #gnb > li > a {padding-right:55px;}
    .gnbWrap {width:1200px; padding:0 20px; box-sizing:border-box;}
	.gnbWrap #gnb > li .dep2Box .dep2 {}
	.gnbWrap #gnb > li .dep2Box {width:166px; left:50%; padding:0 10px;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-447px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-281px; border-left:1px solid #ddd; width:232px;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box li {float:left; width:50%;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:-49px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:117px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(5) .dep2Box {margin-left:281px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .gnbWrap {width:1000px; padding:0 10px; box-sizing:border-box;}
	.gnbWrap #gnb {margin-left:20px;}
	.gnbWrap #gnb > li > a {padding-right:21px;}
	.gnbWrap #gnb > li .dep2Box .dep2 {padding-top:10px;}
	.gnbWrap #gnb > li .dep2 li a {font-size:13px;}
	.gnbWrap #gnb > li .dep2Box {width:160px; left:50%; padding:0 10px;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-420px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-260px; border-left:1px solid #ddd; width:240px;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box li {float:left; width:50%;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:-20px; border-left:1px solid #ddd; width:140px;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:120px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(5) .dep2Box {margin-left:280px; border-left:1px solid #ddd; border-right:1px solid #ddd; width:140px;}
}
@media (min-width: 993px) and (max-width: 1023px) {
    .gnbWrap {width:990px; padding:0 10px; box-sizing:border-box;}
	.gnbWrap #gnb {margin-left:20px;}
	.gnbWrap #gnb > li > a {padding-right:19px;}
	.gnbWrap #gnb > li .dep2Box .dep2 {padding-top:10px;}
	.gnbWrap #gnb > li .dep2Box {width:150px; left:50%; padding:0 10px;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-450px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-300px; border-left:1px solid #ddd; width:300px;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box li {float:left; width:50%;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:0px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:150px; border-left:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(5) .dep2Box {margin-left:300px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
}
@media screen and (max-width:992px) {
	.headerR{display:block;}
	.gnbWrap .global {display:none;}
	.gnbWrap .global-mb {display:block; position:absolute; left:100%; top:60px; background-color:#fff; width:100%; height:50px; border-bottom:1px solid #666; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
	.gnbWrap .global-mb ul {margin:0; padding:3px 15px; overflow:hidden;float:right;}
	.gnbWrap .global-mb li {float:left; border:1px solid #ddd; border-radius:30px; padding:8px 20px; margin:2px;}
	#header.on2 .gnbWrap .global-mb {left:0;}
	.gnbWrap #gnb {position:absolute; width:100%; left:auto; right:-100%; margin-left:0; top:110px; background-color:#fff; overflow-y:auto; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
	#header.on2 .gnbWrap #gnb{right:0;}
	.gnbWrap #gnb > li{float:none;}
	#header{height:60px;}
	#header.on2{}
	#header.on2	.menuBtn span{background-color:#666;}
	#header.bgc{background-color:#fff; border-bottom:1px solid #dcdcdc;}
	#header.bgc	.menuBtn span{background-color:#333;}

	.gnbWrap #gnb:hover > li .dep2Box{opacity:1; height:auto;}
	.gnbWrap {width:100%; padding:0 20px; box-sizing:border-box; height:100%; position:relative;}
	.gnbWrap h1 {position:absolute; float:none; top:0;}
	.gnbWrap h1 a {padding:20px 10px 20px 0;}

	.headerR{height:100%; width:auto;}
	.menuBtn {display:block; width:30px; height:25px; margin-top:17px;}
	.menuBtn span {height:3px;}
	.menuBtn span.menuBtnM {top:11px;}
	.menuBtn.on span.menuBtnB,.menuBtn.on span.menuBtnT {top:11px;}
	
	.gnbWrap #gnb > li .dep2Box {background-color:#fff; height:auto; position:relative; opacity:1;}
	.gnbWrap #gnb > li.hasDep > a {display:none;}
	.gnbWrap #gnb > li:hover .dep2Box {height:auto;}
	.gnbWrap #gnb > li {border-bottom:1px solid #dcdcdc;}
	.gnbWrap #gnb > li > a {color:#333; padding:0 30px;}
	.gnbWrap #gnb > li > span {position:relative; color:#333; display:block; line-height:50px;}
	.gnbWrap #gnb > li > a:hover span {color:#2a7ba9;}
	.gnbBar_wrap {position:absolute; width:50px; height:50px; right:5px;}
	.gnbBar_wrap .gnbBar {position:absolute; top:50%; margin-top:-1px; width:18px; height:2px; background-color:#000; left:50%; margin-left:-9px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
	.gnbBar02 {transform:rotate(90deg);}
	.gnbWrap #gnb > li.on .gnbBar_wrap .gnbBar {background-color:#fff;}
	.gnbWrap #gnb > li.on .gnbBar02 {transform:rotate(0);}

	.gnbWrap #gnb > li.on > span {color:#fff; background-color:#253A93;}	
	.gnbWrap #gnb > li .dep2Box {display:none; background-color:#f9f9f9;}
	.gnbWrap #gnb > li .dep2 li {border-top:1px solid #dcdcdc;}
	.gnbWrap #gnb > li .dep2 li a{color:#333; line-height:50px; padding:0 30px 0 45px;}
	.gnbWrap #gnb > li .dep2 li a:hover {color:#2a7ba9;}
	.gnbWrap #gnb > li .dep2Box .dep2{padding:0; width:100%;}
	.gnbWrap #gnb > li:hover > a {color:#2a7ba9;}
	.gnbWrap #gnb > li:hover > a span:after{display:none;}
	.gnbWrap #gnb > li > a > span{line-height:50px;}
}
@media screen and (max-width:767px) {
	.gnbWrap {padding:0 15px;}
	.gnbWrap #gnb > li > a{padding:0 15px;}
	.gnbWrap #gnb > li > span{padding:0 15px;}
	.gnbWrap #gnb > li .dep2 li a{padding:0 15px 0 30px;}
}
@media screen and (max-width:425px) {
	.gnbWrap h1 img {height:16px;}
	.gnbWrap h1 a {padding:22px 10px 22px 0;}
}
@media screen and (max-width:370px) {
	.gnbWrap h1 img {height:15px;}
	.gnbWrap h1 a {padding:22px 5px 22px 0;}
}