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

@font-face { font-family: 'NanumBarunGothic';
src: url('/font/NanumBarunGothic.eot');
src: url('/font/NanumBarunGothic.eot') format('embedded-opentype'),
url('/font/NanumBarunGothic.woff') format('woff');}


#top_btn{position:fixed;bottom:90px;right:30px;width:50px;height:50px; text-indent:-9999px;overflow:hidden;opacity:0.8}

#wrap {z-index:1000000; background:#fff; width:100%; position: relative;}
#header { box-sizing:border-box; background:#fff;height:105px; border-bottom:1px solid #ddd;text-align:center; width:100%; padding:12px 20px;}
#gnb {width:100%; text-align:center;}
#gnb a {padding:15px 35px; font-size:1.01em;}
#gnb a:hover {color:#000;}
#top_mar{height:105px !important;}

.h1 {font-size:44px; padding:10px 0 40px; font-weight:700;}
.h4 {font-size:18px; color:#8f8f8f; padding:10px;}

.hidden-lg {display:none;}

.companyWrap {width:100%; background: url(img/bg01.gif) no-repeat center center;}
.companyWrap:after {display:block;visibility:hidden;clear:both;content:""}
.com_content {text-align:center;height: 730px; padding-top:70px;}

.company {width:100%; float:left; margin:60px auto 0 !important;}
.company:after {display:block;visibility:hidden;clear:both;content:""}
.company .left2 {width:50%; float:left; text-align:left; }
.company .right2 {width:50%; float:right;box-sizing:border-box;  text-align:left;}
.company .left {width:33.3%; float:left; }
.company .middle {width:33.3%; float:left; }
.company .right {width:33.3%; float:right;box-sizing:border-box; }
#container {position:relative; width:1100px;margin:0 auto; }
#container:after {display:block;visibility:hidden;clear:both;content:""}

#vision {width:100%;text-align:center; background: url(img/bg05.gif) repeat center center;}
#vision:after {display:block;visibility:hidden;clear:both;content:""}
#vision .content {text-align:center;padding-top:50px !important;padding-bottom:70px !important;}
#vision .left {width:50%; float:left; text-align:left; padding-right:50px;}
#vision .right {width:50%; float:right;box-sizing:border-box;  padding-left:50px; text-align:left;}
#vision h5 {font-size:24px; color:#000000; padding:5px 0;}
#vision ul li {padding:3px 10px; background:url(img/icon_point.gif) no-repeat left 18px; }


#service {width:100%; background: url(img/bg03.jpg) no-repeat center center;}
#service:after {display:block;visibility:hidden;clear:both;content:""}
#service .content {text-align:center;height: 924px; padding-top:70px;}
#service .content .box1 {margin:0px 20px 10px; height:200px; background:#6699cc; color:#fff; text-align:center;border-radius:15px; padding:40px 10px;}
#service .content .box2 {margin:0px 20px 10px; height:200px; background:#c4ad8c; color:#fff; text-align:center;border-radius:15px; padding:40px 10px;}

#service2 {width:100%; background: #fff;}
#service2:after {display:block;visibility:hidden;clear:both;content:""}
#service2 .content {text-align:center; padding:70px 0;}
#service2 .special {width:100%; float:left; margin:50px auto 0 !important;}
#service2 .special:after {display:block;visibility:hidden;clear:both;content:""}
#service2 .special .left {width:30%; float:left; border:1px solid #ddd;box-sizing:border-box; padding:20px 0 40px; }
#service2 .special .middle {width:30%; float:left; border:1px solid #ddd; box-sizing:border-box; margin:0 50px;  padding:20px 0 40px;}
#service2 .special .right {width:30%; float:left;box-sizing:border-box;border:1px solid #ddd;  padding:20px 0;}
#service2 i {color:#c2c2c2; padding:10px;}
#service2 .special h2{color:#34cc53; font-size:20px; padding:15px 0 -20px;}
#service2 .headcopy {float:left; width:40%; text-align:left !important;padding:40px 0 0 30px;}
#service2 .headcopy h1{color:#34cc53; font-size:30px; }
#service2 .headcopy2 {float:left; width:60%}

#recruit {width:100%; background: url(img/bg04.jpg) repeat center center;}
#recruit:after {display:block;visibility:hidden;clear:both;content:""}
#recruit .content {text-align:center;height: 720px; padding-top:60px;}
#recruit .left {width:50%; float:left; text-align:left; color:#ddd;}
#recruit .right {width:50%; float:right; text-align:left; background-color:rgba(255,255,255,0.15); border-radius:15px;padding:0 40px 30px;}
#recruit h5 {font-size:24px; margin-bottom:10px; color:#7ab9ff; padding:0px 0;}
#recruit ul li {line-height:18px; font-size:15px; color:#ddd;  padding:3px 0px; background:url(img/.gif) no-repeat left 18px; }

#contact {width:100%;text-align:center; background: url(img/bg05.gif) repeat center center;}
#contact:after {display:block;visibility:hidden;clear:both;content:""}
#contact .content {text-align:center;padding-top:50px !important;padding-bottom:70px !important;}
#contact .left {width:38%; float:left; text-align:left; padding-right:50px;}
#contact .right {width:62%; float:right;box-sizing:border-box; padding-top:30px;  padding-left:50px; text-align:left;}
#contact h5 {font-size:24px; color:#000000; padding:5px 0;}

.visual_text01 {line-height:1.6em; font-size:1.4em; color:#fff; padding:0 20px; text-shadow:3px 3px 3px #333; text-align:center; vertical-align:middle;}
.visual_text02 {line-height:1.6em; font-size:1.2em; color:#444; padding:0 30px; text-align:left; vertical-align:middle;}
.visual_text02 h3{line-height:1.8em; font-size:1.4em; }

@media (max-width: 768px){
html,body { line-height:160% !important;}
.visual_text01 {line-height:1.6em; font-size:1.2em; }
.visual_text02 {font-size:1.0em;}

#gnb a {padding:10px 8px 5px;}
#container { width:100%;}
.companyWrap {width:100%; background: url(img/bg01.gif) repeat center center;}
.com_content {height: 100%;}

.h1 {font-size:34px; }

.hidden-mobile {display:none;}

.company { margin-top:0px !important;}
.company .left2, .company .left, #vision .left, #recruit .left, #contact .left  {width:100%;float:left; padding:10px 20px !important; box-sizing:border-box;}
.company .middle {width:100%;float:left; padding:10px 20px !important; box-sizing:border-box;}
.company .right2, .company .right, #vision .right, #recruit .right, #contact .right  {width:100%;float:left; background:none !important; padding:10px 20px 20px !important;box-sizing:border-box;}
.company .left2 img, .company .left img  {width:100%;}
.company .right2 img, .company .right img {width:100%;}

#vision {height:100%;}

#service .content {height: 650px; padding-top:50px;}
#service .content .box1 {margin:10px 10px; padding:30px; 15px}
#service .content .box2 {margin:0px 10px; padding:30px 15px;}

#service2 .special .left, #service2 .special .middle, #service2 .special .right {width:95%; padding:20px; margin:15px 5%; }
#service2 .headcopy, #service2 .headcopy2 { text-align:center !important; box-sizing:border-box; width:100%; }
#service2 .headcopy2 img{width:100%}
#service2 .content {padding:40px 0;}

#recruit .content {height: 400px; padding-top:50px;}

.width {width:100%;}
}

/*상단 고정 메뉴CSS*/    /*리셋코드*/
.hidden{position:absolute; top:0; left:-1000%; width:1px; height:1px; overflow:hidden}
#wrapfix{width:100%;margin:0 auto; height:110px;position:relative;clear:both;display:block;background:#fff !important;z-index:1000000;}
.headfix {width:100%; height:110px;background: #fff; border-bottom:1px solid #ddd; top:0px;left:0;  position:absolute;z-index:1000000; 
  /*-webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, .175); box-shadow: 0 5px 8px rgba(0, 0, 0, .175);*/} /* 스크롤 메뉴 고정 핸들을 위함 */

/* 초기화 */
html,body{font-family:"NanumBarunGothic","sans-serif";font-size:17px;line-height:180%;color:#444444; }
html,body,div,a,p,ul,li,nav,header,span,h1,h2,h3,h4,dd,dt,dl,address,input,form,fieldset,legend{margin:0;padding:0; box-sizing:border-box;}
nav,header,footer{display:block;}
h1, h2, h3, h4, h5, h6 {font-family:'nanumsquare', sans-serif ;}

ol,ul,dl{margin:0;padding:0;list-style-type:none;}
a:focus{outline:0;cursor:pointer;}
.no-padding{padding:0;}
img{border: none; margin: 0; padding: 0;}
table {border-spacing: 0;border-collapse: collapse;}

a, a:link,a:visited {color:#676767; text-decoration:none !important;cursor:pointer;transition:0.3s;}
a:hover, a:focus, a:active {color:#244ea2; }
a.blue_link {color:#244ea2 !important;}

/*공통*/
.clearfix:after {content:"";clear:both;display:block;}

.container{width:1120px; margin:0 auto; }

.fl {float:left;}
.fr {float:right;}

.text-center{text-align:center; }
.text-left{text-align:left; }
.text-right{text-align:right; }
.fc-white {color:#ffffff; font-weight:bold;}
.fc-red {color:#c70c13;}
.fc-blue {color:#244ea2;}

#top_btn{position:fixed;top:80%;right:20px;display:block;width:50px;height:50px;border-radius:5px;background-color:#fff !important;border:1px solid #d7d7d7;text-indent:-9999px;background:  url(img/top_btn.gif) center center no-repeat; overflow:hidden;opacity:0.8;z-index: 999;}


.titTypeA {font-size:20px; color:#111; font-weight:550; line-height:30px; margin-top:50px; letter-spacing:-0.7; background:url(../img/icon_title.gif) no-repeat left top ; padding:8px 0 15px; }
.titTypeB {font-size:24px; color:#111; font-weight:500; line-height:30px;letter-spacing:-0.7; border-bottom:1px dotted #0075bc; background:url(@../img/icon_title2.gif) no-repeat left top ; padding:12px 0; }
.titTypeC {font-size:16px; color:#111; font-weight:500;  margin:20px 0 8px; background:url(../img/icon_list_title.gif) no-repeat left 10px; padding:3px 16px; }
.titTypeC2 {font-size:15px; color:#111; font-weight:500;  margin:10px 0; background:url(../img/icon_point.gif) no-repeat left 16px; padding:6px 9px; }
.titTypeD {font-size:27px; color:#244ea2; font-weight:600;line-height:30px; margin:0px 0 30px;}
.titTypeDD {font-size:20px; color:#244ea2; font-weight:500;line-height:30px; margin:0px 0 10px;}
.titTypeE {font-size:17px; color:#3699d9; font-weight:400; margin:0px auto 30px; text-align:center; width:90%;background:url(../img/icon_title1.gif) no-repeat center bottom ; padding:0px 0 15px;  }

.sub_content ul li {line-height:23px;padding:0px 15px 8px; background:url(../img/icon_list.gif) no-repeat left 10px ;}
.sub_content2 ul li {line-height:23px;padding:0px 10px 5px; margin-left:12px; background:url(../img/icon_point.gif) no-repeat left 11px ;}

/* 하단 레이아웃 */
#bottom {float:left; display:block;clear:both;background:#555555;width:100%;font-size:1em; padding:30px 0;margin-top:80px !important;}
#bottom:after {display:block;visibility:hidden;clear:both;content:""}
#bottom .copyright {width:100%; color:#fff; text-align:center; margin:0px auto; padding:23px 0;}
#bottom .fmenu{width:95%; margin:0 auto;text-align:center ; color:#fff;}
#bottom .fmenu:after {display:block;visibility:hidden;clear:both;content:""}
#bottom .fmenu a {font-size:16px; padding:2px 12px; color:#fff;}