@charset "utf-8";

/* ======================================================================

[ Master Stylesheet ]

Project : KOICA Main

Date Created : 2009/04/21 

Last change : 2009/04/29 

Author : yoon

-------------------------------------------------------------------------

[ Table of Contents ]

1. Header / 

	1-1. #util

	1-2. Navigation / #topNav 

2. Content / #cont

	2-1. left column / column1

	2-2. center column / column2

3. Footer / #footer

IE5.5~7 브라우저 대응 clear Hack 

SELECTOR:after {content:" "; display:block; clear:both; height:0; visibility:hidden;}

SELECTOR { zoom:1; }

====================================================================== */



/* ============================ RESET STYLE  ============================ */



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {

	margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }

body { font-family: Helvetica, sans-serif; font-weight: normal; font-size:12px; line-height: 1.5; }

table { font-family: Helvetica, sans-serif; font-weight: normal; font-size:12px; line-height:2; }

th { font-family: inherit; font-weight: bold; font-size: inherit ; line-height:2; }

td { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: 1.5; }

li { list-style:none; }

input, select { margin: 0 ; padding: 0 2px; vertical-align: middle;}



a { color: #494949; }

a:link { color: #494949; }

a:visited { color: #494949; }

a:hover { color: #494949; 	}

a:active { color: #494949; }

a, a:link, a:visited, a:hover, a:active { font: normal 12px/1.5; text-decoration: none; }

img { margin:0; padding:0; border:none; font-size:1% !important; line-height:1 !important; vertical-align: middle;}



/* ============================ LAYOUT  ============================ */



body { margin: 6px 0 0 19px; 

	/* background:url(img/temp/koica_main_1.gif) left top no-repeat ;  */

	}

#wrap { width: 960px; overflow: hidden; position: relative;}

#util { width: 881px; overflow: hidden; }

	#util li { float:left; height: 20px; vertical-align: middle; padding-bottom:5px;}

	#util img, #util input { vertical-align: middle; }

	.inBox { border:1px solid #CCCCCC; height: 16px; line-height: 16px; width:100px; margin: 0;}

	.utilCont { width:422px; overflow: hidden; padding-right:20px; float: right;  }

#topNav { width:861px; overflow: hidden; margin-bottom: 9px;  }

#cont { width: 881px; overflow: hidden; }

	#cont .column1 { float: left; width: 602px; }

	#cont .column2 { float: left; }

#footer { margin-top: 19px; background:url(http://www.koica.go.kr/img/main/bottomBg.gif) no-repeat left top; }

/* Debug */

.d { border:1px solid red !important ; }

.g1 { background:#CCC; }

.g2 { background:#999; }



/* ============================ TOP NAVIGATION  ============================ */

#skipNav { position:absolute; visibility: hidden; }



.navWrap { float:left; }

ul#GNBWrap {width:100%; position:relative; height:76px;background:url(/img/nav/topNavBg2.gif) no-repeat left top;padding:0 20px;}

li.GNB { position:relative; float: left; padding-top:10px;}

	.tm1 { display:block;width:112px; text-align: center; padding-left:6px;}

	.tm2 { display:block;width:112px; text-align: center;}

	.tm3 { display:block;width:112px; text-align: center;}

	.tm4 { display:block;width:112px; text-align: center;}

	.tm5 { display:block;width:112px; text-align: center;}

ul.gnb_sm {

	position:absolute;

	overflow:hidden;

	top:46px;

	left:0;

}

ul.gnb_sm {width:611px;}

ul.sm1 { left: -20px; padding-top:3px; height:27px; }

ul.sm2 { left: -100px; padding-top:3px; height:27px; }

ul.sm3 { left: -250px; padding-top:3px; height:27px; }

ul.sm4 { left: -220px; padding-top:3px; height:27px; }

ul.sm5 { left: -300px; padding-top:3px; height:27px; }

ul.gnb_sm li {float:left;height:13px;padding:0 7px;background: url(/img/nav/sm_bar.gif) no-repeat 0 9px;}

ul.sm3 li { padding:0 3px; }

	ul.gnb_sm li.first {background:none; padding-left:17px;}

	ul.gnb_sm li img {display:block;}



/* ============================ CONTENTS SLIDE  ============================ */



#jFlowSlide{ float:left; margin: 0 10px 10px 10px; }

#myController { margin-left: 23px; width:510px; clear:both; }

#myController li { font-size: 12px; line-height: 1.5; width:510px; overflow:hidden; margin:0; padding:0; }

#myController li div { float: left; }

#myController li div.date { float: right; width: 80px; }

.jFlowControl { background:url(/img/main/off.gif) no-repeat left center; line-height:13px;font-size:11px; vertical-align: middle; color:#fff; cursor:pointer; padding:2px 12px 0 3px;}

.jFlowControl:hover,  span.jFlowSelected{ background:url(/img/main/on.gif) no-repeat left center; line-height:13px;font-size:11px;vertical-align: middle; }

dl.cont { margin:0; padding:10px 0 0 0; width: 510px; overflow:hidden; }

dl.cont dt { font-size:16px; margin:0; padding:0; margin-bottom:10px; font-weight:bold; color:#000; letter-spacing: 0; font-family: '굴림', sans-serif; }

dl.cont dd { 

	margin:0; padding:0; font-size: 12px; font-family: '굴림', sans-serif; 

	/*padding-left:170px; */

	color:#666; 

	line-height:1.5;

	/*background-repeat: no-repeat ;

	background-position: left top; */

	height: 96px; 

	}

	dl.cont dd img { vertical-align: middle; float:left; margin-right: 10px;}

#jFlowSlide2{ float:left; margin: 0;}

#myController2 { font-family: Georgia; padding:2px 0;  width:100px; clear:both; margin:0 auto;}

#myController2 li { float:left; width:14px; margin-right:5px;}

.jFlowControl2 { cursor:pointer; background:url(/img/slide/2_45.gif) no-repeat left center;padding:0 5px 0 4px; color:#7EAED1;font-size:11px; line-height:1;}

#myController2 span.jFlowSelected2 { background:url(/img/slide/2_43.gif) no-repeat left center;  margin-right:0; padding:0 5px 0 4px;color:#fff; font-size:11px;}

.jFlowControl2:hover { background:url(/img/slide/2_43.gif) no-repeat left center; padding:0 5px 0 4px; ; color:#fff;font-size:11px;}

.jFlowPrev2, .jFlowNext2 { cursor:pointer; }



.headline_section { background:url(/img/main/newsBox.gif) no-repeat left 9px; padding:0 11px; width:561px; height:257px; margin-bottom: 19px; overflow: hidden;}

.headline_section h2 { padding-left: 23px; }

.headline_slide { float: left; padding-top:75px; }



/* ============================  청소년 마당 / 사업영역  ============================ */

h1.head { width: 193px; float: left;  }

.biz_area { width:583px ; overflow: hidden; }

.youth { background: url(/img/main/box_youth.gif) no-repeat left top; width: 283px; height: 135px; float: left; overflow: hidden; }

.inner_youth { padding: 9px 11px ; }

.inner_youth h3 { margin-bottom: 8px; }



.fLeft{float: right; background:url(/img/main/box_biz.gif) no-repeat left top; width: 277px; height: 130px; padding: 5px 0 0 5px;  }

.iDance {

	float: left;

	position:relative;

	width:24px;

	margin: 0 5px 0 0;

	overflow:hidden;

	height:125px;

	}

	.iDance div { position:relative; display:block; 	z-index:5; }

	.iDance .open img{ position:relative; float:right; border:0; }

	.iDance .open{ position:absolute; top:0; right:0; border:0; z-index:1000; display:block; }

	.iDance .interior {width: 209px; height: 125px; overflow: hidden; }

	dl.tabList { width: 100%; overflow: hidden; }

		dl.tabList dt { float: left; width: 24px; }

			dl.tabList dd { float: left ; width: 85px; }

				dl.tabList ol { margin-top: 8px; }

					dl.tabList li { margin-bottom:1px  ; background: #ccc; width: 110px; font-size: 1px; line-height: 15px; vertical-align: top; }

					dl.tabList li img { vertical-align: top; }

					dl.tabList li a:link { background: #ccc;  display: block; width: 110px; font-size: 1px; line-height: 1px; vertical-align: top; }

					dl.tabList li a:visited { background: #ccc;  display: block; width: 110px; font-size: 1px; line-height: 1px; vertical-align: top;  }

					dl.tabList li a:hover { background: #2B5D9F; display: block; width: 110px; font-size: 1px; line-height: 1px; vertical-align: top;}

					dl.tabList li a:active { background: #ccc;  display: block; width: 110px; font-size: 1px; line-height: 1px; vertical-align: top;  }

					/*dl.tabList li a {outline:none;}*/



/* ============================  최근 발행물/ 배너영역  ============================ */



div.recentPress { margin-top: 19px; width:583px ; overflow: hidden;  }

div.press { width: 301px; float: left ;  }

div.press h2 { padding-left: 11px; }

div.press dl { width: 290px; margin:0; padding: 0; overflow: hidden; }

div.press dt { float: right; width: 200px; font-weight: bold; }

div.press dd.bookTitle { float: left; width: 90px; } 

div.press dd { float: right; width: 200px; font-size: 11px; letter-spacing: -1px;}

div.press dd li { letter-spacing: -1px; }

ul.bookList { width: 170px; overflow: hidden; }

.bookList li { float:left; width: 85px; }

.bookList li.odd p.odd, .bookList li p.odd { background: #F9F9F9; }

.bookList li.odd p, .bookList li.odd p.odd { background: url(/img/main/arrow_R.gif) no-repeat left 5px; padding-left: 8px; color: blue; }

li.odd a, li.odd a:link, li.odd a:visited, li.odd a:active { color: blue; font-size: 11px; letter-spacing: -1px;} 



div.directGo { width: 282px; height: 140px; overflow: hidden;  float:left; }

	div.directGo ul { width:294px; overflow: hidden; }

	div.directGo ul li { float: left; width: 146px; margin-bottom: 10px; }



/* ============================  업무유관기관  ============================ */



.corPub { clear:both; margin-top: 19px; }

.orgWrap { width:543px; float:left; padding: 8px 20px;background:url(/img/main/orgBg.gif) no-repeat left top; height: 44px; }

.orgWrap h3 { width:130px; float:left;}

.orgout { width:402px; overflow: hidden;  }

ul.orgLink { float:left; width:420px;}

	ul.orgLink li { float:left; width:140px; margin-bottom:4px; }



/* ============================  우측컬럼  ============================ */



table.mboard { border-collapse: collapse; width: 259px; margin-top: 15px; }

table.mboard caption { text-align: left; }

table.mboard th { font: normal 12px/1.3 '돋움', sans-serif; text-align: left; background: url(/img/main/bul_board.gif) no-repeat 0 9px;  padding-left: 5px; width:230px; }

table.mboard td { width: 20px; text-align: right;  }

table.mboard td.first {text-align: left;  }



.bannerScroll { margin-top:17px; }

#prevBtn2, #nextBtn2 {

	margin:0;

	padding:0;

	display:block;

	overflow:hidden;

	text-indent:-8000px;

	}

#slider2 ul, #slider2 li{

	margin:0;

	padding:0;

	list-style:none;

	}

div#controls2{

	background:url(/img/main/new_scrollbanner_bg.gif) no-repeat left top; width:259px; height:60px; 

	width:259px;

	margin:0;

	position:relative;

	} 

#slider2 { padding:14px 0 14px 0; margin-left:22px;}

#slider2 li{ 

	width:215px;

	height:30px;

	overflow:hidden; 

	}	

#prevBtn2, #nextBtn2{ 

	display:block;

	width:10px;

	height:32px;

	position:absolute;

	left:6px;

	top:14px;

	}	

#nextBtn2{ left:244px; }														

#prevBtn2 a, #nextBtn2 a{ display:block; width:10px; height:32px; background:url(/img/main/new_btn_prev.gif) no-repeat 0 0; }	

#nextBtn2 a{  background:url(/img/main/new_btn_next.gif) no-repeat 0 0; }	



/* ============================  우측컬럼  ============================ */

div.footwrap { padding: 4px 20px 0;}

ul.foot { width: 861px; overflow: hidden; height: 22px; padding-top:4px; }

ul.foot li { float: left; }

ul.copy { margin-top: 8px; width: 861px; overflow: hidden; }

	ul.copy li { float: left; width: 629px; }

	ul.copy li.slogo { float: right; width: 159px; padding-right: 20px; } 



img.new { vertical-align: middle; margin-left: 5px;  } 







#pZone { width: 259px; height: 248px; position:relative; top:10px; }

p.pZoneTit { position: absolute; left: 10px; top: 6px; }

ul#pTab { position:absolute;left: 175px; top:6px; }

ul#pTab li { float: left; margin-right: 4px; }



ul.quickMenu li, ul.quickMenu li a, ul.quickMenu li a:link, ul.quickMenu li a:visited, ul.quickMenu li a:hover, ul.quickMenu li a:active { height: 1; font-size: 1%; line-height:1; vertical-align: top; }



.floatContainer { width:259px; height:248px; overflow:hidden; margin-top: 9px;}

.floatContainer li { float:left;}



#quickMenu { position: absolute; left: 881px; top: 120px } 





.inner_youth { padding: 9px 11px ; width: 261px; overflow: hidden; }

.inner_youth h3 { margin-bottom: 8px; float: left; }

.youth_more { float: right; width: 50px; }

.flashPlay { clear: both; }



/* 2009.10.27 서선녀추가 */

/* 아이디 패스워드 찾기 메인 */

.findPW_form { background:url(/img/add_20091027/findPW_form.gif) no-repeat 0 0; width:597px; height:263px; padding:45px 0 45px 20px; }

.findPW_form .desc { margin:5px 0 30px 17px; }

.findPW_form .tb { margin-left:55px; }

.findPW_form .tb table td { width:336px; background:url(/img/add_20091027/tbB_tdRpt.gif) repeat-x 0 0; padding-left:10px; height:31px; }

.findPW_form .tb table th { background:url(/img/add_20091027/tbB_thBg.gif) no-repeat 0 0; width:112px; height:63px; }

.findPW_form .tb table td.tdR { background:url(/img/add_20091027/tbB_td.gif) no-repeat 0 0; width:7px; height:62px; }

.findPW_form .tb table td ul { line-height:30px; }

/* 팝업 */

#pop500x510 { width:500px; height:510px; border:1px solid #9f9f9f; }

#popNotice { position:absolute; left:100px; top:100px; z-index:10; width:286px; height:401px; border:3px solid #6eb3e8; }

#popNotice .btn { text-align:right; padding:5px 5px 8px 0; background-color:#FFF; }

/* 아이디 찾기 결과 */

.tbA td.cont { padding:0 75px; }

.tbA .cont li { text-align:left; margin-top:35px; }

.tbA .cont .findID_form { background:url(/img/add_20091027/bg_findID.gif) no-repeat 0 0; width:290px; height:58px; margin-bottom:75px; color:#000; font-size:14px; text-align:center; padding-top:45px; }

.tbA td.tbg { background:url(/img/add_20091027/tbA_bg.gif) repeat-x 0 0; }

.tbA td.lbg { background:url(/img/add_20091027/tbA_bg.gif) repeat-y 0 0; }

.tbA td.rbg { background:url(/img/add_20091027/tbA_bg.gif) repeat-y 0 right; }

.tbA td.bbg { background:url(/img/add_20091027/tbA_bg.gif) repeat-x bottom 0; }

.btn { padding:20px 0 10px 0; }



/* 아이디/패스워드 찾기 */

.sort, .pin{ padding-left:10px;}

.sort ul table{

	width:100%;

	height:62px;

	background:url(../../img/pop/popup_list.gif) no-repeat 0 0;

	margin:18px 0 15px 0;

	}

.sort ul{ margin-left:10px;}

.sort ul li{margin:10px 0;}

.sort ul table th{ width:111px;}

.pin{ margin-top:41px;}

.pin table{

	margin:0 0 25px 0;

	}

.pin #tab1 { background:url(../../img/pop/popup_table.gif) no-repeat 0 0; width:456px; height:123px; padding-top:15px; }

.pin #tab2{ background:url(../../img/pop/popup_table1.gif) no-repeat 0 0; width:456px; height:123px; padding-top:15px; }

.pin table td { padding:3px 0 3px 20px; }

.pin p{text-align:center; margin-bottom:15px;}

.pin input{ height:18px; line-height:18px;}

.pin h2{ margin-bottom:9px;}

.wrap{ 

	width:500px;

	border:1px solid #6d6d6d;

	}

ul#tab{

	width:266px;

	height:21px;

	padding-left: 6px;

	overflow: hidden;

	margin-bottom:0px;

	}

ul#tab li { float: left; }

.pbtn { text-align:center; padding-top:5px; }