@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;}
ul, li {margin:0; padding:0; list-style:none;}
#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;}
.f-menu ul li a b {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; z-index:2000;}
#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: 1300px) { 
	.container {width:1280px;}
}
@media screen and (max-width: 1299px) { 
	.container {width:1160px;}
}
@media screen and (max-width: 1199px) {
	.container {width:960px;} 
	#view_family {width:970px; right:-182px;}
}
@media screen and (max-width: 991px) {
	.container {width:750px;} 
	footer .container .col-sm-5, footer .container .col-sm-7 {width:100%; float:none;}
	.f-menu ul {text-align:center;}
	.f-menu ul li {float:none; display:inline-block;}
	.f-relation {clear:both; text-align:center; margin-top:20px;}
	#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;}
	.f-info {text-align:center;}
}
@media screen and (max-width: 767px) {
	.container {width:100%;} 
	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%; height:101px; 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; position:relative;}
#header a {text-decoration:none;}
#header.bgc {background-color:rgba(255,255,255,1);}
#header.on {background-color:#fff;}
.menu {position:relative; left:0; top:0; width:100%; margin:0 auto;}

.gnbWrap {width:100%; max-width:1800px; margin:0 auto; padding:0; position:relative;}
.hd-top {position:absolute; width:100%; left:0; top:0; padding:0 20px;}
.gnbWrap h1{float:left; margin:0; font-size:0; line-height:100%;}
.gnbWrap h1 a {display: inline-block; padding:40px 10px 40px 0;}
.gnbWrap ul, .gnbWrap ul li {padding:0; margin:0; list-style:none;}
.gnbWrap .global {float:right; overflow:hidden; margin-top:35px;padding-right:50px;}
.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 {position:absolute; top:0; left:50%; margin-left:-450px;}
.gnbWrap #gnb > li {float:left;}
.gnbWrap #gnb > li > a {display:block; color:#111; line-height:100px; font-size:21px; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; font-weight:bold; letter-spacing:-0.05em; padding:0 45px;}/*padding:0 33px;*/
.gnbWrap #gnb > li > span {display:none; color:#111; line-height:100px; font-weight:bold; font-size:21px; 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 {width:180px; height:0; left:50%; padding:0 20px; background-color:#fff; overflow:hidden; opacity:0; position:absolute; box-sizing:border-box; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbWrap #gnb > li .dep2Box h3 {display:block; text-align:center; margin:0; font-size:18px; font-weight:bold; height:50px; line-height:70px; color:#264493;}
.gnbWrap #gnb > li .dep2Box h3 span {display:inline-block; border-bottom:0px solid #264493;}
#header.on .gnbWrap #gnb > li .dep2Box {transition:all .0s ease-in-out; -webkit-transition:all .0s ease-in-out; height:259px; display:block !important;}

.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:15px; border:0px solid #ddd; font-weight:normal; padding:7px 10px;}
.gnbWrap #gnb > li .dep2 li a:hover {color:#31A9E4; font-weight:bold;}
.gnbWrap #gnb:hover > li .dep2Box{opacity:1; height:200px;}
.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:url('../images/common/gnbBg_bg.gif') repeat-y; background-size:100%; left:0; top:100px; height:0; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbBg.active {height:260px; border-bottom:1px solid #ddd; border-top:1px solid #ddd; top:100px; }
.gnbBg.on {}
.gnbBg p {opacity:0; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbBg.active p {opacity:1;}

.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-540px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-360px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:-180px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:0px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.gnbWrap #gnb > li:nth-child(5) .dep2Box {margin-left:180px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.gnbWrap #gnb > li:nth-child(6) .dep2Box {margin-left:360px; border-left:1px solid #ddd; border-top:1px solid #ddd; border-right:1px solid #ddd;}
.gnbWrap #gnb > li:hover > .dep2Box, .gnbWrap #gnb > li .dep2Box:hover {background-color:#eee;}
.gnbWrap #gnb > li .dep2Box ul {overflow:hidden;}
.gnbBg p {position:absolute; left:50%; margin-left:-860px; top:-43px; border:0px solid #ddd; width:400px; height:300px;}
.gnbBg p img {width:400px;}
	
/*moblie_menu_btn*/
.headerR{display:none;}
.menuBtn{display:none;}

@media (max-width:1626px) {
	.gnbWrap .global {padding-right:0;}
	.gnbWrap #gnb {margin-left:-270px;}
	.gnbWrap #gnb > li > a {font-size:18px; padding:0 25px;}
	.gnbWrap #gnb > li .dep2Box {width:180px; padding:0 10px;}
	.gnbWrap #gnb > li .dep2Box h3 {font-size:17px;}
	.gnbBg p {margin-left:-740px; top:32px; width:300px; height:226px;}
	.gnbBg p img {width:300px;}
}
@media (max-width:1499px) {
	.gnbBg p {margin-left:-690px; top:70px; width:250px; height:188px;}
	.gnbBg p img {width:250px;}
}
@media (max-width:1399px) {
	.gnbBg p {margin-left:-650px; top:100px;}
	.gnbBg p img {width:210px;}
}
@media (max-width:1299px) {
	#header {height:122px;}
	.hd-top {position:relative; overflow:hidden; border-bottom:1px solid #ddd;}
	.gnbWrap h1 a {padding:20px 0;}
	.gnbWrap .global {margin-top:15px;} 
	.menu {position:relative;}
	.gnbWrap #gnb {left:0; margin-left:0; width:100%; padding:0; border-bottom:1px solid #ddd;}
	.gnbWrap #gnb > li {width:16.6666666%; text-align:center;}
	.gnbWrap #gnb > li > a {line-height:60px;}
	.gnbBg.active {display:none;}
	.gnbBg.active p {display:none;}
	.gnbWrap #gnb > li .dep2Box {width:16.6666666%; border-bottom:1px solid #ddd;}
	.gnbWrap #gnb > li .dep2 li {text-align:left;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-49.9999998%; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-33.3333332%; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:-16.6666666%; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:0px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(5) .dep2Box {margin-left:16.6666666%; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(6) .dep2Box {margin-left:33.3333332%; border-left:1px solid #ddd; border-top:1px solid #ddd; border-right:1px solid #ddd;}
	.gnbWrap #gnb > li .dep2Box h3 {display:none;}
	#header.on .gnbWrap #gnb > li .dep2Box {height:215px;}
}
@media (max-width:992px) {
	.wrap {overflow:hidden; height:100vh; background-color:#eee;}
	.gnbWrap {width:100%; padding:0; box-sizing:border-box; height:100%; position:relative;}
	#header{height:60px;}
	.hd-top {overflow:visible; height:60px;}
	.gnbWrap .global {display:none;}
	.gnbWrap .global-mb {display:block; position:absolute; right:-500px; top:60px; background-color:#fff; width:500px; height:50px; border-bottom:1px solid #ddd; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; z-index:20000;}
	.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 {right:0;}
	
	.headerR{display:block;width:30px; height:60px; position:absolute; top:-60px; right:20px;}		
	.menuBtn {display:block; position:relative; width:30px; height:25px; margin-top:17px;}	
	.menuBtn span{position:absolute; width:100%; height:3px; 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:11px;}
	.menuBtn span.menuBtnB{bottom:0;}
	.menuBtn.on span.menuBtnT{transform:rotate(45deg); top:11px;}
	.menuBtn.on span.menuBtnB{transform:rotate(-45deg); top:11px;}
	.menuBtn.on span.menuBtnM{width:0;}
	
	.gnbWrap #gnb {position:absolute; width:500px; height:calc(100vh - 60px); left:auto; right:-500px; margin-left:0; top:0; background-color:rgba(255,255,255,.7); overflow-y:auto; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; padding-top:50px;}
	#header.on2 .gnbWrap #gnb{right:0;}
	.gnbWrap #gnb > li{float:none;}
	#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 > li {width:100%; border-bottom:1px solid #dcdcdc; background-color:#fff;}
	.gnbWrap #gnb > li > a {color:#333; padding:0 30px;}
	.gnbWrap #gnb > li > span {position:relative; color:#333; display:block; line-height:50px; text-align:left; font-size:18px;}
	.gnbWrap #gnb > li > a:hover span {color:#2a7ba9;}
	.gnbWrap #gnb > li .dep2 {display:none;}
	.gnbWrap #gnb > li.on .dep2 {display:block;}
	.gnbWrap #gnb > li.hasDep > a {display:none;}
	.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:hover > li .dep2Box{opacity:1; height:auto;}	
	#header.on .gnbWrap #gnb > li .dep2Box {height:auto;}	
	.gnbWrap #gnb > li .dep2Box {background-color:#fff; height:auto; position:relative; opacity:1; width:100%;}
	.gnbWrap #gnb > li .dep2Box h3 {display:none;}
	.gnbWrap #gnb > li:hover .dep2Box {height:auto; background-color:#f5f5f5;}
	.gnbWrap #gnb > li .dep2Box:hover {background-color:#f5f5f5;}
	.gnbWrap #gnb > li .dep2Box {display:none; background-color:#f9f9f9; left:0;}	
	.gnbWrap #gnb > li:nth-child(1) .dep2Box,
	.gnbWrap #gnb > li:nth-child(2) .dep2Box,
	.gnbWrap #gnb > li:nth-child(3) .dep2Box,
	.gnbWrap #gnb > li:nth-child(4) .dep2Box,
	.gnbWrap #gnb > li:nth-child(5) .dep2Box,
	.gnbWrap #gnb > li:nth-child(6) .dep2Box {margin-left:0; border:0;}
	.gnbWrap #gnb > li .dep2 li {border-top:1px solid #dcdcdc;}
	.gnbWrap #gnb > li .dep2 li a{color:#333; line-height:50px; padding:0 20px;}
	.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 (max-width:499px) {
	.gnbWrap .global-mb {width:100%; right:-100%;}
	.gnbWrap .global-mb ul {padding:3px 10px;}
	.gnbWrap .global-mb li {padding:8px 10px;}
	.gnbWrap #gnb {width:100%; right:-100%; height:auto;}
	.headerR {right:10px;}
}
@media (max-width:424px) {
	.hd-top {padding:0 10px;}
	.gnbWrap h1 img {width:250px;}
}