@charset "utf-8";

/******* 메인 *************************************************************************/
.main .main_visual>div { display:none; position:absolute; left:0px; top:-25px; width:100%; height:100%; z-index:-1; text-indent:-500000px; font-size:0px; line-height:0px; }
.main .main_visual>div.select { display:block; }
.main .visual01 { background:url(/open_content/history/images/contents/main_visual01.jpg) no-repeat center top; }
.main .visual02 { background:url(/open_content/history/images/contents/main_visual02.jpg) no-repeat center top; }
.main .visual03 { background:url(/open_content/history/images/contents/main_visual03.jpg) no-repeat center top; }
.main .visual04 { background:url(/open_content/history/images/contents/main_visual04.jpg?v2022) no-repeat center top; }
.main .visual05 { background:url(/open_content/history/images/contents/main_visual05.jpg) no-repeat center top; }
.main .visual06 { background:url(/open_content/history/images/contents/m_visual06.jpg) no-repeat center top; }
.main .visual07 { background:url(/open_content/history/images/contents/m_visual07.jpg) no-repeat center top; }
.main .visual_txt { position:relative; }
.main .visual_txt ul.visual_btn { position:absolute; top:100px; overflow:hidden; }
.main .visual_txt ul.visual_btn li { float:left; }
.main .visual_txt ul.period_flow { overflow:hidden; margin:0px auto; width:600px; margin-top:35%; margin-bottom:1%;  padding:0px 20px; border-radius:70px; background:rgba(0,0,0,.8); }
.main .visual_txt ul.period_flow li { float:left; padding-left:1.5%; margin-right:.5%; width:17%; text-align:center; background:url(/open_content/history/images/contents/m_period_arr.png) no-repeat left center; }
.main .visual_txt ul.period_flow li.period02 { width:23%; letter-spacing:-1px}
.main .visual_txt ul.period_flow li.period07 { padding-right:0%; }
.main .visual_txt ul.period_flow li:first-child { background:none; padding-left:0% }
.main .visual_txt ul.period_flow li a { display:block; padding:10px 0px; font-size:15px; font-weight:bold; color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,1); text-decoration:none;  }
.main .visual_txt ul.period_flow li:hover a,  
.main .visual_txt ul.period_flow li.select a { font-size:18px; color:#ffe56f; }

/******* 서브 *************************************************************************/
#detail_con img { max-width:100%; }
div.introduce p { margin-top:4%;  }
div.history>div { padding:4% 5%; }
div.history>div p.tit { font-weight:bold; }
div.history>div p.txt { margin-top:2%; }
div.history01 { background:url(/open_content/history/images/contents/history_bg01.jpg) no-repeat left top; }
div.history02 { margin-top:3%; background:url(/open_content/history/images/contents/history_bg02.jpg) no-repeat right top; }
div.period { background:url(/open_content/history/images/contents/period_line.gif) repeat-y center top; }
div.period p.year { position:relative; margin:10px auto; width:180px; padding:6px; text-align:center; background:#757575; border-radius:30px; font-size:18px; font-weight:bold; color:#fff; }
div.period ul { overflow:hidden; }
div.period ul li { margin:5px 0px; overflow:hidden; background:url(/open_content/history/images/contents/period_dot.gif) no-repeat left 5px; }
div.period ul li p.q { font-weight:bold; padding-right:5px; }
ul.sitemap { overflow:hidden; }
ul.sitemap>li { float:left; margin:.5%; min-height:250px; border:1px solid #c8c8c8; border-radius:5px; }
ul.sitemap>li.sitemap01 { background:url(/open_content/history/images/contents/sitemap01_bg.jpg) no-repeat center bottom; }
ul.sitemap>li.sitemap02 { background:url(/open_content/history/images/contents/sitemap02_bg.jpg) no-repeat center bottom; }
ul.sitemap>li.sitemap03 { background:url(/open_content/history/images/contents/sitemap03_bg.jpg) no-repeat center bottom; }
ul.sitemap>li.sitemap04 { background:#f9f9f9 url(/open_content/history/images/contents/sitemap04_bg.jpg) no-repeat center bottom; }
ul.sitemap>li.sitemap05 { min-height:290px; background:#f9f9f9 url(/open_content/history/images/contents/sitemap05_bg.jpg) no-repeat center bottom; }
ul.sitemap>li.sitemap05 ul { padding:10px 15px 25px; }
ul.sitemap>li.sitemap05 ul li { float:left; width:20%; text-align:center; }
ul.sitemap>li.sitemap05 ul li span { display:block; padding-top:5px; font-weight:bold; letter-spacing:-1px; }
ul.sitemap>li p.tit { padding:23px 30px 10px; font-size:24px; font-weight:bold; }
ul.sitemap>li p.txt { padding-left:30px; font-size:15px; }

.btn_goTop{opacity:0; position:fixed; left:50%; margin-left:450px; bottom:70px; z-index:1; -webkit-transition:all ease .5s; transition:all ease .5s}
.btn_goTop.fin{opacity:1; bottom:125px}
.btn_goTop a{display:block; text-align:center; width:50px; height:50px;  line-height:62px; border-radius:600px; border:2px solid #bbb; background:rgba(255,255,255,.7); font-weight:bold; font-size:13px; letter-spacing:0px; font-family:arial}
.btn_goTop a:before{display:block; content:''; position:absolute; left:50%; top:15px; margin-left:-5px; width:5px; height:5px; border:2px solid #888; border-left-color:transparent; border-bottom-color:transparent; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); ; -webkit-transition:all ease .2s; transition:all ease .2s; border-radius:2px}
.btn_goTop a:hover:before{top:12px}
#tab{margin-bottom:4%}
#tab ul{text-align:center; padding-top:3px; font-size:0px; background:#eee;}
#tab ul>li{position:relative; display:inline-block; padding:0px 25px}
#tab ul>li+li:After{display:block; content:''; position:absolute; left:0px; top:23px; width:1px; height:16px; background:#ccc;}
#tab ul>li a{display:block;  position:relative; padding:20px 0px; border-bottom:2px solid transparent; font-size:17px; line-height:1.3; text-decoration:none}
#tab ul>li a:hover{font-weight:bold; color:#333}
#tab ul>li.select a{border-bottom-color:#333; font-weight:bold; color:#333}
#tab ul>li.select a:after{display:block; content:''; position:absolute; left:50%; margin-left:-2px; bottom:-12px; width:1px; height:0px; border:4px solid transparent; border-top-color:#333; border-top-width:6px}


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


@media all and (min-width:768px) {
	.main .main_visual>div { min-height:930px; }
	.main .visual_txt p.slogan { margin-left:-130px; }
	.main .visual_txt2 p.slogan { margin-left:-130px; }
	.main .visual_txt3 p.slogan { margin-left:-130px; }
	.main p.m_open { position:absolute; right:0px; bottom:-10px; }

	div.introduce p { text-align:center; font-size:18px; }
	div.history02 p { text-align:right; }
	div.history>div p.tit { font-size:30px; }
	div.history>div p.txt { font-size:17px; }
	div.period ul li { width:48.5%; }
	div.period ul li.odd { float:right; padding-left:2%; background-position:1px 5px; }
	div.period ul li.even { float:left; padding-right:2%; text-align:right; background-position:right 5px; }
	div.period.period_sunsa div.bg01{ background:url(/open_content/history/images/contents/period_bg01.jpg) no-repeat right 10px; }

	div.period.period_goryeo div#con01{ background:url(/open_content/history/images/contents/period_goryeo_bg01.jpg) no-repeat left 180px; }
	div.period.period_goryeo div#con02{ background:url(/open_content/history/images/contents/period_goryeo_bg02.jpg) no-repeat right 280px, url(/open_content/history/images/contents/period_goryeo_bg03.jpg) no-repeat left 1160px, url(/open_content/history/images/contents/period_goryeo_bg04.jpg) no-repeat right 2260px, url(/open_content/history/images/contents/period_goryeo_bg05.jpg) no-repeat left 2930px}
	div.period.period_goryeo div#con03{ background:url(/open_content/history/images/contents/period_goryeo_bg06.jpg) no-repeat left 250px, 	url(/open_content/history/images/contents/period_goryeo_bg07.jpg) no-repeat right 770px; }
	div.period.period_joseon div#con01{ background:url(/open_content/history/images/contents/period_joseon_bg01.jpg) no-repeat right 100px, url(/open_content/history/images/contents/period_joseon_bg02.jpg) no-repeat left 2350px; }
	div.period.period_joseon div#con02{ background:url(/open_content/history/images/contents/period_joseon_bg03.jpg) no-repeat right 340px, url(/open_content/history/images/contents/period_joseon_bg04.jpg) no-repeat left 1206px; }
	div.period.period_joseon div#con03{ background:url(/open_content/history/images/contents/period_joseon_bg05.jpg) no-repeat right 775px, url(/open_content/history/images/contents/period_joseon_bg06.jpg) no-repeat left 220px; }
	div.period.period_joseon div#con04{ background:url(/open_content/history/images/contents/period_joseon_bg07.jpg) no-repeat right -30px top 205px, url(/open_content/history/images/contents/period_joseon_bg08.jpg) no-repeat left 1290px; }
	div.period.period_joseon div#con05{ background:url(/open_content/history/images/contents/period_joseon_bg09.jpg) no-repeat left 500px, url(/open_content/history/images/contents/period_modern_bg01.jpg) no-repeat right 1150px; }

/* 	div.period.period_goryeo div.bg01{ background:url(/open_content/history/images/contents/period_goryeo_bg01.jpg) no-repeat left 180px; }
	div.period.period_goryeo div.bg02{ background:url(/open_content/history/images/contents/period_goryeo_bg02.jpg) no-repeat right 1450px; }
	div.period.period_goryeo div.bg03{ background:url(/open_content/history/images/contents/period_goryeo_bg03.jpg) no-repeat left 1700px; }
	div.period.period_goryeo div.bg04{ background:url(/open_content/history/images/contents/period_goryeo_bg04.jpg) no-repeat right 2800px; }
	div.period.period_goryeo div.bg05{ background:url(/open_content/history/images/contents/period_goryeo_bg05.jpg) no-repeat left 3470px; }
	div.period.period_goryeo div.bg06{ background:url(/open_content/history/images/contents/period_goryeo_bg06.jpg) no-repeat left 5550px; }
	div.period.period_goryeo div.bg07{ background:url(/open_content/history/images/contents/period_goryeo_bg07.jpg) no-repeat right 6050px; }
	div.period.period_joseon div.bg01{ background:url(/open_content/history/images/contents/period_joseon_bg01.jpg) no-repeat right 100px; }
	div.period.period_joseon div.bg02{ background:url(/open_content/history/images/contents/period_joseon_bg02.jpg) no-repeat right 720px; }
	div.period.period_joseon div.bg03{ background:url(/open_content/history/images/contents/period_joseon_bg03.jpg) no-repeat left 830px; }
	div.period.period_joseon div.bg04{ background:url(/open_content/history/images/contents/period_joseon_bg04.jpg) no-repeat left 2400px; }
	div.period.period_joseon div.bg05{ background:url(/open_content/history/images/contents/period_joseon_bg05.jpg) no-repeat right 3880px; }
	div.period.period_joseon div.bg06{ background:url(/open_content/history/images/contents/period_joseon_bg06.jpg) no-repeat right 4450px; }
	div.period.period_joseon div.bg07{ background:url(/open_content/history/images/contents/period_joseon_bg07.jpg) no-repeat left 4440px; }
	div.period.period_joseon div.bg08{ background:url(/open_content/history/images/contents/period_joseon_bg08.jpg) no-repeat left 6220px; }
	div.period.period_joseon div.bg09{ background:url(/open_content/history/images/contents/period_joseon_bg09.jpg) no-repeat left 7580px; }
	div.period.period_modern div.bg01{ background:url(/open_content/history/images/contents/period_modern_bg01.jpg) no-repeat left 450px; } */
	ul.sitemap>li { width:32%; }
	ul.sitemap>li.sitemap04 { width:48.6%; min-height:290px; } 
	ul.sitemap>li.sitemap05 { width:48.6% } 
}

@media all and (max-width:767px) {
	*{max-height:90000000px}
	.main .main_visual>div { background-size:300% }
	.main .visual_txt p.slogan { width:100%; overflow:hidden; text-align:center; }
	.main .visual_txt p.slogan img { width:120%; }
	.main .visual_txt ul.period_flow { padding:0px; position:relative; margin:0px auto; margin-top:47%; width:40%; background:none; }
	.main .visual_txt ul.period_flow li { display:none; }
	.main .visual_txt ul.period_flow li.select { display:block;width:100%;  }
	.main .visual_txt ul.period_flow li.select a { display:block; padding:5px 0px; width:100%; text-align:center; background:rgba(0,0,0,.7); border-radius:20px; }
	.main .visual_txt ul.btn_flow { position:relative; }
	.main .visual_txt ul.btn_flow li { position:absolute; top:-27px; }
	.main .visual_txt ul.btn_flow li.prev { left:20%; }	
	.main .visual_txt ul.btn_flow li.next { right:20%; }
	.main p.m_open { display:none; }
	
	div.history>div { padding:5% 6%; }
	div.history>div p.tit { font-size:20px; }
	div.history>div p { text-align:justify}
	div.period { background:none; }
	div.period ul { padding-top:10px; padding-bottom:20px; margin-bottom:30px; border-bottom:1px dotted #c8c8c8; }
	div.period ul:last-child { border-bottom:0px; }
	div.period ul li { padding-left:15px; }
	div.period ul li p { display:inline; }
	ul.sitemap>li { width:48.6%; }
	ul.sitemap>li.sitemap05 { width:99% } 

	.btn_goTop{left:100%; margin-left:-70px; bottom:130px}
	.btn_goTop.fin{bottom:160px}
	#tab{margin-bottom:30px}
	#tab ul>li{padding:0px 12px}
	#tab ul>li+li:After{top:16px; height:14px}
	#tab ul>li a{padding:13px 0px; font-size:15px}
	#tab ul>li.select a:after{display:none}
}

@media all and (min-width:690px) and (max-width:767px){
	.main .main_visual>div { min-height:900px; }
	.main .visual_txt ul.period_flow { margin-top:34%; }
}

@media all and (max-width:540px) {
	ul.sitemap>li { width:99%; }
}