@charset "utf-8";

/*******************************************
	Category Icon
*******************************************/

.ico-cate {display:inline-block; min-width:3em; text-align:center; font-size:.8em; color:#fff; font-weight:600; line-height:1.1; padding:.5em .625em; white-space:nowrap; background:#333; border-radius:0 .625em .625em .625em;}
.ico-cate.ty1,
.ico-cate.ty1:before {background:#FF923C;}	/* 공연 */
.ico-cate.ty2,
.ico-cate.ty2:before {background:#FC5C65;}	/* 전시 */
.ico-cate.ty3,
.ico-cate.ty3:before {background:#20BF6B;}	/* 행사 */
.ico-cate.ty4,
.ico-cate.ty4:before {background:#009EFF;}	/* 축제 */ 
.ico-cate.ty5,
.ico-cate.ty5:before {background:#486BE7;}	/* 근로문화 */        
.ico-cate.ty6,
.ico-cate.ty6:before {background:#A65EEA;}	/* 체육행사 */
.ico-cate.ty7,
.ico-cate.ty7:before {background:#3A439D;}	/* 공모 */
.ico-cate.ty8,
.ico-cate.ty8:before {background:#FF55BB;}	/* 모집 */
.ico-cate.ty9,
.ico-cate.ty9:before {background:#777777;}	/* 기타 */
.ico-cate.ty10,
.ico-cate.ty10:before {background:#21aba5;}	/* 아동행사 */
.ico-cate.ty11,
.ico-cate.ty11:before {background:#bc2f61;}	/* 교육 */


.cate-item {background:#E4E4E4;} .cate-item em {color:#777777;}
.cate-item.ty1 {background:#FEDEE0;} .cate-item.ty1 em {color:#FC5C65;}
.cate-item.ty2 {background:#FFF4EB;} .cate-item.ty2 em {color:#FF923C;}
.cate-item.ty3 {background:#D2F2E1;} .cate-item.ty3 em {color:#20BF6B;}
.cate-item.ty4 {background:#CCECFF;} .cate-item.ty4 em {color:#009EFF;}
.cate-item.ty5 {background:#DAE1FA;} .cate-item.ty5 em {color:#486BE7;}
.cate-item.ty6 {background:#EDDFFB;} .cate-item.ty6 em {color:#A65EEA;}
.cate-item.ty7 {background:#D8D9EB;} .cate-item.ty7 em {color:#3A439D;}
.cate-item.ty8 {background:#FFDDF1;} .cate-item.ty8 em {color:#FF55BB;}
.cate-item.ty10 {background:#bce2e0;} .cate-item.ty10 em {color:#21aba5;}
.cate-item.ty11 {background:#f1c3d3;} .cate-item.ty10 em {color:#bc2f61;}



/*******************************************
	Layout Style
*******************************************/

#wrap {padding:4em 0 0 6em;}
@media all and (max-width:1024px) {
	#wrap {padding:6.25em .5em 4.2em;}
}


@media all and (min-width:1025px) {
	#map_header .logo {width:18.2em; background-image:url(../img/logo.svg);}
	#map_search {width:24em;}
	#map_search .searchWrap {width:18em;}	
	
	#map_area {margin-left:18em;}
	#map_search.close-pannel + #map_list_control + #ajax-list-area #map_area {margin-left:0;}
}
@media all and (max-width:1250px) and (min-width:1025px) {
	#map_header .logo {left:0;}
}
@media all and (max-width:1250px) and (min-width:1025px) {
	#map_header nav {left:19em; transform:translateY(-50%); -webkit-transform:translateY(-50%);}	
}
@media all and (max-width:1024px) {
	#map_header .logo a {width:16.5em; background-image:url(../img/logo_small.svg);}
}

#map_search .multiSelect span {color:#fff;}
#map_search .multiSelect button {display:block; position:relative; width:100%; height:2.5em; text-align:center; color:#333; border-radius:5px; background:#fff;}
#map_search .multiSelect button span {display:block; position:absolute; left:0; right:0; top:50%; font-size:.8em; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
#map_search .multiSelect button.on {background:#323768; color:#fff; font-weight:600;}
#map_search .multiSelect button.on span {text-decoration:underline;}

@media all and (min-width:1025px) {
	#map_search .frmSearch {height:11.5em;}
	#map_search .resultSearch {top:11.5em !important;}
	
	#map_search[data-list="calendar"] {width:6em;}
	#map_search[data-list="calendar"] .searchWrap,
	#map_search[data-list="calendar"] .control {display:none !important;}
	
	/*#map_search[data-list="calendar"] ~ * #section_calendar {position:fixed; top:0; }*/
}
@media all and (max-width:1024px) {
	#map_search .multiSelect button {height:2em;}
	#map_search .frmSearch .input {margin-right:7.75em;}
	#map_search .frmSearch .select {position:absolute; right:.5em; bottom:.75em; width:7.5em;}
}


/***********************************
	Type Control
************************************/

#map_list_control {display:block; position:fixed; z-index:5; transition:.3s all; -webkit-transition:.3s all;}
#map_list_control:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:9em; background:#fff; border:1px solid #ddd; z-index:-1;}
#map_list_control li {display:block; position:relative; float:left;}
#map_list_control li a {display:block; position:relative; padding:0 1.11em; font-size:.9em; line-height:2.778em; height:2.778em; border-radius:9em; color:#000;}
#map_list_control li a.on {background:#2A49B9; color:#fff; font-weight:600;}

@media all and (min-width:1025px) {
	#map_list_control {top:5.25em; left:25em;}
	#map_search.close-pannel ~ #map_list_control {left:7em;}
	
	#map_search[data-list='calendar'] ~ #map_list_control,
	#map_search[data-list='calendar'] ~ * #map_list_control {position:absolute; left:auto; right:50%; margin-right:-750px; transform:translateX(6em); -webkit-transform:translateX(6em);}
}
@media all and (min-width:1025px) and  (max-width:1790px) {
	#map_search[data-list='calendar'] ~ #map_list_control,
	#map_search[data-list='calendar'] ~ * #map_list_control {right:1em; margin-right:0; transform:translateX(0); -webkit-transform:translateX(0);}	
}
@media all and (max-width:1024px) {
	#map_list_control {width:8.75em; height:2em; left:50%; bottom:5.2em; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
	#map_list_control ul {display:block; position:relative; height:100%;}
	#map_list_control li {display:block; position:absolute; top:0; left:0; height:100%;}
	#map_list_control li + li {left:auto; right:0;}
	#map_list_control li a {height:2.5em; line-height:2.5em; font-size:.8em; padding:0 1.25em;}
	#map_search[data-list="calendar"] ~ #map_list_control,
	#map_search[data-list="calendar"] ~ * #map_list_control {position:relative; margin:0 auto .5em; top:auto; left:auto; bottom:auto; transform:none; -webkit-transform:none; z-index:0; overflow:hidden; white-space:nowrap;}
	#map_search[data-list="calendar"] .searchWrap {display:none !important;}
}



/***********************************
	Search Result
************************************/

#map_search .resultSearch .list a {padding-left:3em;}
#map_search .resultSearch .list a .ico-cate {position:absolute; left:0; top:50%; width:3em; white-space:normal; overflow:hidden; text-overflow:ellipsis; transform:translateY(-50%); -webkit-transform:translateY(-50%); color:#fff !important;}


/***********************************
	Quick Type
************************************/

@media all and (max-width:1024px) {
	.mo-quick-link,
	#open_search {opacity:0;}
	#wrap[data-list-wrap="map"] #open_search,
	#wrap[data-list-wrap="map"] .mo-quick-link,
	#wrap[data-list-wrap="calendar"] .mo-quick-link {opacity:1;}
	
	#wrap[data-list-wrap="calendar"] #map_header nav {width:75%;}
	#wrap[data-list-wrap="calendar"] #map_header .home {left:75%; width:25%;}
}


/***********************************
	Map Window Info
************************************/

.map-infoWdw .info .title {display:block; position:relative; padding:.5em 0 .75em 2.9em; overflow:visible; white-space:normal; word-break:break-all; border-bottom:1px solid #ddd;}
.map-infoWdw .info .title .ico-cate {display:block; position:absolute; top:50%; left:0; width:3em; white-space:normal; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.map-infoWdw .info .title strong {display:block; line-height:1.4em;}
.map-infoWdw .info .title .ico-cate.ty5 ~ strong,
.map-infoWdw .info .title .ico-cate.ty6 ~ strong {min-height:2em;}

.map-infoWdw .info .con ul {display:block; position:relative; padding:.5em 0; margin-bottom:.5em;}
.map-infoWdw .info .con ul li {display:table; width:100%; table-layout:fixed;}
.map-infoWdw .info .con ul li > * {display:table-cell; vertical-align:top; font-size:.8em; padding:.151em 0;}
.map-infoWdw .info .con ul li strong {width:3.375em; font-weight:600; color:#222222;}
.map-infoWdw .info .con ul li strong:before {content:""; display:inline-block; vertical-align:middle; width:4px; height:4px; background:#FF4141; margin-right:.625em;}
.map-infoWdw .info .con ul li span {color:#333; word-break:break-all; white-space:normal;}
.map-infoWdw .info .con a {display:block; position:relative; white-space:nowrap; overflow:hidden; text-align:center; width:6.75em; margin:0 auto .3125em; border-radius:9em; border:1px solid #FF4141; color:#FF4141; font-size:.8em; line-height:2.125em;}


/***********************************
	Calendar
************************************/

.calendarWrap {display:block; position:relative; max-width:1500px; margin:0 auto; padding:0 1em;}
.calendarHeather {display:block; position:relative; padding:1.25em 10.5em 1.25em 11em;}
.calendarHeather .list-year {display:block; position:absolute; top:1.25em; left:0; width:10em; height:2.5em;}
.calendarHeather .list-year select {display:block; position:relative; width:100%; height:100%; font-size:1.2em; font-weight:600; color:#222; padding:0 2em 0 .83334em; border-radius:9em; border:1px solid #ddd; background:url(../img/ico_select.svg) no-repeat right .5em top 50%; background-size:1.25em auto;}
.calendarHeather .list-year select {-webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none;}
.calendarHeather .list-month {position:relative;}
.calendarHeather .list-month .slider .swiper-slide {width:auto; padding:0 1em;}
.calendarHeather .list-month .slider a {display:block; position:relative; padding:0 .208em; font-size:1.2em; line-height:2.08333em; height:2.08333em; color:#555;}
.calendarHeather .list-month .slider a strong {font-weight:700;}
.calendarHeather .list-month .slider a .selected {display:none; position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden; opacity:0; z-index:-999;}
.calendarHeather .list-month .slider a.on {color:#2A49B9;}
.calendarHeather .list-month .slider a.on:after {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:3px; background:#2A49B9;}
.calendarHeather .list-month .slider a.on .selected {display:block;}
.calendarHeather .control {display:none;}
.calendar-legend {display:none; position:relative; margin-bottom:1.25em; border:1px solid #EEEEEE; padding:.25em; border-radius:5px; text-align:center;}
.calendar-legend li {display:inline-block; position:relative; padding:.25em .5em;}
.calendar-legend .ico-cate {position:relative; width:8px; height:8px; margin-right:5px; padding:0; border-radius:100%; min-width:0; margin-bottom:2px;}
.calendar-legend .ico-cate:before {content:""; display:block; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border-radius:100%; opacity:.2;}
.calendar-legend strong {font-size:.8em; color:#555;}

@media all and (max-width:1670px) {
	.calendarHeather .list-month .slider .swiper-slide {padding:0 .7em;}
}
@media all and (max-width:1530px) {
	.calendarHeather .list-month .slider .swiper-slide {padding:0 .5em;}
}
@media all and (max-width:1430px) {
	.calendarHeather .list-month .slider .swiper-slide {padding:0 .3em;}
}
@media all and (max-width:1330px) {
	.calendarHeather .list-year select {font-size:1em;}
	.calendarHeather .list-month .slider a {font-size:1em; line-height:2.5em; height:2.5em;}
}
@media all and (max-width:1230px) {
	.calendarHeather {padding-left:8em;}
	.calendarHeather .list-year {width:7em;}
}
@media all and (max-width:1170px) {
	.calendarHeather .list-month {padding:0 2em;}
	.calendarHeather .list-month .control {display:block;}
	.calendarHeather .list-month .control > button {display:block; position:absolute; top:50%; margin-top:-1em; width:2em; height:2em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain;} 
	.calendarHeather .list-month .control > .prev {left:0; background-image:url(../img/btn_month_prev.svg);}
	.calendarHeather .list-month .control > .next {right:0; background-image:url(../img/btn_month_next.svg);}
}
@media all and (max-width:1024px) {
	.calendarWrap {padding:0;}
	.calendarHeather {padding:0; margin-bottom:.5em;}
	.calendarHeather .list-year {position:relative; width:auto; top:auto; height:2em; margin-bottom:.5em;}
	.calendarHeather .list-month .slider a {height:2em; line-height:2em;}
	.calendarHeather .list-month .slider .swiper-slide {width:auto; padding:0 .25em;}
}

.calendarWrap .calendar {display:block; position:relative;}
.calendarWrap .calendar table {width:100%; border-top:2px solid #222;}
.calendarWrap .calendar table thead th {font-size:.9em; height:3.1667em; vertical-align:middle; font-weight:600;}
.calendarWrap .calendar table tbody {border-top:1px solid #222;}
.calendarWrap .calendar table thead tr > *:first-child,
.calendarWrap .calendar table tbody tr > *:first-child .day {color:#FF4141;}
.calendarWrap .calendar table thead tr > *:last-child,
.calendarWrap .calendar table tbody tr > *:last-child .day {color:#5537AA;}
.calendarWrap .calendar table tbody td {position:relative; width:14.2857%; padding:.5em; border-bottom:1px solid #ddd; height:6em;}
.calendarWrap .calendar table tbody td .day {display:block; position:absolute; top:.625em; left:.625em; width:1.667em; height:1.667em; line-height:1.667em; text-align:center; font-size:.9em; font-weight:700;}
.calendarWrap .calendar table tbody td.today .day:before {content:'오늘'; position:absolute; top:-1.25em; left:50%; margin-left:-1.25em; width:2.5em; height:1.5em; border-radius:.2em; line-height:1.5em; background:#ff4141; color:#fff; font-size:.8em; }
.calendarWrap .calendar table tbody td ul {display:block; position:relative; margin-left:1.5em;}
.calendarWrap .calendar table tbody td li {display:block; position:relative;}
.calendarWrap .calendar table tbody td li button {display:block; position:relative; width:100%; text-align:left; padding:0 .5em; overflow:hidden; height:1.35em; color:#333;}
.calendarWrap .calendar table tbody td li button > * {font-size:.8em; float:left;}
.calendarWrap .calendar table tbody td li button > * + * {float:right;}
.calendarWrap .calendar table tbody td li button span em {font-weight:800;}
.calendarWrap .calendar table tbody td li button[data-count="0"] {display:none;}
.calendarWrap .calendar table tbody td li + li button {margin-top:.25em;}

@media all and (min-width:1401px) {
	.calendarWrap .calendar table tbody td li button span em {color:#000 !important;}
}
@media all and (min-width:1025px) and (max-width:1400px) {
	.calendar-legend {display:block; font-size:1.1em;}
	.calendarWrap .calendar table tbody td li button strong {display:block; position:absolute; top:0; left:0; text-indent:-999px; width:0; overflow:hidden; z-index:-999; opacity:0;}
}
@media all and (max-width:1024px) {
	.calendar-legend {display:block; margin-top:.75em; margin-bottom:.5em;}
	.calendarWrap .calendar table tbody td .day {position:relative; top:auto; left:auto; right:auto; width:auto; height:auto; font-size:.8em;}
	.calendarWrap .calendar table tbody td ul {margin-left:0;}
	.calendarWrap .calendar table tbody td li button {text-align:center; height:1.1em; padding:0;}
	.calendarWrap .calendar table tbody td li button strong {display:block; position:absolute; top:0; left:0; text-indent:-999px; width:0; overflow:hidden; z-index:-999; opacity:0;}
	.calendarWrap .calendar table tbody td li button span {display:block; float:none; text-align:center; font-size:.75em;}
}
@media all and (max-width:640px) {
	.calendarWrap .calendar table tbody td li button span {text-indent:-999px; overflow:hidden; text-align:left;}
	.calendarWrap .calendar table tbody td li button span em {display:block; position:absolute; top:.1em; left:0; right:0; bottom:0; text-indent:0; text-align:center;}
}
@media all and (max-width:520px) {
	.calendarWrap .calendar table tbody td {padding:.25em;}
}



/************************************************
	Layer Popup
*************************************************/

.pop-open .popWrap {display:block;}
.popWrap {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; background:rgba(0,0,0,.5);}
.popWrap .popup {display:none; position:absolute; top:50%; left:50%; padding:.5em .5em 4.5em; background:#fff; border-radius:1em; overflow:hidden;}
.popWrap .popup.on {display:block;}
.popWrap .popup .pop-body {display:block; position:relative; overflow:auto; height:100%; padding:1em;}
.popWrap .pop-close {display:block; position:absolute; left:1em; bottom:1em; right:1em; text-align:center; padding:1.5em 0 0}
.popWrap .pop-close .btn {display:inline-block; margin:.15em 0; vertical-align:middle; height:2.61111em; font-size:.9em; color:#323768; padding:0 1.1em; border:1px solid #323768;}
.popWrap .pop-close a.btn {line-height:2.61111em;}
.popWrap .pop-close .btn.link {padding-left:2.778em; background:url(../img/ico_relation_link.svg) no-repeat top 50% left 1.1111em #2A49B9; border-color:#2A49B9; background-size:1.38889em auto; color:#fff;}

.popWrap .popup h2 {display:block; position:relative; text-align:center; padding:.89em 0; font-size:1.4em; font-weight:800; color:#000; letter-spacing:-.02em;}
.popWrap .popup h2 strong {color:#00AAA0;}
@media all and (max-width:640px) {
	.popWrap .popup .pop-body {padding:.5em;}
	.popWrap .pop-close {bottom:.5em; left:.5em; right:.5em;}
}
@media all and (max-width:480px) {
	.popWrap .pop-close .btn {font-size:.8em;}
}

.popWrap .schedule-list {display:block; position:relative; border-top:1px solid #000;}
.popWrap .schedule-list li {border-bottom:1px solid #ddd;}
.popWrap .schedule-list a {display:block; position:relative; padding:1.3em 1em 1.3em 3.9em;}
.popWrap .schedule-list a .ico-cate {display:block; position:absolute; width:3em; left:0; top:50%; white-space:normal; word-break:break-all; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.popWrap .schedule-list a .subj {display:block; position:relative; color:#000; font-weight:700;}
.popWrap .schedule-list a .subj ~ * {display:none;}
@media all and (max-width:640px) {
	.popWrap .schedule-list li {padding:0 .8em;}
	.popWrap .schedule-list a {padding-left:3em;}
} 

.schedule-detail > * {margin-bottom:1.5em;}
.schedule-detail .subj {display:block; position:relative; text-align:center; margin-bottom:1.5em;}
.schedule-detail .subj strong {font-size:1.2em; color:#000; font-weight:700; vertical-align:middle;}
.schedule-detail .subj .ico-cate {margin-right:.5em;}
.schedule-detail .detail-info {display:block; border-top:2px solid #333; color:#333;}
.schedule-detail .detail-info .row {display:table; width:100%; border-bottom:1px solid #ddd;}
.schedule-detail .detail-info .row dl {display:table-cell; width:50%; position:relative; padding-left:5.25em; vertical-align:middle; height:2.35em;}
.schedule-detail .detail-info .row dl.full {width:100%;}
.schedule-detail .detail-info dt,
.schedule-detail .detail-info dd {display:block; font-size:.9em; padding:.8em 0; text-align:left;}
.schedule-detail .detail-info dt {display:block; position:absolute; top:0; left:0; font-weight:700; width:5.25em; text-align:center;}

.schedule-detail .detail-descript h4 {font-size:1em; color:#2A49B9; font-weight:700; margin-bottom:.5em;}
.schedule-detail .detail-descript > div {border-radius:5px; border:1px solid #ddd; font-size:.9em; color:#333; line-height:1.5em; word-break:keep-all; padding:1.667em;}
.schedule-detail .detail-descript > div img {max-width:100%;}
.schedule-detail .fileList {display:block; position:relative; border:1px solid #ddd; border-radius:5px; background:#FBFBFB; padding:.85em 1em;}
.schedule-detail .fileList > * {font-size:.9em;}
.schedule-detail .fileList dt {display:block; position:absolute; top:.9445em; left:1.1112em; width:4.445em;}
.schedule-detail .fileList dt:after {content:""; display:block; position:absolute; height:.9em; width:1px; right:0; top:50%; margin-top:-.45em; background:#ddd;}
.schedule-detail .fileList dd {margin-left:4.588em; padding-left:1.1112em;}
.schedule-detail .fileList dd ul li {display:block; position:relative;}
.schedule-detail .fileList dd ul li + li {margin-top:.3em;}
.schedule-detail .fileList dd a {display:inline-block; position:relative; max-width:100%; color:#323768;}
.schedule-detail .fileList dd a:after {content:""; display:inline-block; vertical-align:middle; width:1.3889em; height:1.3889em; max-width:25px; max-height:25px; background:url(../img/ico_file.svg) no-repeat 50% 50%; background-size:contain;}
.schedule-detail .fileList dd a:hover {text-decoration:underline;}

@media all and (max-width:790px) {
	.schedule-detail .detail-info,
	.schedule-detail .detail-info tbody,
	.schedule-detail .detail-info tr,
	.schedule-detail .detail-info th,
	.schedule-detail .detail-info td {display:block; position:relative;}
	.schedule-detail .detail-info tr:after {content:""; display:block; clear:both;}
	.schedule-detail .detail-info th,
	.schedule-detail .detail-info td {min-height:2.2em;}
	.schedule-detail .detail-info th {width:20%; float:left; overflow:hidden;}
	.schedule-detail .detail-info td {width:80%; float:right;}
}
@media all and (max-width:640px) {
	.schedule-detail .detail-info dl > *,
	.schedule-detail .detail-descript > div,
	.schedule-detail .fileList > * {font-size:.8em;}
	
	.schedule-detail .detail-info .row {display:block; position:relative; border:none;}
	.schedule-detail .detail-info .row dl {display:table; width:100%; border-bottom:1px solid #ddd; padding:0;}
	.schedule-detail .detail-info .row dl > * {display:table-cell !important; position:relative !important;}
	.schedule-detail .detail-info .row dl dt {top:auto; left:auto; width:6em;}
}
@media all and (max-width:610px) {
	.schedule-detail .detail-info th {width:30%;}
	.schedule-detail .detail-info td {width:70%;}
}
@media all and (max-width:480px) {
	
	
}



.popWrap #schedule_list {width:800px; height:600px; margin:-300px 0 0 -400px;}
.popWrap #schedule_detail {width:800px; height:774px; margin:-387px 0 0 -400px;}

@media all and (max-width:820px) {
	.popWrap #schedule_list {width:auto; left:10px; right:10px; margin-left:0;}	
	.popWrap #schedule_detail {width:auto; left:10px; right:10px; margin-left:0;}
}
@media all and (max-height:794px) {
	.popWrap #schedule_detail {height:auto; top:10px; bottom:10px; margin-top:0;}	
}
@media all and (max-height:620px) {
	.popWrap #schedule_list {height:auto; top:10px; bottom:10px; margin-top:0;}	
}