@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(contents.css);
@import url(board.css);

/* ==============================================
   defaults
   ============================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
ol, ul { list-style:none;}
blockquote, q {	quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse:collapse; border-spacing:0;}
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
input, select { margin:0; padding:0; vertical-align:middle;}
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

.ir { background-color: transparent; border: 0; overflow: hidden; text-indent:-9999px;}
.ir:before { content: ""; display: block; width: 0; height: 150%; }

.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix {  *zoom: 1;}
.hidden { display:none;}

/* box sizing */

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/* ==============================================
   layout
   ============================================== */

html { height: 100%; overflow:auto; overflow-y:scroll;}
input,
select,
button,
textarea,
body { color:#202020; font-size:14px; font-family:'Noto Sans KR', 'Nanum Gothic', 'dotum', '돋움', 'gulim', '굴림', arial !important;}
body { height:100%; color:#000; }

#wrap { height: 100%; }
#wrapIn { height: 100%; }

.forPC { display: block !important;}
.forMobile { display: none !important;}
.mobileMenu { display: none;}

/* left */

.leftWrap { position:absolute; left:0; top:0; width:430px; height:100%; min-height:900px; background-color:#1b1d25; padding-right:190px; z-index:9999;}
.leftWrap h1 { padding-top:40px; margin-bottom:45px;}
.leftWrap h1 a { display:block; text-align:center;}
.leftWrap a.btnHome { display: block; width: 100px; height: 30px; line-height: 30px; font-size: 13px; text-align: center; text-decoration: none; color: #fff; background-color: #1c8ac9; margin: 0 auto 30px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}
.leftWrap a.btnHome:hover { background-color: #137cb8; }
.leftWrap .gnb {}
.leftWrap .gnb > ul { border-top:1px solid #41434a;}
.leftWrap .gnb > ul > li { border-bottom:1px solid #41434a;}
.leftWrap .gnb > ul > li > a { display:block; height:60px; line-height:60px; color:#fff; font-size:17px; font-weight:500; text-decoration:none; background: url(../images/common/icon_arrow_blue.png) right 24px center no-repeat; padding-left:24px; cursor:pointer;}
.leftWrap .gnb > ul > li.service > a { background-image: url(../images/common/icon_arrow_yellow.png); }
.leftWrap .gnb > ul > li.active > a,
.leftWrap .gnb > ul > li > a:hover { background-color:#153f9c; background-image: url(../images/common/icon_arrow_white.png);}
.leftWrap .gnb > ul > li.service.active > a,
.leftWrap .gnb > ul > li.service > a:hover { color: #393530; background-color:#fce919; background-image: url(../images/common/icon_arrow_brown.png);}

.leftWrap .gnb > ul > li > .sub { display:none; position:absolute; right:0; top:0; width:190px; height:100%; border-right: 1px solid #dbdde6; background-color:#eff1f6;}
.leftWrap .gnb > ul > li.active > .sub { display:block;}

.leftWrap .gnb > ul > li > .sub ul { border-top:1px solid #dbdde6;}
.leftWrap .gnb > ul > li.office > .sub ul { margin-top: 204px; }
.leftWrap .gnb > ul > li.service > .sub ul { margin-top: 204px; }
.leftWrap .gnb > ul > li > .sub ul li { border-bottom:1px solid #dbdde6;}
.leftWrap .gnb > ul > li > .sub ul li a { display:block; height:42px; line-height:42px; color:#1b1d25; font-size:15px; text-decoration:none; padding-left:14px;}
.leftWrap .gnb > ul > li > .sub ul li a:hover { background-color:#e0e1e4;}
.leftWrap .gnb > ul > li > .sub ul li.active a { color: #fff; background-color:#152e9c;}
.leftWrap .gnb > ul > li.service > .sub ul li.active a { color: #393530; font-weight: 500; background-color:#f3d50d;}
.leftWrap p.phone { margin-top: 40px; }

.leftWrap .leftContact { width: 190px; text-align: center; margin: 40px auto 0; }
.leftWrap .leftContact p.title { display: block; height: 34px; line-height: 34px; font-size: 15px; color: #fff; font-weight: 400; background-color: #153f9c; 
	-moz-border-radius: 17px;
	-webkit-border-radius: 17px;
	border-radius: 17px;
}
.leftWrap .leftContact a.tel { line-height: 46px; color: #fce919; font-size: 32px; font-family: arial; font-weight: 800; letter-spacing: -0.05em; text-decoration: none; margin-top: 16px; }
.leftWrap .leftContact a.tel:hover {}
.leftWrap .leftContact p.mobile { height: auto; line-height: 0; margin: 4px 0; }
.leftWrap .leftContact a.phone { line-height: 32px; color: #fff; font-size: 24px; font-family: arial; font-weight: 600; text-decoration: none; }

.leftWrap .leftLink { position: absolute; left: 0; bottom: 150px; border-top: 1px solid #41434a; }
.leftWrap .leftLink ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
.leftWrap .leftLink ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
.leftWrap .leftLink ul.list {}
.leftWrap .leftLink ul.list li { float: left; }
.leftWrap .leftLink #clickPop { cursor: pointer; }
.leftWrap .leftLink p.clickImg { position: absolute; left: 230px; top: 50%; margin-top: -86px; z-index: 9999; }

.leftWrap .footer { position: absolute; left: 0; bottom: 0; width: 240px; height: 150px; border-top: 1px solid #41434a; padding: 24px 0 18px 24px; }
.leftWrap .footer p { line-height: 20px; font-size: 13px; color: #9fa4b6; letter-spacing: -0.05em; margin-bottom: 14px; }
.leftWrap .footer a { color: #9fa4b6; text-decoration: none; }

body.main .leftWrap { width: 240px; padding-right:0; }
body.main .leftWrap .gnb > ul > li > ul { display:none;}

body.etc .leftWrap { padding-right:0;}
body.etc .leftWrap .gnb > ul > li > ul { display:none;}

.leftWrap .con { position:absolute; bottom:0; left:0; width:180px;}
.leftWrap .con p.clickImg { position:absolute; right:-305px; top:126px; height:116px; z-index:9999;}

/* right */

.rightWrap { position:absolute; right:0; top:0; width:190px; height:100%; min-height:720px; background-color:#1b1e21; padding:0 5px; overflow:hidden; z-index:9999;}
.rightWrap ul { width:190px; height:100%; padding:5px 0;}
.rightWrap ul li { width:190px; height:125px; margin-bottom:5px; overflow: hidden;}
.rightWrap ul li p.img { margin: 0 !important; }
.rightWrap ul li img { width: 190px; height: auto; }

/* sub */

.subWrap { min-width:650px; height:100%; padding:0 230px 0 450px; overflow:hidden; overflow-y:auto;}
body.etc .subWrap { background-color:#f0f0f0; padding:0 230px 0 210px;}


/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

@media only screen and (max-width: 800px) {

	.forPC { display: none !important;}
	.forMobile { display: block !important;}

	.mobileMenu { display: block; width: auto; height: 40px; line-height: 40px; font-size: 15px; text-align: center; color: #fff; background-color: #015a8e; margin: 0 10px;}
	.mobileMenu { display: block; position: absolute; right: 20px; top: 28px; width: 33px; height: 23px; text-indent: -9999px; background: #11bdd2 url(../images/mobile/top_btn_menu.png) 0 0 no-repeat; -webkit-background-size: 33px auto; background-size: 33px auto;}

}



/* ==============================================
   main
   ============================================== */

.mainCon { position:relative; height:100%; min-height:900px; padding:0 190px 0 240px; z-index:100;}
.mainCon p.honest { position: absolute; left: 50%; top: 60px; width: 300px; line-height: 40px; font-size: 26px; color: #fff; font-weight: 600; margin-left: -100px; z-index: 9999; 
	text-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
.mainCon .menu { position: absolute; left: 0; top: 0; width:100%; height:100%; min-height:700px; z-index: 9999;}

.mainCon .menu > ul { padding:10% 190px 0 240px;}
.mainCon .menu > ul > li { float:left; width:50%;}
.mainCon .menu > ul > li .link { margin:0 auto;}
.mainCon .menu > ul > li .link h3 { line-height: 60px; font-size: 42px; color: #fff; font-weight: 800; text-align:center; margin-bottom: 36px; 
	text-shadow: 0px 2px 2px rgba(0,0,0,.5);
}
.mainCon .menu > ul > li .link h3 span { display: block; line-height: 24px; font-size: 16px; font-family: arial; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; 
	text-shadow: none;;
}
.mainCon .menu > ul > li .link ul { width: 240px; margin: 0 auto; }
.mainCon .menu > ul > li .link ul li { margin-bottom:2px;}
.mainCon .menu > ul > li .link ul li a { display:block; height:48px; line-height:48px; color:#fff; font-size:17px; color: #062363; font-weight:600; text-align: center; text-decoration:none; letter-spacing: -0.05em; border-bottom: 4px solid #194b7b; background-color: rgba(54,140,242,.8); 
	text-shadow: 0px 1px 0px rgba(255,255,255,.3); 
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.mainCon .menu > ul > li .link ul li a:hover { color: #fff !important; background-color: rgba(21,63,156,.8); border-color: #11244e; 
	text-shadow: none;}
.mainCon .menu > ul > li.service .link ul li a { color: #393530; background-color: rgba(252,266,25,.8); border-color: #8f8408; }
.mainCon .menu > ul > li.service .link ul li a:hover { background-color: rgba(173,113,26,.8); border-color: #6e450a; }
.mainCon .menu > ul > li .link ul li a span { display:block; height:40px; background:url(../images_new/main/menu_arrow.service.png) right center no-repeat;}
.mainCon .menu > ul > li.service .link ul li a span { background:url(../images_new/main/menu_arrow_house.png) right center no-repeat;}
.mainCon .menu > ul > li.service .link ul li a span { background:url(../images_new/main/menu_arrow_office.png) right center no-repeat;}
.mainCon .menu > li.mun {list-style: none; padding:10px; }


#mainVisual,
#mainVisual ul.slides,
#mainVisual ul.slides li { height: 100%; }


.simply-scroll-container { /* Container DIV - automatically generated */
	position: relative;
}

	.simply-scroll-clip { /* Clip DIV - automatically generated */
		position: relative;
		overflow: hidden;
	}

	.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		.simply-scroll-list li {
			padding: 0;
			margin: 0;
			list-style: none;
		}
	
		.simply-scroll-list li img {
			border: none;
			display: block;
		}
	
	.simply-scroll-btn {
		position: absolute;
		background-image: url(buttons.png);
		width: 42px;
		height: 44px;
		z-index:3;
		cursor: pointer;
	}
	
	.simply-scroll-btn-left {
		left: 6px;
		bottom: 6px;
		background-position: 0 -44px;
	}
	.simply-scroll-btn-left.disabled {
		background-position: 0 0 !important;
	}
	.simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
		background-position: 0 -88px;
	}
	
	.simply-scroll-btn-right {
		right: 6px;
		bottom: 6px;
		background-position: -84px -44px;
	}
	.simply-scroll-btn-right.disabled {
		background-position: -84px 0 !important;
	}
	.simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
		background-position: -84px -88px;
	}
	
	.simply-scroll-btn-up {
		right: 6px;
		top: 6px;
		background-position: -126px -44px;
	}
	.simply-scroll-btn-up.disabled {
		background-position: -126px 0 !important;
	}
	.simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
		background-position: -126px -88px;
	}
	
	.simply-scroll-btn-down {
		right: 6px;
		bottom: 6px;
		background-position: -42px -44px;
	}
	.simply-scroll-btn-down.disabled {
		background-position: -42px 0 !important;
	}
	.simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
		background-position: -42px -88px;
	}
	
	.simply-scroll-btn-pause {
		right: 6px;
		bottom: 6px;
		background-position: -168px -44px;
	}
	.simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
		background-position: -168px -88px;
	}
	
	.simply-scroll-btn-pause.active {
		background-position: -84px -44px;
	}
	.simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
		background-position: -84px -88px;
	}

/* Custom class modifications - override classees

.simply-scroll is default

*/

.simply-scroll { /* Customisable base class for style override DIV */
	width: 576px;
	height: 200px;
	margin-bottom: 1em;
}

	.simply-scroll .simply-scroll-clip {
		width: 576px;
		height: 200px;
	}
	
		.simply-scroll .simply-scroll-list {}
		
		.simply-scroll .simply-scroll-list li {
			float: left;
			width: 290px;
			height: 200px;
		}
		.simply-scroll .simply-scroll-list li img {}
	
	.simply-scroll .simply-scroll-btn {}
	
	.simply-scroll .simply-scroll-btn-left {}
	.simply-scroll .simply-scroll-btn-left.disabled {}
	.simply-scroll .simply-scroll-btn-left:hover {}
	
	.simply-scroll .simply-scroll-btn-right {}
	.simply-scroll .simply-scroll-btn-right.disabled {}
	.simply-scroll .simply-scroll-btn-right:hover {}
	
	.simply-scroll .simply-scroll-btn-up {}
	.simply-scroll .simply-scroll-btn-up.disabled {}
	.simply-scroll .simply-scroll-btn-up:hover {}
	
	.simply-scroll .simply-scroll-btn-down {}
	.simply-scroll .simply-scroll-btn-down.disabled {}
	.simply-scroll .simply-scroll-btn-down:hover {}
	


/* Vertical scroller example */

.vert { /* wider than clip to position buttons to side */
	width: 190px;
	height: 100%;
	margin-bottom: 1.5em;
}

	.vert .simply-scroll-clip {
		width: 190px;
		height: 100%;
	}
	
		.vert .simply-scroll-list {}
		
		.vert .simply-scroll-list li {
			width: 190px;
			height: 125px;
		}
		.vert .simply-scroll-list li img {}
	
	.vert .simply-scroll-btn {}

	.vert .simply-scroll-btn-up { /* modified btn pos */
		right: 0;
		top: 0;
	}
	.vert .simply-scroll-btn-up.disabled {}
	.vert .simply-scroll-btn-up:hover {}
	
	.vert .simply-scroll-btn-down { /* modified btn pos */
		right: 0;
		top: 52px;
	}
	.vert .simply-scroll-btn-down.disabled {}
	.vert .simply-scroll-btn-down:hover {}
	
	/* NOTE left-right classes wouldn't be needed on vertical scroller */


/* mediaquery for tab */

@media only screen and (min-width: 801px) and (max-width: 1200px) {

}

/* mediaquery for mobile */

@media only screen and (max-width: 800px) {

}