@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

/*main-header*/
body {min-width:1400px; margin: 0; font-size: 12px; font-family: 'NanumSquare', sans-serif; overflow-x:hidden;}
.wrapper-header {position: fixed; width: 100%; height: 75px; z-index: 10; }
.header_fixed{position: fixed; width: 100%; z-index: 9999;}
.scroll_bg {position: fixed; width: 100%; height: 75px;  z-index: 9; background-color: rgba(25,25,25,0.8); display: none;}
header {margin:0 auto; height:75px; width: 100%; max-width: 1400px; z-index: 9999; left: 0; right: 0;}
header span {float:left; display: block; width: 100%; vertical-align: center;}
header span img {width: 80%;}
header .logo {width:240px; height:75px; ; padding: 0 20px; display: inline-block;text-align: center;}
header .logo span, .logo a {padding: 10px 0; width: 200px;}
header .nav {width:65%; max-width: 400px; height: 100px; display: inline-block; float: right;}

header nav ul li .sub_bg {width: 100px; height: 230px; background-color: rgba(25,25,25,0.8); display: none; position: absolute;}
header nav ul li ul{padding:0; list-style: none; height: 230px; overflow: hidden; display: none; position: absolute; z-index: 9999;}
header nav ul li ul li{height: 50px;}
header #mobile_nav{display: none;}

nav {width: 100%; height: 20px; }
nav ul { margin: 0; list-style: none; width: inherit; height: 100px; padding: 0;}
nav li {position: relative; float: left; width: 100px; font-weight:bold; text-align: center;height: 75px; transition:800ms ease all; vertical-align: center;}
nav li a {text-decoration: none; color:#fff; transition:800ms ease all; padding: 29.5px 0; display: block; font-size: 1.2em;}
nav li a:hover{color:#ffb400; transition:400ms ease all;}
nav li:hover, nav li a:hover {color:#ffb401;transition:400ms ease all;}
nav li:before,nav li:after {content:''; position:absolute; left:0; bottom:0; width:0; height:5px; background:#ffb400; transition:400ms ease all;}
nav li:hover:before,button:hover:after{width:100%; transition:800ms ease all;}
header .icon {width:15%; height:100px ; padding: 0 20px; display: inline-block; float: right; box-sizing:border-box}





/*/sitemap*/
.sitemap{position: fixed; width: 100%; height: 250px; background-color: rgba(30,30,30,0.8); z-index: 9;top: -250px; }
.sitemap_box{max-width: 1200px; margin: 0 17%; height: 250px; padding-top: 25px; box-sizing: border-box;}
.sitemap_box div {position: relative; width: 25%; height: 200px; display: inline-block; box-sizing: border-box; text-align: center; float: left;}
.sitemap_box ul {list-style: none; padding: 0;}
.sitemap_box div h1 {display: block; text-decoration: none; color:#ffF; font-size: 1.3em; font-weight: 400; padding: 5px 0;}
/*/sitemap*/


/*main-banner*/

.banner_1 {position:relative; background-image: url(../images/banner/banner_1.png); background-position: center; width: 100%; height: 900px; text-align: center; max-width: 1400px; padding: 0 260px;}
.banner_1 h1{text-align: left; line-height: 72px; letter-spacing: -1px; display:block; margin: 280px 0 50px 0; color: #fff; padding: 0 0 30px; font-size: 5em; font-weight: 400; }

.slider .banner_3 a{font-size: 2em; color: #ffb400; border-top: solid 1px #ffb400; border-bottom: solid 1px #ffb400; padding: 10px 0; }
.slider .banner_3 a:hover { color: #fff;  border-top: solid 1px #fff; border-bottom: solid 1px #fff; padding: 10px;  transition:400ms ease all;}


/*INDEX*/
.index_width {position:relative; width: 100%; height: 700px; background-image: url(../images/index_bg.png); background-position: center;}
.index {width: 100%; max-width: 1400px; margin: 0 auto; height: inherit; background-position: center; padding: 0 25px;}
.index h1 {text-align: left; line-height: 52px; margin-top: 90px; border-bottom: 5px solid #fff; display: inline-block; color: #141414; padding-bottom: 20px;  letter-spacing: -1.5px; font-size: 2.5em;  font-weight: 600;}
.index h1 span {color: #ffb400;}

.index p {width: 50%; color: #141414; line-height: 30px; margin-top: 0; margin-bottom: 30px;  font-size: 1.3em;}



/*business*/
.main_text2{position: relative; width: 100%; height: 700px; background-image: url(../images/main_text2_bg.png); }
.main_text2_margin{width: 100%; height: inherit; max-width: 1400px; margin: 0 auto; padding: 70px 50px 0 50px; box-sizing: border-box;}
.main_text2 h1 {font-size: 5em; text-align: center; margin: 30px 0; font-weight: 800; color: #fff;}
.main_text2 .box{width: 600px; height: 400px; margin: 0 25px; border-top: 20px solid #2292bc; float: left; background-color: #fff; padding: 30px 50px; box-sizing: border-box; text-align: center;}
.main_text2 h2 {font-size: 2.5em; font-weight: 600; margin: 10px 0; height: 70px;}
.main_text2 p {font-size: 1.3em; line-height: 24px;}

/*고객사*/
.customer {position: relative; width: 100%; height: 900px;}
.customer_bg {background-image: url(../images/customer_bg.png); text-align: center; width: 100%; height: 120px; padding: 15px 0; box-sizing: border-box;}
.customer_bg h1 {font-size: 5em; text-align: center; margin: 10px 0; font-weight: 800; color: #fff;}
.customer_margin {width: 100%; max-width: 1400px; margin: 0 auto; height: 780px; text-align: center; padding: 15px; box-sizing: border-box;}
.customer_margin img {width: 150px; float: left; margin: 0 10px;}

/*지도*/
#main03 iframe{width: 100%;height: 500px;border:0px;}


/*NOTICE*/
#main04{position: relative; width: 100%; height: 500px;}
#main04 .main04_box{float: left;height: 500px;}
#main04 #main04_text{width: 45%;background-color: #f17d00;}
#main04 #main04_text h3{color:#fff;font-size: 3.5em;text-transform: uppercase;width: 60%;float: right;margin:50px 20px 10px 0;}
#main04 #main04_text p{color:#f0f0f0;width: 60%; font-size: 1.3em; float: right;margin-right: 20px;line-height: 1.5;}
#main04 #main04_text ul{padding:0;width: 60%;float: right;margin-right: 20px;list-style: none;}
#main04 #main04_text ul li{float: left;margin-right: 10px;}
#main04 #main04_form{width: 55%;background-image: url(../images/main4_rbg.png);background-repeat: no-repeat;background-size: cover; background-position: center;}
#main04 #main04_form label{display: none;}
#main04 #main04_form ul{list-style: none;width: 60%;float: left;margin-top:50px;padding-left: 60px;}
#main04 #main04_form ul li{margin-bottom: 20px;}
#main04 #main04_form ul li input{background-color: rgba(255,255,255,0);border:0px;border-bottom: 1px solid #f0f0f0;height: 15px;font-size: 1em;width: 100%;color:#fff;padding-bottom: 10px;}
#main04 #main04_form ul li textarea{background-color: rgba(255,255,255,0);border:0px;border-bottom: 1px solid #f0f0f0;height: auto;font-size: 1em;width: 100%;color:#fff;padding-bottom: 10px;overflow-y: none;}
#main04 #main04_form .btn_submit{border:0px;width: 100px;background-color: #f0f0f0;color:#666;padding:10px;height: auto;float: right;border-radius: 20px;}

/*서브페이지 공통*/
.sub_banner{ width: 100%; height: 980px;}
.sub_banner span{color:#ffb400; }
.sub_banner h1 {width: 50%; font-weight: 800; line-height: 80px; font-size: 5em; margin: 0 20px; color: #fff; display: inline-block; margin: 350px 0; text-align: center; }
.sub_banner .banner_box{ width: 300px; height: 800px; margin-top: 105px; margin: 105px 16% 0 0; float: right; background-color: #eee; padding:30px; box-sizing: border-box;}
.sub_banner .banner_box p {font-size: 1.3em; line-height: 30px; margin-top: 150px;}


/*솔루션*/
.sub_banner_2 {position: relative; background-image: url(../images/banner_solution.png); background-position: center; width: 100%; height: 980px; padding: 75px 220px 0 220px; box-sizing: border-box;}
.solution_detail {width: 100%; max-width: 1400px; margin: 0 auto; height: 1440px; box-sizing: border-box; padding:50px 0; }
.line_1 {width: 100%; height: 670px; box-sizing: border-box; padding: 10px 200px; }
.line_2 {width: 100%; height: 670px; box-sizing: border-box; padding: 10px 40px;}
.solution_box { width: 300px; height: 650px; display: inline-block; margin: 0 15px; float: left;}
.solution_box h1 {width: inherit; height: 50px; font-size: 1.5em; background-color: #583674; text-align: center; margin: 0; padding: 16px 0; color:#fff; box-sizing: border-box;}
.solution_box .sol_img {text-align: center; height: 300px; padding: 50px 0; box-sizing: border-box;}
.solution_box .sol_text {height: 300px; padding: 0 20px; background-color: #f2f2f2; box-sizing: border-box;}
.solution_box .sol_text h2 {width: 100%; border-bottom: 2px solid #3d3d3d; font-size: 1.5em; display: inline-block; padding-bottom: 10px;}
.solution_box .sol_text p {font-size: 1.2em; line-height: 28px; display: inline-block; margin: 0;}

/*공공IT*/
.sub_banner_3 {position: relative; background-image: url(../images/banner_si_service.png); background-position: center; width: 100%; height: 980px; padding: 75px 220px 0 220px; box-sizing: border-box;}
.it_banner {position: relative; width: 100%; height: 500px; }
.it_banner_bg1{background-image: url(../images/banner/it_banner_bg1.png); background-position: center;}
.it_banner_bg2{background-image: url(../images/banner/it_banner_bg2.png); background-position: center;}
.it_banner_bg3{background-image: url(../images/banner/it_banner_bg3.png); background-position: center;}
.it_banner_bg4{background-image: url(../images/banner/it_banner_bg4.png); background-position: center;}
.it_banner_bg5{background-image: url(../images/banner/it_banner_bg5.png); background-position: center;}
.it_banner .it_banner_margin {width: 100%; max-width: 1400px; height: inherit;margin: 0 auto;}
.it_banner .it_banner_box{width: 50%; max-width: 700px; height: inherit; padding: 100px 20px; box-sizing: border-box;}
.it_banner .box_right{float: right; color: #fff;}
.it_banner .it_banner_box h1 {font-size: 3em; font-weight: 800; padding-left: 20px;}
.it_banner .it_banner_box h3 {font-size: 1.5em; padding-left: 20px;}
.it_banner .it_banner_box ul li {font-size: 1.5em; margin: 15px 0;}

/*전문IT*/
.sub_banner_4 {position: relative; background-image: url(../images/banner_si_service2.png); background-position: center; width: 100%; height: 980px; padding: 75px 220px 0 220px; box-sizing: border-box;}
.it2_logo {width: 100%; max-width: 1400px; height: 300px; margin: 0 auto; padding:75px 160px; box-sizing: border-box;}
.it2_logo img {width: 350px; float: left;}
.it2_text {width: 100%; max-width: 1400px; height: 200px; margin: 0 auto; padding: 25px 0; box-sizing: border-box;}
.it2_text p {font-size: 1.3em; line-height: 28px; text-align: center; margin: 0;}
.it2_img {width: 100%; max-width: 1400px; height: 800px; margin: 0 auto;}
.it2_img h1 {font-size: 2.5em; color: #fff; text-align: center; font-width: 800;}
.it2_img p {font-size: 1.5em; color: #fff; text-align: center; line-height: 32px; }
.it2_img_1{width: 50%; height: 400px; background-image: url(../images/banner/it2_img_1.png); display: inline-block; float: left; padding:100px 50px; box-sizing: border-box;}
.it2_img_2{width: 50%; height: 400px; background-image: url(../images/banner/it2_img_2.png); display: inline-block; float: left; padding:100px 50px; box-sizing: border-box;}
.it2_img_3{width: 50%; height: 400px; background-image: url(../images/banner/it2_img_3.png); display: inline-block; float: left; padding:100px 50px; box-sizing: border-box;}
.it2_img_4{width: 50%; height: 400px; background-image: url(../images/banner/it2_img_4.png); display: inline-block; float: left; padding:100px 50px; box-sizing: border-box;}


/*footer*/
footer{position: relative; width: 100%; height: 200px; background-color: #333;}
footer .logo {width: 100px; padding-right: 20px; height: 52; vertical-align: center; padding: 50px 0; display: inline-block; float: left;}
footer .footer{width: 100%; height: inherit; max-width: 1200px; margin: 0 auto; padding: 0 40px;}
footer .footer .text {width: 1080px; height: inherit; display: inline-block; padding-left:20px; float: left;}
footer .footer .text .infor_box {display: inline-block; width: 800px; height: inherit;}
footer .footer .category {width: 800px; height: 15px; list-style: none; margin: 20px 0; padding: 0; display: inline-block;  font-size: 13px; letter-spacing: 0;}
footer .footer .category li {float: left;}
footer .footer .category li a {text-decoration: none; color: #fff;}
footer .footer .category li + li:before {content: ""; display: inline-block;margin: 0 15px; width: 1px; height: 10px; background: #9d9d9d;}
footer .footer .infor {width: 800px; height: 140px; display: inline-block; font-size: 13px; letter-spacing: 0; }
footer .footer .infor p {color: #fff; margin: 10px 0;}
footer .footer .infor span {padding: 0 10px;}
footer .footer .notice_num {position: relative; width: 270px; display: inline-block; height:160px;  bottom: 6px;}
footer .footer .notice_num p {font-size: 13px; color: #fff; margin: 0; line-height: 20px;}
footer .footer .notice_num h1 {margin: 10px 0; color: #fff; }

/*//footer*/

#footer01 {display: none;}



/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*mobile*/

@media all and (max-width: 800px){
body{min-width:unset;}

.wrapper-header{}
header {margin: 0;}
header #mobile_nav{display: block;float: right;padding-right: 10px;}
header #mobile_nav img {height: 45px; margin: 15px;}
header #gnb{display: none;float: none;overflow: hidden; background-color: rgba(30,30,30,0.8);width: 100%;margin:0; height: 300px;}
header #gnb li{float: none;width: 100%; text-align: left;}
header #gnb li ul{display: none;position: inherit;}
header #gnb li:hover ul{display: none;}
header #gnb li ul li{width: 40%; float: left; height: 75px;}
header #gnb #sub_menu {height: 150px; }
header #gnb .sub_bg {width: 100%; height: 150px; }
header #menu:after{content: "+";float: right;font-size: 1.2em;}
header .logo {width: 200px; padding: 0;}

header nav li a {padding: 25px 10px; font-size: 1.5em;}


.banner_1 {background-image: url(../images/banner/banner_1.png); background-position: center; height: 660px; text-align: center; max-width: 800px; padding: 0;}
.banner_1 h1{text-align: left; line-height: 48px; letter-spacing: -1px; display:block; margin: 200px 0 50px 0; color: #fff; padding: 0 0 30px; font-size: 3.5em; font-weight: 400; padding-left: 20px; }



.slider .banner_3 a{font-size: 2em; color: #ffb400; border-top: solid 1px #ffb400; border-bottom: solid 1px #ffb400; padding: 10px 0; }
.slider .banner_3 a:hover { color: #fff;  border-top: solid 1px #fff; border-bottom: solid 1px #fff; padding: 10px;  transition:400ms ease all;}

/*INDEX*/
.index_width {position:relative; width: 100%; height: 680px; background-image: url(../images/index_bg_mobile.png); background-position: center; background-repeat: no-repeat;}
.index {width: 100%; max-width: 800px; margin: 0; height: inherit; padding: 0 20px; box-sizing: border-box;}
.index h1 {text-align: center; line-height: 52px; margin-top: 50px; border-bottom: 5px solid #fff; display: inline-block; color: #141414; padding-bottom: 20px;  letter-spacing: -1.5px; font-size: 2.5em;  font-weight: 600;}
.index h1 span {color: #ffb400;}

.index p {width: 100%; color: #141414; line-height: 30px; margin-top: 0; margin-bottom: 30px;  font-size: 1.3em; text-align: center;}
.index span {display: none;}

/*business*/
.main_text2{position: relative; width: 100%; height: 600px; background-image: url(../images/main_text2_bg.png); background-repeat: no-repeat; }
.main_text2_margin{width: 100%; height: inherit; max-width: 800px; margin: 0; padding: 70px 10px 0 10px; box-sizing: border-box;}
.main_text2 h1 {font-size: 3.5em; text-align: center; margin: 30px 0; font-weight: 800; color: #fff;}
.main_text2 .box{width: 45%; height: 400px; margin: 10px 2%; border-top: 20px solid #5474c3; float: left; background-color: #fff; padding: 30px 10px; box-sizing: border-box; text-align: center;}
.main_text2 .box img {display: none;}
.main_text2 h2 {font-size: 1.5em; font-weight: 600; margin: 10px 0; height: 55px;}
.main_text2 p {font-size: 1.3em; line-height: 24px;}

/*고객사*/
.customer {position: relative; width: 100%; height: 900px;}
.customer_bg {background-image: url(../images/customer_bg.png); background-position: center; text-align: center; width: 100%; max-width: 800px; height: 100px; padding: 15px 0; box-sizing: border-box;}
.customer_bg h1 {font-size: 3.5em; text-align: center; margin: 10px 0; font-weight: 800; color: #fff;}
.customer_margin {width: 100%; max-width: 800px; margin: 0; height: 780px; text-align: center; padding: 15px; box-sizing: border-box;}
.customer_margin img {width: 120px; float: left; margin: 0 10px;}


/*공지사항(임시)*/
#main05 {position: relative; width: 100%; height: 900px;}
.main05_bg {width: inherit; height: inherit; background-image: url(../images/title_mobile.png); background-position: center; background-repeat: no-repeat; }


/*지도*/
#main03 iframe{max-width: 800px; height: 300px;}
/*문의하기*/
#main04 {max-width: 800px; height: 550px;}
#main04 .main04_box{text-align: center; height: auto;overflow: hidden; max-width: 800px;}
#main04 #main04_text{width: 100%;background-color: #2d2d2d;padding-bottom: 10px; max-width: 800px;}
#main04 #main04_form{width: 100%;background-image: url(../images/m_main4_rbg.png);}
#main04 #main04_form ul{width: 90%;padding:10px;}

#main04 #main04_text h3{margin-left: 10px; float: left; text-align: left;}
#main04 #main04_text p{display: none;}
#main04 #main04_text br{display: none;}

/*footer*/
footer {display: none;}

#footer01 {display: block; max-width: 800px; float: left; }
.footer {background-color: #1d1d1d; padding: 25px 0;}
.footer a {color: #fff;}
.footer h1{float: none;width: 100%;text-align: center; margin: 0;}
.footer p{float: none; font-size: 1.2em; width: 90%;padding:0px;margin:auto;text-align: center;line-height: 2; color: #fff;}


/*서브페이지 공통*/
.sub_banner{ max-width: 800px;}
.sub_banner span{color:#ffb400; }
.sub_banner h1 {margin: 110px 0; text-align: left; padding:0 30px; font-size: 3em; width: 100%; box-sizing: border-box; line-height: 60px;}
.sub_banner .banner_box{ width: 100%; height: 455px; margin: 0; float: right; background-color: rgba(50,50,50,0.7); padding:30px 20px; box-sizing: border-box;}
.sub_banner .banner_box p {font-size: 1.5em; line-height: 36px; margin-top: 0; color: #fff;}


/*솔루션*/
.sub_banner_2 {background-image: url(../images/banner_solution.png); padding: 75px 0 0 0; max-width: 800px; height: 810px;}
.solution_detail {width: 100%; max-width: 800px; margin: 0 auto; height: 2940px; box-sizing: border-box; padding:0; float: left;}
.line_1 {width: 100%; height: 1260px; box-sizing: border-box; padding: 0; }
.line_2 {width: 100%; height: 1680px; box-sizing: border-box; padding: 0;}
.solution_box { width: 100%; height: 420px; display: inline-block; margin: 0; float: left;}
.solution_box h1 {width: inherit; height: 70px; font-size: 1.8em; background-color: #583674; text-align: center; margin: 0; padding: 20px 0; color:#fff; box-sizing: border-box;}
.solution_box .sol_img {text-align: center; width: 50%; height: 350px; padding: 50px 0; box-sizing: border-box; float: left; background-color: #fff;}
.solution_box .sol_text {width: 50%; height: 350px; padding: 0 10px; background-color: #f2f2f2; box-sizing: border-box; float: left;}
.solution_box .sol_text h2 {width: 100%; border-bottom: 2px solid #3d3d3d; font-size: 1.7em; display: inline-block; padding-bottom: 10px; font-weight: 800;}
.solution_box .sol_text p {font-size: 1.2em; line-height: 30px; display: inline-block; margin: 0;}
.solution_box .sol_text span {display: none;}

/*공공IT*/
.sub_banner_3 {background-image: url(../images/banner_si_service.png); padding: 75px 0 0 0; max-width: 800px; height: 870px;}
.it_banner {position: relative; width: 100%; height: 400px; }
.it_banner_bg1{background-image: url(../images/banner/it_banner_bg1.png); background-position: center; max-width: 800px;}
.it_banner_bg2{background-image: url(../images/banner/it_banner_bg2.png); background-position: center; max-width: 800px;}
.it_banner_bg3{background-image: url(../images/banner/it_banner_bg3.png); background-position: center; max-width: 800px;}
.it_banner_bg4{background-image: url(../images/banner/it_banner_bg4.png); background-position: center; max-width: 800px;}
.it_banner_bg5{background-image: url(../images/banner/it_banner_bg5.png); background-position: center; max-width: 800px;}
.it_banner .it_banner_margin {width: 100%; max-width: 1400px; height: inherit;margin: 0 auto;}
.it_banner .it_banner_box{width: 100%; max-width: 700px; height: inherit; padding: 30px 20px; box-sizing: border-box;}
.it_banner .box_right{float: right; color: #fff;}
.it_banner .it_banner_box h1 {font-size: 3em; font-weight: 800; padding-left: 20px;}
.it_banner .it_banner_box h3 {font-size: 1.5em; padding-left: 20px;}
.it_banner .it_banner_box ul li {font-size: 1.5em; margin: 15px 0;}

/*전문IT*/
.sub_banner_4 { background-image: url(../images/banner_si_service2.png); padding: 75px 0 0 0; max-width: 800px; height: 900px;}
.sub_banner_4 .banner_box {height: 485px;}
.it2_logo {width: 100%; max-width: 800px; height: 400px; padding:25px 20px; box-sizing: border-box;}
.it2_logo img {width: 80%; float: left; margin: 0 9%;}
.it2_text {width: 100%; max-width: 800px; height: 350px; margin: 0; padding: 25px 20px; box-sizing: border-box;}
.it2_text p {font-size: 1.2em; line-height: 32px; text-align: center; margin: 0; display: inline-block;}
.it2_text p br {display: none;}
.it2_text span {display: none;}
.it2_img {width: 100%; max-width: 800px; height: 1200px; margin: 0;}
.it2_img h1 {font-size: 2.5em; color: #fff; text-align: center; font-width: 800;}
.it2_img p {font-size: 1.3em; color: #fff; text-align: center; line-height: 32px; }
.it2_img_1{width: 100%; max-width: 800px; height: 300px; background-image: url(../images/banner/it2_img_1.png); padding:20px; background-size: 150%; background-position: center;}
.it2_img_2{width: 100%; max-width: 800px; height: 300px; background-image: url(../images/banner/it2_img_2.png); padding:20px; background-size: 150%; background-position: center;}
.it2_img_3{width: 100%; max-width: 800px; height: 300px; background-image: url(../images/banner/it2_img_3.png); padding:20px; background-size: 150%; background-position: center;}
.it2_img_4{width: 100%; max-width: 800px; height: 300px; background-image: url(../images/banner/it2_img_4.png); padding:20px; background-size: 150%; background-position: center;}


/*//mobile*/