/*
 * Responsee CSS - v4.1 - 2017-05-14
 * https://www.myresponsee.com
 * Copyright 2016, Vision Design - graphic zoo
 * Free to use under the MIT license.
 * Added - Grace P.
*/

/***** nav *****/

/***** 웹서체: 파이어폭스 적용 안됨*****/
	@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");
	@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
	@import url("http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css");
	@import url("http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css");
	@import url("http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css");
	@import url("http://fonts.googleapis.com/earlyaccess/nanumpenscript.css");
	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
 
	/*** firefox 적용 ***/
	.fnb{font-family: 'NanumSquareR';}
	.fng{font-family:'나눔고딕', NanumGothic, 'fontng', 'Nanum Gothic';}
	.fnb{font-family:'Nanum Brush Script';}
	.fng{font-family:'Nanum Gothic Coding';}
	.fng{font-family:'나눔명조', NanumMyeongjo, 'fontnm', 'Nanum Myeongjo';}
	.fng{font-family:'나눔펜', NanumPen, 'fontnp', 'Nanum Pen Script';}
	.fng{font-family:'노토산스', Noto Sans KR, 'fontnp', 'Noto Sans KR';}
	.fng{font-family:'Noto Sans KR', Noto Sans KR, 'fontnp', 'Noto Sans KR';}

	/*** 나눔고딕 ***/
	@font-face { font-family: nanumgothic; src: url(/fonts/NanumGothic.eot); /* IE 호환성 보기 */  src: url(/fonts/NanumGothic.eot#iefix) format('embedded-opentype'), /* IE 6 ~ 8 */
       url(/fonts/NanumGothic.woff2) format('woff2'), /* WOFF2 지원 브라우저 */
       url(/fonts/NanumGothic.woff) format('woff'), /* 모던 브라우저 */
       url(/fonts/NanumGothic.ttf) format('truetype'); }
	
	/*** 나눔스퀘어 ***/	
	@font-face { /* 웹폰트 사용 선언 및 경로 설정 */
		font-family: NanumSquareWeb;
		font-family: NanumSquareR; /* 나눔스퀘어 선언 */
		src: url(/fonts/NanumSquareR.eot); /*  IE9+ 호환성 보기 일때 불러올 서체 */
		src: url(/fonts/NanumSquareR.eot?#iefix) format('embeded-opentype');  /*  IE6~8, IE9+ 일때 불러올 서체 */
		url(/fonts/NanumSquareR.woff) format(woff); /*  대부분의 브라우저(Chrome, Safari.. 등)에서 불러올 서체 */
		url(/fonts/NanumSquareR.ttf) format('truetype');
	}
	.nanumsquare{ /* 웹폰트가 로드되기 전에 적용되는 클래스 */
		/* 텍스트 숨김 */
		visibility: hidden;
	}
	.fonts_loaded .nanumsquare{ /* 웹폰트가 완전히 로드되었을 때 적용되는 클래스 */
		/* 나눔스퀘어체를 적용하고 텍스트 보임 */
		font-family: NanumSquare, sans-serif !important;
		visibility: visible;
	}
	.fonts_loaded .NanumGothic{ /* 웹폰트가 완전히 로드되었을 때 적용되는 클래스 */
		/* 나눔스퀘어체를 적용하고 텍스트 보임 */
		font-family: NanumGothic, sans-serif !important;
		visibility: visible;
	}
	.fonts_loaded .Noto Sans KR{ /* 웹폰트가 완전히 로드되었을 때 적용되는 클래스 */
		/* 나눔스퀘어체를 적용하고 텍스트 보임 */
		font-family: Noto Sans KR, sans-serif !important;
		visibility: visible;
	}
	.fonts_loaded .notosanskr{ /* 웹폰트가 완전히 로드되었을 때 적용되는 클래스 */
		/* 나눔스퀘어체를 적용하고 텍스트 보임 */
		font-family:notosanskr, sans-serif !important;
		visibility: visible;
	}

/*** 게시판=board ***/
	#board {width:100%; color:#333 !important; margin-top:120px;}
	#board table {border:none; border-top:2px solid #213d50 !important; border-bottom:2px solid #213d50 !important;}
	#board th {font-size:14px; background-color:#eee; font-weight:700; text-align:center; height:28px; padding:16px; line-height:16px !important;}
	#board td {height:26px; line-height:26px; background-color:#fff !important; border-top:1px solid #ccc; border-left:none !important;						border-right:none !important;}

	#pagination {width:100%; margin-top:40px; text-align:center;}
		 #pagination ul {width:auto; padding:0; display:inline-block; margin:0 auto !important;}
		 #pagination li {width:36px; height:36px; line-height:34px; border:1px solid #ddd; margin-left:-1px; float:left; font-size:13px; color:#333 !important;}
		 #pagination li:hover {background-color:#eee;}
		 #pagination li.active {color:#fff !important; background-color:#2980b9;}

	@media only screen and (max-width:1200px) {
		#board {width:100% !important; padding:0 !important; margin-top:90px !important;}
		#board th:nth-child(2), #board td:nth-child(2), #board th:nth-child(3), #board td:nth-child(3) {width:20% !important;}
	}

/***** Tabs *****/
.tab-item {
  background: none repeat scroll 0 0 #fff;
  display: none;
}
.tab-item.tab-active {
  display: block;
}
.tab-content > .tab-label {
  display: none;
}
.tab-nav > .tab-label {
  float:left;
}
a.tab-label, a.tab-label:link, a.tab-label:visited, a.tab-label:hover {
  background: none repeat scroll 0 0 #262626;
  color: #fff;
  margin-right: 1px;
  transition: background 0.20s linear 0s;
  -o-transition: background 0.20s linear 0s;
  -ms-transition: background 0.20s linear 0s;
  -moz-transition: background 0.20s linear 0s;
  -webkit-transition: background 0.20s linear 0s;
}
a.tab-label:hover,a.tab-label.active-btn {
  background: none repeat scroll 0 0 #999;
}
.tab-label.active-btn {
  cursor: default;
}
.tab-content {
  text-align: left;
}
@media screen and (max-width:768px) {    
  .tab-nav > .tab-label {width: 100%;}
  }

	*{margin:0; padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	 box-sizing:border-box;}

	html,body {width:100%;}
	html {overflow-y:scroll;}
	body {width:100%; background-color:#fff !important; font-family:'NanumGothic' !important; font-size:14px; font-weight:normal;
			line-height:20px !important; color:#555; *word-break:break-all; -ms-word-break:break-all; min-height:450px;}

	header {position:fixed; z-index:10000; top:0;}
	section {width:90%; margin:0 auto; padding:30px 0 70px 0; max-width:1440px;}
	section:last-child {margin-top:-40px;}
	/*** footer ***/
	footer {width:100%; margin:0 auto; background-color:#213d50; height:110px;}
	address {color:#ddd; font-size:13px; font-style:normal; float:left; margin:30px 5%;}
	footer .design {color:#8db9d5; margin:0 auto; padding:0 5%; text-align:right !important; float:right;}

	/*** 타블렛 ***/
	@media only screen and (min-width:641px) and (max-width:1200px) {
		section {padding:30px 0 40px 0;}
		section:last-child {margin-top:-30px;}
		footer {height:150px;}
		footer .design {width:auto !important; clear:both;}
	}
	/*** 모바일 ***/
	@media only screen and (max-width:640px)
		section {width:90%;}
		section:last-child {margin-top:-30px;}
		footer {height:140px;}
		address {margin:20px 5% 10px 5%;}
		footer .design {width:100% !important; clear:both;}		
	}

	li, dt, dd {list-style:none;} 
	ol li {list-style:decimal !important;}

	h1,h2,h3,h4 {color:#333; margin:0 !important; font-weight:700 !important; font-family:'NanumSquare' !important; letter-spacing:-0.5pt;}
	h1 {font-size:34px;}
	h2 {font-size:30px;}  
	h3 {font-size:24px;}  
	h4 {font-size:20px; margin:30px 0 8px 0 !important;}
	section h4:first-child {margin-top:0 !important;}

	a, a:link, a:visited, a:hover, a:active {
    text-decoration:none;
    color:#333!important;
    transition:color 0.10s linear 0s;
    -o-transition:color 0.10s linear 0s;
    -ms-transition:color 0.10s linear 0s;
    -moz-transition:color 0.10s linear 0s;
    -webkit-transition:color 0.10s linear 0s;
	}  
	a:hover {color:#2980b9 !important; cursor:pointer; text-decoration:underline;}
	p,li,dl,blockquote,table,kbd {
	  font-size: 0.85rem;
	  line-height: 1.6;
	}
	b,strong {font-weight:700;}
	.text-center {text-align:center!important;}
	.text-right {text-align:right!important;}
	img {
	  border:0;
	  display:block;
	  height:auto;
	  max-width:100%;
	  width:auto;
	}
	.owl-item img, .full-img {
	  max-width: none;
	  width:100%;
	}  
	table {
	  text-align:left;
	  width:100%;
	}
	table tr td, table tr th {padding:0.625rem;}
	table tfoot, table thead,table tr:nth-of-type(2n) {background:none repeat scroll 0 0 #f0f0f0;}
	td {border-right:1px solid #f0f0f0;}
	.size-960 .line,.size-1140 .line,.size-1280 .line {
	  margin:0 auto;
	  padding:0 0.625rem;
	}
	hr {
	  border: 0;
	  border-top: 1px solid #e5e5e5;
	  clear:both;  
	  height:0; 
	  margin:2.5rem auto;
	}
	li {padding:0; list-style:none; margin:0;}

	ul,ol {padding-left:1.25rem;}
	blockquote {
	  border:2px solid #f0f0f0;
	  padding:1.25rem;
	}

	/*** 버튼들 ***/
	/** 탑버튼 **/
	.btn_top a {z-index:100000 !important; position:fixed; right:3%; bottom:3%; padding:10px 10px 12px 12px; display:block; background-color:#333; font-weight:600; color:#fff !important; border:2px solid #fff; opacity:0.9; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px;}
	.btn_top a:hover {background-color:#2980b9; text-decoration:none; opacity:0.7;}

	.btn_reg a {width:250px; margin:0 auto !important; padding:5px 8px !important; display:block !important; border:1px solid #fff; color:yellow; font-weight:500 !important;}
	.btn_reg a:hover {background:rgba(255, 255, 255, 0.1);}

	a.color-btn, form.customform button.color-btn {
		font:500 15px 'Noto Sans KR' !important;
		color: #fff;
		background-color:#73a3c1;
		display: block;
		padding:6px 15px 8px;
		transition: all 0.20s linear 0s;
		-o-transition: all 0.20s linear 0s;
		-ms-transition: all 0.20s linear 0s;
		-moz-transition: all 0.20s linear 0s;
		-webkit-transition: all 0.20s linear 0s;
		border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; 
	}
	a.color-btn:hover, form.customform button.color-btn:hover {
		background-color:#2980b9;
		color: #fff;
	}

	cite {
	  color:#999;
	  display:block;
	  font-size:0.8rem;
	}
	cite:before {content:"— ";}

	abbr {cursor:help;}
	abbr[title] {border-bottom:1px dotted;}
	kbd {
	  background: #152732 none repeat scroll 0 0;
	  color: #fff;
	  padding: 0.125rem 0.3125rem;
	}
	code, kbd, pre, samp {font-family: Menlo,Monaco,Consolas,"Courier New",monospace;}
	mark {
	  background: #F3F8A9 none repeat scroll 0 0;
	  padding: 0.125rem 0.3125rem;
	}
	.size-960 .line {max-width:60rem;}
	.size-1140 .line {max-width:71.25rem;}
	.size-1280 .line {max-width:80rem;}
	.size-960.align-content-left .line,.size-1140.align-content-left .line,.size-1280.align-content-left .line {margin-left:0;}
	form {line-height:1.4;}


	/***** 상위 사진 *****/		
		#picTop {width:100%; margin-top:88px; text-align:center; margin-bottom:35px; z-index:1;
				text-shadow: 0 0 8px #000000; -webkit-text-shadow: 0 0 8px #000000; -ms-text-shadow: 0 0 8px #000000; -moz-text-shadow: 0 0 8px #000000; -o-text-shadow: 0 0 8px #000000;}
		#picTop img {width:100% !important;}

		/**** 제품 + 솔루션 사진****/
			/*** 웹_기본 local ***/
			#picTop.pic {width:100%; height:200px; line-height:200px;}
			#picTop.pic h3 {font-size:30px; color:#fff;}
				#picTop.pic .crBiz {background:url('../img/pro_1.jpg') no-repeat; background-position:0 -30px;}
				#picTop.pic .crPro {background:url('../img/pro_2.jpg') no-repeat; width:100%;}
				#picTop.pic .crSch {background:url('../img/pro_3.jpg') no-repeat; width:100%; background-position:0 -300px;}
				#picTop.pic .crAud {background:url('../img/pro_4.jpg') no-repeat; width:100%; background-position:0 -180px;}
				#picTop.pic .sol_1 {background:url('../img/sol_1.jpg') no-repeat; width:100%;}
				#picTop.pic .sol_2 {background:url('../img/sol_2.jpg') no-repeat; width:100%;}
			/*** 타블렛 ***/
			@media only screen and (min-width:600px) and (max-width:799px) {
			#picTop img {width:100%;}
				#picTop {height:150px;}
				#picTop h3 {line-height:140px;}
			}
			/*** 모바일 ***/
			@media only screen and (max-width:599px) {
			#picTop.pic {height:150px;}
			#picTop.pic img {width:30% !important;}
				#picTop.pic h3 {line-height:140px;}
				.txt h1, .txt h2, .txt h3, .txt h4 {margin-top:-20px;}
			}

/***** nav *****/
nav {
  display:block;
  width:100%;
  background:#152732;
}

.line:after, nav:after, .center:after, .box:after, .margin:after, .margin2x:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  overflow: hidden;
  visibility:hidden;
}
.top-nav ul {padding:0;}
.top-nav ul ul {
  position:absolute;
  background:#152732;
}
.top-nav li {
  float:left;
  list-style:none outside none;
  cursor:pointer;
  font-family: 'Noto Sans KR' !important;
}
.top-nav li a {
  color:#fff; 
  display:block;
  font-size:1rem;
  padding:1.25rem;
  font-family: 'Noto Sans KR' !important;
}
.top-nav li ul li a {
  background:none repeat scroll 0 0 #152732;
  min-width:100%;
  padding:0.625rem;
  font-family: 'Noto Sans KR' !important;
}
.top-nav li a:hover, .aside-nav li a:hover {background:rgba(153, 153, 153, 0.25); font-family: 'Noto Sans KR' !important;}
.top-nav li ul {display:none; font-family: 'Noto Sans KR' !important;}
.top-nav li ul li,.top-nav li ul li ul li {
  float:none;
  list-style:none outside none;
  min-width:100%;
  padding:0;
  font-family: 'Noto Sans KR' !important;
}
.count-number {
  background: rgba(153, 153, 153, 0.25) none repeat scroll 0 0;
  border-radius: 10rem;
  color: #fff;
  display: inline-block;
  font-size: 0.7rem;
  height: 1.3rem;
  line-height: 1.3rem; 
  margin: 0 0 -0.3125rem 0.3125rem;
  text-align: center;
  width: 1.3rem;
}
ul.chevron .count-number {display:none;}
ul.chevron .submenu > a:after, ul.chevron .sub-submenu > a:after,ul.chevron .aside-submenu > a:after, ul.chevron .aside-sub-submenu > a:after {
  content:"\f004";
  display:inline-block;
  font-family:mfg;
  font-size:0.7rem;
  margin:0 0.625rem;
}
.top-nav .active-item a {background:none repeat scroll 0 0 rgba(153, 153, 153, 0.25); font-family: 'Noto Sans KR' !important;}
.aside-nav > ul > li.active-item > a:link,.aside-nav > ul > li.active-item > a:visited {
  background:none repeat scroll 0 0 rgba(153, 153, 153, 0.25);
  color:#fff;
  font-family: 'Noto Sans KR' !important;
} 
@media screen and (min-width:769px) {
  .aside-nav .count-number {
	  margin-left:-1.25rem;	
	  float:right;
	  font-family: 'Noto Sans KR' !important;
  }
  .top-nav li:hover > ul {
	  display:block;
	  z-index:10;
	  font-family: 'Noto Sans KR' !important;
  }  
  .top-nav li:hover > ul ul {
    left:100%;
    margin:-2.5rem 0;
    width:100%;
	font-family: 'Noto Sans KR' !important;
  } 
}
.nav-text,.aside-nav-text {display:none; font-family: 'Noto Sans KR' !important;}
.aside-nav a,.aside-nav a:link,.aside-nav a:visited,.aside-nav li > ul,.top-nav a,.top-nav a:link,.top-nav a:visited {
  transition:background 0.20s linear 0s;
  -o-transition:background 0.20s linear 0s;
  -ms-transition:background 0.20s linear 0s;
  -moz-transition:background 0.20s linear 0s;
  -webkit-transition:background 0.20s linear 0s;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav ul {
  background:#e8e8e8; 
  padding:0;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav li {
  list-style:none outside none;
  cursor:pointer;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav li a,.aside-nav li a:link,.aside-nav li a:visited {
  color:#444;
  display:block;
  font-size:1rem;
  padding:1.25rem;
  border-bottom:1px solid #d2d2d2;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav > ul > li:last-child a {border-bottom:0 none; font-family: 'Noto Sans KR' !important;}
.aside-nav li > ul {
  height:0;
  display:block;
  position:relative;
  background:#f4f4f4;
  border-left:solid 1px #f2f2f2;
  border-right:solid 1px #f2f2f2;
  overflow:hidden;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav li ul ul {
  border:0;
  background:#fff;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav ul ul a {padding:0.625rem 1.25rem; font-family: 'Noto Sans KR' !important;}
.aside-nav li a:link, .aside-nav li a:visited {color:#333; font-family: 'Noto Sans KR' !important;}
.aside-nav li li a:hover, .aside-nav li li.active-item > a, .aside-nav li li.aside-sub-submenu li a:hover {
  color:#999;
  background:none;
  font-family: 'Noto Sans KR' !important;
}
.aside-nav > ul > li > a:hover {color:#fff; font-family: 'Noto Sans KR' !important;}
.aside-nav li li a:hover:before, .aside-nav li li.active-item a:before {
  content:"\f006";
  display:inline-block;
  font-family:"mfg";
  font-size:0.6rem;
  margin:0 0.625rem 0 -1.25rem;
  width:0.625rem;
  font-family: 'Noto Sans KR' !important;
} 
.aside-nav li li a:link, .aside-nav li li a:visited {background:none; font-family: 'Noto Sans KR' !important;}
.aside-nav .show-aside-ul, .aside-nav .active-aside-item {height:auto; font-family: 'Noto Sans KR' !important;}


.padding {
  display:list-item;
  list-style:none outside none;
  padding:10px;
}
.margin,.margin2x {display: block;}
.margin {margin:0 -0.625rem;}
.margin2x {margin:0 -1.25rem;}
.line {clear:left;}
.line .line {padding:0;}
.hide-l {display:none!important;}
.box {
  background:none repeat scroll 0 0 #fff;
  display:block;
  padding:1.25rem;
  width:100%;
}
.margin-bottom {margin-bottom:1.25rem;}
.margin-bottom2x {margin-bottom:2.5rem;}
.s-1, .s-2, .s-five,.s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-11, .s-12, .m-1, .m-2, .m-five, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12, .l-1, .l-2, .l-five, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8, .l-9, .l-10, .l-11, .l-12 {
  float:left;
  position:static;
}
.l-offset-1 {margin-left:8.3333%;}
.l-offset-2 {margin-left:16.6666%;}
.l-offset-five {margin-left:16.6666%;}
.l-offset-3 {margin-left:25%;}
.l-offset-4 {margin-left:33.3333%;}
.l-offset-5 {margin-left:41.6666%;}
.l-offset-6 {margin-left:50%;}
.l-offset-7 {margin-left:58.3333%;}
.l-offset-8 {margin-left:66.6666%;}
.l-offset-9 {margin-left:75%;}
.l-offset-10 {margin-left:83.3333%;}
.l-offset-11 {margin-left:91.6666%;}
.l-offset-12 {margin-left:100%;} 
.s-1 {width:8.3333%;}
.s-2 {width:16.6666%;}
.s-five {width:16.6666%;}
.s-3 {width:25%;}
.s-4 {width:33.3333%;}
.s-5 {width:41.6666%;}
.s-6 {width:50%;}
.s-7 {width:58.3333%;}
.s-8 {width:66.6666%;}
.s-9 {width:75%;}
.s-10 {width:83.3333%;}
.s-11 {width:91.6666%;}
.s-12 {width:100%;}
.margin > .s-1,.margin > .s-2,.margin > .s-five,.margin > .s-3,.margin > .s-4,.margin > .s-5,.margin > .s-6,.margin > .s-7,.margin > .s-8,.margin > .s-9,.margin > .s-10,.margin > .s-11,.margin > .s-12,
.margin > .m-1,.margin > .m-2,.margin > .m-five,.margin > .m-3,.margin > .m-4,.margin > .m-5,.margin > .m-6,.margin > .m-7,.margin > .m-8,.margin > .m-9,.margin > .m-10,.margin > .m-11,.margin > .m-12,
.margin > .l-1,.margin > .l-2,.margin > .l-five,.margin > .l-3,.margin > .l-4,.margin > .l-5,.margin > .l-6,.margin > .l-7,.margin > .l-8,.margin > .l-9,.margin > .l-10,.margin > .l-11,.margin > .l-12 {padding:0 0.625rem;}
.margin2x > .s-1,.margin2x > .s-2,.margin2x > .s-five,.margin2x > .s-3,.margin2x > .s-4,.margin2x > .s-5,.margin2x > .s-6,.margin2x > .s-7,.margin2x > .s-8,.margin2x > .s-9,.margin2x > .s-10,.margin2x > .s-11,.margin2x > .s-12,
.margin2x > .m-1,.margin2x > .m-2,.margin2x > .m-five,.margin2x > .m-3,.margin2x > .m-4,.margin2x > .m-5,.margin2x > .m-6,.margin2x > .m-7,.margin2x > .m-8,.margin2x > .m-9,.margin2x > .m-10,.margin2x > .m-11,.margin2x > .m-12,
.margin2x > .l-1,.margin2x > .l-2,.margin2x > .l-five,.margin2x > .l-3,.margin2x > .l-4,.margin2x > .l-5,.margin2x > .l-6,.margin2x > .l-7,.margin2x > .l-8,.margin2x > .l-9,.margin2x > .l-10,.margin2x > .l-11,.margin2x > .l-12 {padding:0 1.25rem;}
.m-1 {width:8.3333%;}
.m-2 {width:16.6666%;}
.m-five {width:20%;}
.m-3 {width:25%;}
.m-4 {width:33.3333%;}
.m-5 {width:41.6666%;}
.m-6 {width:50%;}
.m-7 {width:58.3333%;}
.m-8 {width:66.6666%;}
.m-9 {width:75%;}
.m-10 {width:83.3333%;}
.m-11 {width:91.6666%;}
.m-12 {width:100%;}
.l-1 {width:8.3333%;}
.l-2 {width:16.6666%;}
.l-five {width:20%;}
.l-3 {width:25%;}
.l-4 {width:33.3333%;}
.l-5 {width:41.6666%;}
.l-6 {width:50%;}
.l-7 {width:58.3333%;}
.l-8 {width:66.6666%;}
.l-9 {width:75%;}
.l-10 {width:83.3333%;}
.l-11 {width:91.6666%;}
.l-12 {width:100%;}
.right {float:right;}
.left {float:left;}  
@media screen and (max-width:768px) {
  .size-960,.size-1140,.size-1280 {max-width:768px;}
  .hide-l,.hide-s {display:block!important;}
  .hide-m {display:none!important;}
  nav {
    display:block;
    cursor:pointer;
    line-height:3;
  }
  .top-nav li a {background:none repeat scroll 0 0 #4a4a4a;}
  .top-nav > ul {
    height:0;
    max-width:100%;
    overflow:hidden;
    position:relative;
    z-index:999;
  }
  .top-nav > ul.show-menu,.aside-nav.minimize-on-small > ul.show-menu {height:auto;}
  .top-nav ul ul {
    left:0;
    margin-top:0;
    position:relative;
    right:0;
  } 
  .top-nav li ul li a {min-width:100%;}
  .top-nav li {
    float:none;
    list-style:none outside none;
    padding:0;
  }
  .top-nav li a {
    border-top:1px solid #333;
    color:#fff;
    display:block;
    padding:1.25rem 0.625rem;
    text-align:center;
    text-decoration:none;
  }
  .top-nav li ul li a {border-top:1px solid #878787;}
  .top-nav li ul li ul li a {border-top:1px solid #989898;}
  .top-nav li a:hover {
    background:none repeat scroll 0 0 #8b8b8b;
    color:#fff;
  }
  .top-nav li ul,.top-nav li ul li ul {
    display:block;  
    overflow:hidden; 
    height:0;   
  } 
  .top-nav > ul ul.show-ul {
    display:block;
    height:auto;  
  }
  .top-nav li ul li a {
    background:none repeat scroll 0 0 #9d9d9d;
    padding:0.625rem;
  }
  .top-nav li ul li ul li a {
    background:none repeat scroll 0 0 #d7d7d7;
    color:#222;
  }
  .nav-text {
    color:#fff;
    display:block;
    font-size:1.2rem;
    line-height:3;
    margin-right:0.625rem;
    max-width:100%;
    text-align:center;
    vertical-align:middle;
  }
  .nav-text:after {
    content:"\f008";
    font-family:"mfg";
    font-size:1.1rem;
    margin-left:0.5rem;
    text-align:right;
  }
  .l-offset-1,.l-offset-2,.l-offset-five,.l-offset-3,.l-offset-4,.l-offset-5,.l-offset-6,.l-offset-7,.l-offset-8,.l-offset-9,.l-offset-10,.l-offset-11,.l-offset-12{margin-left:0;}
  .m-offset-1 {margin-left:8.3333%;}
  .m-offset-2 {margin-left:16.6666%;}
  .m-offset-five {margin-left:16.6666%;}
  .m-offset-3 {margin-left:25%;}
  .m-offset-4 {margin-left:33.3333%;}
  .m-offset-5 {margin-left:41.6666%;}
  .m-offset-6 {margin-left:50%;}
  .m-offset-7 {margin-left:58.3333%;}
  .m-offset-8 {margin-left:66.6666%;}
  .m-offset-9 {margin-left:75%;}
  .m-offset-10 {margin-left:83.3333%;}
  .m-offset-11 {margin-left:91.6666%;}
  .m-offset-12 {margin-left:100%;} 
  .l-1 {width:8.3333%;}
  .l-2 {width:16.6666%;}
  .l-five {width:20%;}
  .l-3 {width:25%;}
  .l-4 {width:33.3333%;}
  .l-5 {width:41.6666%;}
  .l-6 {width:50%;}
  .l-7 {width:58.3333%;}
  .l-8 {width:66.6666%;}
  .l-9 {width:75%;}
  .l-10 {width:83.3333%;}
  .l-11 {width:91.6666%;}
  .l-12 {width:100%;}
  .s-1 {width:8.3333%;}
  .s-2 {width:16.6666%;}
  .s-five {width:20%;}
  .s-3 {width:25%;}
  .s-4 {width:33.3333%;}
  .s-5 {width:41.6666%;}
  .s-6 {width:50%;}
  .s-7 {width:58.3333%;}
  .s-8 {width:66.6666%;}
  .s-9 {width:75%;}
  .s-10 {width:83.3333%;}
  .s-11 {width:91.6666%;}
  .s-12 {width:100%}
  .m-1 {width:8.3333%;}
  .m-2 {width:16.6666%;}
  .m-five {width:20%;}
  .m-3 {width:25%;}
  .m-4 {width:33.3333%;}
  .m-5 {width:41.6666%;}
  .m-6 {width:50%;}
  .m-7 {width:58.3333%;}
  .m-8 {width:66.6666%;}
  .m-9 {width:75%;}
  .m-10 {width:83.3333%;}
  .m-11 {width:91.6666%;}
  .m-12 {width:100%}
}
@media screen and (max-width:480px) {
  .size-960,.size-1140,.size-1280 {max-width:480px;}
  .aside-nav li a {text-align: center;}
  .minimize-on-small .aside-nav-text {
    background:#152732 none repeat scroll 0 0;
    color:#fff;
    cursor:pointer;
    display:block;
    font-size:1.2rem;
    line-height:3;
    max-width:100%;
    padding-right:0.625rem;
    text-align:center;
    vertical-align:middle;
  }
  .aside-nav-text:after {
    content:"\f008";
    font-family:"mfg";
    font-size:1.1rem;
    margin-left:0.5rem;
    text-align:right;
  }
  .aside-nav.minimize-on-small > ul {
    height:0;
    overflow:hidden;
  }
  .hide-l,.hide-m {display:block!important;}
  .hide-s {display:none!important;}
  .count-number {margin-right:-1.25rem;} 
  .l-offset-1,.l-offset-2,.l-offset-five,.l-offset-3,.l-offset-4,.l-offset-5,.l-offset-6,.l-offset-7,.l-offset-8,.l-offset-9,.l-offset-10,.l-offset-11,.l-offset-12,
  .m-offset-1,.m-offset-2,.m-offset-five,.m-offset-3,.m-offset-4,.m-offset-5,.m-offset-6,.m-offset-7,.m-offset-8,.m-offset-9,.m-offset-10,.m-offset-11,.m-offset-12 {margin-left:0;}
  .s-offset-1 {margin-left:8.3333%;}
  .s-offset-2 {margin-left:16.6666%;}
  .s-offset-five {margin-left:16.6666%;}
  .s-offset-3 {margin-left:25%;}
  .s-offset-4 {margin-left:33.3333%;}
  .s-offset-5 {margin-left:41.6666%;}
  .s-offset-6 {margin-left:50%;}
  .s-offset-7 {margin-left:58.3333%;}
  .s-offset-8 {margin-left:66.6666%;}
  .s-offset-9 {margin-left:75%;}
  .s-offset-10 {margin-left:83.3333%;}
  .s-offset-11 {margin-left:91.6666%;}
  .s-offset-12 {margin-left:100%;} 
  .l-1 {width:8.3333%;}
  .l-2 {width:16.6666%;}
  .l-five {width:20%;}
  .l-3 {width:25%;}
  .l-4 {width:33.3333%;}
  .l-5 {width:41.6666%;}
  .l-6 {width:50%;}
  .l-7 {width:58.3333%;}
  .l-8 {width:66.6666%;}
  .l-9 {width:75%;}
  .l-10 {width:83.3333%;}
  .l-11 {width:91.6666%;}
  .l-12 {width:100%;}
  .m-1 {width:8.3333%;}
  .m-2 {width:16.6666%;}
  .m-five {width:20%;}
  .m-3 {width:25%;}
  .m-4 {width:33.3333%;}
  .m-5 {width:41.6666%;}
  .m-6 {width:50%;}
  .m-7 {width:58.3333%;}
  .m-8 {width:66.6666%;}
  .m-9 {width:75%;}
  .m-10 {width:83.3333%;}
  .m-11 {width:91.6666%;}
  .m-12 {width:100%}
  .s-1 {width:8.3333%;}
  .s-2 {width:16.6666%;}
  .s-five {width:20%;}
  .s-3 {width:25%;}
  .s-4 {width:33.3333%;}
  .s-5 {width:41.6666%;}
  .s-6 {width:50%;}
  .s-7 {width:58.3333%;}
  .s-8 {width:66.6666%;}
  .s-9 {width:75%;}
  .s-10 {width:83.3333%;}
  .s-11 {width:91.6666%;}
  .s-12 {width:100%}
}  
.center {
  float:none;
  margin:0 auto;
  display:block;
}


/***** template *****/
/********* Modified - Grace P. *********/

#topbar {
	background: none repeat scroll 0 0 #012232;
	border-bottom: 1px solid #001925;
	padding: 0.3125em 0;
}
#topbar p {
	color: #fff;
	font-size: 0.75em;
	opacity: 0.5;
	position: relative;
	top: 2px;
}
#topbar p strong {
	font-weight: 600;
}
#topbar i {
	color: #ffffff;
	font-size: 1.1em;
	opacity: 0.5;
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
}
#topbar i:hover {
	color: #92c500;
	cursor: pointer;
	opacity: 1;
}
nav {
	background: none repeat scroll 0 0 #00283a;
}
header {
	border-bottom: 4px solid rgba(0, 40, 58, 0.53);
	position: fixed;
	width: 100%;
	z-index: 10;
}
p.logo {
	color: #fff;
	font-size: 1.7em;
	font-weight: 300;
	position: relative;
	text-transform: uppercase;
	top: 0.625em;
}
p.logo strong {
	font-weight: 700;
}
.top-nav li a {
	border-top: 2px solid #00283a;
	color: #fff;
	font-size: 0.95em;
	font-weight: 600;
	padding: 2.1em 1.5em 2.5em;
	text-transform: uppercase;
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
}
.top-nav li a:hover, .top-nav li.active-item a {
	background: none repeat scroll 0 0 #00283a;
	border-top: 2px solid #92c500;
	color: #92c500;
	position: relative;
}

/***** 메인 슬라이드 *****/
#carousel .text {
	position: absolute;
	top: 40%;
	z-index: 10;
}
.item {
	overflow: hidden;
	width: 100%;
	font-family: "NanumSquare", sans-serif !important;
}
.prev-arrow, .next-arrow {
	background: none repeat scroll 0 0 #00283a;
	cursor: pointer;
	float: left;
	height: 30px;
	line-height: 30px;
	margin-right: 1px;
	text-align: center;
	width: 30px;
}
#carousel .text h2 {
	background: none repeat scroll 0 0 rgba(146, 197, 0, 0.8);
	color: #fff;
	display: inline-block;
	font-size: 2em;
	font-weight: 300;
	margin: 1px 0;
	max-width: 600px;
	padding: 10px 20px;
	width: 100%;
}
#carousel .text p {
	background: none repeat scroll 0 0 #00283a;
	color: #fff;
	max-width: 600px;
	padding: 10px 20px;
	width: 100%;
}

/*** 메인이미지 하단 롤링버튼 ***/
#carousel .owl-theme .owl-controls {
	/**background: none repeat scroll 0 0 rgba(0, 40, 58, 0.53);**/
	bottom: 0;
	margin:0 0 10px 25px;
	padding: 0.625em 0;
	position: absolute;
	width: 100%;
}
.owl-theme .owl-controls .owl-page span {
	background: #2980b9;
	width:12px;
	height:12px;
	margin: 0 0.3125em;
	opacity: 1;
	float:left;
	border-radius:15px;
}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
	background: none repeat scroll 0 0 #8db9d5; border-radius:15px;
}

/*** Contact 메세지 ***/
#first-block {
	background: none repeat scroll 0 0 #297aae;
	padding:30px 0 40px 0;
	text-align: center;
}
#first-block h1 {
	color:#f1f1f1;
	font-size:30px;
	font-weight:600;
	letter-spacing:-0.5pt;
	margin-top:0;
}

@media only screen and (max-width:800px) {
	#first-block {padding:20px 15px;}
	#first-block h1 {font-size:20px;}
	#first-block p {line-height:14px;}
}

#first-block p {
	color: #ccc;
}

/*** 원형 사업 설명 ***/
#features {
	background: none repeat scroll 0 0 #fff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	padding:35px 15px;
	position: relative;
	text-align: center;
	z-index: 2;
}
/*new*/
.item {background-color:transparent !important;}
#features {margin:0 auto !important;}

#features i {
	background: none repeat scroll 0 0 #999;
	border-radius: 100px;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3) inset;
	color: #fff;
	display: inline-block;
	font-size: 2em;
	height: 100px;
	line-height: 100px;
	text-align: center;
	width: 100px;
}
#features h2 {
	font-weight: 600;
	margin:10px 0;
	text-transform: uppercase;
}
/*new*/
#features h2 {font-weight:bold !important; font-size:20px !important;}

#features p {
	color: #777;
	font-size: 0.85em;
	line-height: 1.5em;
}
#about-us {
	background: none repeat scroll 0 0 #00283a;
	clear: both;
}
#about-us:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}
#about-us article {
	padding: 4em;
}
article h2 {
	font-size: 4em;
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 0.9;
	margin: 0 0 0.625em 0
}
article h1, article h2, article h3, article h4, article h5, article h6 {
	color: #fff;
}
.media-container {
  overflow: hidden;
}
.media-container video, .media-container img {
  display: block;
  height: 100%;
  max-width: none;
  min-width: 100%;
  width: auto;
}
article p, article li {
	color: #fff;
	font-size: 0.85em;
	opacity: 0.7;
}
article ul {
	padding: 1.25em 0;
}
article ul li {
	list-style-type: none;
	margin: 0.625em 0;
	padding: 0 0 0 1em;
}
article ul li:before {
	background: #00283a none repeat scroll 0 0;
	color: #fff;
	content: "\f006";
	display: inline-block;
	font-family: "mfg";
	font-size: 0.8em;
	height: 20px;
	line-height: 20px;
	margin-left: -1em;
	margin-right: 0.625em;
	text-align: center;
	width: 20px;
}
.about-us-icons i {
	border: 2px solid #92c500;
	border-radius: 100px;
	color: #92c500;
	display: block;
	float: left;
	font-size: 1.6em;
	height: 60px;
	line-height: 60px;
	margin-right: 0.625em;
	text-align: center;
	width: 60px;
}
.about-us-icons {
	display: block;
	margin-top: 2em;
}
h2.section-title:after {
	background: #dedede none repeat scroll 0 0;
	content: "";
	display: block;
	height: 1px;
	margin: 0.31225em auto 0;
	position: relative;
	width: 100px;
}
h2.section-title {
	color: #dedede;
	font-size: 3.8em;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 0 0 1.25em;
	text-align: center;
	text-transform: uppercase;
}

/*** 포트폴리오 ***/
#our-work {
	position: relative;
	z-index: 2;
}
.tab-item {
	margin-top: 1.25em;
	padding: 1.25em 0;
}
.our-work-container {
	display: block;
	height: 100%;
	position: relative;
}
.our-work-text {
	background: #00283a none repeat scroll 0 0;
	bottom: 0;
	display: block;
	left: 0;
	opacity: 0;
	padding: 1.25em;
	position: absolute;
	right: 0;
	text-align: center;
	transition: opacity 0.20s linear 0s;
	-o-transition: opacityd 0.20s linear 0s;
	-ms-transition: opacity 0.20s linear 0s;
	-moz-transition: opacity 0.20s linear 0s;
	-webkit-transition: opacity 0.20s linear 0s;
	width: 100%;
}
.our-work-container:hover > .our-work-text {
	opacity: 1;
}
.our-work-text h4 {
	color: #fff;
	font-size: 1em;
	font-weight: 600;
}
.our-work-text p {
	color: #fff;
	font-size: 0.8em;
	opacity: 0.7;
}
.tab-nav {
	display: table;
}
a.tab-label, a.tab-label:link, a.tab-label:visited {
	background: #00283a none repeat scroll 0 0;
	color:#fff !important;
	display: block;
	font-size: 1em;
	padding: 0.625em 1.25em;
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
}
a.tab-label:hover, a.tab-label.active-btn {
	background: #03a9f4;
}


#services {
	background: #6f9600 none repeat scroll 0 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	padding: 6em 2em;
}
#services h2 {
	color: #fff;
	margin: 0 0 1.25em;
}
#services h2.section-title:after {
	background: #fff none repeat scroll 0 0;
}
#services i {
	background: none repeat scroll 0 0 #fff;
	border-radius: 80px;
	color: #6f9600;
	display: block;
	float: left;
	font-size: 1.8em;
	height: 80px;
	line-height: 80px;
	margin-right: 0.625em;
	text-align: center;
	width: 80px;
}
.service-text {
	display: table;
	position: relative;
}
#services h3 {
	color: #fff;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
}
#services p {
	color: #fff;
	font-size: 0.8em;
}
#latest-news {
	background: #f3f3f3 none repeat scroll 0 0;
	box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
	padding: 6em 2em;
	position: relative;
	z-index: 3;
}

/*** 공지/뉴스 ***/
.news-date {
	background: #508da9 none repeat scroll 0 0;
	clear: both;
	color: #fff;
	display: block;
	float: none;
	height: 150px;
	text-align: center;
	width: 100%;
}
.day {
	font-size: 2.5em;
	font-weight: 700;
}
.month, .year {
	font-size: 0.85em;
}
.news-text {
	background: #fff none repeat scroll 0 0;
	border-bottom: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	border-top: 1px solid #e0e0e0;
	height: 150px;
}
.news-text p {
	color: #777;
	font-size: 0.85em;
}

#latest-news .section-title {font-size:30px; font-weight:bold; color:#508da9 !important; border:none !important; margin:0 auto;}
#latest-news h4 {font-size:18px; font-weight:600; color:#508da9;}


/*** LOCATION > CONTACT ***/
#contact {
	margin-top:120px;
	width:100%;
	position: relative;
	z-index: 2;
	display:inline-block;
}

#contact img {opacity:0.9;}

#contact input, #contact textarea {
	width:100%;
	padding:12px;
	line-height:18px;
	border:1px solid #ccc !important;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	margin-bottom:20px;
	font-size:14px !important; font-family:'nanumGothic' !important;
}
form.customform button.color-btn {
	height: auto;
	margin-top: 0;
}

#contact p {
	font-style: normal;
	line-height: 2em;
}

#contact p strong {
	font-weight: 700;
	color:#03a9f4;
}

#contact i {
	background: #2980b9 none repeat scroll 0 0;
	border-radius: 30px;
	color: #fff;
	display: inline-block;
	width:22px; height:22px; line-height:24px;
	margin-bottom:3px; margin-top:3px;
	text-align: center;
}
#contact p a span {color:#03a9f4 !important; margin-left:10px;}/** 아이콘 다음글씨 **/

#map-block {
  filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);    
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}

@media screen and (max-width: 768px) {
  header {
  	position: relative;
  }
  .top-nav li a {
  	background: #05374e none repeat scroll 0 0;
  }

  /***** 메인 슬라이드 *****/
  #carousel .text {
  	font-size: 0.8em;
  	top: 20%;
  }
  .owl-controls.clickable {
  	display: none!important;
  }
  .right {
  	float: none;
  }
  .social.right {
  	float: right;
  }
  #about-us article {
  	padding: 4em 2.5em;
  }
}
@media screen and (max-width: 480px) {
  #topbar {
  	line-height: 1.625em;
  	text-align: center;
  }
  .social.right {
  	float: none;
  }
  p.logo, p.nav-text {
  	text-align: center;
  }
}


/********* Made - Grace P. *********/

.contact_wrap {margin-top:-70px; z-index:10001 !important;}

	/*** 모바일 ***/
	@media only screen and (max-width:800px) {
		.contact_wrap {margin-top:-70px; z-index:10001 !important;}
	}
	/***** LOCATION *****/
	#location_wrap {width:100%; margin-top:75px;}
			/*** GoogoleMap API ***/
			#map-canvas, #map_canvas { 
			  width :100%; /* 구글 지도 넓이 */ 
			  height:450px; /* 구글 지도 높이 */ 
			  font-size:12px;
			  margin:0; padding:0; border:none;
			} 

			/* 말풍선관련 css 시작 */ 
			.map_Heading { /* 말풍선 타이틀(회사명) css */ 
			  line-height:30px; 
			  font-size:20px; 
			  font-weight:bold; 
			  color:#555; 
			} 

			.map_Content { /* 말풍선 내용 css */ 
			  font-size:12px; 
			  color:#333; 
			} 

			/* 말풍선 회사홈페이지 링크 css */ 
			a:link.map_Content    { text-decoration: none; color: #333; } 
			a:active.map_Content  { text-decoration: none; color: #333; } 
			a:visited.map_Content { text-decoration: none; color: #333; } 
			a:hover.map_Content  { text-decoration: none; color: #A2002E; } 
			/* 말풍선관련 css 끝 */


	/********* nav *********/
		/*** nav menu 서체 여기서 최종 적용 ***/
		nav .menu_ li a, nav .parent a {font-weight:400 !important; font-family:'Noto Sans KR' !important; font-size:18px !important;}
		nav a:hover {text-decoration:none !important;}
		@media only screen and (max-width:1000px) {
		nav .menu_ li a, nav .paent a {font-size:15px !important;}
		}

	.content {
	  height: 200px;
	}
	a {text-decoration: none; }


	.container {
	  max-width: 1200px;
	  margin: 0 auto;
	  width: 100%;
	}

	.nav-fostrap {
	  display: block;
	  margin-bottom: 15px 0;
	  background: #03A9F4;
	  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	}

	.nav-fostrap ul {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  display: block;
	}

	.nav-fostrap li {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  display: inline-block;
	  position: relative;
	  font-size: 14px;
	  color: #def1f0;
	  font-family: 'Noto Sans KR';
	}

	.nav-fostrap li a {
	  padding: 10px 15px;
	  font-size: 14px;
	  color: #def1f0;
	  display: inline-block;
	  outline: 0;
	  font-weight: 700 !important;
	  font-family: 'Noto Sans KR' !important;
	}

	.nav-fostrap li:hover ul.dropdown { display: block; }

	.nav-fostrap li ul.dropdown {
	  position: absolute;
	  display: none;
	  width: 200px;
	  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	  padding-top: 0;
	  font-family: 'Noto Sans KR';
	}

	.nav-fostrap li ul.dropdown li {
	  display: block;
	  list-style-type: none;
	  font-family: 'Noto Sans KR';
	}

	.nav-fostrap li ul.dropdown li a {
	  padding: 10px 15px;
	  font-size: 15px;
	  color: #fff;
	  display: block;
	  font-weight: 400;
	  font-family: 'Noto Sans KR';
	}

	.nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }

	.nav-fostrap li:hover a {
	  background: #2980B9;
	  color: #fff !important;
	  font-family: 'Noto Sans KR';
	}

	.nav-fostrap li:first-child:hover a {font-family: 'Noto Sans KR';}

	.nav-fostrap li ul.dropdown li:hover a { background-color:#8db9d5; font-family: 'Noto Sans KR';}

	.nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; font-family: 'Noto Sans KR';}

	.nav-fostrap li:hover .arrow-down { border-top: 5px solid #2980B9; font-family: 'Noto Sans KR';}

	.arrow-down {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-top: 5px solid #ccc;
	  position: relative;
	  top: 10px;
	  right: -6px;
	  content: '';
	}
	.title-mobile {
	  display: none;
	}

	/****************** 웹 ******************/
	@media only screen and (min-width:801px) {
		#topbar {height:30px; background-color:#eee !important; border:none !important;}
		#topbar p {text-align:right; color:#333 !important; margin-right:15px;}
		.nav-fostrap.bg_pat {background-image: repeating-linear-gradient(40deg, rgba(500,500,500,0.4) 0px, rgba(500,500,500,0.4) 3px, transparent 3px, transparent 6px);}

		.contact_mobile {display:none !important;}
		.nav-bg-fostrap {top:-10px !important;}/** important **/
		/*** 로고 ***/
		.contact_web dt {width:300px; height:75px; text-align:left; float:left; margin:10px 0 0 30px; font:600 36px 'Montserrat Subrayada', sans-serif;, serif; letter-spacing:-1pt !important; color:#83bc49;}
		.contact_web dt big {color:#297aae !important; font:600 36px 'Montserrat Subrayada', sans-serif;, serif;}
		.contact_web dt span {width:300px !important; display:block; font-size:13px; color:#777; font-family: 'NanumGothic'; text-align:left; letter-spacing:0.4pt !important; font-weight:normal !important;}
		.contact_web dd, .contact_web dd a {margin:10px 20px; color:#777; font:200 11px 'NanumGothic'; letter-spacing:0.2 !important;}
		.contact_web dd a {margin-left:0 !important; color:#999 !important;}
		.contact_web dd span {font-size:13px !important;}

		.nav-fostrap {width:100%; background-color:#f1f1f1 !important; text-align:right; position:fixed; top:0 !important; letter-spacing:-0.5pt !important;}
		.nav-fostrap ul {display:inline-block; margin-right:5%;/**nav메뉴 위치**/ margin-top:25px !important;}
		.nav-fostrap>li {margin-right:14px;}
		.nav-fostrap li a {color:#333 !important; padding:15px !important; font-weight:400 !important; font-size:17px !important;}
		.nav-fostrap>li a:hover {background:none !important; color:#333 !important; padding:15px !important; font-weight:400 !important; font-size:17px !important;}
		.arrow-down {color:#999 !important; padding-top:-10px !important; letter-spacing:0.5pt !important;}
		
		.nav-fostrap li ul.dropdown {margin-top:0 !important;}
		.nav-fostrap li ul.dropdown li a {text-align:left !important; font-size:16px !important;}
	}

	/****************** 모바일 ******************/
	 @media only screen and (max-width:800px) {
		#topbar {height:30px; line-height:30px; background-color:#999 !important; border:none !important; }
		#topbar p {text-align:right; color:#333 !important; margin-right:15px;}
		/*** nav전체의 대표 스타일 정의 ***/
		.nav-fostrap.bg_pat {background-image: repeating-linear-gradient(40deg, rgba(500,500,500,0.8) 0px, rgba(500,500,500,0.8) 3px, transparent 3px, transparent 6px);}
		nav .menu_ {padding-top:30px !important;} /***토글 메뉴의 상위가 잘리는 것 보완**/
		nav .menu_ li:first-child {border-top:none !important;}

		.contact_mobile {text-align:right !important; height:100px !important; margin-right:10px;}
		.nav-bg-fostrap {top:-20px !important;}/** important **/

		/*** 로고 ***/
		.contact_mobile dt {display:block; font:500 30px 'Montserrat Subrayada', sans-serif;, serif; letter-spacing:-1pt !important; color:#83bc49;}
		.contact_mobile dt big {color:#297aae !important; clear:both; font: 500 30px 'Montserrat Subrayada', sans-serif;, serif;}
		.contact_mobile span {text-align:right; display:block; font-size:11px; color:#777; letter-spacing:0.35pt !important; float:right; margin:-3px 0 20px 0 !important; font-family: 'NanumGothic';}
		.contact_mobile dd {letter-spacing:-0.3pt !important; color:#333 !important; font-size:11px !important; font-family: 'NanumGothic'; clear:both;}

		/*** 메뉴에 border 주기 ***/
		.nav-fostrap li a {border-bottom:1px solid #ccc; font-family: 'Noto Sans KR';}
		.nav-fostrap li:first-child a {font-family: 'Noto Sans KR'; margin-top:-5px;}/*** 첫칸 보더 없애기 ***/
		.nav-fostrap li ul.dropdown li a {border:none !important; font-family: 'Noto Sans KR';}

		.nav-fostrap {
		  background: #f1f1f1;
		  width: 200px;
		  height: 100%;
		  display: block;
		  position: fixed;
		  left: -200px;
		  top:0;
		  -webkit-transition: left 0.25s ease;
		  -moz-transition: left 0.25s ease;
		  -ms-transition: left 0.25s ease;
		  -o-transition: left 0.25s ease;
		  transition: left 0.25s ease;
		  margin: 0;
		  border: 0;
		  border-radius: 0;
		  overflow-y: auto;
		  overflow-x: hidden;
		  height: 100%;
		}
		.title-mobile {
		  position: fixed;
		  display: block;
			top: 10px;
			font-size: 20px;
			left: 100px;
			right: 100px;
			text-align: center;
			color: #FFF;
		}
		.nav-fostrap.visible {
		  left: 0px;
		  -webkit-transition: left 0.25s ease;
		  -moz-transition: left 0.25s ease;
		  -ms-transition: left 0.25s ease;
		  -o-transition: left 0.25s ease;
		  transition: left 0.25s ease;
		}

		/*** nav 전체영역 설정 ***/
		.nav-bg-fostrap {
		  display: inline-block;
		  vertical-align: middle;
		  width: 100%;
		  margin: 0;
		  position: absolute;
		  left: 0px;
		  background-color: #f1f1f1;
		  background-image: repeating-linear-gradient(40deg, rgba(500,500,500,0.4) 0px, rgba(500,500,500,0.4) 3px, transparent 3px, transparent 6px);
		  padding: 12px 0 0 10px;
		  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
		  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
		  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
		  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
		  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
		}

		.navbar-fostrap {
		  display: inline-block;
		  vertical-align: middle;
		  height: 50px;
		  cursor: pointer;
		  margin: 0;
			position: absolute;
			top: 0;
			left: 0;
			padding: 12px;
		}

		/*** 3선 메뉴 ***/
		.navbar-fostrap span {
		  height: 2px;
		  background: #333;
		  margin: 7px;
		  display: block;
		  width: 27px;
		}

		.nav-fostrap li { display: block; font-family: 'Noto Sans KR';}

		.nav-fostrap li a {
		  display: block;
		  color: #505050;
		  font-weight: 600;
		  font-family: 'Noto Sans KR';
		}

		.nav-fostrap li:first-child:hover a { border-radius: 0; font-family: 'Noto Sans KR';}

		.nav-fostrap li ul.dropdown { position: relative; }

		.nav-fostrap li ul.dropdown li a {
		  background-color:#2980B9;
		  color: #fff !important;
		  font-family: 'Noto Sans KR';
		}

		.nav-fostrap li:hover a {
		  background-color:#2980B9;
		  color: #fff !important;
		  font-family: 'Noto Sans KR';
		}

		.nav-fostrap li ul.dropdown li:hover a {
		  color: #fff !important;
		  background-color:#8db9d5;
		  font-family: 'Noto Sans KR';
		}

		.nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; font-family: 'Noto Sans KR';}

		.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }

		.arrow-down {
		  border-top: 5px solid #505050;
		  position: absolute;
		  top: 20px;
		  right: 10px;
		}

		.cover-bg {
		  background: rgba(0,0,0,0.5);
		  position: fixed;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
		}
		}
		 @media only screen and (max-width:1199px) {

		.container { width: 96%; }
		}

		.fixed-top {
		  position: fixed;
		  top: 0;
		  right: 0;
		  left: 0;
		}
	}
	/********* //nav *********/