@charset "utf-8";

.s_pg {font-size:16px; font-family:sans-serif;}

.s_pg>hgroup {position:relative; background:#e9ecf3; height:92px;}
.s_pg>hgroup>p {position:absolute; left:0; width:100%; background-image:url('../img/program/bg_h1.gif'); background-repeat:repeat-x; margin:0;}
.s_pg>hgroup>p.t {height:24px; background-position:0 0; top:0;}
.s_pg>hgroup>p.b {height:14px; background-position:0 -46px; bottom:0;}
.s_pg>hgroup h1 {margin:0; position:absolute; left:24px; top:52px; margin-top:-25px;}
.s_pg>hgroup .loc {display:block; position:relative; text-align:right; color:#444; padding:35px 20px 0 180px; font-size:.75em;}


.s_pg .stit {margin:.5em 0 .5em;}
.s_pg .stit span {vertical-align:middle; font-size:12px;}
.s_pg .stit img {vertical-align:middle;}


.s_pg .ui-pagenate {text-align:center; margin:1em 0;}
.s_pg .ui-pagenate a,
.s_pg .ui-pagenate strong {
	display:inline-block; padding:.25em .8em;
	font-size:14px; font-family:arial, sans-serif; color:#444;
}
.s_pg .ui-pagenate a {border:1px solid #ccc;}
.s_pg .ui-pagenate .prev,
.s_pg .ui-pagenate .next {border:1px solid #ddd;}


.s_pg .searchFrom {margin:1em 0; text-align:center;}


/* list 1 */
.s_pg .lst1>ul {display:table; width:100%; margin:0; padding:0; list-style:none;}
.s_pg .lst1>ul li {display:table-cell; vertical-align:middle; text-align:center;}

.s_pg .lst1.hd {background:#5e687c; border-radius:4px; padding:.65em 0 .55em;}
.s_pg .lst1.hd li {text-align:center; color:white; font-weight:bold; font-size:.75em;}
.s_pg .lst1.bd ul {margin:0; padding:1.5em 0; border-bottom:1px solid #e4e4e4;}
.s_pg .lst1.bd ul li {border-right:1px solid #e5e5e5;}
.s_pg .lst1.bd ul li.last {border-right:none;}

.s_pg .lst1.bd .device p {display:block; width:60px; height:40px; margin:0 auto; background:url('../img/program/ico_device1.png') 0 0 no-repeat;}
.s_pg .lst1.bd .device p.m {background-position:-60px 0;}
.s_pg .lst1.bd .device p.pcm {background-position:-120px 0px;}
.s_pg .lst1.bd .device span {color:#000;}


/* list 2 */
.s_pg .lst2 {margin:0; padding:0; list-style:none;}
.s_pg .lst2:after {content:''; display:block; clear:both;}
.s_pg .lst2 li {float:left; width:33.3%;}
.s_pg .lst2 li>div {margin:0 1em 1em;}


/* bottom banner */
.s_pg .bnr {text-align:center; margin:2.5em 0 1.5em;}


/* 솔루션 개발 */
.s_pg1 .lst1>ul .col2 {width:15%; min-width:80px; font-size:.75em;}
.s_pg1 .lst1>ul .col3 {width:20%; min-width:160px;}

.s_pg1 .lst1.bd .col1 {text-align:left;}
.s_pg1 .lst1.bd dl {margin:0 .8em;}
.s_pg1 .lst1.bd dl dt {float:left; width:120px; text-align:center;}
.s_pg1 .lst1.bd dl dd {margin-left:130px;}
.s_pg1 .lst1.bd dl dd strong {display:block;}
.s_pg1 .lst1.bd dl dd strong img,
.s_pg1 .lst1.bd dl dd strong span {vertical-align:middle;}
.s_pg1 .lst1.bd dl dd strong span {font-size:14px; color:#333;}
.s_pg1 .lst1.bd dl dd .inf {margin:.3em 0 1em; padding-left:1.5em; color:#666; font-size:.75em;}
.s_pg1 .lst1.bd dl dd b {display:block; color:#6b8ec1; margin-bottom:.3em;}

.s_pg1 .lst1.bd .col3 p {margin:.2em 0;}
.s_pg1 .lst1.bd .col3 .code img {border:1px solid #ccc;}


/* 웹프로그램 개발 */
.s_pg2 .btns {margin:0 0 2em 0; padding:0; list-style:none;}
.s_pg2 .btns:after {content:''; display:block; clear:both;}
.s_pg2 .btns li {float:left; display:block; margin:0 -1px -1px 0;}
.s_pg2 .btns li a {
	display:block; width:79px; height:78px; text-indent:-9999px;
	background:url('../img/program/ico_pg1.gif') 0 0 no-repeat;
	border:1px solid #dedee0;
}
.s_pg2 .btns .b1 a {background-position:0 0;}
.s_pg2 .btns .b2 a {background-position:-80px 0;}
.s_pg2 .btns .b3 a {background-position:-160px 0;}
.s_pg2 .btns .b4 a {background-position:-240px 0;}
.s_pg2 .btns .b5 a {background-position:-320px 0;}
.s_pg2 .btns .b6 a {background-position:-400px 0;}
.s_pg2 .btns .b7 a {background-position:-480px 0;}
.s_pg2 .btns .b8 a {background-position:-560px 0;}
.s_pg2 .btns .b9 a {background-position:-640px 0;}
.s_pg2 .btns .b10 a {background-position:-720px 0;}
.s_pg2 .btns .b11 a {background-position:0 -79px;}
.s_pg2 .btns .b12 a {background-position:-80px -79px;}
.s_pg2 .btns .b13 a {background-position:-160px -79px;}
.s_pg2 .btns .b14 a {background-position:-240px -79px;}
.s_pg2 .btns .b15 a {background-position:-320px -79px;}
.s_pg2 .btns .b16 a {background-position:-400px -79px;}
.s_pg2 .btns .b17 a {background-position:-480px -79px;}
.s_pg2 .btns .b18 a {background-position:-560px -79px;}
.s_pg2 .btns .b19 a {background-position:-640px -79px;}
.s_pg2 .btns .b20 a {background-position:-720px -79px;}
.s_pg2 .btns .b21 a {background-position:0 -158px;}
.s_pg2 .btns .b22 a {background-position:-80px -158px;}
.s_pg2 .btns .b23 a {background-position:-160px -158px;}
.s_pg2 .btns .b24 a {background-position:-240px -158px;}
.s_pg2 .btns .b25 a {background-position:-320px -158px;}

.s_pg2 .btns .b1 a:hover {background-position:0 -237px;}
.s_pg2 .btns .b2 a:hover {background-position:-80px -237px;}
.s_pg2 .btns .b3 a:hover {background-position:-160px -237px;}
.s_pg2 .btns .b4 a:hover {background-position:-240px -237px;}
.s_pg2 .btns .b5 a:hover {background-position:-320px -237px;}
.s_pg2 .btns .b6 a:hover {background-position:-400px -237px;}
.s_pg2 .btns .b7 a:hover {background-position:-480px -237px;}
.s_pg2 .btns .b8 a:hover {background-position:-560px -237px;}
.s_pg2 .btns .b9 a:hover {background-position:-640px -237px;}
.s_pg2 .btns .b10 a:hover {background-position:-720px -237px;}
.s_pg2 .btns .b11 a:hover {background-position:0 -316px}
.s_pg2 .btns .b12 a:hover {background-position:-80px -316px;}
.s_pg2 .btns .b13 a:hover {background-position:-160px -316px;}
.s_pg2 .btns .b14 a:hover {background-position:-240px -316px;}
.s_pg2 .btns .b15 a:hover {background-position:-320px -316px;}
.s_pg2 .btns .b16 a:hover {background-position:-400px -316px;}
.s_pg2 .btns .b17 a:hover {background-position:-480px -316px;}
.s_pg2 .btns .b18 a:hover {background-position:-560px -316px;}
.s_pg2 .btns .b19 a:hover {background-position:-640px -316px;}
.s_pg2 .btns .b20 a:hover {background-position:-720px -316px;}
.s_pg2 .btns .b21 a:hover {background-position:0 -395px;}
.s_pg2 .btns .b22 a:hover {background-position:-80px -395px;}
.s_pg2 .btns .b23 a:hover {background-position:-160px -395px;}
.s_pg2 .btns .b24 a:hover {background-position:-240px -395px;}
.s_pg2 .btns .b25 a:hover {background-position:-320px -395px;}

.s_pg2 .ico-rate {
	display:inline-block; margin:0; width:56px; height:36px; text-indent:-9999px;
	background:url('../img/program/ico_rate1.png') 0 0 no-repeat;
}
.s_pg2 .ico-rate.s1 {background-position:0 0;}
.s_pg2 .ico-rate.s2 {background-position:0 -36px;}
.s_pg2 .ico-rate.s3 {background-position:0 -72px;}
.s_pg2 .ico-rate.s4 {background-position:0 -108px;}
.s_pg2 .ico-rate.s5 {background-position:0 -144px;}

.s_pg2 .lst1>ul .col1 {}
.s_pg2 .lst1>ul .col2 {width:15%; min-width:80px;}
.s_pg2 .lst1>ul .col3 {width:15%; min-width:80px;}
.s_pg2 .lst1>ul .col4 {width:20%; min-width:160px;}

.s_pg2 .lst1.bd p {margin:0;}
.s_pg2 .lst1.bd .col1 {text-align:left;}
.s_pg2 .lst1.bd .col1 .cn {padding:0 .5em;}
.s_pg2 .lst1.bd .col1 strong {display:block;}
.s_pg2 .lst1.bd .col1 strong img,
.s_pg2 .lst1.bd .col1 strong span {vertical-align:middle;}
.s_pg2 .lst1.bd .col1 strong span {font-size:14px; color:#333;}
.s_pg2 .lst1.bd .col1 .inf {font-size:.75em; margin:.5em 0; padding-left:1.5em;}
.s_pg2 .lst1.bd .col2 {font-size:.75em;}
.s_pg2 .lst1.bd .col4 p {margin:.5em 0;}


/* 관리프로그램 개발 */
.s_pg3 .lst2 {min-width:520px;}
.s_pg3 .lst2 li>div {border:1px solid #d7d7d7; text-align:center;}
.s_pg3 .lst2 strong {display:block; padding:1em 0 .5em; font-size:1em; color:#35353e;}
.s_pg3 .lst2 figure {margin:0;}
.s_pg3 .lst2 figure img {display:block; margin:0 auto;}
.s_pg3 .lst2 p {margin:0;}
.s_pg3 .lst2 .rate {margin:.5em 0 1em; font-size:.75em; color:#000;}
.s_pg3 .lst2 .rate span {vertical-align:middle;}
.s_pg3 .lst2 .rate .txt {color:#2f7ee7; font-weight:bold;}
.s_pg3 .lst2 .rate .ico-rate {
	display:inline-block; width:96px; height:16px; overflow:hidden; text-indent:-9999px; margin:-4px 0 0;
	background:url('../img/program/ico_rate2.png') 0 0 no-repeat;
}
.s_pg3 .lst2 .rate .ico-rate.s1 {background-position:0 0;}
.s_pg3 .lst2 .rate .ico-rate.s2 {background-position:0 -16px;}
.s_pg3 .lst2 .rate .ico-rate.s3 {background-position:0 -32px;}
.s_pg3 .lst2 .rate .ico-rate.s4 {background-position:0 -48px;}
.s_pg3 .lst2 .rate .ico-rate.s5 {background-position:0 -64px;}
.s_pg3 .lst2 .btn {background:#e8e8e8; padding:.5em 0;}
.s_pg3 .lst2 .btn img {display:block; margin:0 auto;}