@charset "utf-8"; 
 
 
  
/* 메인 비주얼  ===================================================================================== */
.main_visual				{position:relative;} 
.main_visual li				{height:100%; }
.main_visual li img			{margin:0 auto;}



/* 관람안내  ===================================================================================== */
.main_guide					{position:relative; padding:0; overflow:hidden;}
.main_guide .web_size		{display:flex;}
.main_guide_title			{display:block; flex:0 0 340px; padding:50px 60px 0 0; text-align:right; font-family:"NotoKrB", sans-serif; font-size:32px; line-height:1.35; color:#111; letter-spacing:-1px;}
.main_guide_box				{flex:1 1 auto; min-width:0; padding:50px 0 50px 60px; background:#f5f5f5; box-shadow:0 0 0 100vmax #f5f5f5; clip-path:inset(0 -100vmax 0 0);}	/* 회색 바탕을 화면 오른쪽 끝까지 */
.main_guide_box h3			{font-family:"NotoKrB", sans-serif; font-size:20px; color:#111; margin-bottom:20px;}
.main_guide_head			{display:flex; justify-content:space-between; align-items:baseline;}
.main_guide_head .more		{font-size:15px; color:#111;}
.main_guide_head .more:after	{content:''; display:inline-block; width:6px; height:6px; margin:0 0 2px 8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);}
.main_guide_head .more:hover	{color:#981937;}
.main_guide_list			{display:grid; grid-template-columns:1fr 1fr; gap:30px 60px; margin-bottom:40px;}
.main_guide_list strong		{display:block; font-family:"NotoKrB", sans-serif; font-size:18px; color:#111; margin-bottom:6px;}
.main_guide_list .addr		{font-size:14px; color:#777; margin-bottom:10px;}
.main_guide_list .time		{font-size:15px; color:#333; line-height:1.7;}
.main_guide_note			{font-size:15px; color:#555;}


/* 현재 전시 · 교육/행사 카드  ================================================================== */
.main_cards					{position:relative; padding:70px 0 40px 0;}
.main_cards + .main_cards	{padding-top:40px;}
.main_cards_head			{display:flex; justify-content:space-between; align-items:center; margin-bottom:25px;}
.main_cards_head .main_title	{display:block; margin:0; text-align:left; font-family:"NotoKrB", sans-serif; font-size:28px; letter-spacing:-1px;}
.main_cards_btns			{display:flex; align-items:center; gap:6px;}
.main_cards_btns .more		{margin-right:10px; font-size:15px; color:#333;}
.main_cards_btns .more:hover	{color:#981937;}
.main_cards_btns button		{position:relative; width:38px; height:38px; padding:0; border:1px solid #ccc; background:#fff; cursor:pointer;}
.main_cards_btns button:after	{content:''; position:absolute; top:50%; left:50%; width:7px; height:7px; border-top:1.5px solid #333; border-right:1.5px solid #333;}
.main_cards_btns .prev:after	{transform:translate(-30%,-50%) rotate(-135deg);}
.main_cards_btns .next:after	{transform:translate(-70%,-50%) rotate(45deg);}
.main_cards_btns button:hover	{border-color:#981937;}
.main_card_list				{margin:0 -10px;}
.main_card_list:not(.slick-initialized)	{display:flex;}
.main_card_list.slick-slider	{margin:0 -10px;}	/* slick.css 의 margin:0 auto, 슬라이드 margin 대신 칸 사이 20px */
.main_card_list .slick-slide	{margin:0;}
.main_card_list li			{width:25%; padding:0 10px; box-sizing:border-box;}
.main_card_list .img		{position:relative; padding-bottom:140%; overflow:hidden; background:#f5f5f5; box-shadow:0 3px 6px rgba(0,0,0,0.15);}
.main_card_list .img img	{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main_card_list .tit		{margin-top:20px; font-size:17px; color:#111; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main_card_list .etc		{margin-top:8px; font-size:14px; color:#666; line-height:1.6;}
.main_card_list a:hover .tit	{color:#981937;}
.main_card_list .main_nolist2	{width:100%; height:200px; line-height:200px; text-align:center;}



/* section01  ===================================================================================== */
.main_con01					{position:relative; padding:60px 0; overflow:hidden;}
.main_title					{font-family:"NotoKrM", sans-serif; color:#171717; font-size:1.6em; letter-spacing:-1.5px; text-align:center; margin-bottom:30px;}
.main_box					{position:relative; min-height:310px; border:1px solid #ddd;}
.main_control span			{content:''; display:inline-block;cursor:pointer; width:10px; height:10px; border-radius:10px; background:#9b9b9b; margin:0 1px;}
.main_control .stop			{ display:inline-block;cursor:pointer;}
.main_control .stop span	{content:''; display:inline-block; width:3px; height:10px; background:#9b9b9b; border-radius:0; margin:0 1px;}
.main_control .play			{display:inline-block;cursor:pointer; width:10px; height:10px; border-style:solid; margin:0 2px; border-width:5px 0 5px 10px; border-color:transparent transparent transparent #7c8082;}
.main_control .play span	{display:none;}
.main_control .on			{background:#fff; border:1px solid #9b9b9b;}

.main_media					{position:relative; float:left; width:32%; margin-right:2%;}
.main_media	.more			{position:absolute;right:10px;bottom:10px;background:#000;opacity:.8;color:#fff;padding:5px 10px;}

.main_notice				{position:relative;}
.main_notice .main_cards_head	{padding-bottom:20px; margin-bottom:0; border-bottom:1px solid #111;}
.la_notice_list li			{display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid #ddd;}
.la_notice_list li a		{flex:1 1 auto; min-width:0; font-size:17px; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.la_notice_list li a:hover	{color:#981937;}
.la_notice_list .date		{flex:0 0 auto; font-size:15px; color:#666;}
.la_notice_list .la_nolist	{justify-content:center; color:#666;}
.main_nolist				{height:310px;line-height:310px;}
.main_nolist2				{height:310px;line-height:310px;width:100% !important;text-align:center;}

.main_con03 .main_collection			{position:relative; float:left; width:32%;}
.main_con01 .main_collection			{display:none;position:relative; float:right; width:32%;}
.main_collection li			{height:310px;}
.main_collection li img		{width:100%; height:100%; }
.main_collection .main_control		{position:absolute; bottom:15px; left:50%; transform:translateX(-50%);}
.main_collection .main_control span	{background:#e9e9e9;}
.main_collection .main_control .on	{background:none; border:1px solid #e9e9e9;}
.main_collection .main_control .play	{border-color:transparent transparent transparent #e9e9e9;}


.main_youtube				{position:relative; float:right; width:32%; }
.main_youtube .main_box		{background:#000;}
.youtube_video				{background:#eee;height:220px; border-bottom:1px solid #ddd;}
.youtube_btm				{overflow:hidden;}
.youtube_thum				{float:left; width:calc(100% - 50px); margin-right:50px; position:absolute; bottom:5px; padding:0 5px; }
.youtube_thum li			{position:relative; float:left; width:calc(33.3% - 3px); margin-right:4px; height:70px; border:1px solid #eee;display: flex;justify-content: center;align-items: center; cursor:pointer; }
.youtube_thum li.on			{border-color:#ff3366;}
.youtube_thum .on .layer	{display:none;}
.youtube_thum li:hover		{border-color:#ff3366;}
.youtube_thum li:hover .layer	{display:none;}
.youtube_thum li:last-child	{margin-right:0px; float:right;}
.youtube_thum li img		{ max-width:100%;max-height:100%;flex: 0 0 auto;}
.youtube_thum .layer		{position:absolute; top:0; left:0; background:#000 url("../image/main/acc_view.png") no-repeat 50% 50%; background-size:35px; width:100%; height:100%; opacity:.5; }
.youtube_btm .more			{position:absolute; right:5px; bottom:0; width:40px; height:75px; cursor:pointer; }
.youtube_btm .more span, .youtube_btm .more:before, .youtube_btm .more:after {position:absolute; left:5px; content:''; width:25px; height:2px; border-radius:2px; background:#fff; }
.youtube_btm .more:before		{top:21px; }
.youtube_btm .more span			{top:15px; }
.youtube_btm .more:after		{top:27px; }
.youtube_btm .more p			{color:#fff; position:absolute; bottom:18px; font-size:0.9em;}


.main_movie					{position:relative; float:right; width:32%;}
.movie_wrap					{overflow:hidden;}
.movie_wrap	.img			{float:none; width:100%; height:310px; overflow:hidden;}
.movie_wrap	.img img		{width:100%; height:100%; border-right:1px solid #eaeaea;}
.movie_wrap .info			{display:none;float:right; width:50%; min-height:310px; text-align:left;}
.movie_wrap .info .wrap		{padding:25px 20px;}
.movie_wrap .info .tag		{display:inline-block; zoom:1; *display:inline; font-family:"NotoKrM", sans-serif; font-size:0.85em; height:28px; line-height:26px; padding:0 15px; letter-spacing:-1px; margin-bottom:15px;}
.movie_wrap .info .tag_green	{border:1px solid #0d9229; color:#0d9229;} /* 전체관람 */
.movie_wrap .info .tag_blue		{border:1px solid #00a0e9; color:#00a0e9;} /* 12세관람 */
.movie_wrap .info .tag_yellow	{border:1px solid #f36d00; color:#f36d00;} /* 15세관람 */
.movie_wrap .info .tag_red		{border:1px solid #e60012; color:#e60012;} /* 청불 */
.movie_wrap .info .strong		{font-family:"NotoKrM", sans-serif; font-size:1.25em; color:#333; }
.movie_wrap .info .info01		{color:#999; font-size:0.95em; margin:5px 0 20px 0;}
.movie_wrap .info .info03		{line-height:140%; letter-spacing:-1px; margin-top:3px;}
.main_movie .main_control		{position:absolute; bottom:15px; left: 50%; transform: translateX(-50%);}



/* section02  ===================================================================================== */
.main_con02					{position:relative; padding:60px 0; overflow:hidden; background:#fafafa;}
.main_con01, .main_con03	{position:relative; padding:60px 0; overflow:hidden;}
.main_con02 .main_title		{text-align:left;}

.main_calendar				{position:relative; float:left; width:32%;}
.calendar_top				{height:47px; line-height:47px; background:#981937; text-align:center; color:#fff;}
.calendar_top .year, .calendar_top .month	{ color:#fff; font-size:1.2em;}
.calendar_top .prev			{float:left; margin-left:20px; opacity:0.5;}
.calendar_top .next			{float:right; margin-right:20px; opacity:0.5;}
.calendar_top .prev img, .calendar_top .next img	{width:10px;}
#calendar_calbox			{height:224px;}
.main_table					{width:100%;}
.main_table thead			{border-bottom:1px solid #ddd;}
.main_table thead th		{line-height:37px; font-size:0.85em;}
.main_table tbody td		{line-height:31px; text-align:center;}
.main_table span			{content:''; display:block; width:30px; height:30px; line-height:30px; margin:0 auto; border-radius:50px; color:#fff;}
.main_table .red			{background:#cf6666;}
.main_table .grey			{background:#909090;}
.calendar_bottom			{line-height:40px; border-bottom:1px solid #ddd; text-align:center; font-size:0.9em; color:#777;}
.calendar_bottom span		{content:''; display:inline-block; width:10px; height:10px; border-radius:10px;}
.calendar_bottom .dot_red	{background:#cf6666; margin-right:7px;}
.calendar_bottom .dot_grey	{background:#909090; margin:0 7px 0 20px;}







/* screen 1400 */
@media screen and (max-width:1400px) {

	.main_con01, .main_con02, .main_con03	{padding:40px 10px;}
	.main_cards					{padding-left:10px; padding-right:10px;}
	.main_guide_title			{flex-basis:280px; padding-left:10px; padding-right:40px;}

}



/* screen 1024*/
@media screen and (max-width:1024px) {


	.main_guide .web_size			{display:block;}
	.main_guide_title				{padding:30px 10px 15px 10px; text-align:left; font-size:22px;}
	.main_guide_title br			{display:none;}
	.main_guide_box					{padding:25px 10px 30px 10px;}
	.main_guide_list				{gap:20px 30px; margin-bottom:25px;}
	.main_cards						{padding-top:45px; padding-bottom:20px;}
	.main_cards_head .main_title	{font-size:21px;}
	.main_card_list li				{width:33.33%;}
	.main_con01, .main_con02, .main_con03		{padding:30px 10px;}
	.main_title						{font-size:1.4em; margin-bottom:20px;}

	.main_media						{float:none; width:100%; margin:0 0 30px 0; }

	.la_news_top .date p			{font-size:0.9em;}
	.main_collection				{width:49% !important;}
	.main_youtube						{width:49%;}
	.main_movie						{width:49%;}
	.movie_wrap .info .wrap			{padding:15px;}
	.movie_wrap .info .tag			{font-size:0.85em; margin-bottom:15px;}
	.movie_wrap .info .info01		{font-size:0.85em; margin:5px 0 15px 0;}
	.movie_wrap .info .info02, .movie_wrap .info .info03		{font-size:0.85em;}

	.calendar_top									{height:39px; line-height:39px;}
	.main_table thead th							{font-size:0.8em;line-height:39px;}
	.calendar_top .year, .calendar_top .month		{font-size:1em;}
	#calendar_calbox				{height:238px;}
	.main_table tbody td, .calendar_bottom			{font-size:0.85em; line-height:33px;}

	

}


/* screen 785 */
@media screen and (max-width:785px) {

	.main_box						{min-height:100%;}

	.main_notice					{margin-bottom:10px;}
	.main_guide_list				{grid-template-columns:1fr;}
	.main_card_list:not(.slick-initialized)	{flex-wrap:wrap;}
	.main_card_list li				{width:50%;}
	.main_card_list:not(.slick-initialized) li	{margin-bottom:25px;}
	.la_notice_list li a			{font-size:14px;}
	.la_notice_list .date			{font-size:13px;}
	.main_collection				{float:none; width:100% !important; margin-bottom:30px;}
	.main_collection li				{height:100%;}
	.main_youtube					{/*float:none;*/ width:100%;}
	.youtube_thum					{position:relative; padding:5px; bottom:0;}
	.main_movie						{float:none; width:100%;}

	#calendar_calbox				{height:unset;}
	.main_calendar					{float:none; width:100%; margin-bottom:30px;}

}




/* screen 480 */
@media screen and (max-width:480px) {


	.movie_wrap .img				{float:none; width:100%; height:100%;}
	.movie_wrap .info				{float:none; width:100%; min-height:100%;}
	
	.youtube_thum li				{height:50px;}
	.youtube_btm .more				{height:58px;}
	.youtube_btm .more p			{bottom:5px;}

}