@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;}
#content-wrap {overflow:hidden;}

/*footer*/
footer {border-top:1px solid #ccc; clear:both;}
footer .container {position:relative; padding:20px 0;}
address {margin:0; font-size:14px; color:#777;}
address span {padding-right:5px}
address span.bg::before {content:"/"; padding-right:5px; color:#ddd;}
address div {display:inline-block;}
.copyright {font-size:14px; color:#888;}
.copyright em {font-style:normal;}
.copyright span {display:inline-block;}
.f-link {position:absolute; right:0; top:20px;}
.f-link a {color:#333; font-weight:bold; font-size:15px;}

@media screen and (min-width: 1480px) { 
	.container {width:1440px;}
}
@media screen and (max-width: 1479px) { 
	.container {width:1260px;}
}
@media screen and (max-width: 1299px) { 
	.container {width:100%; padding:0 20px; box-sizing:border-box;}
	footer .container {padding:20px;}
	.f-link {right:20px;}
}
@media screen and (max-width: 1199px) {
	.container {width:100%; padding:0 20px; box-sizing:border-box;}
	.f-link {position:relative; text-align:center; top:0;}
	address {text-align:center;}
	.copyright {text-align:center;}
}
@media screen and (max-width: 991px) {
	.container {width:100%;} 
	address div {display:block;}
	address .mb-bg::before {display:none;}
}
@media screen and (max-width: 767px) {
	.container {width:100%;} 
	footer .container {padding:20px 10px;}
}
@media screen and (max-width: 569px) {
	#view_family li li {width:33.333333%; margin:1px 0;} 
	.copyright span {display:block;}
	address span {display:block;}
	address .bg::before {display:none;}
	.copyright {margin-top:10px;}
}
@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:1440px; margin:0 auto;}
.gnbWrap h1 {float:left; margin:0; font-size:0; line-height:100%;}
.gnbWrap h1 a {display:block; margin:34px 10px 34px 0; float:left;}
.gnbWrap h1 a.home_link {position:relative; padding-left:17px;}
.gnbWrap h1 a.home_link:before {content:"|"; font-size:14px; color:#cbcbcb; display:block; position: absolute; left:3px; top:8px;}
.gnbWrap ul, .gnbWrap ul li {padding:0; margin:0; list-style:none;}
.gnbWrap .global {float:right; overflow:hidden; margin-top:30px;}
.gnbWrap .global li {float:left; margin-left:10px;}
.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:50px;}
.gnbWrap #gnb > li {float:left;}
.gnbWrap #gnb > li > a {display:block; color:#111; width:180px; line-height:90px; font-weight:bolder; font-size:20px; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbWrap #gnb > li > span {display:none; color:#111; line-height:100px; font-weight:500; font-size:20px; 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 {display:none; 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:15px; border:0px solid #ddd; font-weight:normal; padding:7px 10px;}
.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:url('../images/common/gnbBg_bg.gif') repeat-y; background-size:100%; left:0; top:90px; height:0; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out;}
.gnbBg.active {height:250px; border-bottom:1px solid #ddd; top:91px; }
.gnbBg.on {}
.gnbBg dl {display:none;}
.gnbBg.active dl {display:block;}

/*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:#eee;}
	#header.on .gnbWrap #gnb > li .dep2Box {height:250px; display:block !important;}
	.gnbWrap #gnb > li .dep2Box ul {overflow:hidden;}
	.gnbWrap #gnb > li .dep2 li a {padding:7px 10px;}
	.gnbWrap #gnb > li .dep2 li a:hover {color:#4b8cc4; text-decoration:underline;}
	.gnbWrap #gnb > li .dep2 li a:hover:before {content:""; width:12px; height:10px; display:inline-block; background:url('../images/common/gnb_depth2_icon.png') no-repeat left 1px;}
	.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:1480px){
	.gnbWrap #gnb > li > a {width:180px; text-align:center;}
	.gnbWrap #gnb > li .dep2Box {width:180px; left:50%; padding:0 10px; background-color:#fff;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-320px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-140px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:40px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:220px; border-left:1px solid #ddd; border-top:1px solid #ddd;}	
	.gnbWrap #gnb > li:last-child .dep2Box {border-right:1px solid #ddd;}
	.gnbBg dl {position:absolute; left:50%; margin-left:-513px; top:60px; background:url('../images/common/gnbBg_dl_bg.png') no-repeat right bottom; border:0px solid #ddd; width:200px; height:190px;}
	.gnbBg dl dt {font-size:20px;}
	.gnbBg dl dd {font-size:24px; color:#4b8cc4; font-weight:bold;}
}
@media screen and (max-width:1479px) {
	.gnbWrap {width:calc(100% - 40px);}
	.gnbWrap #gnb {margin-left:30px;}
	.gnbWrap #gnb > li > a {width:140px; text-align:center;}
	.gnbWrap #gnb > li:nth-child(2) a, .gnbWrap #gnb > li:nth-child(3) a {width:140px;} 
	.gnbWrap #gnb > li .dep2Box {width:180px; left:50%; padding:0 10px; background-color:#fff;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:-322px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:-142px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:37px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:217px; border-left:1px solid #ddd; border-top:1px solid #ddd;}
	.gnbWrap #gnb > li:last-child .dep2Box {border-right:1px solid #ddd;}
	.gnbBg dl {position:absolute; left:50%; margin-left:-522px; top:60px; background:url('../images/common/gnbBg_dl_bg.png') no-repeat right bottom; border:0px solid #ddd; width:200px; height:190px;}
	.gnbBg dl dt {font-size:20px;}
	.gnbBg dl dd {font-size:24px; color:#4b8cc4; font-weight:bold;}
}
@media screen and (max-width:1299px) {
	.gnbWrap {position:relative; width:100%; padding:0 20px; box-sizing:border-box;}
	.gnbWrap h1 {padding:15px 0;}
	.gnbWrap h1 a {margin: 24px 10px 24px 0;}
	.gnbWrap .global {margin-top:10px;}
	.gnbWrap .menu {position:absolute; right:0; top:30px;}
	.gnbWrap #gnb {padding-right:50px; margin-left:0;}
	.gnbWrap #gnb > li > a {line-height:70px; padding:0; width:180px}
	.gnbWrap #gnb > li:nth-child(2) a, .gnbWrap #gnb > li:nth-child(3) a {width:180px;} 
	.gnbBg.active {top:101px;}
	.gnbWrap #gnb > li .dep2Box {left:auto;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:0; right:590px;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:0; right:410px;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:0; right:230px;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:0; right:50px;}
	.gnbBg dl {left:auto; right:770px; margin-left:0;}
	
}
	
@media screen and (max-width: 1199px) {
	.gnbWrap #gnb {padding-right:0;}
	.gnbWrap #gnb > li > a {width:auto; width:140px;}
	.gnbWrap #gnb > li:nth-child(2) a, .gnbWrap #gnb > li:nth-child(3) a {width:140px;} 
	.gnbWrap #gnb > li .dep2Box .dep2 {padding-top:10px;}
	.gnbWrap #gnb > li .dep2Box {width:190px;}
	.gnbWrap #gnb > li:nth-child(1) .dep2Box {margin-left:0; right:570px;}
	.gnbWrap #gnb > li:nth-child(2) .dep2Box {margin-left:0; right:380px; width:190px;}
	.gnbWrap #gnb > li:nth-child(3) .dep2Box {margin-left:0; right:190px; width:190px;}
	.gnbWrap #gnb > li:nth-child(4) .dep2Box {margin-left:0; right:0px;}
	.gnbBg dl {right:760px;}
}
@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 .menu {top:0; width:100%;}
	.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; font-size:0; padding:0;}
	.gnbWrap h1 a {padding:19px 0; margin:0; font-size:0;}
	.gnbWrap h1 a.home_link:before {left:13px; top:28px;}
	.gnbWrap h1 a.home_link {padding-left:30px;}

	.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.on > span {color:#fff; background-color:#253A93;}
	.gnbWrap #gnb > li .dep2Box {display:none; background-color:#eee; height:auto; position:relative; opacity:1; width:100% !important; right:0 !important;}
	.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 .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;}
	.gnbBg {display:none;}
}
@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:500px) {
	.gnbWrap h1 img {height:18px;}
	.gnbWrap h1 a {padding:21px 0;}
	.gnbWrap h1 a.home_link {padding-left:20px;}
	.gnbWrap h1 a.home_link:before {left:9px;}
}
@media screen and (max-width:375px) {
	#header {height:50px;}
	.gnbWrap h1 img {height:14px;}
	.gnbWrap h1 a {padding:18px 0;}
	.menuBtn {width:25px; height:20px; right:5px; margin-top:15px;}
	.menuBtn span {height:2px;}
	.menuBtn span.menuBtnM {top:9px;}
}
/*page-top*/
a.totop {position: fixed; right: 20px; bottom: 20px;}
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;}