@charset "utf-8";

#top ul#gnb { margin-top:15px; text-align:right; overflow:hidden; }
#top ul#gnb li { display:inline-block; padding-left:8px; padding-right:5px; background:url(/open_content/history/images/layout/gnb_bar.png) no-repeat left center; }
#top ul#gnb li:first-child { background:none; }
#top ul#gnb li a { font-size:13px; font-weight:bold; color:#fff}
#top div#nav { min-height:57px; }
#top div#nav div.logo h1 a { display:block; min-height:35px; text-indent:-50000px; font-size:0px; line-height:0px; }
#top div#nav div.logo h1 a { background:url(/open_content/history/images/layout/logo02.png) no-repeat center; }
#top div#nav div#lnb ul li a { display:inline-block; padding-top:10px; color:#fff; font-size:18px; font-weight:bold; }
#top div#nav div#lnb ul li a:hover, #top div#nav div#lnb ul li.select a { color:#ffe56f; text-decoration:none; }
#contents { position:relative; }
#control div.data_control div.data div ul.con li img { display:none; }
#bottom { padding:15px 0px; width:100%; text-align:center; background:#3f3b39; color:#fff; }

.sub { background:url(/open_content/history/images/layout/sub_visual.jpg) no-repeat center top; }
.sub_info div#sns ul { position:absolute; top:22px; right:0px; overflow:hidden; }
.sub_info div#sns ul li { float:left; width:90px; text-align:center; border-left:1px solid #ccc; }
.sub_info div#sns ul li:first-child { border-left:0px; }
.sub_info div#sns ul li a.ir { display:block; padding-top:38px; width:90px; height:15px; font-size:13px; line-height:15px; text-indent:0px; background-position:center top; background-repeat:no-repeat}
.sub_info div#sns ul li a.favorite { background-image:url(/open_content/history/images/layout/ic_favorite.png); }
.sub_info div#sns ul li a.facebook { background-image:url(/open_content/history/images/layout/ic_facebook.png); }
.sub_info div#sns ul li a.twitter { background-image:url(/open_content/history/images/layout/ic_twitter.png); }
.sub_info div#sns ul li a.print { background-image:url(/open_content/history/images/layout/ic_print.png); }
.sub_info ol { margin-top:23px; overflow:hidden; }
.sub_info ol li { float:left; padding-right:7px; padding-left:14px; background:url(/open_content/history/images/layout/location_arr.gif) no-repeat left center; }
.sub_info ol li:first-child { padding-left:0px; background:none; }
#submenu ul { overflow:hidden; }
#submenu ul li { float:left; }
#submenu ul li p { text-align:center; border:1px solid #aaa; }
#submenu ul li a { display:block; font-size:16px; letter-spacing:-1px; font-weight:bold; background-repeat:no-repeat; background-position:center 8px; }
#submenu ul.usual li a { display:inline-block; background-position:left center;  }
#submenu ul li.select p { background-color:#835f47; border-color:#66431a; }
#submenu ul li.select a { color:#fff; }
#detail_con { margin-top:20px; }

/*****************************************************************************************************************************************************************************************/

@media all and (min-width:1024px) {
	.wrap { margin:0px auto; width:1024px; }
	.wrapper { margin:0px auto; width:1024px; }
}

@media all and (max-width:1023px) {
	.wrap { width:100%; }
	.sub_info { padding-left:10px; }
}

@media all and (min-width:910px) {
	#top div#nav div#lnb ul { overflow:hidden; padding-left:3%; }
	#top div#nav div#lnb ul li a { padding-right:16px; }
	#top div#nav div#lnb ul li a:hover, #top div#nav div#lnb ul li.select a { background:url(/open_content/history/images/layout/lnb_on.png) no-repeat right top; }	
}

@media all and (max-width:909px) {
	#submenu ul li a { font-size:15px; background-size:90%; }
	#submenu ul.col5 li a { background-size:55%; }
	#submenu ul.usual li a { font-size:15px; background-size:auto; }
}

@media all and (min-width:768px) {		
	.dp_mb { display:none; }
	.pc_block { display:block; }
	#top div#nav { margin-top:15px; }
	#top div#nav { position:relative; padding:0px 6px; background:url(/open_content/history/images/layout/nav_bgR.png) no-repeat right center; }
	#top div#nav div.logo { position:absolute; left:0px; top:0px; padding:0px 6px; background:url(/open_content/history/images/layout/nav_bgL.png) no-repeat left center; }
	#top div#nav div.logo h1 { width:210px; background:#3f3b39 url(/open_content/history/images/layout/nav_bgM.png) no-repeat right center; }
	#top div#nav div.logo h1 a { height:57px; }
	#top div#nav h2 { display:none; }
	#top div#nav div#lnb { padding-left:190px; height:57px; background:url(/open_content/history/images/layout/nav_bg.png) repeat-x left center; }
	#top div#nav div#lnb ul { overflow:hidden; }
	#top div#nav div#lnb ul li { float:left; margin-top:8px; text-align:center;}
	#top div#nav div#lnb ul li.lnb01 { width:20%; }
	#top div#nav div#lnb ul li.lnb02 { width:20%; }
	#top div#nav div#lnb ul li.lnb03 { width:20%; }
	#top div#nav div#lnb ul li.lnb04 { width:20%; }
	#top div#nav div#lnb ul li.lnb05 { width:20%; }
	#top div#nav div#lnb ul li a { display:inline-block; padding-top:10px; padding-bottom:10px; color:#fff; font-size:18px; font-weight:bold; }	
	#control { margin-top:70px; }
	.sub_info { position:relative; min-height:140px; }
	.sub_info h3 { margin-top:18px; font-size:45px; font-weight:bold; color:#fff; text-shadow:0px 0px 3px rgba(0,0,0,.5)}		
	#submenu ul li a { padding-top:90px; padding-bottom:10px; }	
	#submenu ul.usual li { width:24.6%; margin:.2%; }
	#submenu ul.col5 li { width:19.6%; margin:.2%; }
	#submenu ul.col7 li { width:13.8%; margin:.2%; }
	#submenu ul.col7 li { width:13.8%; margin:.2%; }
	#submenu ul.col7 li.period03 { width:14.4%; }
	#submenu ul.col8 li { width:12.1%; margin:.2%; }
	#submenu ul.usual li a { padding:15px 0px 15px 50px; }
	#submenu ul li.period01 a { background-image:url(/open_content/history/images/layout/menu_period01.gif); } /*석기*/
	#submenu ul li.period02 a { background-image:url(/open_content/history/images/layout/menu_period02.gif); } /*청동기*/
	#submenu ul li.period03 a { background-image:url(/open_content/history/images/layout/menu_period03.gif); } /*삼국*/
	#submenu ul li.period04 a { background-image:url(/open_content/history/images/layout/menu_period04.gif); } /*통일신라*/
	#submenu ul li.period05 a { background-image:url(/open_content/history/images/layout/menu_period05.gif); } /*고려*/
	#submenu ul li.period06 a { background-image:url(/open_content/history/images/layout/menu_period06.gif); } /*조선*/
	#submenu ul li.period07 a { background-image:url(/open_content/history/images/layout/menu_period07.gif); } /*근대/현대*/
	#submenu ul li.data a { background-image:url(/open_content/history/images/layout/menu_data.gif); }
	#submenu ul li.notice a { background-image:url(/open_content/history/images/layout/menu_notice.gif); }
	#submenu ul li.request a { background-image:url(/open_content/history/images/layout/menu_request.gif); }
	#submenu ul li.qna a { background-image:url(/open_content/history/images/layout/menu_qna.gif); }
	#submenu ul li.select.period01 a { background-image:url(/open_content/history/images/layout/menu_period01_on.gif); }
	#submenu ul li.select.period02 a { background-image:url(/open_content/history/images/layout/menu_period02_on.gif); }
	#submenu ul li.select.period03 a { background-image:url(/open_content/history/images/layout/menu_period03_on.gif); }
	#submenu ul li.select.period04 a { background-image:url(/open_content/history/images/layout/menu_period04_on.gif); }
	#submenu ul li.select.period05 a { background-image:url(/open_content/history/images/layout/menu_period05_on.gif); }
	#submenu ul li.select.period06 a { background-image:url(/open_content/history/images/layout/menu_period06_on.gif); }
	#submenu ul li.select.period07 a { background-image:url(/open_content/history/images/layout/menu_period07_on.gif); }
	#submenu ul li.select.data a { background-image:url(/open_content/history/images/layout/menu_data_on.gif); }
	#submenu ul li.select.notice a { background-image:url(/open_content/history/images/layout/menu_notice_on.gif); }
	#submenu ul li.select.request a { background-image:url(/open_content/history/images/layout/menu_request_on.gif); }
	#submenu ul li.select.qna a { background-image:url(/open_content/history/images/layout/menu_qna_on.gif); }		
}

@media all and (max-width:767px) {	
	body.sub { background:none; }
	.dp_pc { display:none; }
	.mb_block { display:block; }
	#top ul#gnb { display:none; }
	#top div#nav { background:#3f3b39; }
	#top div#nav div.logo { position:relative; top:10px; z-index:2; }
	.sub #top div#nav div.logo h1 { position:absolute; left:10px; }
	.sub #top div#nav div.logo h1 a { display:block; width:27px; height:27px; background:url(/open_content/history/images/layout/mb_home.png) no-repeat center; text-indent:-100%; font-size:0px; line-height:0px; }
	#top div#nav h2 { position:absolute; top:5px; right:0px; z-index:3; }
	#top div#nav h2 a { display:block; padding:10px; width:27px; height:27px; background:url(/open_content/history/images/layout/mb_menu.png) no-repeat center; text-indent:-100%; font-size:0px; line-height:0px; }
	#top div#nav div#lnb { display:none; position:absolute; top:55px; width:100%; z-index:2; background:#3f3b39; }
	#top div#nav div#lnb ul li { border-top:1px solid rgba(255,255,255,.2); }
	#top div#nav div#lnb ul li a { margin:5px 0px; padding:10px 16px 10px 10px; } 
	#top div#nav div#lnb ul li a:hover { background:url(/open_content/history/images/layout/lnb_on.png) no-repeat right top; }
	.main #bottom { margin-top:10%; }
	#control { margin-top:30px; }
	#contents { padding:.5%; }
	.sub_info h3 { position:absolute; left:15%; top:-45px; width:70%; text-align:center; font-size:24px; font-weight:bold; color:#fff; z-index:2; }
	.sub_info div#sns, .sub_info ol { display:none; }
	#submenu ul li a { padding:10px 0px; }
	#submenu ul li { width:24.6%; margin:.2%; }	
	#submenu ul.col5 li { width:32.9%; margin:.2%; }
	#submenu ul li.period02 a { letter-spacing:-2px; font-size:13px; }	
	#detail_con { padding:0px 10px; }	
}