@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700");

/* Noto Sans KR */
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  src: url(font/NotoSansKR-Thin.eot);
  src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'),
      url(font/NotoSansKR-Thin.eot#iefix) format('embedded-opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  src: url(font/NotoSansKR-Light.eot);
  src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'),
      url(font/NotoSansKR-Light.eot#iefix) format('embedded-opentype'); 
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400; 
  src: url(font/NotoSansKR-Regular.eot);
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'),
       url(font/NotoSansKR-Regular.eot#iefix) format('embedded-opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500; 
  src: url(font/NotoSansKR-Medium.eot);
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'),
       url(font/NotoSansKR-Medium.eot#iefix) format('embedded-opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700; 
  src: url(font/NotoSansKR-Bold.eot);
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'),
       url(font/NotoSansKR-Bold.eot#iefix) format('embedded-opentype'); 
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900; 
  src: url(font/NotoSansKR-Black.eot);
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 
       url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'),
       url(font/NotoSansKR-Black.eot#iefix) format('embedded-opentype'); 
 }


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

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
		vertical-align: baseline;
		font-family: inherit;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		outline: 0;
		padding: 0;
		margin: 0;
		border: 0;
}
ol, ul {list-style: none;}
a {text-decoration:none; border:none;}
input,select,button,label {vertical-align:middle;}
table {border-collapse:collapse;border-spacing:0}
h1{line-height:0;}
img,hr,button {border:0;}

html,body {
	height:100%;
	font-family:'Noto Sans KR', sans-serif;
	font-weight:300; 
	font-size: 16px;
}

.wrap {width: 1200px; margin: 0 auto; position: relative;}
.font_robo {font-family: 'Roboto', sans-serif;}
.main_title {font-size: 40px; color: #343434; text-align: center; font-weight: 100; line-height: 48px; letter-spacing: -1.5px; padding-top: 90px;}
.main_title b {font-size: 30px; font-weight: 500;}

#header {position: fixed; width: 100%; min-width: 1200px; height: 90px; background: #fff; z-index: 999; border-bottom: 1px solid #afafb1;}
#header h1 {position: absolute; top: 26px; left: 20px;}
#header h1 img {margin-right: 10px;}

#header .nav {text-align: center; font-size: 18px; font-weight: 400; padding-top: 30px;}
#header .nav li {display: inline-block; zoom:1; *display:inline; margin: 0 26px;}
#header .nav a {color: #454545;}

#header .side_menu {height: 43px; position: absolute; top: 23px; right: 20px;}
#header .side_menu img {vertical-align:top;}
#header .side_menu .btn_mode {
	display:inline-block; 
	zoom:1; 
	*display:inline; 
	width: 130px; 
	height: 43px; 
	background: #0781d1;
	border-radius: 4px;
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
	line-height: 43px;
	margin-left: 18px;
	}



#ST1 {width: 100%; height: 100vh; min-height: 822px; background: url(images/ST1_bg.png) no-repeat; background-size:cover; padding-top: 90px;}
#ST1 p {font-size: 48px; color: #fff; text-align: center; margin-top: 320px; font-weight: 200; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);}
#ST1 p > b {font-size: 60px; font-weight: 700;}



#ST2 {width:100%; margin-bottom: 90px;}
#ST2 h2 {margin-bottom: 74px;}
#ST2 .ST2_box {width: 1220px; margin: auto;}
#ST2 .ST2_box li {display: inline-block; *zoom:1; *display: inline; margin: 0 6px 18px 6px; text-align: center; /*cursor: pointer; */position: relative;}
#ST2 .ST2_box li:hover {background: #f4f5f9}

#ST2 .ST2_box .hidden {display: none; position: absolute; left:0; top:0; width: 390px; height: 246px; background: #219df0; background: rgba(33,157,240,0.7);}
#ST2 .ST2_box .hidden img {margin-top: 85px;}
#ST2 .ST2_box .box_img:hover .hidden {display: block;}

#ST2 .ST2_box .box_text {padding: 24px 0; color: #343434;}
#ST2 .ST2_box .box_text h4 {font-size: 24px; font-weight: 500;}
#ST2 .box_img img {font-size: 0;}
#ST2 .box_img a {font-size: 0;}



#ST3 {background: #f4f5f9; text-align: center; padding-bottom: 120px;}
#ST3 .ST3_box {margin-top: 70px;}
#ST3 .ST3_box li {
	display: inline-block; 
	*zoom:1; 
	*display: inline; 
	width: 340px;
	height: 400px;
	background: #fff;
	vertical-align: top;
	margin-left:82px;
	-webkit-box-shadow:1px 1px 15px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:1px 1px 15px 1px rgba(0, 0, 0, 0.1);
	-o-box-shadow:1px 1px 15px 1px rgba(0, 0, 0, 0.1);
	-ms-box-shadow:1px 1px 15px 1px rgba(0, 0, 0, 0.1);
	box-shadow:1px 1px 15px 1px rgba(0, 0, 0, 0.1);
	padding-top: 80px;
	}
#ST3 .ST3_box li:first-child {margin-left: 0;}
#ST3 .ST3_box li h4 {margin-top: 30px; font-size: 24px; color: #343434; font-weight: 400;}
#ST3 .ST3_box li p {color: #6f6f6f; margin-top: 16px;}
#ST3 .ST3_box li .btn_more {
	display:inline-block; 
	width: 78px; 
	height: 30px; 
	background: #46a8ed; 
	color: #fff; 
	border-radius: 4px; 
	font-weight: 500; 
	font-size: 12px; 
	line-height: 30px;
	margin-top: 27px;
	}
#ST3 .ST3_box li .btn_more:hover {background: #0781d1;}



#ST4 .ct1_inner_top {text-align: center; margin: 97px 0 116px 0;}
#ST4 .ct1_inner_top h3 {color: #343434; font-size: 40px; font-weight: 500;}
#ST4 .ct1_inner_top p {color: #707070; margin: 16px 0 50px 0; line-height: 28px;}

#ST4 .ct1_inner .st4_inner {float: left;}
#ST4 .ct1_inner .st4_left {margin-left: 179px;}
#ST4 .ct1_inner .st4_left h3 {font-size: 48px; color: #191919;}
#ST4 .ct1_inner .st4_left h3 > .font_robo {font-size: 54px; font-weight: 700;}
#ST4 .ct1_inner .st4_left p {font-size: 20px; color: #626262; margin: 22px 0 17px 0;}
#ST4 .ct1_inner .st4_left p b {color: #6b70a1;}
#ST4 .ct1_inner .st4_right {margin-left: 93px;}
#ST4 .ct1_inner .st4_right ul {background: url(images/ST4_line_v.png) no-repeat 6px 0; background-size: 1px 510px;}
#ST4 .ct1_inner .st4_right ul li {position: relative; padding-left: 84px; background: url(images/ST4_bu.png) no-repeat;}
#ST4 .ct1_inner .st4_right ul li strong {position:relative; top: -8px; font-size: 24px; font-weight: 600; color: #313131;}
#ST4 .ct1_inner .st4_right ul li p {position:relative; left:80px; top: -38px; line-height: 30px; font-size: 16px;}

#ST4 .ct2_inner {clear:both; font-size: 0; width: 100%; min-width: 1200px;}
#ST4 .ct2_inner .main_title {margin-bottom: 60px;}
#ST4 .ct2_inner span {display:inline-block; *zoom:1; *display: inline; width: 50%; height: 274px; vertical-align: top;}
#ST4 .ct2_inner span h4 {font-size: 24px; font-weight: 700; margin-top: 92px;}
#ST4 .ct2_inner span p {font-size: 16px;}
#ST4 .ct2_inner .SVT_left {background: url(images/ST4_bg_left.png) no-repeat; background-size:cover; color: #fff;}
#ST4 .ct2_inner .SVT_left .text {width: 600px; float: right;}
#ST4 .ct2_inner .SVT_right {background: url(images/ST4_bg_right.png) no-repeat; background-size:cover;}
#ST4 .ct2_inner .SVT_right .text {margin-left: 43px;}
#ST4 .ct2_inner .SVT_right h4 {color: #46a8ed;}
#ST4 .ct2_inner .SVT_right p {color: #343434;}




#ST5 {text-align: center; padding-bottom: 100px;}
#ST5 .main_title {font-size: 30px;}
#ST5 .main_title b {font-size: 40px;}
#ST5 .btn_down {
	width: 435px; 
	height: 70px; 
	display: block; 
	margin: 0 auto; 
	background: #0781d1; 
	color: #fff; 
	border-radius: 4px; 
	line-height: 70px;
	font-weight: 500;
	font-size: 18px;
	margin-top: 62px;
	}



#footer {height: 185px; background: #f4f5f9; border-top: 1px solid #dbdbdb; padding-top: 45px; position: relative;}
#footer .FT_info {font-size: 13px; color: #939393;}
#footer .CS {position: absolute; right: 0; top: 0; text-align: right; font-size: 18px; color: #939393;}
#footer .cs_tel strong {color: #46a8ed; font-size: 26px; font-family: 'Roboto', sans-serif; font-weight: 500; margin-left: 10px;}
#footer .cs_email strong {color: #454545; font-size: 22px; font-weight: 400; margin-left: 10px;}