@charset "utf-8";
/*
    Document   : sub
    Created on : 2009. 8. 6, 오후 2:08:26
    Author     : yoojongwoo
    Description:
        20090806 오픈베이스 홈페이지 화면 코딩.

화면의 오른쪽 배경이 파란색 그라데이션으로 화면이 좌우로 늘어나는것에 따라 책도 늘어나게 하는것은 불가능합니다.
*/

/*========= 공통요소 =========*/
body{/*background:url(../images/bg_mainGray.gif) 0px 685px repeat-x ;   */ }
/*========= //공통요소 =========*/

/*========= 레이아웃 =========*/
div#wrap{width:999px;}/* 전체를 감쌉니다. 하지만 footer 는 가로 그라데이션 , 회색(#e3e3e3) 이 있어서 wrap 안으로 들어갈수가 없습니다. */
div#header{/*common.css 를 참고하세요*/ }/* 상단 lnb gnb 합쳐놓은 플래시 영역입니다. */
/*div#header div#lnb{position:absolute; left:13px; top:-5px;  z-index:1; } header 안에 들어가있는데 특별히 속성줄만한것은 없습니다. */
div#container{ width:999px; position:relative; left:0px; top:0px; z-index:2;}/*snb , content, right 를 감쌉니다. header 와 플래시 영역이 겹치는 부분이 있어서 position이 releative 로 될수밖에 없습니다.*/
*#swf_main{ position:relative; left:0px; top:0px; z-index:1;}
div#footer{/*common.css 를 참고하세요*/} /*하단 footer 이며 배경색 깔고 이미지좌우 반복시킵니다.*/
/*========= //레이아웃 =========*/

/*========= footer 레이아웃 =========*/
    /*common.css 를 참고하세요*/
/*========= //footer 레이아웃 =========*/



.main_j_content_left{background:url(../../swf/images/bg_main_j_left_1.jpg) no-repeat 420px 10px ;  width:800px; height: 634px; position: absolute; left: 0px; top: 0px;  z-index: 4; }

.main_j_content_left_1{background:url(../../swf/images/bg_main_left_common.jpg) no-repeat; width: 320px; height: 210px; position: absolute; left: 233px; top: 85px; text-align: left;  }
.main_j_content_left_1_block{ position: relative; left: 23px; top: 23px; background: #ffffff;  width: 274px; height: 164px; }
.main_j_content_left_1_block ul{list-style: none;}
li.main_j_content_left_1_latest{ border-bottom: 1px dotted #888888 ; margin-bottom: 10px; margin-top: 10px; position: relative; left: 0px; top: 0px;    }
li.main_j_content_left_1_latest span.new{position: absolute; right: 0px; top: 14px; }
li.main_j_content_left_1_latest dl dt{position: relative; left: 0px; top: 0px; height: 20px; overflow: hidden; width: 240px;   }
li.main_j_content_left_1_latest dl dt a{ display: block; width: 500px;   color: #2e83bf; font-weight: bold; font-size: 13px; text-decoration: underline; position: absolute; left: 0px; top: 0px;  background:url(../../swf/images/bul_mainContent_list.jpg) no-repeat 0px 4px; padding-left: 8px;  }
li.main_j_content_left_1_latest dl dt a:hover{text-decoration: underline;}
li.main_j_content_left_1_latest dl dd{position: relative; left: 0px; top: 0px; height: 20px; overflow: hidden; margin-top: 8px;   width: 270px;  }
li.main_j_content_left_1_latest dl dd a{ display: block; width: 500px; color: #a5a5a5; font-weight: normal; font-size: 11px; text-decoration: none; position: absolute; left: 0px; top: 0px; padding-left: 10px;  }
li.main_j_content_left_1_latest dl dd a:hover{text-decoration: none;}

li.main_j_content_left_1_{  position: relative; left: 0px; top: 0px;  height: 20px; overflow: hidden; list-style: none; }
li.main_j_content_left_1_ span{background: url(../../swf/images/bul_speaker.jpg) no-repeat 0px 0px; font-weight: normal; color: #937b33; font-size: 11px; padding-left: 14px;   }


li.main_j_content_left_1_ p{position: absolute; left: 43px; top: 1px;  overflow: hidden; width: 250px; height: 100%;  }
li.main_j_content_left_1_ p a{ display: block; width: 500px;   color: #666666; font-weight: normal; font-size: 11px; text-decoration: none; position: absolute; left: 0px; top: 2px;  padding-left: 8px;  }
li.main_j_content_left_1_ p a:hover{text-decoration: underline;}
.main_j_content_left_1_block .more{position: absolute;  right: 0px;  top: 0px; }


.main_j_content_left_2_block{ position: relative; left: 23px; top: 23px;  width: 274px; height: 164px; overflow: hidden;   }
.main_j_content_left_2_oneblock{width: 280px; height: 180px; overflow: hidden;  float: left; position: relative; left: 0px; top: 0px; margin-left: 9px;  }
.main_j_content_left_2_wideblock{width: 880px; position: absolute; left: 0px; top: 0px;  }
.main_j_content_left_2_block .g_img{  }
.main_j_content_left_2_block .g_img img{width:140px; margin-top: 20px;   }
.main_j_content_left_2_block .g_txt{position: absolute; left: 145px; top: 40px; width: 120px; height: 110px;   overflow: hidden;  }
.main_j_content_left_2_block .g_txt dt a{color: #785e5e; font-size: 12px; font-weight: bold; line-height: 14px;}
.main_j_content_left_2_block .g_txt dd a{color: #785e5e; font-size: 12px; font-weight: normal; margin-top: 5px; line-height: 14px; }
.main_j_content_left_2_block .eventimg{ margin-top: 10px; }
.main_j_content_left_2_block .circle {position: absolute;  right: 0px; top:4px; z-index: 10;  }
.main_j_content_left_2_block .circle span.off{cursor: pointer; background: url(../../swf/images/bul_mainContent_grayCircle.png) no-repeat ; display: inline-block; width: 15px; height: 8px;  }
.main_j_content_left_2_block .circle span.on{cursor: pointer; background: url(../../swf/images/bul_mainContent_redCircle.png) no-repeat ; display: inline-block; width: 15px; height: 8px;   }

.main_j_content_left_2{background: url(../../swf/images/bg_main_left_common.jpg) no-repeat; width: 320px; height: 210px;  position: absolute; left: 233px; top: 315px;   text-align: left; }


.main_j_content_right{background: url(../../swf/images/bg_main_j_right_1.png) no-repeat 842px 6px ;  width:1633px; height: 634px; position: absolute; left: 0px; top: 0px; z-index: 300;  }

.main_j_content_right .content_rightBox_1{ width: 100px; height: 100px;  position: absolute; left: 845px; top: 64px; z-index: 3; }
.main_j_content_right .content_rightBox_1 ul.widebox{display: block;  position: absolute; left: 0px; top: 0px; list-style: none; }
.main_j_content_right .content_rightBox_1 ul.widebox li{position: absolute; left: 0px; top: 0px;}
.main_j_content_right .content_rightBox_1 ul.circlebox {position: absolute; left: 33px; top: 20px; z-index: 57; width: 500px; height: 30px; }
.main_j_content_right .content_rightBox_1 ul.circlebox li{ display: inline-block; float: left;  }
.main_j_content_right .content_rightBox_1 ul.circlebox li span.off{display: inline-block; cursor: pointer; margin-left: 10px; margin-top: 10px;    width: 10px; height: 10px; background:  url(../../swf/images/bul_mainContent_skyblueCircle.png) no-repeat ; }
.main_j_content_right .content_rightBox_1 ul.circlebox li span.on{display: inline-block; cursor: pointer; margin-left: 10px; margin-top: 10px;   width: 10px; height: 10px; background: url(../../swf/images/bul_mainContent_orangeCircle.png) no-repeat ; }

.main_j_content_right .content_rightBox_2{width: 277px; height: 203px; background: url(../../swf/images/bg_mainContent_service2and3.png) no-repeat; position: absolute; left: 845px; top: 315px; }
.main_j_content_right .content_rightBox_2 dl dt{text-align: left;}
.main_j_content_right .content_rightBox_2 dl dt img{display: inline-block; margin-left: 20px; margin-top: 10px; }
.main_j_content_right .content_rightBox_2 dl dd {text-align: left;}
.main_j_content_right .content_rightBox_2_block{position: relative; left: 10px;  width: 255px; overflow: hidden;  list-style: none; }

li.main_j_content_right_2_latest{ border-bottom: 1px dotted #888888 ; margin-bottom: 10px; margin-top: 10px; position: relative; left: 0px; top: 0px;    }
li.main_j_content_right_2_latest span.new{position: absolute; right: 12px; top: 14px; }
li.main_j_content_right_2_latest dl dt{position: relative; left: 0px; top: 0px; height: 20px; overflow: hidden; width: 210px;   }
li.main_j_content_right_2_latest dl dt a{ display: block; width: 500px;   color: #2e83bf; font-weight: bold; font-size: 13px; text-decoration: underline; position: absolute; left: 0px; top: 0px;  background:url(../../swf/images/bul_mainContent_list.jpg) no-repeat 0px 4px; padding-left: 8px;  }
li.main_j_content_right_2_latest dl dt a:hover{text-decoration: underline;}
li.main_j_content_right_2_latest dl dd{position: relative; left: 0px; top: 0px; height: 20px; overflow: hidden; margin-top: 8px;   width: 250px;   }
li.main_j_content_right_2_latest dl dd a{ display: block; width: 500px; color: #a5a5a5; font-weight: normal; font-size: 11px; text-decoration: none; position: absolute; left: 0px; top: 0px; padding-left: 10px;  }
li.main_j_content_right_2_latest dl dd a:hover{text-decoration: none;}


li.main_j_content_right_2_{  position: relative; left: 0px; top: 0px;  height: 20px; overflow: hidden; list-style: none; }
li.main_j_content_right_2_ span{background: url(../../swf/images/bul_speaker.jpg) no-repeat 0px 0px; font-weight: normal; color: #937b33; font-size: 11px; padding-left: 14px;   }
li.main_j_content_right_2_ p{position: absolute; left: 43px; top: 1px;  overflow: hidden; width: 200px; height: 100%;  }
li.main_j_content_right_2_ p a{ display: block; width: 500px;   color: #666666; font-weight: normal; font-size: 11px; text-decoration: none; position: absolute; left: 0px; top: 2px;  padding-left: 8px;  }
li.main_j_content_right_2_ p a:hover{text-decoration: underline;}


.main_j_content_right .content_rightBox_3{width: 277px; height: 203px; background: url(../../swf/images/bg_mainContent_service2and3.png) no-repeat; position: absolute; left: 1135; top: 315px;  }
.main_j_content_right .content_rightBox_3 dl dt{text-align: left;}
.main_j_content_right .content_rightBox_3 dl dt img{display: inline-block; margin-left: 20px; margin-top: 10px;}
.main_j_content_right .content_rightBox_3 dl dd{}
.main_j_content_right .content_rightBox_3 dl dd ul{width: 277px; height: 180px;  list-style: none;  overflow: hidden;position: relative; top: 10px;  list-style: none; }
.main_j_content_right .content_rightBox_3 dl dd ul li{width: 135px; height: 70px; float: left; display: inline-block; border-left: 1px dotted #888888 ;  border-top: 1px dotted #888888; position: relative; top: -1px; padding-top: 10px;   }
.main_j_content_right .content_rightBox_3 dl dd ul li a.img{width: 135px; height: 40px; }
.main_j_content_right .content_rightBox_3 dl dd ul li p{font-size: 11px; font-weight: bold; display: block; }
.main_j_content_right .content_rightBox_3 dl dd ul li p a{color: #1d6a93;  }
.main_j_content_right .content_rightBox_3 dl dd ul li p a:hover{text-decoration: underline;}
.main_j_content_right .content_rightBox_3 dl dd ul li span { font-size: 11px; font-weight: normal;display: block; margin-top: 3px; margin-bottom: 3px;}
.main_j_content_right .content_rightBox_3 dl dd ul li span a{color: #666666; }
.main_j_content_right .content_rightBox_3 dl dd ul li span a:hover{color: #f87b01; text-decoration: underline; font-weight: bold; }

/* 메인 배너 .  */
.banner_both{position: relative; left: 0px; top: 0px; z-index: 45; }
.banner_both{}
.banner_both ul{list-style: none; }
.banner_both ul li{display: block; margin-top: 5px; }

/* 메인 서머리 */
.summary{  position: absolute;  text-align: left;   }
.summary ul{list-style: none; }
.summary_left{background: url(../../swf/images/title_mainContent_summary_left.png) no-repeat ; color: #ffffff; width: 140px;  }
.summary_left ul{ margin-top: 75px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff;    }
.summary_left ul li{font-size: 11px; font-family: dotum; padding: 4px;line-height: 15px;   }

.summary_right{background: url(../../swf/images/title_mainContent_summary_right.png) no-repeat ; color: #666666; width: 140px;  }
.summary_right ul{ margin-top: 85px; border-top: 1px solid #666666; border-bottom: 1px solid #666666;    }
.summary_right ul li{font-size: 11px; font-family: dotum; padding: 4px;line-height: 15px;   }