@charset "utf-8";

/* ************************ 공용 ************************ */
a {text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important;}
a:link {text-decoration:none; color:#3d3833;}
a:visited {text-decoration:none; color:#3d3833;}
a:hover {text-decoration:none; color:#000;}
a:active {text-decoration:none; color:#3d3833;}
a,img,i {transition:all .1s linear;	-webkit-transition:all .1s linear; -moz-transition:all .1s linear;}
			
body {font-family:"Noto Sans KR",AppleSDGothicNeo-Light,DroidSans,HelveticaNeue,"돋움",sans-serif; font-size:16px; font-weight:300; line-height:1.6; color:#666;}
body > section {position:relative; display:block; width:100%; max-width:1200px; margin:0 auto;}
#gotop {z-index:888; position:fixed; width:35px; height:35px; border-radius:7px; bottom:40px; right:20px; background:url(../images/common/arrow_up.png) no-repeat 50% #fff; box-shadow:0 0 3px rgba(0,0,0,.3) !important; }

/* 컨텐츠 */
.contents img {max-width:100%; height:auto;}
.sc img {height:48px;}

/* 상단배경 */
.bgSub1 {background:url(../images/common/bg_top1.jpg) !important;}
.bgSub2 {background:url(../images/common/bg_top2.jpg) !important;}
.bgSub3 {background:url(../images/common/bg_top3.jpg) !important;}
.bgSub4 {background:url(../images/common/bg_top4.jpg) !important;}


/* ************************ 데스크탑 (992~) ************************ */
@media screen and (min-width: 992px), print {

	html,body {}
	.mobile {display:none !important;}
	
	/* 180918 히든배너 추가 : 삭제에정 */
	div.topBanner {display:none; background:#034055; min-height:150px;}
	div.topBanner.on {display:block; background:#034055; min-height:150px;}
	div.topBanner .wrap {position:relative; width:1200px; max-width:100%; margin:0 auto; background:url(../images/main/campaign_bg.png)no-repeat center;}
	div.topBanner .wrap>a.In {display:inline-block; width:100%; min-height:150px; position:relative;}
	div.topBanner .wrap .txt {display:inline-block; padding:40px 0 0 300px;}
	div.topBanner .wrap a.view {
		position:absolute; right:50px; top:55px;
		display:inline-block; padding:20px 30px; /* font-size:20px; font-weight:normal; */ line-height:1;
		border-radius:5px; background:#02a551; color:#fff; box-shadow:5px 5px 5px rgba(0,0,0,.1) !important;
	}
	div.topBanner .wrap a.topClose {position:absolute; right:20px; top:20px; font-size:12px; color:#fff;}
	div.topBanner .wrap a.topClose>span {display:inline-block; vertical-align:middle;}
	div.topBanner .wrap a.topClose span.icon {
		width:18px; height:18px; margin-left:10px; line-height:1;
		background:url(../images/common/icon_x.png) no-repeat center;
		background-size:100%;
	}
	.topBanner_mo {display:none;}
	/* 180918 히든배너 추가 : 삭제예정 */

	/*헤더*/
	header {z-index:999; position:absolute; width:100%; background-color:rgba(0,0,0,.3) !important;}
	header .head {position:relative; height:100px; max-width:1200px; margin:0 auto; text-align:center;}
	header .head h1 {display:inline-block; margin-top:25px;}
	header .head .side {position:absolute; right:0; top:45px; font-size:12px; line-height:1;}
	header .head .side li {float:left; margin-left:20px; border:none; overflow:hidden;}
	header .head .side li a {display:block; color:#fff;}

	/*gnb*/
	nav.mobile {visibility:hidden}
	nav.pc {visibility:hidden; position:relative; display:block; margin:0 auto; overflow:hidden; text-align:center; border-top:1px solid rgba(255,255,255,.15);}
	nav.pc:hover {box-shadow:0 5px 5px rgba(0,0,0,.1) !important;}
	nav.pc .navbg {position:absolute; left:0; top:0; width:100%; height:100%;}
	nav.pc .navbg .dep1 {height:60px;}
	nav.pc .navbg .dep2 {height:100%; background-color:#fff;}
	nav.pc .gnb {position:relative; display:inline-block; max-width:1200px; text-align:left !important;}
	nav.pc .gnb a.on {color:#ffcc00;}
	nav.pc .gnb a:hover,nav .navWrap a:focus {color:#ffcc00;}
	nav.pc .gnb>ul {margin:0 !important; line-height:1.6;}
	nav.pc .gnb>ul>li {position:relative; float:left; padding-right:90px;}
	nav.pc .gnb>ul>li:last-child {padding-right:0 !important;}
	nav.pc .gnb>ul>li>a {display:block; width:100%; height:60px; padding-top:20px; font-size:18px; font-weight:400; line-height:1; color:#fff;}
	nav.pc .gnb>ul>li.on>a {color:#ffcc00;}
	nav.pc .gnb>ul>li>ul {position:absolute; top:80px; left:0; width:100% !important;}
	nav.pc .gnb>ul>li>ul>li a {display:inline-block; padding:4px 0; color:#000; font-size:16px;  letter-spacing:-1px;}
	nav.pc .gnb>ul>li>ul>li a:hover {color:#4591e0;  text-decoration:underline !important;}
	nav.pc .gnb>ul>li>ul>li.on a {color:#4591e0;}

	/*footer*/
	footer {max-width:100%; color:#666; text-align:left !important; font-weight:400; background-color:#f5f5f5;}
	footer .tel {display:none;}
	footer address {position:relative; display:block; max-width:1200px; margin:0 auto; padding:35px 0; font-size:13px;}
	footer address .logo {margin:0; padding:0;}
	footer address .address {margin-top:10px; padding:0;}
	footer address .address span {margin-right:10px;}
	footer .familysite {z-index:10; position:absolute; right:0; top:35px;}
	footer .familysite .list {position:relative; padding:0; font-size:14px; height:40px;}
	footer .familysite .list>a {display:inline-block; width:180px; padding:10px 30px 10px 10px; font-weight:300; line-height:1; border-radius:5px; border:1px solid #ddd; background:url(../images/common/arrow_up.png) no-repeat 95% 50% #fff;}
	footer .familysite .list>ul {position:absolute; display:none; bottom:40px; border:1px solid #fff; background-color:#fff; border-radius:5px;}
	footer .familysite .list>ul.on {display:block; width:100%; border:1px solid #ddd;}
	footer .familysite .list>ul a {display:block; padding:10px; border-top:1px solid #ddd;}
	footer .familysite .list>ul li {padding:0;}
	footer .familysite .list>ul li:first-child a {border:0;}
	

	/*서브 상단 배경*/
	[class*="bgSub"] {max-width:100% !important; height:300px; overflow:hidden; text-align:center; background-size:cover !important; background-repeat:no-repeat !important; background-position:center !important;}
	[class*="bgSub"] p {margin:210px 0 0; font-size:36px; color:rgba(0,0,0,.7); font-weight:400; letter-spacing:-2px;}
	[class*="bgSub"] .cover {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(144,142,138,.0);}


	/*서브메뉴*/
	.lnb.affix-top {z-index:888; position:absolute; top:300px; width:100%;}
	.lnb.affix {z-index:888; position:fixed; top:0; width:100%;}
	.lnb {margin:0; padding:0; height:60px; max-width:100% !important; font-weight:400; line-height:1; letter-spacing:-0.5px; background-color:#fff; border-bottom:1px solid #e8e8e8; box-shadow:0px 3px 5px rgba(0,0,0,.07) !important;}
	.lnb .wrap {position:relative; max-width:1200px; margin:0 auto; padding:0; border-top:0;}
	.lnb .wrap>* {position:relative; float:left; height:60px;}
	.lnb .wrap div>p {cursor:pointer; color:#000;}
	.lnb .wrap div:hover {background-color:#fff;}
	.lnb .wrap .home {padding:24px 40px; font-size:14px; border-left:1px solid #ddd;}
	.lnb .wrap .onmenu {
		display:block; height:60px; padding:22px 100px 15px 15px;
		background:url(../images/common/select.png) no-repeat right center; border:1px solid #ddd; border-top:0; border-bottom:0;
	}
	.lnb .wrap .dep1 {min-width:200px;}
	.lnb .wrap .dep2 {min-width:260px; margin-left:-1px;}
	.lnb .wrap ul {display:none; width:100%; padding:0; margin:0;}
	.lnb .wrap ul li a {display:block; padding:15px; font-weight:300; border:1px solid rgba(0,0,0,.1); border-bottom:0; background:#fff;}
	.lnb .wrap ul li:last-child a {border:1px solid rgba(0,0,0,.1);}
	.lnb .wrap ul li a:hover {color:#000; background-color:#f8f8f8;}
	.lnb .wrap ul li.on a {color:#fff; background-color:#4591e0; border-color:transparent;}
	.lnb .wrap .back {position:absolute; display:block; height:100%; top:0; right:0; padding:25px 20px 0 40px; font-size:12px; border:1px solid #e8e8e8; border-top:0; border-bottom:0; background:url(../images/common/arrow_left.png) no-repeat 20% 50%;}
	.lnb .wrap .back:hover {padding:25px 20px 0 50px; color:#85c957;}

	/*컨텐츠*/
	.contents {max-width:1200px; margin:0 auto; padding:130px 0 100px 0;}
	.contents img {max-width:100%;}
	.contents>.head {margin-bottom:80px;}
	.contents>.head h3 {margin:0; margin-bottom:10px; font-weight:600; font-size:36px; color:#000; line-height:1; letter-spacing:-2px;}
	.contents>.head .h3txt {display:none; font-size:14px; color:#999; font-weight:300;}
}


/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

	html,body {font-weight:400; font-size:15px;}	
	.pc {display:none !important;}
	
	/* 180918 히배너 추가 : 삭제예정 */
	.topBanner_mo {background:#034055; box-shadow:3px 3px 10px rgba(0,0,0,.2) inset !important; text-align:center;}
	.topBanner_mo .wrap {position:relative; max-width:100%; margin:0 auto; background:url(../images/main/campaign_bg_mo.png)no-repeat center; background-size:cover;}
	.topBanner_mo .wrap>a.In {display:inline-block; width:100%; padding:20px 50px;}
	.topBanner_mo .wrap .txt {display:inline-block;}
	.topBanner_mo .link {width:100%;}
	.topBanner_mo .link a.view {
		display:block; padding:15px 0; font-size:20px; font-weight:normal; line-height:1;
		background:#02a551; color:#fff; letter-spacing:-1px;
	}
	/* 180918 히든배너 추가 : 삭제예정 */

	/*헤더*/
	header {z-index:999; width:100%; left:0; top:0;}
	header .head {z-index:100; position:absolute; left:0; top:0; width:100%; height:80px; overflow:hidden; line-height:1; background-color:rgba(0,0,0,.3)}
	header .head .gnbView {display:block; float:right; height:80px; padding:30px 15px;}
	header .head .gnbView img {height:20px;}
	header .head h1 {float:left; margin:0 !important; display:block;}
	header .head h1 a {display:inline-block; padding:18px; text-align:center;}
	header .head h1 a img {display:block; height:40px; font-size:0; line-height:0;}

	
	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; left:0; top:0; width:50%; overflow:hidden; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:80px; background-color:#1d71ca; color:#fff;}
	nav.mobile .closeWrap .gnbClose {display:block; float:right; width:60px; height:80px; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat; background-size:37%; border-left:1px solid rgba(255,255,255,.2);}
	nav.mobile .closeWrap .home {display:block; float:left; height:80px; padding:25px; color:#fff; font-size:15px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left !important;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb .home {display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:20px; font-size:22px; color:#000; border-bottom:1px solid #e0e0e0; background:#fff; letter-spacing:-1px;}
	nav.mobile .gnb>ul>li>a:hover {color:#4591e0;}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#4591e0; border-bottom:1px solid #4591e0;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {
		display:block; padding:15px 20px 15px 40px; font-size:18px; color:#888; letter-spacing:-.5px; border-bottom:1px solid #f5f5f5;
		background:url(../images/common/dot_m.png) no-repeat #fff 30px 28px; background-size:3px;
	}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#4591e0; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#4591e0;}

	/*footer*/
	footer {max-width:100%; color:#666; text-align:left !important; font-weight:400; background-color:#f5f5f5;}
	footer .tel {display:none;}
	footer address {position:relative; display:block; margin:0 auto; padding:30px 20px; font-size:13px;}
	footer address .logo {margin:0; padding:0;}
	footer address .logo img {height:25px;}
	footer address .address {display:block; padding:0; margin-top:10px;}
	footer .familysite {z-index:10; position:absolute; right:20px; top:35px;}
	footer .familysite .list {position:relative; padding:0; font-size:14px; height:40px;}
	footer .familysite .list>a {display:inline-block; width:180px; padding:10px 30px 10px 10px; font-weight:300; line-height:1; border-radius:5px; border:1px solid #ddd; background:url(../images/common/arrow_up.png) no-repeat 95% 50% #fff;}
	footer .familysite .list>ul {position:absolute; display:none; bottom:40px; border:1px solid #fff; background-color:#fff; border-radius:5px;}
	footer .familysite .list>ul.on {display:block; width:100%; border:1px solid #ddd;}
	footer .familysite .list>ul a {display:block; padding:10px; border-top:1px solid #ddd;}
	footer .familysite .list>ul li {padding:0;}	
	footer .familysite .list>ul li:first-child a {border:0;}

	/*서브 상단 배경*/
	[class*="bgSub"] {max-width:100% !important; height:200px; overflow:hidden; text-align:center; background-size:cover;}
	[class*="bgSub"] p {position:absolute; width:100%; bottom:20px; text-align:center; font-size:24px; font-weight:400; color:rgba(0,0,0,.5); letter-spacing:-1px;}
	[class*="bgSub"] .cover {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.1);}

	/*컨텐츠*/
	.contents {width:100%; margin:0; padding:0;}
	.contents .head {padding:30px 20px; padding-bottom:0;}
	.contents .head h3 {display:block; margin:0; margin-bottom:5px; font-size:22px; font-weight:500; letter-spacing:-1px;color:#000; line-height:1;}
	.contents .head .h3txt {display:none; font-size:12px; color:#999; line-height:1.3;}
	.contents img {max-width:100%;}
	.contents>.wrap {padding:30px 0 50px 0;}
	.contents>.wrap>* {padding:0 20px;}
	.contents>.wrap.consult {padding-top:0 !important;}
	.contents>.wrap.consult>* {padding:0 !important;}
	.contents h4>span {display:inline-block; vertical-align:top; line-height:1;}
	.contents h4>span:first-child, .contents_box h4>span:last-child {width:30px; height:10px; border-bottom:1px solid #908e8a;}
	.contents h4 .title {display:inline-block; margin:0 20px 10px 20px; font-size:14px; font-weight:normal; color:#3d3833; line-height:1.4;}
	.contents h4 .title span {font-size:18px; line-height:1; letter-spacing:-1px;}
}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	/* 180918 히든배너 추가 : 삭제예정 */
	.topBanner_mo .wrap .txt img {width:80%;}
	.topBanner_mo .link a.view {font-size:16px;}
	/* 180918 히든배너 추가 : 삭제예정 */
	
	/*헤더*/
	header {z-index:999; width:100%; left:0; top:0;}
	header .head {z-index:100; position:absolute; left:0; top:0; width:100%; height:60px; overflow:hidden; line-height:1; background-color:rgba(0,0,0,.3)}
	header .head .gnbView {display:block; float:right; height:60px; padding:20px 15px;}
	header .head .gnbView img {height:15px;}
	header .head h1 {float:left; margin:0 !important; display:block;}
	header .head h1 a {display:inline-block; padding:15px; text-align:center;}
	header .head h1 a img {display:block; height:30px; font-size:0; line-height:0;}

	/*gnb*/
	nav.mobile {z-index:9999; position:fixed; visibility:hidden; left:0; top:0; width:70%; overflow:hidden; background-color:#fff;}
	nav.mobile .closeWrap {position:relative; height:60px; background-color:#1d71ca; color:#fff;}
	nav.mobile .closeWrap .gnbClose {display:block; float:right; width:60px; height:60px; background:url(../images/common/icon_gnbclose.png) 50% 50% no-repeat; background-size:37%; border-left:1px solid rgba(255,255,255,.2);}
	nav.mobile .closeWrap .home {display:block; float:left; height:60px; padding:20px; color:#fff; font-size:12px;}
	.gnbCover {z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5);}

	nav.mobile .gnb {position:relative; width:100%; height:100%; overflow-y:auto; text-align:left !important;}
	nav.mobile .gnb * {width:100% !important;}
	nav.mobile .gnb .home {display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333;}
	nav.mobile .gnb>ul>li {clear:both; position:relative;}
	nav.mobile .gnb>ul>li>a {display:block; padding:12px 20px; font-size:17px; color:#000; border-bottom:1px solid #e0e0e0; background:#fff; letter-spacing:-1px;}
	nav.mobile .gnb>ul>li>a:hover {color:#4591e0;}
	nav.mobile .gnb>ul>li.on>a {color:#fff; background:#4591e0; border-bottom:1px solid #4591e0;}
	nav.mobile .gnb>ul>li>ul {display:none;}
	nav.mobile .gnb>ul>li>ul>li {position:relative;}
	nav.mobile .gnb>ul>li>ul>li a {
		display:block; padding:8px 20px 8px 40px; font-size:15px; color:#888; letter-spacing:-.5px; border-bottom:1px solid #f5f5f5;
		background:url(../images/common/dot_m.png) no-repeat #fff 30px 18px; background-size:3px;
	}
	nav.mobile .gnb>ul>li>ul>li:last-child a {border-color:#e0e0e0;}
	nav.mobile .gnb>ul>li>ul>li a:hover {color:#4591e0; background-color:#f5f5f5;}
	nav.mobile .gnb>ul>li>ul>li.on a {color:#4591e0;}

	/*footer*/
	#gotop {display:none !important;}
	footer {max-width:100%; letter-spacing:-0.5px; color:#888; background-color:#fff; border-top:1px solid #ddd;}
	footer .tel {display:block; text-align:center; background-color:#fff; color:#fff; line-height:1;}
	footer .tel .icon {display:inline-block; width:30px; height:30px; padding-top:7px; margin-right:20px; border-radius:50%; font-size:13px; background:#fff; border:2px solid #4591e0;}
	footer .tel a {display:block; padding:15px; color:#fff;}
	footer .tel a span {display:inline-block; vertical-align:middle; font-size:13px;}
	footer address {position:relative; display:block; margin:0 auto; padding:0; text-align:center; border:0; background:#f9f9f9;}
	footer address .logo {display:none;}
	
	footer .familysite {z-index:10; position:relative; width:100%; top:0; left:0;}
	footer .familysite .list {position:relative; padding:0; font-size:13px;}
	footer .familysite .list>a {display:block; width:100%; padding:20px; font-weight:400; text-align:left; line-height:1; border-radius:0; border:0; border-bottom:1px solid #ddd; background:url(../images/common/arrow_down.png) no-repeat 95% 50% #fff;}
	footer .familysite .list>ul {position:relative; display:none; bottom:inherit; border:0; background-color:#fff; border-radius:0px;}
	footer .familysite .list>ul.on {display:block; width:100%; border:0;}
	footer .familysite .list>ul a {display:block; padding:15px; border:0; line-height:1;}
	footer .familysite .list>ul li {padding:0; border:1px solid #eee; border-top:0; border-left:0;}
	footer .familysite .list>ul li:first-child a {border:0;}
	
	footer address .address {position:relative; font-size:12px; padding:20px 5px;}
	footer address .address span {padding:0 2px;}
	footer address .address p {line-height:1.4; margin:10px 0 0;}
	

	/*서브 상단 배경*/
	[class*="bgSub"] {position:relative; max-width:100% !important; height:140px; overflow:hidden; text-align:center; background-size:cover;}
	[class*="bgSub"] p {position:absolute; width:100%; bottom:20px; text-align:center; font-size:16px; font-weight:400; color:rgba(0,0,0,.5); letter-spacing:-1px;}
	[class*="bgSub"] .cover {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(144,142,138,.0);}
}