/* author: penguinman (contact@penguinsoft.co.kr) date created: 2010/02/25 license: Creative Commons 2.5 누구나 본 컨텐츠를 사용할수 있습니다. 다만, 본 저작권 표시는 유지되어야 합니다. 저작권: 펭귄소프트(주) http://SmartHomepage.co.kr encoding: utf-8 */ /* #131B5A dark blue, #4B5F91 light dark blue, #595959 light black, #000 black */ /* import reset and default*/ @import url("reset.css"); body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{font-size:12px;line-height:18px;font-family: Dotum,Dotumche, "돋움", "돋움체",AppleGothic;color:#717070;letter-spacing: 0.015em; margin:0px;padding:0px;} .floatleft { float: left; margin:0 10px 0 0 } .floatright { float: right; margin:0 0 0 10px } .layoutcenter { margin: 0 auto } .textcenter { text-align: center } .textright { text-align: right; } .textleft { text-align: left } .hide { display: none; } .show { display: block; } .invisible { visibility: hidden } .class150 {padding:0 0 0 150px} .class180 {padding:0 0 0 180px} .class230 {padding:0 0 0 230px} .br40 {padding:20px 0; clear:both} .line {background:#ffffff;margin:20px 0; border-bottom:1px solid #ccc; clear:both} .h-line {margin:20px 0; border-bottom:1px solid #ccc; clear:both} .box43p {width:43%; padding:7px; border:1px solid #ccc} .tab{display:inline;} .class-wid01 {width:395px;} .class-wid02 {width:110px;} .body pop{ background:#ffffff;} /* Form Style */ input,select,textarea{font:12px ,dotum,AppleGothic;color:#717070;vertical-align:middle;} /* Link Style */ /* Common Use Style */ .font_red {color:#ff0000} .pad_t_10 {padding-top:10px} .mar_t_10 {margin-top:10px} * Global Layout& Design =============================*/ /* STEP1 check global color */ /*body {color:#595959; font:normal 0.75em/1.4em dotum, 돋움, AppleGothic, Helvetica, Arial, sans-serif}*/ h1,h2,h3,h4,h5,h6 {color:#000; font-size:90%} a, a:visited { text-decoration: none; color:#666666 } a:hover, a:active {color:#131B5A } /* STEP2 check main layout --------------------------*/ #quick { position:absolute; top:50px; left:0px; float:right; clear:both; } /* #center2 {float:right; width:700px; min-height:350px; margin:0 0 30px 0; padding:10px 25px 0 25px; border:1px solid #ffffff;} #center {float:right; width:670px; min-height:350px;height:auto!important; margin:0 20px 30px 5px; padding:10px 25px 0 25px; border:1px solid #ccc;} */ /*메인페이지*/ #main {float:right; width:980px; min-height:470px;height:470px!important; padding:10px 0 0 0; padding:0; border:0; } /* #main {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://220.124.29.166/web/images/main-bg.png',sizinMethod='scale'); } */ #main-new {float:right; width:980px; min-height:530px;height:530px!important; padding:10px 0 10px 0; border:0; } .main{ font-size:11px;text-decoration: none; color:#666666 } .main a, .main a:visited { font-size:11px;text-decoration: none; color:#666666 } .main a:hover, .main a:active {font-size:11px;color:#3a4a5c } /* 전체 내용영역 * float:left, float:right */ #container {width:980px; position: relative; margin:0 auto } /* 전체 내용영역 * float:left, float:right */ #north-n {float:right; width:250px; height:22px;color:#333333 } /* 로그인, 사이트맵등 위치 */ #north-n ul{padding-top:3px;} #north-n li{font-size:11px;display:inline;padding:0 0 0 20px; background:url(../template/btn-next.gif) no-repeat left center;} /* 로고 위치 */ h1#north-w {padding:0; margin:0; border:0 } #north-w {float:left; width:200px; height:50px; padding:5px 0 0 0; text-align:center } /* 로고 위치 */ #north-e {float:right; width:780px; height:60px; margin:0;} /* 메뉴탑 위치 */ #north-s {height:235px; height:235px;padding:2px 0 0!important; text-align:right; clear:both; z-index:1;} #north-s-main {height:0px; height:235px;!important;padding:2px 0 0 text-align:right; clear:both; z-index:2;} #west {float:left; width:197px; margin:-180px 0 0 0;} /*#center {float:left; width:720px; min-height:350px; padding:15px 20px 0 35px; border:1px solid #ccc; border-right:2px solid #ccc; border-bottom:2px solid #ccc}*/ #center-top {float:left; width:740px; min-height:40px; padding:0 0 0 35px; border:0} #center-top .on{font-weight:bold; } #center-top .p{min-height:50px;height:50px!important;} #center-top span{padding-right:10px;} /* sub01 title */ #center-top .title1-1 {min-height:26px; height:26px!important; background:url(../images/title/company-intro.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title1-2 {min-height:26px; height:26px!important; background:url(../images/title/company-philosophy.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title1-3 {min-height:26px; height:26px!important; background:url(../images/title/company-history.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title1-4 {min-height:26px; height:26px!important; background:url(../images/title/company-corebusiness.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title1-5 {min-height:26px; height:26px!important; background:url(../images/title/company-ci.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title1-6 {min-height:26px; height:26px!important; background:url(../images/title/company-location.jpg) no-repeat left bottom; text-align:right; font-size:11px;} /* sub02 title */ #center-top .title2-1 {min-height:26px; height:26px!important; background:url(../images/title/business-info-did.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title2-2 {min-height:26px; height:26px!important; background:url(../images/title/business-info-ddip.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title2-3 {min-height:26px; height:26px!important; background:url(../images/title/business-info-hdd.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title2-4 {min-height:26px; height:26px!important; background:url(../images/title/business-info-trans-coil.jpg) no-repeat left bottom; text-align:right; font-size:11px;} /* sub03 title */ #center-top .title3-1 {min-height:26px; height:26px!important; background:url(../images/title/ir-disclosure.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title3-2 {min-height:26px; height:26px!important; background:url(../images/title/ir-stockInfo.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title3-3 {min-height:26px; height:26px!important; background:url(../images/title/ir-financial.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title3-4 {min-height:26px; height:26px!important; background:url(../images/title/ir-contact.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title3-5 {min-height:26px; height:26px!important; background:url(../images/title/ir-data.jpg) no-repeat left bottom; text-align:right; font-size:11px;} /* sub04 title */ #center-top .title4-1 {min-height:26px; height:26px!important; background:url(../images/title/pr-notice.jpg) no-repeat left bottom; text-align:right; font-size:11px;} #center-top .title4-2 {min-height:26px; height:26px!important; background:url(../images/title/pr-press.jpg) no-repeat left bottom; text-align:right; font-size:11px} #center-top .title4-3 {min-height:26px; height:26px!important; background:url(../images/title/pr-customer.jpg) no-repeat left bottom; text-align:right; font-size:11px} /* sub05 title */ #center-top .title5-1 {min-height:26px; height:26px!important; background:url(../images/title/recruit-personnel-system.jpg) no-repeat left; text-align:right; font-size:11px} #center-top .title5-3 {min-height:26px; height:26px!important; background:url(../images/title/recruit-welfare.jpg) no-repeat left; text-align:right; font-size:11px} #center-top .title5-4 {min-height:26px; height:26px!important; background:url(../images/title/recruit-recruit.jpg) no-repeat left; text-align:right; font-size:11px} #center-top .title6-1 {min-height:26px; height:26px!important; background:url(../images/title/sitemap.jpg) no-repeat left; text-align:right; font-size:11px} #center .tit{color:#7faa3c; font-weight:bold; margin-bottom:10px; padding:10px 0 10px 30px; background:url(../images/ico-history01.gif) no-repeat; background-position: 10px 10px;font-size:11px; vertical-align: middle;border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center .img{ margin-bottom:15px; padding:0; text-align:center;} #center2 .img{ margin-bottom:15px; padding:0; text-align:center;} #center2 .tit{color:#7faa3c; font-weight:bold; margin-bottom:10px; padding:10px 0 10px 30px; background:url(../images/ico-history01.gif) no-repeat; background-position: 10px 10px;font-size:11px; vertical-align: middle;border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center2 .tit2{color:#44448d; font-weight:bold; margin-bottom:10px; padding:5px 0 5px 20px; font-size:11px; background-color:#EFEFEF } #center2 .tit3{color:#6699cc; font-weight:bold; margin-bottom:5px; padding:10px 0 10px 20px; background:url(../images/ico-products.gif) no-repeat; background-position: 7px 13px;font-size:11px; vertical-align: middle;border:1px; border-bottom-style: solid;border-top-style: solid; border-color: #CCCCCC; background-color:#f7f7f7;} #center2 .tit4{color:#908660; font-weight:bold; padding:5px 0 5px 25px; background:url(../images/ico-recruit.gif) no-repeat; background-position: 10px 7px;font-size:11px; vertical-align: middle;border:1px; border-bottom-style: dotted;border-top-style: dotted; border-color: #CCCCCC; background-color:#f7f7f7;} #center2 .tit5{color:#908660; font-weight:bold; padding:5px 0 5px 35px; background:url(../images/ico-recruit.gif) no-repeat; background-position: 15px 7px;font-size:11px; vertical-align: middle;border:1px; border-bottom-style: dotted;border-color: #CCCCCC; background-color:#f7f7f7;} #center2 .trans{min-height:50px; height:50px!important; padding:15px 15px ; background:url(../template/br-trans.gif) no-repeat;} #center li{ margin-bottom:5px; padding:5px 0 5px 20px; vertical-align: middle;} td#center2{padding:10px 0} #center2 {float:right; width:700px; min-height:350px; margin:0 0 30px 0; padding:10px 25px 0 25px; border:0;} #center {float:right; width:670px; min-height:350px;height:auto!important; margin:0 20px 30px 5px; padding:10px 25px 0 25px; border:1px solid #ccc;} #center-ir {float:right; width:705px; min-height:300px; margin:0 0 20px 0; padding:10px 25px 0 15px; border:1px solid #ffffff;} #box {float:left; width:650px; min-height:50px; margin:0 0 10px 0; padding:10px 20px 10px 17px; border:1px solid #ccc; background-color:#ffffff } #box-pop {float:left; width:650px; min-height:50px; margin:0 0 10px 0; padding:10px 20px 10px 17px; border:1px solid #ccc; background-color:#ffffff } .box {float:right; width:100%; min-height:350px; padding:10px 25px 0 25px; border:1px solid #ccc;} #box li{padding:7px 10px; line-height: 115%;} .boxline td{border:1px solid #ccc; text-align:center; margin:10px 0; padding:10px 5px; } .boxline2 td{border:1px solid #ccc; margin:10px 0; padding:10px 15px; } .pop{width:650px;min-height:43px; height:33px!important;background:url(../template/product-bg.gif) no-repeat left bottom;} .product{ font-size:130%;font-weight:bold; color:#669933; padding:0 0 13px 20px;} .product2{font-size:130%;font-weight:bold;color:#999933; border-bottom:1px dotted #ccc;} .product3{min-height:43px; height:43px!important;background:url(../template/product-bg.gif) no-repeat left bottom;} .product3-t{min-height:26px; height:26px!important;font-size:120%; font-weight:bold; padding:17px 0 0 20px; } /*sub01 intro*/ #center2 .intro {min-height:40px; height:40px!important; padding-top:10px; font-size:14px; font-weight:bold; color:#988675} #center2 .stext {font-size:12px;} /*sub01 주요연혁*/ ul#historytab01 li{ color:#CC9900} ul#history01 li{ color:#7faa3c} .tab#center2{border-bottom:1px solid #ccc;} table .history01 td{color:#7faa3c; font-weight:bold; padding:15px 0 15px 30px; background:url(../images/ico-history01.gif) no-repeat; background-position: 15px 15px; font-size:11px; vertical-align: middle;border:1px; border-bottom-style: solid; border-color: #CCCCCC;} table .history02 td{color:#3eb27e; font-weight:bold; padding:15px 0 15px 30px; background:url(../images/ico-history02.gif) no-repeat; background-position: 15px 15px; font-size:11px; vertical-align: middle;border:1px; border-bottom-style: solid; border-color: #CCCCCC;} table .history03 td{color:#1888ca; font-weight:bold; padding:15px 0 15px 30px; background:url(../images/ico-history03.gif) no-repeat; background-position: 15px 15px; font-size:11px; vertical-align: middle;border:1px; border-bottom-style: solid; border-color: #CCCCCC;} table .history01 span{color:#000; font-weight:lighter; margin-left:10px} table .history02 span{color:#000; font-weight:lighter; margin-left:10px} table .history03 span{color:#000; font-weight:lighter; margin-left:10px} .line{padding:7px 0 ; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} /*subMenu부분*/ ul#menuside {font:12px; margin:0 0 10px 0; padding:0; list-style: none; background:url(../template/bg-menuside.jpg) no-repeat bottom} /*win8 폰트가 안먹어서 굳이 다시 넣어줌*/ ul#menuside li{font-size:12px;font-family: Dotum, "돋움", "돋움체"; width:197px;line-height:29px;} ul#menuside li a {padding: 0 0 0 33px; display:block; text-decoration: none; color:#000;background:url(../template/bg-menuside-default.jpg) no-repeat left center;} ul#menuside li a:hover, ul#menuside li.active a {padding: 0 0 0 33px; display:block; color:#4d905b; font-weight:bolder; text-decoration: none ; background:url(../ template/bg-menuside-hover.jpg) no-repeat left center;} /* 전체너비 0000으로 서쪽과 중앙사이 00 마진 존재함*/ #center-s {height:188px; padding:9px 0 0!important; clear:both } #center2 .title{width:700px; height:29px; background-image: url(../template/borad-top.jpg);background-repeat: no-repeat; background-position: top center; text-align:center} #center2 .title td{font-size:11px; font-weight:bold;} #center2 .board-tit{padding:13px 0 13px 25px; background-image: url(../template/borad-ico.jpg);background-repeat: no-repeat; background-position: 5px center; border:1px; border-bottom-style: solid; border-color: #CCCCCC; background-color:#ffffff} #center2 .board-date{padding:8px 0 9px 0;color:#000; font-size:90%; border:1px; border-bottom-style: solid; border-color: #CCCCCC;background-color:#ffffff} #center2 .board-hit{padding:8px 0 9px 0;color:#999933; font-size:90%; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center2 .board-id{padding:8px 0 9px 0;color:#cc9933; font-size:90%; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center2 .board-view{padding:15px 25px; background-color:#efefef; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center2 .board-page{padding:20px 0 20px 25px; display:inline} #center2 .board-search {height:38px; margin-top:10px; background-image: url(../template/bg-search.gif);background-repeat: no-repeat;} #center2 .board-list{padding:10px 10px; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center2 .line{padding:7px 0 7px 25px; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} #center2 .line2{padding:7px 0 7px 0; border:1px; border-bottom-style: solid; border-color: #CCCCCC;} .align-c{ text-align:center} .align-r{ text-align:right} .box#center2 {width:700px;} #south {width:970px; margin:0 auto; border-top:1px solid #dddcdc; clear:both} /* 남쪽 영역 */ #south-w, #south-c, #south-e {float:left; min-height:80px; padding-left:20px} #south-w {width:50px} /* 남쪽 서쪽 로고 부분 */ #south-c {width:650px;} /* 남쪽 중앙 부분 */ /* STEP3 Check background images --------------------------*/ body {background:#ffffff url(../template/bg-body.jpg) repeat-x top} #container {background:url(../template/bg-container.jpg) no-repeat top center} #north-e {background:url(../template/north-e.jpg) no-repeat top center} /* Contents Details =============================*/ /* STEP4 north --------------------------*/ ul#linktop a{font:normal 0.65em/1.4em;} ul#linktop {float:right; padding:0; list-style:none; color:#000} ul#linktop li {float:left; padding:0 3px; border-right:1px solid #ccc} .fontsizesesizer a {font:normal 0.75em/1.4em; float:right; padding:0 5px; font-family:Helvetica, Arial; font-weight:bolder; border-left:1px solid #ccc } .search-form {float:right } .search-form input.txtbox {float:left; width:100px; height:20px; border:1px solid #ccc; background:#eee } .search-form input.searchbutton {float:left } /* north-n */ ul#menutop {display:block; text-indent:-10000px;list-style:none; font-weight:bolder; textdecoration:none; text-align:right } ul#menutop li {float:left; margin:0 7px; padding:0 0 0 20px; line-height:30px;} ul#menutop li a { text-decoration:none; color:#FFFFFF; cursor:pointer;} ul#menutop li a:hover, ul#menutop li.active a { color:#175D98; cursor:pointer; background:url(/template/bg-menutop-hover.jpg) no-repeat } /*Drop Down Menu Styles*/ ul#ddmenu {width:580px; height:60px;} ul#ddmenu li{float:left;list-style:none; font-size:13px } ul#ddmenu li a{background:url(/template/top-dotted.gif) right no-repeat;display:block;padding:7px 17px;text-decoration:none;width:60px;color:#fff;text-transform:uppercase;white-space:nowrap;text-align:center;} ul#ddmenu li a:hover, ul#ddmenu li.active a {url(../template/top-dotted.gif) right no-repeat; font-weight:bolder} /* 2nd level */ ul#ddmenu li ul{width:430px;margin-left:-20px;padding:0;position:absolute;visibility:hidden;} ul#ddmenu li ul li{display:inline;} ul#ddmenu li ul li a{width:auto;background:url(../template/ddmenu.gif) right no-repeat;display:block;color:#003300;font-size:11px; font-weight:bold; padding:8px 7px;} ul#ddmenu li ul li a:hover {color:#379c70;background:#fff url(../template/ddmenu.gif) right no-repeat;padding:8px 7px; font-weight:bold} ul#ddmenu li ul li.clicked a {color:#379c70;background:#fff url(../template/ddmenu.gif) right no-repeat;padding:8px 7px; font-weight:bold } /* STEP5 west --------------------------*/ h3#menusidetitle01 {height:109px; text-indent:-10000px; font-size:1.1em; background:url(../template/bg-menusidetitle01.gif) no-repeat } h3#menusidetitle02 {height:109px; text-indent:-10000px; font-size:1.1em; background:url(../template/bg-menusidetitle02.gif) no-repeat } h3#menusidetitle03 {height:109px; text-indent:-10000px; font-size:1.1em; background:url(../template/bg-menusidetitle03.gif) no-repeat } h3#menusidetitle04 {height:109px; text-indent:-10000px; font-size:1.1em; background:url(../template/bg-menusidetitle04.gif) no-repeat } h3#menusidetitle05 {height:109px; text-indent:-10000px; font-size:1.1em; background:url(../template/bg-menusidetitle05.gif) no-repeat } h3#menusidetitle06 {height:109px; text-indent:-10000px; font-size:1.1em; background:url(../template/bg-menusidetitle06.gif) no-repeat } ul#menuside {font:12px; margin:0 0 20px 0; padding:0; list-style: none; background:url(../template/bg-menuside.jpg) no-repeat bottom} ul#menuside li{width:197px; line-height:29px;} ul#menuside li a {padding: 0 0 0 33px; display:block; text-decoration: none; color:#000;background:url(../template/bg-menuside-default.jpg) no-repeat left center;} ul#menuside li a:hover, ul#menuside li.active a {padding: 0 0 0 33px; display:block; color:#4d905b; font-weight:bolder; text-decoration: none ; background:url(../ template/bg-menuside-hover.jpg) no-repeat left center;} img.banner {border:1px solid #ccc } p.box {padding:5px; font-size:0.80em; background:#eee; border:1px solid #ccc} p.box2 {margin:20px 0; padding:5px; font-size:0.80em; background:#ffffff; border:1px solid #ccc} p.center{ text-align:center} /* STEP6 center --------------------------*/ /* plugin */ /* STEP7 south --------------------------*/ #south-c p {padding:0 0 0 4px; clear:both} ul#southlink { width:680px; margin:0 0 50px 0; padding:0; } ul#southlink li {float:right; padding:10px 6px; border-right:1px solid #ffffff ; liststyle:none; font-size:11px;} /* south-w */ #south-w img{float:left;padding:10px;} /*Calendar*/ #CalendarControlIFrame { display: none; left: 0px; position: absolute; top: 0px; height: 250px; width: 250px; z-index: 99; } #CalendarControl { position:absolute; background-color:#FFF; margin:0; padding:0; display:none; z-index: 100; } #CalendarControl table { font-family: verdana; font-size: 11px; letter-spacing:-1px; border-left: 1px solid #003399; border-right: 1px solid #003399; } #CalendarControl th { font-weight: normal; } #CalendarControl th a { font-weight: normal; text-decoration: none; color: #FFF; padding: 1px; } #CalendarControl td { text-align: center; } #CalendarControl .header { background-color: #003399; } #CalendarControl .weekday { background-color: #DDD; color: #000; } #CalendarControl .weekend { background-color: #8CAAE6; color: #000; } #CalendarControl .current { border: 1px solid #003399; background-color: #003399; color: #FFF; } #CalendarControl .weekday, #CalendarControl .weekend, #CalendarControl .current { display: block; text-decoration: none; border: 1px solid #FFF; width: 2em; } #CalendarControl .weekday:hover, #CalendarControl .weekend:hover, #CalendarControl .current:hover { color: #FFF; background-color: #003399; border: 1px solid #999; } #CalendarControl .previous { text-align: left; } #CalendarControl .next { text-align: right; } #CalendarControl .previous, #CalendarControl .next { padding: 1px 3px 1px 3px; font-size: 1.4em; } #CalendarControl .previous a, #CalendarControl .next a { color: #FFF; text-decoration: none; font-weight: bold; } #CalendarControl .title { text-align: center; font-weight: bold; color: #FFF; } #CalendarControl .empty { background-color: #CCC; border: 1px solid #FFF; }