@charset "utf-8";

/*reset초기화 */

* {margin:0; padding:0;} /*모든태그에 바깥여백과 안쪽 여백을 0으로 초기화시키세요*/
*:after{box-sizing:border-box;}
html,body {width:100%; height:100%;}
header, footer, nav, section, article {display:block;}
/*html5에서 추가된 위 태그를 블럭요소로 인식되게 한다.*/
ul, ol, li {list-style:none;}
/*목록태그 (1.2.3 ●) 에서 사용하는 숫자 또는 원목록을 사용안하겠다고 초기화 한다.*/
img{border:0;}
/*이미지 테두리 선 두께를 0으로 초기화*/
a {text-decoration:none;}
/*링크태그인 a 에 밑줄을 안보이게 초기화*/
a:link {text-decoration:none; font-size:13px; color:#ecf0f1;}
a:visited{text-decoration:none; font-size:13px; color:#ccc;}/*#252525;*/
a:hover{text-decoration:none; font-size:13px; color:#ffb340;}


/*a:link 링크속성중 밑줄 안 보임 글자크기 16px, 글자색깔지정
a:visited 한번 방문한 적이 있는,
a:hover 마우스가 위에 올라갔을 때 속성*/

body {font-family:"나눔고딕"; font-size:13px; color:#2c2b2b; letter-spacing:0.025em;}
/*포토샵에서 자간간격처리는 1/1000로 계산한다. 즉 -25px라면 0.025em으로 처리*/

   
/*header*/

#wrap {width:100%; height:100%;  } /*전체둘러싸는 그룹*/
#wrap:after {content:""; display:block; clear:both;}
header {height:100%;}
/*#wrap:after {content:""; display:block; clear:both;}*/
/*float시키면 부모그룹에 영향을 끼친다.가상의 공백한칸을 가로로100%늘려라 :after기법을 이용하여 해제시킨다.*/
.mb {width:100%; height:100%; background:url(../images/bg_banner.jpg) no-repeat center center; background-size:cover; } /*해결 전체 html과 body에 height:100%; 주고 wrap에도 같이 준다*/
/*.mb 배경처리하는 100%그룹*/
.mb .header {width:1170px;  margin:0 auto; overflow:hidden; } /*배경색들어가는 1170px그룹*/
.mb .header .logo h1 {background:url(../images/logo.png) no-repeat left center; width:105px; height:100px; }
.mb .header .logo h1 a {display:inline-block; width:105px; height:100px;}
.mb .header .logo h1 span {position:absolute; top:0; left:-9999px;}
.mb .header .logo {float:left; padding-top:10px;}
.mb .header .mainmenu {float:right; padding-top:50px; overflow:hidden;}
/*.mainmenu ul li {float:left; width:100px; text-align:center; height:30px; line-height:}70px;높이와 줄간격을 같게하면 수직 가운데 정렬이된다.*/
.mb .mainmenu ul li {float:left; width:100px; height:100%; border:1px solid #ecf0f1; text-align:center; margin-right:5px;}
.mb .mainmenu ul li a{display:inline-block; padding:10px 0; } /*a는 링크영역*/
.mb .mainmenu ul li a:hover{background-color:#ffb340; color:#0c4da2; width:100%; }


.mb1 {width:1170px; margin:0 auto; position:relative;}
.mb1 p.txt1{font-size:90px; color:#ccc; padding-top:325px;  letter-spacing:-0.050em; font-weight:600;}
.mb1 p.txt2{font-size:29px; color:#ccc;  letter-spacing:-0.080em; padding-bottom:290px;}
.mb1 p.txt3 {display:inline-block; text-align:center; border:1px solid #ecf0f1;color:#fff; width:130px; position:absolute; right:525px; bottom:0; }
.mb1 p.txt3 a {display:inline-block; padding:10px 0; }
.mb1 p.txt3 a:hover{background-color:#ffb340; color:#0c4da2; width:100%; }


.con100 {width:100%; background:url(../images/gh.jpg) no-repeat right top; overflow:hidden;}
 /*여기에 overflow:hidden;을 해줘야 배경그림이 보인다.*/
/*.con100 .con1170 {width:1170px; margin:0 auto;  background:url(../images/gh2.jpg) no-repeat right top; overflow:hidden;  }*/

.con100 .con1170 {width:1170px; margin:0 auto;}
.about{width:100%; margin-top:20px; margin-bottom:20px; }
.about1 { float:left;width:570px; margin-right:30px;  }
.about1 .ab{ padding:10px; line-height:35px;}

.about1 p.txt1 {text-align:right;}

.who {width:570px; float:left;  }


.who .wh { padding:10px; line-height:35px;}


.who p.txt2 {text-align:right;}
.who p.txt3 {text-align:right;}

/* work 전체 */
.work100{width:100%; background:#eeefef; }
.work100 .work1170{width:1170px; margin:0 auto;  overflow:hidden;}
.work100 .work1170 .worki{display:inline-block; margin-top:20px; margin-bottom:20px; } /*인라인 요소로 바꿔서 마진탑과 바텀을 줌*/

/* work */
.work100 .work1170 .work{ width:100%; }
/* .work100 .work1170 .work .w1, .work100 .work1170 .work .w2, .work100 .work1170 .work .w3, .work100 .work1170 .work .w4 {width:25%;} */
.work100 .work1170 .work .w1 img, .work100 .work1170 .work .w2 img, .work100 .work1170 .work .w3 img, .work100 .work1170 .work .w4 img {width:100%; display:block;}
.work100 .work1170 .work .w1 a, .work100 .work1170 .work .w2 a, .work100 .work1170 .work .w3 a, .work100 .work1170 .work .w4 a {position:relative; display:block; }

.work100 .work1170 .work .w1 .box_caption, .work100 .work1170 .work .w2 .box_caption, .work100 .work1170 .work .w3 .box_caption, .work100 .work1170 .work .w4 .box_caption {display:none;}

.work100 .work1170 .work .w1 a:hover .box_caption, .work100 .work1170 .work .w2 a:hover .box_caption, .work100 .work1170 .work .w3 a:hover .box_caption, .work100 .work1170 .work .w4 a:hover .box_caption
{display:block; background: rgba(44,158,198,0.7); position: absolute; top:0;bottom: 0; text-align: center;  width: 100%; height: auto; color:#fff; }
.work100 .work1170 .work .w1 a:hover .box_caption .v, .work100 .work1170 .work .w2 a:hover .box_caption .v, .work100 .work1170 .work .w3 a:hover .box_caption .v, .work1170 .work .w4 a:hover .box_caption .v {padding-top:50%;}
/*
.work100 .work1170 .work img {width:100%; display:block;}
.work100 .work1170 .work a {position:relative; display:block; }

.work100 .work1170 .work .box_caption {display:none;}

.work100 .work1170 .work a:hover .box_caption {display:block; background: rgba(44,158, 198, 0.7); position: absolute; top:0;bottom: 0; text-align: center;  width: 100%; height: auto; color:#fff; }
.work100 .work1170 .work a:hover .box_caption .v {padding-top:50%;}
*/





.work {width:1170px; margin:0 auto; overflow:hidden;}
.work .w1, .work .w2, .work .w3, .work .w4  {width:270px; float:left; margin-right:30px;  border:1px solid #e4e4e4;/*제가선색깔바꿨다가 생각안나서 우선 기억나는대로 적어놨어요 다시 확인하세요 ㅜㅜ*/ 
box-sizing:border-box; min-height:430px; color:#0c4da2;} /*아까 마진 라이트 20px 이었고요*/
.work .w4 {margin-right:0;} /*가장 오른쪽에있는 그룹 마진은 없앱니다*/

.work .w1 p {padding:10px; line-height:25px;  text-align:justify; }
.work .w2 p{padding:10px; line-height:25px; text-align:justify;}
.work .w3 p{padding:10px; line-height:25px; text-align:justify;}
.work .w4 p{padding:10px; line-height:25px; text-align:justify;}



.f100{width:100%; height:209px; background:url(../images/footerbg.jpg) no-repeat center center; background-size:cover; overflow:hidden;}
.f1170{width:1170px; margin:0 auto;}
.f1170 .flogo {width:105px; height:100px; float:left; padding:60px 0px; margin-right:60px; }
.f1170 .ftxt {float:left;}
.f1170 .ftxt {width:600px; overflow:hidden; padding:60px 0 60px 0px; margin-right:60px;}

.f1170 .ftxt ul li{float:left; color:#fff; padding:10px; }
.f1170 .ftxt address {clear:both; color:#fff; }
address {font-style:normal;}
.f1170 .ftxt p {color:#fff; padding:10px;}


.fsns{width:300px; float:right; }
.f1170 .fsns i {font-size:20px; color:#fff; padding-top:120px;}