@charset "UTF-8";
@import url("./font.css");

/* reset */
html, body,
.workRoad div,
.workRoad span,
.workRoad object,
.workRoad h1,
.workRoad h2,
.workRoad h3,
.workRoad h4,
.workRoad h5,
.workRoad h6,
.workRoad p,
.workRoad blockquote,
.workRoad a,
.workRoad button,
.workRoad abbr,
.workRoad address,
.workRoad img,
.workRoad q,
.workRoad dl,
.workRoad dt,
.workRoad dd,
.workRoad ol,
.workRoad ul,
.workRoad li,
.workRoad fieldset,
.workRoad form,
.workRoad label,
.workRoad legend,
.workRoad table,
.workRoad caption,
.workRoad tbody,
.workRoad tfoot,
.workRoad thead,
.workRoad tr,
.workRoad th,
.workRoad td,
.workRoad article,
.workRoad aside,
.workRoad footer,
.workRoad header,
.workRoad section,
.workRoad summary{margin:0;padding:0;border:0;font:inherit;}
.workRoad article,
.workRoad aside,
.workRoad details,
.workRoad figcaption,
.workRoad figure,
.workRoad footer,
.workRoad header,
.workRoad hgroup,
.workRoad menu,
.workRoad nav,
.workRoad section{display:block;}/* HTML5 display-role reset for older browsers */
html,  body{width:100%;height:100%;}
.workRoad ol,
.workRoad ul{list-style:none;}
.workRoad table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:fixed;}
.workRoad img{border:none;vertical-align:top;}
.workRoad a{display:inline-block;text-decoration:none;color:inherit;}
.workRoad address{font-style:normal;}
.workRoad button{display:inline-block;border:none;background-color:transparent;cursor:pointer;}
.workRoad input,
.workRoad button,
.workRoad a,
.workRoad select,
.workRoad option{font-family:inherit;font-size:inherit;}
.workRoad input[type="checkbox"]{border:none!important;}/* for lte IE10 */
.workRoad input[type="radio"]{border:none!important;}/* for lte IE10 */
.workRoad caption,
.workRoad hr{display:none;}

/* 추가 */
.workRoad ul,
.workRoad li{padding:0;}
.workRoad li{list-style:none;}
.workRoad p{font-size:14px;line-height:1.5;margin:0;padding:0;}
.workRoad textarea{resize:none;overflow: auto;}
.workRoad em{font-style:normal;}
.workRoad a{text-decoration:none}
.workRoad a:hover{text-decoration:none;}
.workRoad select,
.workRoad input,
.workRoad button,
.workRoad textarea{font-family:"Nanum Gothic","나눔고딕","맑은 고딕","Malgun Gothic",Dotum,sans-serif;font-size:14px;}
.workRoad .blind{display:block;left:0;overflow:hidden;position:absolute;top:-1000em;}

.workRoad select{-moz-appearance:none; /* Firefox */	-webkit-appearance:none;/* Safari and Chrome */appearance:none;}
.workRoad select::-ms-expand {display:none}

/* common */
html, body,
.workRoad pre{font-family: "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", Dotum, sans-serif;font-size:14px;color: #000;letter-spacing:-0.045em !important;}
.workRoad .clearFix:after{content: "";display: block;clear: both;}
.workRoad .hidden{margin: 0;padding: 0;width: 0;height: 0;overflow: hidden;font-size: 0;line-height: 0;}
html, body,
.workRoad #warp{width:100%;height:100%;min-width:1100px;}
.workRoad .notoBold{font-family: 'Noto Sans Medium';}

/* Accessibility Navigation */
.workRoad .accNav {position:absolute; top:0; left:0; z-index:500; width:100%; height:0;}
.workRoad .accNav a {display:block; position:absolute; left:0; top:0; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#fff; white-space:nowrap; font-size:0.75em;}
.workRoad .accNav a:focus,
.workRoad .accNav a:hover,
.workRoad .accNav a:active {z-index:1000; width:100%; height:auto; padding:5px 0; background:#125aac; color:#fff; font-weight:700;}

/* 공통 영역 */
.workRoad .inner { width: 1080px; margin: 0 auto; position: relative; }
.workRoad .inner:after { content: ""; display: block; clear: both; }
.workRoad .pagination { text-align: center; }
.workRoad .pagination a { display: inline-block; width: 9px; height: 9px; margin: 0 2px; background: #bababa; border-radius: 50%; }
.workRoad .pagination a.active { width: 28px; background: #3680c7; border-radius: 4px; }
.workRoad #header {position:  relative;width: 100%;}
.workRoad #header h1 { position: absolute; top: 15px; left: 0; }
.workRoad #header .util { width: 100%; height: 28px; background: #213967; }
.workRoad #header .util ul { float: right; }
.workRoad #header .util li { float: left; margin-left: 22px; }
.workRoad #header .util a { display: inline-block; color: #abb8d0; line-height: 28px; font-size: 12px; }
.workRoad #header .util a:hover { color: #fff; }
.workRoad #header .searchArea { position: absolute; top: 25px; right: 0; }
.workRoad #header .searchArea > div { position: relative; z-index: 2; width: 70px; height: 30px; border-radius: 15px; background: #213967; color: #fff; }
.workRoad #header .searchArea .btn_submit { float: left; color: #fff; display: block; width: 45px; height: 30px; line-height: 30px; text-indent: 5px; }
.workRoad #header .searchArea .btn_sizeCtr { float: left; display: block; width: 25px; height: 30px; background: url("../../images/workRoad/common/btn_plus.png") no-repeat 0px center; line-height: 30px; }
.workRoad #header .searchArea .inputTxt { position: absolute; top: 0px; left: -160px; z-index: 1; width: 230px; height: 30px; border: 2px solid #213967; box-sizing: border-box; border-radius: 19px; background: #fff; }
.workRoad #header .searchArea.expand .btn_sizeCtr { background: url("../../images/workRoad/common/btn_minus.png") no-repeat 0px center; }
.workRoad #header .searchArea.expand .inputTxt { top: -8px; left: -286px; width: 360px; height: 48px; border-radius: 24px; }
.workRoad #header .searchArea.expand .inputTxt input[type="text"] { display: block; width: 284px; height: 43px; font-size: 16px; line-height: 48px; }
.workRoad #header .searchArea input[type="text"] { border: 0; display: block; width: 150px; height: 25px; line-height: 25px; background: none; text-indent: 10px; font-size: 14px; }
.workRoad #header #gnb { width: 100%; }
.workRoad #header #gnb ul { height: 74px; margin-left: 263px; }
.workRoad #header #gnb ul li { float: left; width: 140px; height: 100%; text-align: center; }
.workRoad #header #gnb ul li.active a,
.workRoad #header #gnb ul li:hover a { border-bottom: 2px solid #3986d0; box-sizing: border-box; background: url("../../images/workRoad/common/bg_selectOn.png") no-repeat center bottom; color: #3680c7; }
.workRoad #header #gnb a { display: block; width: 114px; margin: 0 auto; font-size: 16px; color: #454545; font-family: 'Nanum Gothic Bold'; line-height: 72px; }
.workRoad #header .subMenu {position: absolute;width: 100%;left: 0;top: 102px;z-index: 10000;background: #fff;border-bottom: 1px solid #bac0c6;}


.workRoad #header .subMenu:before {content: '';display: block;width: 100%;position: absolute;z-index:  2;top: 0px;border-bottom: 1px solid #ced6dd;}
.workRoad #header .subMenu .inner { width: 940px; }
.workRoad #header .subMenu div { padding-left: 127px; }
.workRoad #header .subMenu p { position: absolute; top: 0; left: -56px; display: block; width: 260px; padding: 160px 0 0 38px; background: url("../../images/workRoad/common/bg_gnbSgis.png") no-repeat; text-align: center; color: #9fa3a7; font-size: 13px; }
.workRoad #header .subMenu ul { float: left; width: 140px; height: 267px; padding: 29px 0 0 18px; border-right: 1px solid #e7ebee; box-sizing: border-box; }
.workRoad #header .subMenu ul:first-child { border-left: 1px solid #e7ebee; }
.workRoad #header .subMenu li { margin-top: 15px; }
.workRoad #header .subMenu li:first-child { margin-top: 0; }
.workRoad #header .subMenu a { font-size: 14px; }
.workRoad #header .subMenu a:hover { text-decoration: underline; color: #176ab9; font-family: 'Nanum Gothic Bold'; }
.workRoad #footer > div { width: 100%; border-top: 1px solid #e8ecf0; }
.workRoad #footer .inner { position: relative; }
.workRoad #footer h2 { float: left; width: 210px; height: 100%; line-height: 73px; background: url("../../images/workRoad/common/ico_arrow.png") no-repeat 167px center; }
.workRoad #footer h2 a { display: block; width: 100%; height: 100%; }
.workRoad #footer h2 a img { vertical-align: middle; margin-left: 17px; }
.workRoad #footer h2:hover { background: url("../../images/workRoad/common/ico_arrow_on.png") no-repeat 167px center; }
.workRoad #footer .otherLink { height: 73px; float: left; }
.workRoad #footer .otherLink li { width: 145px; float: left; line-height: 73px; margin-left: 73px; }
.workRoad #footer .otherLink li a { display: block; height: 100%; padding-left: 40px; font-size: 14px; }
.workRoad #footer .otherLink li a:hover { color: #176ab9; font-family: 'Nanum Gothic Bold'; }
.workRoad #footer .otherLink li:first-child { margin-left: 48px; }
.workRoad #footer .otherLink .menu_01 { background: url("../../images/workRoad/common/img_sgis.png") no-repeat 0 center; }
.workRoad #footer .otherLink .menu_02 { background: url("../../images/workRoad/common/img_news.png") no-repeat 0 center; }
.workRoad #footer .otherLink .menu_03 { background: url("../../images/workRoad/common/img_video.png") no-repeat 0 center; }
.workRoad #footer .otherLink .menu_04 { background: url("../../images/workRoad/common/img_note.png") no-repeat 5px center; }
.workRoad #footer .companyInfo { padding: 15px 0 35px; }
.workRoad #footer .companyInfo > p { float: left; }
.workRoad #footer .companyInfo > div { float: left; margin-left: 54px; width: 920px; }
.workRoad #footer .companyInfo .textLink { margin: 13px 0 0 0; }
.workRoad #footer .companyInfo .textLink li { float: left; position: relative; padding: 0 15px; }
.workRoad #footer .companyInfo .textLink li:before { content: ""; display: inline-block; position: absolute; width: 1px; height: 11px; background: #d2d2d2; top: 2px; left: 0; }
.workRoad #footer .companyInfo .textLink li:first-child:before { display: none; }
.workRoad #footer .companyInfo .textLink li:first-child { padding-left: 0; }
.workRoad #footer .companyInfo .textLink li a { color: #838383; font-family: 'Nanum Gothic Bold'; }
.workRoad #footer .companyInfo .textLink li a:hover { color: #2573bd; }
.workRoad #footer .companyInfo .address { margin-top: 15px; }
.workRoad #footer .companyInfo .address address { float: left; color: #838383; font-size: 12px; }
.workRoad #footer .companyInfo .address ul { float: left; width: 550px; }
.workRoad #footer .companyInfo .address ul li { float: left; color: #838383; font-size: 12px; margin-left: 15px; }
.workRoad #footer .companyInfo .address .copyright { display: block; padding-top: 5px; clear: both; font-size: 12px; color: #a1a1a1; }
.workRoad #footer .companyInfo select { position: absolute; top: 20px; right: 0; display: block; width: 170px; height: 30px; border: 1px solid #cacaca; color: #666666; }
.workRoad .btnTop { position: fixed; bottom: 20px; left: 50%; margin-left: 560px; width: 44px; height: 44px; background: url("../../images/workRoad/main/btn_top_scrolling.png") no-repeat; }

/* 상단 그래프 & 배너 */
.workRoad .topGraph { position: relative; background: #c6ddf1; padding: 17px 0; }
.workRoad .topGraph:before { content: ""; display: block; position: absolute; z-index: 0; background: url("../../images/workRoad/main/bg_mainTop_01.png") no-repeat; width: 116px; height: 150px; top: 0; left: 50%; margin-left: -619px; }
.workRoad .topGraph:after { content: ""; display: block; position: absolute; z-index: 0; background: url("../../images/workRoad/main/bg_mainTop_02.png") no-repeat; width: 116px; height: 150px; top: 0; left: 50%; margin-left: 534px; }
.workRoad .topGraph .rollGraphArea { position: relative; z-index: 1; background: #fff; width: 797px; height: 215px; float: left; }
.workRoad .topGraph .rollGraphArea h3 { position: absolute; height: 28px; top: 20px; left: 20px; font-size: 19px; padding-left: 37px; color: #111111; background: url("../../images/workRoad/main/bullet_map.png") no-repeat 0 bottom; line-height: 40px; font-family: 'Nanum Square Bold'; }
.workRoad .topGraph .rollGraph { height: 100%; }
.workRoad .topGraph .rollGraph .cont { height: 100%; }
.workRoad .topGraph .rollGraph .txtInfo { float: left; width: 243px; height: 73px; background: #f3f3f3; margin-top: 80px; padding-top: 17px; text-align: center; }
.workRoad .topGraph .rollGraph .txtInfo strong { font-weight: normal; font-family: 'Nanum Gothic Bold'; }
.workRoad .topGraph .rollGraph .txtInfo .percent { margin-top: 10px; font-family: 'Nanum Gothic Bold'; font-size: 26px; color: #1a65ad; }
.workRoad .topGraph .rollGraph .txtInfo .percent span { display: inline-block; width: 37px; height: 38px; font-size: 12px; font-family: 'Nanum Gothic'; color: #fff; line-height: 38px; vertical-align: middle; }
.workRoad .topGraph .rollGraph .txtInfo .percent span.ico_up { background: url("../../images/workRoad/main/ico_arrow_up.png") no-repeat center top; }
.workRoad .topGraph .rollGraph .txtInfo .percent span.ico_down { background: url("../../images/workRoad/main/ico_arrow_down.png") no-repeat center bottom; }
.workRoad .topGraph .rollGraph .txtInfo + div { float: left; width: 540px; height: 100%; margin-left: 14px; }
.workRoad .topGraph .controllBox { position: absolute; left: 58px; bottom: 17px; }
.workRoad .topGraph .controllBox .controller { float: left; }
.workRoad .topGraph .controllBox .controller button { display: inline-block; width: 8px; height: 15px; margin: 0 3px; vertical-align: bottom; }
.workRoad .topGraph .controllBox .controller .btn_prev { background: url("../../images/workRoad/main/btn_prev.png") no-repeat center; }
.workRoad .topGraph .controllBox .controller .btn_next { background: url("../../images/workRoad/main/btn_next.png") no-repeat center; }
.workRoad .topGraph .controllBox .controller .btn_pause { background: url("../../images/workRoad/main/btn_pause.png") no-repeat center; }
.workRoad .topGraph .controllBox .pagination { float: left; text-align: left; margin-top: -2px; }
.workRoad .topGraph .controllBox .pagination a { vertical-align: bottom; }
.workRoad .topGraph .ad_banner { position: relative; z-index: 1; width: 270px; height: 215px; float: left; margin-left: 13px; overflow: hidden; }
.workRoad .topGraph .ad_banner .slick-dots { position: absolute; top: 5px; right: 10px; text-align: right; }
.workRoad .topGraph .ad_banner .slick-dots button { background: #7f7f7f; }
.workRoad .topGraph .ad_banner .slick-dots button:before { display: none; }
.workRoad .topGraph .ad_banner .slick-dots li { margin: 0 3px; width: 9px; height: 9px; }
.workRoad .topGraph .ad_banner .slick-dots li button { width: 100%; height: 9px; border-radius: 50%; }
.workRoad .topGraph .ad_banner .slick-dots li.slick-active { width: 28px; }
.workRoad .topGraph .ad_banner .slick-dots li.slick-active button { background: #3680c7; border-radius: 4px; }
.workRoad .topGraph .ad_banner .slick-next.slick-arrow,
.workRoad .topGraph .ad_banner .slick-prev.slick-arrow { display: none !important; }

/* 메인 중앙 컨텐츠 */
.workRoad .boxCont { float: left; width: 797px; padding: 20px 0; }
.workRoad .boxCont .row { margin-top: 13px; border: 1px solid #e1e5e9; box-sizing: border-box; }
.workRoad .boxCont .row:first-child { margin-top: 0; }
.workRoad .boxCont .row:after { content: ""; display: block; clear: both; }
.workRoad .boxCont .row .rowTit { float: left; width: 120px; height: 100%; padding: 30px 0 0 15px; color: #fff; font-size: 20px; font-family: 'Nanum Square Bold'; }
.workRoad .boxCont .row .rowTit + div { float: left; }
.workRoad .boxCont .row.type01 .rowTit { height: 190px; background: #3986d0 url("../../images/workRoad/main/bg_img_monitor.png") no-repeat right 130px; }
.workRoad .boxCont .row.type02 .rowTit { height: 120px; background: #20c1a8 url("../../images/workRoad/main/bg_img_graph.png") no-repeat right 88px; }
.workRoad .boxCont .row.type03 .rowTit { height: 120px; background: #f69834 url("../../images/workRoad/main/bg_img_global.png") no-repeat right 73px; }
.workRoad .boxCont .tabArea { width: 630px; padding: 15px 15px 18px; }
.workRoad .boxCont .tabArea .mainTab li { float: left; width: 119px; height: 34px; border-top: 1px solid #e1e5e9; border-bottom: 1px solid #e1e5e9; border-left: 1px solid #c8cacd; background: #f3f3f3; text-align: center; line-height: 34px; box-sizing: border-box; }
.workRoad .boxCont .tabArea .mainTab li a { color: #686868; font-size: 15px; font-family: 'Nanum Gothic Bold'; display: block; width: 100%; height: 100%; }
.workRoad .boxCont .tabArea .mainTab li:first-child { border-left: 1px solid #e1e5e9; }
.workRoad .boxCont .tabArea .mainTab li.active,
.workRoad .boxCont .tabArea .mainTab li:hover { background: #3986d0; border: 0; }
.workRoad .boxCont .tabArea .mainTab li.active a,
.workRoad .boxCont .tabArea .mainTab li:hover a { position: relative; color: #fff; }
.workRoad .boxCont .tabArea .mainTab li.active a:before,
.workRoad .boxCont .tabArea .mainTab li:hover a:before { content: ""; display: block; position: absolute; z-index: 2; left: 50%; bottom: -5px; width: 18px; height: 5px; margin-left: -9px; background: url("../../images/workRoad/main/bg_tabSelectOn.png") no-repeat; }
.workRoad .boxCont .tabArea .mainTab li.btnMore { width: 32px; height: 34px; background: #fff; border-right: 1px solid #e1e5e9; background: url("../../images/workRoad/main/btn_more.png") no-repeat center; }
.workRoad .boxCont .tabArea .mainTab li.btnMore:hover { border: 1px solid #e1e5e9; border-left: 1px solid #c8cacd; background: url("../../images/workRoad/main/btn_more_on.png") no-repeat center; }
.workRoad .boxCont .tabArea .mainTab li.btnMore:hover a:before { display: none; }
.workRoad .boxCont .mainTabCont { margin-top: 25px; }
.workRoad .boxCont .mainTabCont .cont > div { position: relative; float: left; width: 186px; height: 116px; padding: 0 12px; }
.workRoad .boxCont .mainTabCont .cont > div:before { content: ""; position: absolute; top: 5px; left: -1px; width: 1px; height: 114px; background: #e9eaeb; }
.workRoad .boxCont .mainTabCont .cont > div:first-child:before { display: none; }
.workRoad .boxCont .mainTabCont .cont > div strong { display: block; color: #222; font-size: 15px; font-weight: normal; font-family: 'Nanum Gothic Bold'; }
.workRoad .boxCont .mainTabCont .cont > div p { display: block; height: 70px; margin-top: 9px; font-size: 13px; color: #888888; line-height: 18px; }
.workRoad .boxCont .mainTabCont .cont > div p + div { position: absolute; bottom: -5px; left: 12px; }
.workRoad .boxCont .mainTabCont .cont .tag { text-align: left; }
.workRoad .boxCont .mainTabCont .cont .tag a { display: inline-block; margin-right: 3px; padding: 0 7px; height: 17px; color: #fff; line-height: 17px; font-size: 11px; background: #3680c7; }
.workRoad .boxCont .mainTabCont .cont .tag a.blue { background: #3680c7; }
.workRoad .boxCont .mainTabCont .cont .tag a.green { background: #1cb48e; }
.workRoad .boxCont .mainTabCont .cont .tag a.orange { background: #f58711; }
.workRoad .boxCont .mainTabCont .cont .tag a.sky { background: #23c2d2; }
.workRoad .boxCont .mainTabCont .cont .tag a.purple { background: #835ed8; }
.workRoad .boxCont .menustats { position: relative; overflow: hidden; width: 560px; padding: 0 50px; }
.workRoad .boxCont .menustats .menuRoll { width: 1000px; margin-top: 30px; }
.workRoad .boxCont .menustats li { float: left; width: 65px; margin-left: 60px; text-align: center; }
.workRoad .boxCont .menustats li:first-child { margin-left: 0; }
.workRoad .boxCont .menustats li.menu_01 { background: url("../../images/workRoad/main/img_upgrage.png") no-repeat center top; }
.workRoad .boxCont .menustats li.menu_02 { background: url("../../images/workRoad/main/img_house.png") no-repeat center top; }
.workRoad .boxCont .menustats li.menu_03 { background: url("../../images/workRoad/main/img_sprout.png") no-repeat center top; }
.workRoad .boxCont .menustats li.menu_04 { background: url("../../images/workRoad/main/img_building.png") no-repeat center top; }
.workRoad .boxCont .menustats li.menu_05 { background: url("../../images/workRoad/main/img_pieChart.png") no-repeat center top; }
.workRoad .boxCont .menustats li.menu_06 { background: url("../../images/workRoad/main/img_cloud.png") no-repeat center top; }
.workRoad .boxCont .menustats li.menu_07 { background: url("../../images/workRoad/main/img_data.png") no-repeat center top; }
.workRoad .boxCont .menustats li a { display: block; padding-top: 60px; color: #666666; }
.workRoad .boxCont .menustats li:hover a { color: #279d98; font-family: 'Nanum Gothic Bold'; }
.workRoad .boxCont .menustats button { position: absolute; top: 50%; width: 15px; height: 36px; }
.workRoad .boxCont .menustats button.btn_prev { left: 15px; background: url("../../images/workRoad/main/btn_menuPrev.png") no-repeat; }
.workRoad .boxCont .menustats button.btn_next { right: 15px; background: url("../../images/workRoad/main/btn_menuNext.png") no-repeat; }
.workRoad .boxCont .menuMap { position: relative; overflow: hidden; width: 565px; padding: 0 47px; margin-top: 30px; }
.workRoad .boxCont .menuMap li { float: left; width: 65px; margin-left: 60px; text-align: center; }
.workRoad .boxCont .menuMap li:first-child { margin-left: 0; }
.workRoad .boxCont .menuMap li.menu_01 { background: url("../../images/workRoad/main/img_monitor.png") no-repeat center top; }
.workRoad .boxCont .menuMap li.menu_02 { background: url("../../images/workRoad/main/img_people.png") no-repeat center top; }
.workRoad .boxCont .menuMap li.menu_03 { background: url("../../images/workRoad/main/img_old.png") no-repeat center top; }
.workRoad .boxCont .menuMap li.menu_04 { background: url("../../images/workRoad/main/img_docPie.png") no-repeat center top; }
.workRoad .boxCont .menuMap li.menu_05 { background: url("../../images/workRoad/main/img_prepare.png") no-repeat center top; }
.workRoad .boxCont .menuMap li:hover a { color: #d16e26; font-family: 'Nanum Gothic Bold'; }
.workRoad .boxCont .menuMap a { display: block; padding-top: 60px; color: #666666; }
.workRoad .serviceArea { float: left; padding: 20px 0; }
.workRoad .serviceArea .serviceBox { position: relative; width: 270px; height: 387px; margin: 0 0 0 13px; border: 1px solid #e1e5e9; box-sizing: border-box; }
.workRoad .serviceArea .serviceTit { position: relative; width: 100%; height: 48px; background: #25aec7; color: #fff; font-family: 'Nanum Square Bold'; font-size: 19px; line-height: 48px; text-indent: 20px; border-bottom: 1px solid #e1e5e9; }
.workRoad .serviceArea .serviceTit .btnService { position: absolute; right: 20px; top: 17px; }
.workRoad .serviceArea .serviceTit .btnService button { display: inline-block; width: 9px; height: 16px; float: left; margin-left: 11px; }
.workRoad .serviceArea .serviceTit .btnService button:first-child { margin-left: 0; }
.workRoad .serviceArea .serviceTit .btnService button.btn_prev { background: url("../../images/workRoad/main/btn_prevService.png") no-repeat; }
.workRoad .serviceArea .serviceTit .btnService button.btn_prev:hover { background: url("../../images/workRoad/main/btn_prevService_on.png") no-repeat; }
.workRoad .serviceArea .serviceTit .btnService button.btn_next { background: url("../../images/workRoad/main/btn_nextService.png") no-repeat; }
.workRoad .serviceArea .serviceTit .btnService button.btn_next:hover { background: url("../../images/workRoad/main/btn_nextService_on.png") no-repeat; }
.workRoad .serviceArea .serviceCont { position: relative; width: 195px; margin: 0 36px; overflow: hidden; }
.workRoad .serviceArea .serviceCont ul { width: 380px; margin: 0 0 0 -43px; }
.workRoad .serviceArea .serviceCont li { font-family: 'Nanum Gothic'; float: left; width: 76px; margin: 26px 0 0 43px; text-align: center; }
.workRoad .serviceArea .serviceCont li.menu_01 { background: url("../../images/workRoad/main/img_statistics.png") no-repeat; }
.workRoad .serviceArea .serviceCont li.menu_02 { background: url("../../images/workRoad/main/img_myhouse.png") no-repeat; }
.workRoad .serviceArea .serviceCont li.menu_03 { background: url("../../images/workRoad/main/img_paper.png") no-repeat; }
.workRoad .serviceArea .serviceCont li.menu_04 { background: url("../../images/workRoad/main/img_map.png") no-repeat; }
.workRoad .serviceArea .serviceCont li.menu_05 { background: url("../../images/workRoad/main/img_earth.png") no-repeat; }
.workRoad .serviceArea .serviceCont li.menu_06 { background: url("../../images/workRoad/main/img_comm.png") no-repeat; }
.workRoad .serviceArea .serviceCont li a { display: block; padding-top: 84px; color: #333; }
.workRoad .serviceArea .serviceCont li:hover a { color: #1aa1ba; font-family: 'Nanum Gothic Bold'; }
.workRoad .serviceArea .pagination { position: absolute; left: 0; bottom: 16px; width: 100%; }
.workRoad .serviceArea .pagination a.active { background: #25aec7; }
.workRoad .serviceArea .boardLink { position: relative; width: 270px; height: 150px; margin: 13px 0 0 13px; background: #f8f2ea url("../../images/workRoad/main/img_books.png") no-repeat 12px 38px; }
.workRoad .serviceArea .boardLink strong { font-weight: normal; font-family: 'Nanum Square Bold'; font-size: 20px; display: block; color: #222; }
.workRoad .serviceArea .boardLink span { display: block; margin-top: 6px; font-size: 13px; color: #333; }
.workRoad .serviceArea .boardLink a { display: block; height: 150px; padding: 40px 0 0 100px; }
.workRoad .serviceArea .boardLink:after { content: ""; display: block; position: absolute; bottom: 18px; right: 18px; width: 51px; height: 12px; background: url("../../images/workRoad/main/bg_service_enter.png") no-repeat; }
.workRoad .listArea { background: #f3f5f7; padding: 30px 0; }
.workRoad .listArea .inner { overflow: hidden; }
.workRoad .listArea .inner > ul { margin: -19px 0 0 -24px; }
.workRoad .listArea .inner > ul > li { position: relative; float: left; width: 312px; height: 154px; background: #fff; margin: 19px 0 0 24px; padding: 25px 16px 16px; }
.workRoad .listArea .inner > ul > li > strong { display: block; margin-bottom: 16px; font-weight: normal; font-family: 'Nanum Square Bold'; color: #222222; font-size: 19px; text-indent: 5px; }
.workRoad .listArea li li { margin-top: 11px; }
.workRoad .listArea li li:first-child { margin-top: 0; }
.workRoad .listArea li li:before { content: "·"; display: inline-block; margin-right: 3px; }
.workRoad .listArea li li a { display: inline-block; width: 265px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workRoad .listArea li li a:hover { color: #3680c7; text-decoration: underline; }
.workRoad .listArea li li span { color: #a5a5a5; font-size: 13px; }
.workRoad .listArea .imgArticle { border: 1px solid #f1f2f4; box-sizing: border-box; background: #f1f2f4; }
.workRoad .listArea .imgArticle > div { position: relative; float: left; width: 130px; height: 74px; padding: 25px 15px 15px; }
.workRoad .listArea .imgArticle > div:first-child { width: 150px; padding: 0; }
.workRoad .listArea .imgArticle strong,
.workRoad .listArea .imgArticle span { display: block; }
.workRoad .listArea .imgArticle strong { display: block; height: 57px; font-size: 17px; color: #555555; font-family: 'Nanum Square Bold'; }
.workRoad .listArea .imgArticle span { position: absolute; bottom: 15px; left: 15px; font-size: 13px; color: #a6a6a6; }
.workRoad .listArea .sgs { padding-top: 7px; }
.workRoad .listArea .sgs li { position: relative; float: left; background: url("../../images/workRoad/main/img_gear.png") no-repeat center 0; font-family: 'Nanum Square Bold'; color: #777; font-size: 17px; text-align: center; width: 156px; margin: 0; }
.workRoad .listArea .sgs li:first-child { background: url("../../images/workRoad/main/img_thinking.png") no-repeat center 0; }
.workRoad .listArea .sgs li:before { content: ""; position: absolute; top: 10px; left: 0; width: 1px; height: 110px; background: #e3e6ea; }
.workRoad .listArea .sgs li:first-child:before { display: none; }
.workRoad .listArea .sgs a { display: block; width: 100%; height: 100%; padding-top: 110px; color: #222222; }
.workRoad .listArea .sgs a:hover { color: #222222; text-decoration: none; }
.workRoad .listArea .btn_more { position: absolute; top: 28px; right: 25px; width: 14px; height: 14px; background: url("../../images/workRoad/main/btn_more.png") no-repeat; }