/*============================================================================== / created by: Kang, Mun Bok (mb@hostsmb.com, www.penguinsoft.co.kr) / optimized for : dezignercms.com, easy and professional content management / date modified : 2008/05/16 / date: 2008/08/25 / license : Creative Commons Attribution 2.5 License. / credits: many ideas borrowed from www.styleshout.com and www.solucija.com www.dynamicdrive.com and other sources ==============================================================================*/ /** ------------------------------------------------------------------------- 포스트잇 등 배경이미지, 모든 공통항목의 css @가져오기경우 항상 최상위에 위치하여야 함. -----------------------------------------------------------------------------*/ @import url(http://client.dezignercms.com/designer/css/common.css); /** -------------------------------------------------------------------------- body & container 몸뚱아리 및 공통영역 부분 시작position:fixed;hdr_bg.jpg ------------------------------------------------------------------------------*/ @charset utf-8; /* css 파일을 utf8 인코딩으로 처리함 */ /* reset css 브라우저에서 지정하는 기본값을 원점으로 돌리기 */ *{ margin: 0; padding: 0}* body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td {margin: 0; padding: 0; border: 0; outline: none;font-family: '맑은 고딕', 돋움, Helvetica} body {margin:0; padding:0; font: 0.9em/1.5em "맑은 고딕", 돋움, Helvetica; background:transparent url(../images/body/hdr_bg.jpg) repeat-x; top center} .clear {clear: both} a {color:#000; text-decoration:underline} a:hover {color:#FF703E; text-decoration:none} h1.blue {font-size:1.2em; background:#0076A3; color:#fff;line-height:37px; text-align:center; border-bottom:3px solid #05506C} h1.green {margin:0 0 7px 0; font-size:1.2em; background:#A3D39C; color:#000; line-height:37px; text-align:center; border-bottom:3px solid #7CC576} h1.yellow {font-size:1.2em; background:#E5D707; color:#000; line-height:37px; text-align:center; border-bottom:3px solid #C3BA0B} h1.orange {margin:0 0 7px 0; font-size:1.2em; background:#F26522; color:#fff; line-height:37px; text-align:center; border-bottom:3px solid #CC4505} h1.black {margin:0 0 7px 0; font-size:1.2em; background:#000; color:#fff; line-height:37px; text-align:center; border-bottom:3px solid #C1C1C1} h1.whatwedo {display:none} .postit_04 {width:180px} .postit_04 h1 {width:180px; background:transparent url(../images/common/postit_04_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:50px} .postit_04 .content {width:160px; background:#778CAF; margin:0 0 30px 0; padding:5px 10px 10px 10px} .postit_06 {width:180px} .postit_06 h1 {width:180px; background:transparent url(../images/common/postit_06_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:50px} .postit_06 .content {width:160px; background:#A6D6EA; margin:0 0 30px 0; padding:5px 10px 10px 10px} /* clips related backgrounds */ .clip_01 {width:180px} .clip_01 h1 {width:180px; background:transparent url(../images/common/clip_01_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:80px} .clip_01 .content {width:160px; background:transparent url(../images/common/clip_01_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .clip_02 {width:180px} .clip_02 h1 {width:180px; background:transparent url(../images/common/clip_02_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:80px} .clip_02 .content {width:160px; background:transparent url(../images/common/clip_02_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .clip_03 {width:180px} .clip_03 h1 {width:180px; background:transparent url(../images/common/clip_03_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:80px} .clip_03 .content {width:160px; background:transparent url(../images/common/clip_03_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .clip_04 {width:180px} .clip_04 h1 {width:180px; background:transparent url(../images/common/clip_04_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:80px} .clip_04 .content {width:160px; background:transparent url(../images/common/clip_04_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .tape_01 {width:180px} .tape_01 h1 {width:180px; background:transparent url(../images/common/tape_01_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:51px} .tape_01 .content {width:160px; background:transparent url(../images/common/tape_01_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .tape_02 {width:180px} .tape_02 h1 {width:180px; background:transparent url(../images/common/tape_02_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:51px} .tape_02 .content {width:160px; background:transparent url(../images/common/tape_02_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .tape_03 {width:180px} .tape_03 h1 {width:180px; background:transparent url(../images/common/tape_03_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:51px} .tape_03 .content {width:160px; background:transparent url(../images/common/tape_03_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .tape_04 {width:180px} .tape_04 h1 {width:180px; background:transparent url(../images/common/tape_04_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:51px} .tape_04 .content {width:160px; background:transparent url(../images/common/tape_04_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .note_01 {width:180px} .note_01 h1 {width:180px; background:transparent url(../images/common/note_01_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:51px} .note_01 .content {width:160px; background:transparent url(../images/common/note_01_body.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .note_02 {width:180px} .note_02 h1 {width:180px; background:transparent url(../images/common/note_02_title.gif) no-repeat; font-size:1.3em; text-align:center; line-height:88px} .note_02 .content {width:160px; background:transparent url(../images/common/note_02_content.gif) repeat-y; margin:0 0 30px 0; padding:5px 10px 10px 10px} .note_02 .bottom {width:160px; height:68px; background:transparent url(../images/common/note_02_bottom.gif) no-repeat bottom center; margin:0 0 30px 0; padding:5px 10px 10px 10px} /** ------------------------------------------------------------------------- 전체 내용영역 부분 지정 - marging: 0 left, right, auto 사용가능함 -----------------------------------------------------------------------------*/ #container {width:960px; margin:0 auto; padding:0 10px; float:none} /** ------------------------------------------------------------------------- north 북쪽 영역 시작 -----------------------------------------------------------------------------*/ #north {margin:0 0 30px 0; padding:0; height:120px; float:none} #north3 {margin:30px 0 0; float:none; clear:both} #logo {margin:0 0 10px 0; float:left; border:0} #north3 .language {float:right} #north3 .quickcontact {float:right} #north h1.whatwedo {display:none} /* 아래는 북쪽 메뉴부분의 코드임 Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */ #menu ul {margin: 30px 0 0 0; height: 40px;list-style: none; clear:both} #menu li {float:left} #menu li a {float: left; display: block; color:#000; text-decoration: none; font-weight: bold;padding:0 0 0 16px; height: 40px;line-height: 40px;text-align: center;cursor: pointer} #menu li a b {float: left; display: block; padding: 0 24px 0 8px; /*Padding of menu items*/} #menu li.clicked a, #menu li a:hover { color: #fff; background: url(../images/north/menub_hover_left.gif) no-repeat; background-position: left; text-decoration:none} #menu li.clicked a b, #menu li a:hover b {color: #fff;background: url(../images/north/menub_hover_right.gif) no-repeat right top; text-decoration:none} /** ------------------------------------------------------------------------- west 서쪽 영역 시작 -----------------------------------------------------------------------------*/ #west {margin:22px 25px 0 0; padding:0; float:left; width: 180px; font-size: 1.0em} #west h1.blue {font-size:1.2em; background:#0076A3; color:#fff; height:37px; line-height:37px; text-align:center} #west h1.green {font-size:1.2em; background:#A3D39C; color:#000; height:37px; line-height:37px; text-align:center} #west p {color:#000; display:block; margin:0 0 10px 0} #west ul.smenu {float:left; width: 178px; margin:0 0 20px 0; padding:20px 0; list-style: none; text-decoration: none; border:1px solid #C4DF9B; background-color:#FBF8C0; filter:alpha(opacity=85); opacity:0.85} #west ul.smenu li {text-align:center; padding:3px 0 3px 3px; font-weight:bolder; line-height:42px} #west ul.smenu a {display:block; color:#000; background: none; text-decoration: none} #west ul.smenu a:hover {padding:0 0; background: transparent url(../images/west/smenu-hover-leaf.gif) right no-repeat ; font-weight:bolder; color:#fff} #west ul.smenu a.clicked {font-weight:bolder; background: transparent url(../images/west/smenu-hover-leaf.gif) right no-repeat ; color:#fff} #west p.contact {float:left; border:1px solid #eee; font-size:0.9em; display:block; width:160px; margin:0 0 5px 0; padding:5px 9px 20px; background:transparent url("../images/common/note-blue.gif") repeat-y} /** ------------------------------------------------------------------------- center 중앙 영역 시작 ------------------------------------------------------------------------------*/ #center { font-family:"맑은 고딕", 돋움, Arial; color:#000;width:960px; height: 280px;float:none; margin:50px 0 0px 0; overflow:hidden; filter:alpha(opacity=100); opacity:1} #main-video {width:260px;float:right; margin:0;display:inline} #main-video-start { height:270px; border:9px solid #000; background:#000} /* slide show by Gerard Ferrandez http://www.dhteumeuleu.com font-family:"맑은 고딕", 돋움, Arial; color:#000;*/ #main-gallery {font-family:"맑은 고딕", 돋움, Arial; color:#000;width:660px; float:left; margin:0;display:inline} #slider {position: absolute; width: 660px; height: 221px; overflow: hidden; background: #000; border: 9px solid #000} #slider .slide {position: absolute; height: 221px; width: 400px; background: #fff; overflow: hidden; border-left: #000 solid 2px; cursor: default; } #slider .title {color: #F80; font-weight: bold; font-size: 1.2em; margin-right: 1.0em; text-decoration: none; } #slider .backgroundText {position: absolute; width: 100%; height: 100%; top: 100%; background: #000; filter: alpha(opacity=50); opacity: 0.5;} #slider .text { position: absolute; top: 1%; top: 100%;color: #FFF; font-size: 1.0em; text-align: justify; width: 340px; left: 10px;} #slider .text a, #slider .text a:hover, #slider .text a:visited { color: #F26522} #slider .diapo { position: absolute; filter: alpha(opacity=100); opacity: 1; visibility: hidden; } #center h2, h3, h4, h5, h6 {font-family:"맑은 고딕", 돋움, Arial; color:#000; border-bottom: 1px solid #ffa44e; margin: 12px 0 5px 0; padding:0 0 3px 0; font-weight: bolder; font-size:0.9em;} #center p,td {color:#000; margin: 12px 0 5px 0; padding:5px 0 5px 0} #center2 { width:960px; float:left; margin:0 0 10px 0; padding:0; overflow:hidden; background-color:#fff; filter:alpha(opacity=100); opacity:1} /* main page left 메인페이지 왼쪽 영역 */ #center2 .main-left {width:351px; float:left; margin:10px 20px 0 0; border-left: 0px solid #ffa44e} #center2 .main-center {width:139px; float:left; margin:10px 10px 0 0; border-left: 0px solid green} #center2 .main-right {width:350px; float:left; margin:10px 10px 0 0; border-left: 0px solid green} #center2 .main-banner {width:170px; float:right; margin:10px 10px 0 0; border-left: 0px solid green} /* 각 페이지별 메인이미지 */ #center2 .pageimage {width: 600px;height:90px; float:left; margin:0 0 15px 0; background: #FCFCFC; border: 1px solid #CDCDCD;padding: 2px} /* main image */ /* 제목등 주요 문장의 속성 */ #center2 h1 {color:#000; margin: 0 0 30px 0; padding:7px 0 2px 0; background:#C1DBFF; height:30px; line-height:130%; font-size:1.6em; font-weight: bolder; clear:both} #center2 h1 span {border-bottom:3px solid #336699} #center2 h2, h3, h4, h5, h6 {color:#000; border-bottom: 2px solid #ffa44e; margin: 12px 0 5px 0; padding:0 0 3px 0; font-weight: bolder} #center2 p,td {color:#000; margin: 12px 0 5px 0; padding:5px 0 5px 0} /* 점자 및 숫자 정렬 목록 */ #center2 ul {margin:20px 0 0} #center2 ol {margin:20px 0 0} #center2 ul li { font-size:0.9em;list-style-image: url(../images/bullet/bullets_94.gif); margin:3px 0 0 30px; text-indent: 5px; color: #4B4B4B} #center2 ol li {margin:3px 0 0 30px; text-indent: 5px; color: #4B4B4B} /* banner 부분 */ #center2 img.banner {width:160px; height:49px; background:#eee; border:2px solid #ccc; margin:2px 0} #center2 img.banner:hover {width:160px; height:49px; background:#fff; border:2px solid #336699; margin:2px 0} /* 왼쪽 정렬 이미지 속성 */ #center2 img.left {width: expression(this.width > 500 ? 500: true); max-width:500px; border:2px solid #ccc; background:#eee; float:left; margin:5px 15px 15px 0;padding:5px 5px} #center2 img.left:hover {border:2px solid #336699; float:left; margin:5px 15px 15px 0;padding:5px 5px} /* 오른쪽 정렬 이미지 속성 */ #center2 img.right {width: expression(this.width > 500 ? 500: true); max-width:500px; border:2px solid #ccc; background:#eee; float:right; margin:5px 0 10px 15px; padding:5px 5px} #center2 img.right:hover {border:2px solid #336699; float:right; margin:5px 0 10px 15px; padding:5px 5px} /* 테두리 없는 이미지 속성 */ #center2 img.defaultimg {width: expression(this.width > 500 ? 500: true); max-width:500px; margin:15px 0 15px; clear:both; border:0} #center2 img.defaultimg:hover {margin:15px 0 15px; clear:both; border:0} #center2 a,p { color:#1E3843; border-bottom:0px dotted #336699; text-decoration:none} #center2 a:hover {color:#336699; text-decoration:none} /** ------------------------------------------------------------------------- south 남쪽 영역 시작 ------------------------------------------------------------------------------*/ #south {background:transparent url() no-repeat bottom left; margin:40px 0px; clear:both; font-size:0.85em} #south-container {background:transparent url(../images/south/south-bg.gif) repeat-x; filter:alpha(opacity=85); opacity:0.85; text-align:center;margin:40px 0px;} #south-container .link { padding:5px 0 0 0; color:#fff; clear: both; font-weight:bolder} #south-container .address {padding:10px 0 0; color:#fff; text-decoration:none} #south-container a,p {color:#fff; text-decoration:none} #south-container a:hover {color:#fff; text-decoration:none}