﻿/****************************************************************************************************/
/*  작 성 자 : (주)익스코어
/*  작 성 일 :  2009.05.19
/*  수 정 일 :  2009.05.19
/*  버     전 :  0.0.1
/*  설     명 :  청소년센터 기본 스타일
/*  위     치 :  /css/common/layout.css
/****************************************************************************************************/

body
{
	background-color: #F5F2D5;
}
/*
div#wrapper
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}
*/
div.bg_main
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 82.5em;
	height: 60.5em;
}

div.bg_main img
{
	width: 82.5em;
	height: 60.5em;
}

div.logo_area
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

div.logo_area img
{
	width: 20.25em;
	height: 8.25em;
}

div.flash
{
	position: absolute;
	/*
	left: 16em;
	*/
	left: 13.88em;
	top: 8.18em;
	z-index: 1;
}

div.flash img
{
	width: 33.75em;
	/*
	width: 31.75em;
	*/
	height: 16em;
}

div.flash object
{
	width: 33.75em;
	height: 16em;
}

div.fullmenu
{
	position: absolute;
	left: 51.25em;
	top: 0;
	z-index: 1000;
}

div.fullmenu img
{
	width: 11.5em;
	height: 3.25em;
}


div#wrapper div#contents-link
{
	position: absolute;
	left: 0;
	top: 8.25em;
	z-index: 2;
	width: 16em;
}

div#wrapper div#contents-link ul#contents-link-01
{
/*
	position: absolute;
	left: 2.5em;
	top: 8.75em;
	z-index: 3;
	width: 11.25em;
	height: 11.75em;
	*/
	width: 11.25em;
	height: 11.75em;
	clear: both;
	float: left;
	padding-left: 2.5em;
	padding-top: 8.75em;
}

div#wrapper div#contents-link ul#contents-link-01 li.img img
{
	width: 11.25em;
	height: 9.75em;
	vertical-align: top;
}

div#wrapper div#contents-link ul#contents-link-01 li.link
{
	width: 2em;
	height: 2em;
	padding-left: 5em;
}

div#wrapper div#contents-link ul#contents-link-01 li.link img
{
	width: 2em;
	height: 2em;
	vertical-align: top;
}

div#wrapper div#contents-link ul#contents-link-02
{
	width: 10.25em;
	height: 12em;
	clear: both;
	float: left;
	padding-left: 2.5em;
	padding-top: 2em;
}

div#wrapper div#contents-link ul#contents-link-02 li.img img
{
	width: 10.25em;
	height: 10em;
	vertical-align: top;
}

div#wrapper div#contents-link ul#contents-link-02 li.link
{
	width: 2em;
	height: 2em;
	padding-left: 4.5em;
}

div#wrapper div#contents-link ul#contents-link-02 li.link img
{
	width: 2em;
	height: 2em;
	vertical-align: top;
}

div#wrapper div#contents-link ul#contents-link-03
{
	width: 10.25em;
	height: 10.5em;
	clear: both;
	float: left;
	padding-left: 6.5em;
	padding-top: 2em;
}

div#wrapper div#contents-link ul#contents-link-03 li.img img
{
	width: 10.25em;
	height: 8.5em;
	vertical-align: top;
}

div#wrapper div#contents-link ul#contents-link-03 li.link
{
	width: 2em;
	height: 2em;
	padding-left: 4.5em;
}

div#wrapper div#contents-link ul#contents-link-03 li.link img
{
	width: 2em;
	height: 2em;
	vertical-align: top;
}

div#wrapper div#site-link
{
	position: absolute;
	left: 16.75em;
	top: 24.25em;
	z-index: 2;
	width: 29em;
}

div#wrapper div#site-link ul
{
	width: 29em;
	height: 7em;
}

div#wrapper div#site-link ul li
{
	height: 7em;
	float: left;
}

div#wrapper div#site-link ul li img
{
	height: 7em;
	vertical-align: top;
}

div#wrapper div#site-link ul li.li_01 img
{
	width: 7.5em;
}

div#wrapper div#site-link ul li.li_02 img
{
	width: 6.5em;
}

div#wrapper div#site-link ul li.li_03 img
{
	width: 6.75em;
}

div#wrapper div#site-link ul li.li_04 img
{
	width: 8.25em;
}

div#wrapper div#notice
{
	position: absolute;
	left: 17.5em;
	top: 32.25em;
	z-index: 2;
	width: 28.25em;
}

div#wrapper div#notice ul.title
{
	width: 28.25em;
	height: 2.5em;
}

div#wrapper div#notice ul.title li
{
	height: 2.5em;
	float: left;
}

div#wrapper div#notice ul.title li img
{
	height: 2.5em;
	vertical-align: top;
}

div#wrapper div#notice ul.title li.li_01 img
{
	width: 9.25em;
}

div#wrapper div#notice ul.title li.li_02 img
{
	width: 9.5em;
}

div#wrapper div#notice ul.title li.li_03 img
{
	width: 9.5em;
}

div#wrapper div#notice div#notice_01
{
	width: 100%;
	clear: both;
	float: left;
	display: block;
}

div#wrapper div#notice div#notice_02
{
	width: 100%;
	clear: both;
	float: left;
	display: none;
}

div#wrapper div#notice div#notice_03
{
	width: 100%;
	clear: both;
	float: left;
	display: none;
}

div#wrapper div#notice div#notice_01 ul.list,
div#wrapper div#notice div#notice_02 ul.list,
div#wrapper div#notice div#notice_03 ul.list
{
	width: 28.25em;
	clear: both;
	float: left;
	margin-top: 0.4em;
}

div#wrapper div#notice div#notice_01 ul.list li.title,
div#wrapper div#notice div#notice_02 ul.list li.title,
div#wrapper div#notice div#notice_03 ul.list li.title
{
	width: 20.5em;
	float: left;
	padding-left: 0.5em;
	background: url(/images/open_content/main_page/ico_notice.jpg) left 0.35em no-repeat;
}

* html div#wrapper div#notice div#notice_01 ul.list li.title,
* html div#wrapper div#notice div#notice_02 ul.list li.title,
* html div#wrapper div#notice div#notice_03 ul.list li.title
{
	width: 21em;
}

div#wrapper div#notice div#notice_01 ul.list li.title img,
div#wrapper div#notice div#notice_02 ul.list li.title img,
div#wrapper div#notice div#notice_03 ul.list li.title img
{
	width: 2.33em;
	height: 1em;
	vertical-align: middle;
}

div#wrapper div#notice div#notice_02 ul.list li.title img.x
{
	width: 0.83em;
	height: 0.83em;
	vertical-align: middle;
}

div#wrapper div#notice div#notice_02 ul.list li.title img.re
{
	width: 1em;
	height: 1em;
	vertical-align: middle;
}

div#wrapper div#notice div#notice_01 ul.list li.date,
div#wrapper div#notice div#notice_02 ul.list li.date,
div#wrapper div#notice div#notice_03 ul.list li.date
{
	width: 7.25em;
	float: left;
	text-align: center;
}

div#wrapper div#notice div#notice_01 p.more,
div#wrapper div#notice div#notice_02 p.more,
div#wrapper div#notice div#notice_03 p.more
{
	width: 27.25em;
	height: 0.75em;
	clear: both;
	float: left;
	margin-top: 0.25em;
	text-align: right;
}

div#wrapper div#notice div#notice_01 p.more img,
div#wrapper div#notice div#notice_02 p.more img,
div#wrapper div#notice div#notice_03 p.more img
{
	width: 3em;
	height: 0.75em;
	vertical-align: top;
}

div#wrapper div#popupzone
{
	position: absolute;
	left: 47.75em;
	top: 12.25em;
	z-index: 2;
	width: 23.25em;
	height: 20.25em;
	background: url(/images/open_content/main_page/popup_bg02.jpg) left 1.25em no-repeat;
}

div#wrapper div#popupzone p.title
{
	width: 10em;
	height: 1.25em;
	padding-left: 0.75em;
}

div#wrapper div#popupzone div.popupzone_inner
{
	width: 21.5em;
	height: 15.25em;
	clear: both;
	float: left;
	padding-left: 0.75em;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
}

* html div#wrapper div#popupzone div.popupzone_inner
{
	width: 23.25em;
	height: 17.25em;
}

div#wrapper div#popupzone div.img
{
	width: 21.5em;
	height: 13.5em;
	clear: both;
	float: left;
}

div#wrapper div#popupzone ul.function
{
	width: 6.25em;
	height: 1.25em;
	clear: both;
	float: left;
	padding-left: 0.75em;
	padding-top: 0.25em;
}

div#wrapper div#popupzone ul.function li
{
	width: 1em;
	height: 1.25em;
	float: left;
	padding-right: 0.25em;
}

div#wrapper div#popupzone ul.function li img
{
	width: 1em;
	height: 1.25em;
	vertical-align: top;
}

div#wrapper div#popupzone ul.index
{
	width: 14.5em;
	height: 1.5em;
	float: left;
	padding-top: 0.25em;
}

div#wrapper div#popupzone ul.index li
{
	width: 1.5em;
	height: 1.5em;
	float: left;
	padding-right: 0.25em;
}

div#wrapper div#popupzone ul.index li img
{
	width: 1.5em;
	height: 1.5em;
	vertical-align: top;
}

div#wrapper div#product
{
	position: absolute;
	left: 47.75em;
	top: 33em;
	z-index: 2;
	width: 23.25em;
}

div#wrapper div#product ul
{
}

div#wrapper div#product ul li
{
	float: left;
}

div#wrapper div#product ul li.li_01
{
	padding-right: 0.5em;
}

div#wrapper div#product ul li.li_02
{
	padding-top: 2em;
}

div#wrapper div#product ul li.li_03
{
	padding-top: 5em;
}

div#wrapper div#product ul li.li_04
{
	padding-right: 0.5em;
	padding-top: 1.5em;
}

div#wrapper div#product ul li.li_05
{
	padding-top: 1.25em;
}

div#wrapper div#product ul li img
{
	vertical-align: top;
}

div#wrapper div#product ul li.li_01 img
{
	width: 4.75em;
	height: 5em;
}

div#wrapper div#product ul li.li_02 img
{
	width: 4.25em;
	height: 4.5em;
}

div#wrapper div#product ul li.li_03 img
{
	width: 4.75em;
	height: 4.5em;
}

div#wrapper div#product ul li.li_04 img
{
	width: 4em;
	height: 4.75em;
}

div#wrapper div#product ul li.li_05 img
{
	width: 4.25em;
	height: 4.75em;
}

div#wrapper div#banner
{
	position: absolute;
	left: 18.75em;
	top: 47.5em;
	z-index: 2;
	width: 39.25em;
	height: 3.5em;
	background: url(/images/open_content/main_page/banner_bg.jpg) left top no-repeat;
}

div#wrapper div#banner object
{
	width: 39.25em;
	height: 3.5em;
}

div#wrapper div#banner p.title
{
	width: 4.5em;
	height: 2em;
	float: left;
	padding-left: 1.25em;
	padding-top: 0.75em;
}

* html div#wrapper div#banner p.title
{
	width: 5.75em;
	height: 3.5em;
}

div#wrapper div#banner p.title img
{
	width: 4.5em;
	height: 2em;
	vertical-align: top;
}

div#wrapper div#banner ul.index
{
	width: 25.5em;
	height: 2.5em;
	float: left;
	padding-left: 1.25em;
	padding-top: 0.5em;
}

* html div#wrapper div#banner ul.index
{
	width: 26.75em;
	height: 3.5em;
}

div#wrapper div#banner ul.index li
{
	width: 8.25em;
	height: 2.5em;
	float: left;
	padding-right: 0.25em;
}

* html div#wrapper div#banner ul.index li
{
	width: 8.5em;
}

div#wrapper div#banner ul.index li img
{
	width: 8.25em;
	height: 2.5em;
	vertical-align: top;
}

div#wrapper div#banner ul.function
{
	width: 3em;
	height: 1.25em;
	float: left;
	padding-left: 1em;
	padding-top: 0.5em;
}

* html div#wrapper div#banner ul.function
{
	width: 4em;
	height: 3.5em;
}

div#wrapper div#banner ul.function li
{
	width: 1.25em;
	height: 1.25em;
	float: left;
	padding-right: 0.25em;
}

* html div#wrapper div#banner ul.function li
{
	width: 1.5em;
	height: 1.25em;
}

div#wrapper div#banner ul.function li img
{
	width: 1.25em;
	height: 1.25em;
	vertical-align: top;
}

div#wrapper ul#top-link
{
	position: absolute;
	left: 67em;
	top: 1.5em;
	z-index: 1;
}

div#wrapper ul#top-link li
{
	float: left;
}

div#wrapper ul#top-link li img
{
	height: 1.25em;
	vertical-align: top;
}

div#wrapper ul#top-link li img#toplink_01
{
	width: 1.75em;
}

div#wrapper ul#top-link li img#toplink_02
{
	width: 4.5em;
}

div#wrapper ul#top-link li img#toplink_03
{
	width: 4.5em;
}

div#wrapper ul#top-link li img#toplink_04
{
	width: 3.75em;
}

div.zindex_quickmenu
{
	position: absolute;
	left: 72.25em;
	top: 11.5em;
	z-index: 1;
}

div.zindex_quickmenu img
{
	width: 10.25em;
	height: 34.5em;
}

div#wrapper div#quick
{
	position: absolute;
	left: 72.25em;
	top: 11.5em;
	z-index: 3;
}

div#wrapper div#quick div.quick-title
{
	width: 8.25em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 7.5em;
}

div#wrapper div#quick div.quick-title img
{
	width: 8.25em;
	height: 2em;
	vertical-align: top;
}

div#wrapper div#quick div.quick-icon
{
	width: 8.25em;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 0.25em;
}

div#wrapper div#quick div.quick-icon img
{
	width: 8.25em;
	height: 5.5em;
	vertical-align: top;
}

div#wrapper div#quick ul#quick-link
{
	width: 8.25em;
	padding-left: 1em;
	padding-right: 1em;
}

div#wrapper div#quick ul#quick-link li
{
	width: 8.25em;
	padding-top: 1em;
}

div#wrapper div#quick ul#quick-link li img
{
	width: 8.25em;
	height: 1.5em;
	vertical-align: top;
}

div#wrapper div#footer
{
	position: absolute;
	left: 0;
	top: 55em;
	z-index: 3;
	width: 82.5em;
	height: 4.5em;
}

div#wrapper div#footer div#logo
{
	width: 10em;
	height: 4.5em;
	float: left;
	padding-left: 16em;
}

* html div#wrapper div#footer div#logo
{
	width: 26em;
}

div#wrapper div#footer div#logo img
{
	width: 10em;
	height: 4.5em;
	vertical-align: top;
}

div#wrapper div#footer div#infor
{
	width: 48.75em;
	float: left;
}

div#wrapper div#footer div#infor ul#link
{
	width: 100%;
	height: 1.25em;
	float: left;
}

div#wrapper div#footer div#infor ul#link li
{
	height: 1.25em;
	float: left;
}

div#wrapper div#footer div#infor ul#link li img
{
	height: 1.25em;
	vertical-align: top;
}

div#wrapper div#footer div#infor ul#link li.li_01 img
{
	width: 8.25em;
}

div#wrapper div#footer div#infor ul#link li.li_02 img
{
	width: 8em;
}

div#wrapper div#footer div#infor ul#link li.li_03 img
{
	width: 6.25em;
}

div#wrapper div#footer div#infor ul#link li.li_04 img
{
	width: 8.75em;
}

div#wrapper div#footer div#infor ul#link li.li_05 img
{
	width: 5.5em;
}

div#wrapper div#footer div#infor div#contact
{
	width: 50.5em;
	height: 1.5em;
	clear: both;
	float: left;
}

div#wrapper div#footer div#infor div#contact p.address
{
	width: 23.83em;
	height: 1.5em;
	clear: both;
	float: left;
}

div#wrapper div#footer div#infor div#contact p.address img
{
	width: 23.83em;
	height: 1.5em;
	vertical-align: top;
}

div#wrapper div#footer div#infor div#contact p.tel
{
	width: 17.75em;
	height: 1.5em;
	float: left;
}

div#wrapper div#footer div#infor div#contact p.tel img
{
	width: 17.75em;
	height: 1.5em;
	vertical-align: top;
}

div#wrapper div#footer div#infor div#contact p.fax
{
	width: 9.75em;
	height: 1.5em;
	float: left;
}

div#wrapper div#footer div#infor div#contact p.fax img
{
	width: 9.75em;
	height: 1.5em;
	vertical-align: top;
}

div#wrapper div#footer div#infor div#copyright
{
	width: 100%;
	height: 1.5em;
	clear: both;
	float: left;
}

div#wrapper div#footer div#infor div#copyright p.copyright
{
	width: 24.25em;
	height: 1.5em;
	clear: both;
	float: left;
}

div#wrapper div#footer div#infor div#copyright p.copyright img
{
	width: 24.25em;
	height: 1.5em;
	vertical-align: top;
}

div#wrapper div#footer div#infor div#copyright p.mail
{
	width: 8.5em;
	height: 1.5em;
	float: left;
}

div#wrapper div#footer div#infor div#copyright p.mail img
{
	width: 8.5em;
	height: 1.5em;
	vertical-align: top;
}

div.zindex_search
{
	position: absolute;
	left: 66em;
	top: 3.5em;
	z-index: 1;
	width: 16em;
	height: 5.75em;
}

div#wrapper div#search
{
	position: absolute;
	left: 66em;
	top: 3.5em;
	z-index: 10;
	width: 16em;
	height: 5.75em;
}

div#wrapper div#search form#theSearch
{
	width: 14em;
	height: 2.5em;
	padding-left: 2em;
	padding-top: 3.25em;
}

* html div#wrapper div#search form#theSearch
{
	width: 16em;
	height: 5.75em;
}

div#wrapper div#search input#query
{
	width: 8em;
	height: 1.5em;
	border: 1px solid #D5D3B6;
}

div#wrapper div#search input#submit
{
	width: 3.75em;
	height: 1.75em;
	border: 0;
	margin-left: 0.25em;
	vertical-align: top;
}
