html,body {
	font-family:"나눔 고딕","맑은 고딕","Malgun Gothic","돋움",'Questrial','Helvetica Neue','Arial','sans-serif','Open Sans','nanummyeongjo';
	font-size: 16px;
	color:#333;
	line-height: 1.5;

	/* background-image: url("../images/layout/abstrakt-tile.jpg");		백그라운드 패턴넣기
	background-repeat: no-repeat;
	background-color: #f00;  밑에껄로 쓰면 한줄에 이 내용이 된다
	background:url("../images/layout/abstrakt-tile.jpg") no-repeat #f00;*/
}

body {
    font-family: "나눔 고딕","맑은 고딕","Malgun Gothic","돋움",'Questrial','Helvetica Neue','Arial','sans-serif','Open Sans','nanummyeongjo';
    background-color: white;
    color: rgba(130, 130, 130, 1);
    webkit-tap-highlight-color: #222;
}
footer{
	background-color: rgb(16, 167, 185);;
}

/* h 폰트사이즈 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small,
.h1 small,
.h1 .small, .h2 small,
.h2 .small, .h3 small,
.h3 .small, .h4 small,
.h4 .small, .h5 small,
.h5 .small, .h6 small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #616262;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: 24px;
  margin-bottom: 12px;
}

h1 small,
h1 .small, .h1 small,
.h1 .small,
h2 small,
h2 .small, .h2 small,
.h2 .small,
h3 small,
h3 .small, .h3 small,
.h3 .small {
  font-size: 65%;
}

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 12px;
  margin-bottom: 12px;
}

h4 small,
h4 .small, .h4 small,
.h4 .small,
h5 small,
h5 .small, .h5 small,
.h5 .small,
h6 small,
h6 .small, .h6 small,
.h6 .small {
  font-size: 75%;
}

h1, .h1 {
  font-size: 80px;
}

h2, .h2 {
  font-size: 70px;
}

h3, .h3 {
	font-size: 50px;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-style: normal;
}

h4, .h4 {
  font-size: 30px;
}

.subtoptext h4 {font-size: 40px;font-weight: 600;}

h5, .h5 {
  font-size: 30px;
}

h6, .h6 {
  font-size: 20px;
}
/* 폰트사이즈 끝 */
a {color:inherit;text-decoration:none;}
img {vertical-align: middle;}		/* 기본적으로 이미지에는 아랫쪽에 여백이있는데 그걸 없애주는거라고함 */
.clearFix:after,.container:after {content:"";display:block;width:0;height:0;clear:both;overflow: hidden;}
.container {width:1200px;margin: 0 auto;position: relative;color: #333;}

#header {background:rgba(255,255,255,1);height: 130px;overflow: hidden;position: fixed;width: 100%;z-index: 9999;
-webkit-box-shadow: 0px 5px 5px 0px rgba(255,255,255,1);
-moz-box-shadow: 0px 5px 5px 0px rgba(255,255,255,1);
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}

.gnbColor {width: 100%;height: 130px;background-color: #fff;position: absolute;top: 0;bord er-bottom: 2px solid #777;}

#header h1 {text-align: left;height: 21px;padding: 0px 0;}
#header h1 a {display: inline-block;width:146px;height:150px;back ground: url("../img/main/logo.png")no-repeat;}
#header h1 img {height: 100px;}
#header.on h1 a {back ground: url("../img/main/logo.png")no-repeat;}
#header.on {background: rgba(0,0,0,.7)}
#header.on #gnb > li > a {color: #777;}
#header .topMenu {float: right;}
#header .topMenu li {float: left;margin-top:0px;margin-left: 25px;font-size: 12px;line-height: 12px;}

#gnb {float: right;}
#gnb > li {float: left;}
#gnb > li > a {display: block;height: 50px;line-height: 50px;text-align: right;color:#333;padding-left: 50px;}
#gnb .sub {padding: 30px 0px 20px 40px;margin-left: 30px;}
#gnb .sub a {display: block; padding: 5px 0;text-align:left;font-size: 14px;color: #fff;}



#footer .topCon ul {float: left;}
#footer .topCon .selectBox {float: right;width: 200px;position: relative;}
#footer .topCon .selectBox > a {display: block;height: 60px;line-height: 60px;padding: 0 10px;background: url("../images/main/selectArrow.png")no-repeat 95% 50%;}
#footer .topCon .selectBox ul {position: absolute;bottom: 70px;background: #fff;border-radius:5px;padding: 10px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

#footer .topCon .selectBox  ul:after {content:"";display: block
;border-left:10px solid transparent;	/* transparent 투명 */
border-right:10px solid transparent;
border-top: 10px solid #fff;
position: absolute;bottom: -10px;left: 50%;margin-left: -10px;
}

#footer .topCon .selectBox ul li a {height: auto;line-height: 1;padding: 10px 10px;}
#footer .topCon li {float: left;}
#footer .topCon li a {display: block;height: 60px;line-height: 60px; padding: 0 10px;}
#footer .addr {padding: 30px 0;font-size: 0.8rem;color: rgba(240,239,239,1.00);border-top: 1px solid #d9d9d9;}
.blind {display: none;}


.subtop_img { background:url(../img/sub/subimg01.jpg) center top; height:200px; position:relative; } 
.subtop_img_company { background:url(../img/sub/subimg01.jpg) center top; height:200px; position:relative; } 
.subtop_img_business { background:url(../img/sub/subimg02.jpg) center top; height:200px; position:relative; } 
.subtop_img_work { background:url(../img/sub/subimg03.jpg) center top; height:200px; position:relative; } 
.subtop_img_portfolio { background:url(../img/sub/subimg01.jpg) center top; height:200px; position:relative; } 
.subtop_img_online { background:url(../img/sub/subimg02.jpg) center top; height:200px; position:relative; } 
.subtop_img_customer { background:url(../img/sub/subimg03.jpg) center top; height:200px; position:relative; } 
.subwrap { width:1100px; margin:0 auto; overflow:hidden; display:block; border-left:1px solid #e2e2e2;}
.subleft { width:178px; float:left;    background-color: #ecefef; }
.subright { width:881px; padding:0 0 100px 40px; float:right; border-left:1px solid #e2e2e2;}
.subleft_title { padding:20px 20px 15px; font-weight:bold; font-size:26px; letter-spacing:-3px; color:#000; }
.lefttitle_text { font-size:11px; color:#b1b1b1; letter-spacing:0; font-weight:normal; }
.leftmenu_wrap li { border-bottom:1px solid #e2e2e2; }
.leftmenu_wrap li a { padding:10px 10px 10px 20px; display:block; background:#ffffff; color:#666 }
.leftmenu_wrap li a:hover { padding:10px 10px 10px 20px; display:block; background:#e9e9e9; color:#666; }
.leftmenu_wrap li.crtmenu a { padding:10px 10px 10px 20px; display:block; background:url(../img/comm/left_allow.png) no-repeat 156px 13px #919191; color:#fff; }
.subtitle_wrap { padding:40px 0 20px; border-bottom:1px solid #c1c1c1;  }
.location { font-size:12px; color:#999; margin:0 0 32px; }
.location a { color:#999; }
.subtitle {  font-weight: bold;
    font-size: 25px;
    letter-spacing: -1px;
    color: #707577; }
.sub_cont { padding:30px 0 50px }

/* work */
.work_list { overflow:hidden; }
.work_list li { clear:both; padding:0 0 20px; margin:0 0 20px; height:140px; border-bottom:1px solid #ccc; }
.work_img { width:240px; float:left; margin:0 15px 0 0;}
.work_img img { border:1px solid #ccc; }
.work_title { font-weight:bold; color:#000; padding:20px 0 5px;}
.work_date { color:#999; }
.work_text {  color:#666; padding:10px 0 0; font-size: 12px; }


/* portfolio */
.portfolio_list { overflow:hidden; }
.portfolio_list li { width:240px; float:left; padding:0 40px 0 0; margin:0 0 20px; height:280px; border-bottom:1px solid #cccccc;}
.portfolio_list li.plast { width:240px; float:left; padding:0 0 0 0;  height:280px; border-bottom:1px solid #cccccc;}
.portfolio_title { border:1px solid #888888; background:#919191; color:#fff; margin:0 0 5px; padding:5px; text-align:center; }
.portfolio_img { border:1px solid #ccc; }
.portfolio_text { font-size:11px; color:#888888; line-height:1.4; padding:5px 0 5px; height:50px; }
.portfolio_btn a { display:block; width:70px; margin:0 auto; border:1px solid #ccc; background:#f1f1f1; text-align:center; padding:3px 0; }



/* footer */
.footer_wrap { border-top:1px solid #CCC; margin:0px 0 0; height:80px; clear:both; }
.footer { width:1020px; margin:0 auto; position:relative; }
.footer .f_logo { position:absolute; left:0; top:20px; }
.footer .f_copyright { position:absolute; left:200px; text-align:left; top:20px; color:#666; }
.footer .f_copyright .f_line { padding:0 10px 0; color:#ccc; line-height:1.8; }
.footer .f_copyright2 { color:#999; padding:10px 0 30px; }