@charset "utf-8";
@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}


@media all and (max-width:1600px) {
	.inner {padding:0 1em;}
}


.mainSection {position:relative;max-width:80em;margin:0 auto;z-index:1;}
.circle {display:block; text-indent:-999px; overflow:hidden; -webkit-animation:rotate-center 10s linear infinite both;animation:rotate-center 10s linear infinite both;}
.circle:hover {animation-play-state:paused;}

.sec-tit strong {font-family:'STUNNING'; letter-spacing:-.02em; font-weight:800; font-size:1.9em; color:#222; line-height:1.3em;}
@media all and (max-width:1024px) {
	.sec-tit strong  {font-size:1.5em;}
}

.control button {display:block; position:relative; text-indent:-999px; overflow:hidden;}
.control button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1em 0 0 -1em; width:2em; height:2em; background:url(../img/main/spr_control.svg) no-repeat 0 50%; background-size:auto 100%;}

.more {display:inline-block; position:relative; font-size:1.1em; border:1px solid #222; color:#222; line-height:1; padding:.9em 3.09em .9em 1.09em; font-weight:600; background:url(../img/main/ico_more.svg) no-repeat top 50% right .9em; background-size:1.3636em auto;}
.more:focus,
.more:hover {background-color:#222; color:#fff; background-image:url(../img/main/ico_more_w.svg);}
.more.white {color:#fff; border-color:#fff; background-image:url(../img/main/ico_more_w.svg);}
.more.white:focus,
.more.white:hover {color:#222; background-color:#fff; background-image:url(../img/main/ico_more.svg);}

@media all and (max-width:1024px) {
	.more {font-size:1em;}
}

.no-data {display:block; position:relative; padding:1.76470588em 0; text-align:center; width:100% !important; background:#F9F9F9;}
.no-data span {display:block; padding:5em 0;}


/**************************************************
	firstScreen01 Section 01 메인
**************************************************/

.mainVisualWrap {position:relative; display:block; margin:0 auto; max-height:38em;  max-width:100%;}

.mainVisualWrap .btnvrWrap {position:absolute;bottom: 2em;right:2em;z-index:2;transition:all .2s;}
.mainVisualWrap .btn-vr {display:block;position:relative; padding:1.5em 1.25em; width:7em; height:7em; border-radius:9em; background:linear-gradient(93.58deg,rgba(0, 145, 219, 1) 0%,rgba(253, 35, 146, 1) 100%); word-break:keep-all; text-align:left;}
.mainVisualWrap .btn-vr:before {content:'';display:block; position:absolute; left:50%; bottom:0; margin-top:1.3em; margin-right:-1.5em; width:4.6em; height:3.5em; background: url(../img/main/ico_btnvr.svg) no-repeat 0 0; animation:shake-vertical 1s ease-out infinite;}
.mainVisualWrap .btn-vr > span {font-size:.8em; color:#fff; font-family:'STUNNING';}
.mainVisualWrap .btn-vr span.arrow {position:absolute;bottom: 0;left: 0;width:3.056em;height:3.056em;border-radius:50%;background:#fff;text-indent:-9999px;}
.mainVisualWrap .btn-vr span.arrow:before {content:""; position:absolute; top:1.112em; left:50%; margin-left:-.445em; display:block; width:0.889em; height:0.889em; background:url(../img/main/btn_right.svg) no-repeat 50% 50%; background-size:auto;}
.mainVisualWrap .btn-vr:hover span.arrow:before {animation:shake-horizontal 2s; -webkit-animation:shake-horizontal 2s;}


.mainVisualWrap .btnticketWrap {position:absolute; bottom:10em; right:2em; z-index:2;transition:all .2s;}
.mainVisualWrap .btn-ticket {display:block;position:relative; padding:1.5em; width:7em; height:7em; border-radius:7em; background:linear-gradient(93.58deg,rgba(0, 134, 203, 1) 0%,rgba(4, 89, 132, 1) 100%);word-break:keep-all; text-align:left;}
.mainVisualWrap .btn-ticket:before {content:'';display:block;position:absolute;left:50%;bottom: 0;margin-left: -.8em;margin-bottom: .25em;width:5.8em;height:3em;background: url(../img/main/ico_btnticket.png) no-repeat 0 0;background-size:contain;}
.mainVisualWrap .btn-ticket > span {font-size:.8em; color:#fff; font-family:'STUNNING';}
.mainVisualWrap .btn-ticket span.arrow {position:absolute; width: 1.25em; height: 0.775em; bottom:2em; left:2em; text-indent:-9999px; }
.mainVisualWrap .btn-ticket span.arrow:before {content:""; position:absolute; top:0; left:0; display:block;width: 1.25em;height:0.775em; background:url(../img/main/btn_right_w.svg) no-repeat 50% 50%;background-size:contain;}
.mainVisualWrap .btn-ticket:hover span.arrow:before {animation:shake-horizontal 2s; -webkit-animation:shake-horizontal 2s;}


@keyframes shake-vertical {
    0% {-webkit-transform: translateY(0);transform: translateX(0);}
	25% {-webkit-transform: translateY(-2px); transform:translateY(-2px);}
    50% {-webkit-transform: translateY(2px);transform: translateY(2px);}
    80% {-webkit-transform: translateY(1px);transform: translateY(1px);}
    100% {-webkit-transform: translateY(0);transform: translateX(0);}
}

@-webkit-keyframes shake-vertical {
   0% {-webkit-transform: translateY(0);transform: translateX(0);}
	25% {-webkit-transform: translateY(-2px); transform:translateY(-2px);}
    50% {-webkit-transform: translateY(2px);transform: translateY(2px);}
    80% {-webkit-transform: translateY(1px);transform: translateY(1px);}
    100% {-webkit-transform: translateY(0);transform: translateX(0);}
}

@keyframes shake-horizontal {
    0%,to {-webkit-transform: translateX(0); transform:translateX(0);}
	10%,30%,50%,70% {-webkit-transform: translateX(-2px); transform:translateX(-2px);}
    20%,40%,60% {-webkit-transform:translateX(2px); transform:translateX(2px);}
    80% {-webkit-transform:translateX(1px); transform:translateX(1px);}
    90% {-webkit-transform:translateX(-1px); transform:translateX(-1px);}
}

@-webkit-keyframes shake-horizontal {
    0%,to {-webkit-transform: translateX(0);transform: translateX(0);}
	10%,30%,50%,70% {-webkit-transform: translateX(-2px); transform:translateX(-2px);}
    20%,40%,60% {-webkit-transform:translateX(2px); transform:translateX(2px);}
    80% {-webkit-transform:translateX(1px);transform:translateX(1px);}
    90% {-webkit-transform:translateX(-1px);transform:translateX(-1px);}
}

.mainVisualWrap .control {display:flex !important; flex-direction:row; flex-wrap:nowrap; justify-content:center; position:absolute; bottom:1.5em; left:50%; transform:translate(-50%); -webkit-transform:translate(-50%); z-index:5; }
.mainVisualWrap .control button:before {display:none;}
.mainVisualWrap .control * {display:inline-block;}
.mainVisualWrap .control > div  {display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; height:3em; vertical-align:middle; padding:0 1.5em 0 2em; margin:0 1em; line-height:3em; border-radius:3em; background-color:rgba(0, 0, 0, .5);}
.mainVisualWrap .control .prev {width:3em;height:3em;background-color:rgba(0, 0, 0, .5); border-radius:3em; background-image:url(../img/main/spr_visual_prev.svg) !important; background-repeat:no-repeat; background-position:50% 50%; background-size:1.15em auto;}
.mainVisualWrap .control .next {width:3em; height:3em; background-color:rgba(0, 0, 0, .5); border-radius:3em; background-image:url(../img/main/spr_visual_next.svg) !important; background-repeat:no-repeat; background-position:50% 50%; background-size:1.15em auto;}
.mainVisualWrap .control > div button {display:inline-block; width:1.5em; height:1.5em;}
.mainVisualWrap .control > div button.stop {background-image:url(../img/main/spr_visual_stop.svg) !important; background-repeat:no-repeat; background-position:50% 50%; background-size:1.5em auto;}
.mainVisualWrap .control > div button.play {display:none; background-image:url(../img/main/spr_visual_play.svg) !important;background-repeat:no-repeat; background-position:50% 50%; background-size:1.5em auto;}
.mainVisualWrap .control .pager {display:inline-block; width:100%; margin-right:1em;}
.mainVisualWrap .control .pager * {display:inline-block;color:#fff;vertical-align:middle;}
.mainVisualWrap .control .pager i {display:inline-block; width:.3em; height:.3em; border-radius:.4em; margin:0 .75em; background:#fff; opacity:.6;}
.mainVisualWrap .control .pager em {opacity:.8; font-style:normal;}
.mainVisualWrap .slider {display:block; position:relative; height:100%; overflow:hidden;}
.mainVisualWrap .slider .swiper-container {}
.mainVisualWrap .slider .swiper-container,
.mainVisualWrap .slider .swiper-wrapper,
.mainVisualWrap .slider .swiper-slide {height:100%;}
.mainVisualWrap .slider .swiper-slide {}
.mainVisualWrap .slider .swiper-slide > * {display:block;}
.mainVisualWrap .slider .swiper-slide a,
.mainVisualWrap .slider .swiper-slide a img {text-align:center; line-height:38em;  animation:mainbg-ani 3.5s;}

@keyframes mainbg-ani {
		0% {
			background-size: 125%;
		}

		100% {
			background-size: 105%;
		}
	}

@media all and (max-width:1024px) {
	.mainVisualWrap .btnvrWrap {position:relative; bottom:auto; right:auto; margin:0 -1em;}
	.mainVisualWrap .btnvrWrap:hover {top:0;}
	.mainVisualWrap .btnvrWrap .btn-vr { border-radius:0 !important; width:auto; height:auto; text-align:center; padding:1.2em 1em; border:0;}
	.mainVisualWrap .btnvrWrap .btn-vr:before,
	.mainVisualWrap .btnvrWrap .btn-vr span.arrow {display:none;}

	.mainVisualWrap .btnticketWrap {position:relative; bottom:auto; right:auto; margin:0 -1em;}
	.mainVisualWrap .btnticketWrap:hover {top:0;}
	.mainVisualWrap .btnticketWrap .btn-ticket { border-radius:0 !important; width:auto; height:auto; text-align:center; padding:1.2em 1em; border:0;}
	.mainVisualWrap .btnticketWrap .btn-ticket:before,
	.mainVisualWrap .btnticketWrap .btn-ticket span.arrow {display:none;}
	.mainVisualWrap .btn-ticket > span,
	.mainVisualWrap .btn-vr > span {font-size:.9em;}
}

@media all and (max-width:960px) {
	.mainVisualWrap .control {bottom:.5em;}
	.mainVisualWrap .control > div {height:2.5em; line-height:2.5em;}
	.mainVisualWrap .control .prev,
	.mainVisualWrap .control .next {width:2.5em; height:2.5em;}
	.mainVisualWrap .slider .swiper-slide a,
	.mainVisualWrap .slider .swiper-slide a img {line-height:20em;}
}

@media all and (max-width:780px) {
	.mainVisualWrap .control .prev,
	.mainVisualWrap .control .next  {background-color:inherit;}
	.mainVisualWrap .control {position:relative; padding:.5em 0; bottom:auto; left:auto; text-align:center; transform:translateX(0); -webkit-transform:translateX(0); background:#222;}
	.mainVisualWrap .control > div {margin:0; padding:0 1em 0 1.5em; background-color:inherit;}
}

@media all and (max-width:520px) {

}




/**************************************************
	Section 02
**************************************************/

.mainExpoWrap {border:0px solid #222; border-left-width:1px; border-right-width:1px; padding-bottom:4em;}
.mainExpoWrap:before,
.mainExpoWrap:after {content:""; display:block; position:absolute; top:1px; bottom:0; width:1px; background:#DDDDDD;}
.mainExpoWrap:before {left:33.33%;}
.mainExpoWrap:after {right:33.33%;}

.mainExpoWrap .sec-tit {display:flex; flex-wrap:nowrap; align-items:center; padding:2.15em 0 2.75em 2.5em; margin-right:16.5em;}
.mainExpoWrap .sec-tit:after {content:""; display:block; position:relative; width:5.7em; height:2.75em; margin-left:.8em; background:url(../img/main/ico_title.svg) no-repeat 0 50%; background-size:contain;}
.mainExpoWrap .control {display:flex; flex-wrap:nowrap; align-items:center; position:absolute; top:2.7em; right:11.85em;}
.mainExpoWrap .control button {width:2em; height:2em;}
.mainExpoWrap .control button.prev:before {background-position-x:-8em;}
.mainExpoWrap .control button.next:before {background-position-x:-10em;}
.mainExpoWrap .more {position:absolute; right:2.27em; top:1.9545em;}

.mainExpoWrap .slider a {display:block;position:relative;height: 37em;overflow:hidden;}
.mainExpoWrap .slider a img {display:block; position:relative; width:100%; min-height:100%; z-index:0;}
.mainExpoWrap .slider a:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); transition:.3s all; -webkit-transition:.3s all;}

.mainExpoWrap .slider a .cover {display:flex; flex-direction:column; justify-content:center; position:absolute; color:#fff; left:0; right:0; bottom:0; padding:1.5em; z-index:2; transition:.3s all; -webkit-transition:.3s all;}
.mainExpoWrap .slider a .cover > * {display:block; position:relative;}
.mainExpoWrap .slider a .cover .subj {font-family:'STUNNING'; font-weight:800; font-size:1.25em; line-height:1.3em; height:2.6em; margin-bottom:.5em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow:ellipsis;}
.mainExpoWrap .slider a .cover .date {display:block; position:rleative; font-size:.9em; padding-left:4.5em; font-weight:600; color:#F8F8F8;}
.mainExpoWrap .slider a .cover .date em {display:block; position:absolute; top:0; left:0; font-weight:800; font-style:normal; color:#fff;}
.mainExpoWrap .slider a .cover .date em:after {content:""; display:block; position:absolute; left:3.94em; width:1px; top:.27em; bottom:.27em; background:#fff; opacity:.4;}
.mainExpoWrap .slider a .cover .detail {display:block; position:relative; width:5.3em; height:0; opacity:0; border-radius:9em; line-height:2.1em; border:1px solid rgba(255,255,255,.3); margin:0 auto 0; text-align:center; transition:.3s all; -webkit-transition:.3s all;}
.mainExpoWrap .slider a .cover .detail:before {content:""; display:block; position:absolute; width:1px; bottom:3.7em; left:50%; background:rgba(255,255,255,.3); height:3em;}

.mainExpoWrap .slider a:hover:before,
.mainExpoWrap .slider a:focus:before {background:linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));}
.mainExpoWrap .slider a:hover .cover .detail,
.mainExpoWrap .slider a:focus .cover .detail {margin-top:6em; height:2.1em; opacity:1;}
.mainExpoWrap .slider a:hover .cover,
.mainExpoWrap .slider a:focus .cover {top:0; align-items:center;}
.mainExpoWrap .slider a:hover .cover .subj,
.mainExpoWrap .slider a:focus .cover .subj {text-align:center;}

.mainExpoWrap .slider li.no-data {display:block; position:relative; height:22em; background:url(/arts/img/main/noimg_exmain.png) no-repeat; overflow:hidden;}
.mainExpoWrap .slider li.no-data span {text-indent:-9999px; padding:0; }

@media all and (max-width:1024px) {
	.mainExpoWrap:before,
	.mainExpoWrap:after {display:none;}
	.mainExpoWrap .swiper-slide {width:19em; max-width:100%;}
	.mainExpoWrap .slider a {width:100%; height:18em;}
	.mainExpoWrap .sec-tit {padding:1.5em 1em; margin-right:5.5em;}
	.mainExpoWrap .sec-tit:after {font-size:.7em;}
	.mainExpoWrap .more {display:block; position:relative; right:auto; top:auto; border-width:0; border-top-width:1px; border-bottom-width:1px;}
	.mainExpoWrap .control {top:1.5em; right:1em;}
}


/**************************************************
	Section 03
**************************************************/

.mainCultureWrap {padding-top:3.7em; padding-bottom:3.25em; }
.mainCultureWrap:before {content:""; display:block; position:absolute; left:-50vw; right:-50vw; top:0; bottom:0; background:url(../img/main/bak_section03.png) no-repeat 50% 50% #060606; background-size:auto 100%; z-index:-1;}

.mainCultureWrap .sec-tit {margin-bottom:2em;}
.mainCultureWrap .sec-tit strong {font-size:2em; color:#fff;}
.mainCultureWrap .control {display:flex; flex-wrap:nowrap; align-items:center; position:absolute; top:4em; right:11.85em;}
.mainCultureWrap .control button {width:2em; height:2em;}
.mainCultureWrap .control button.prev:before {background-position-x:-12em;}
.mainCultureWrap .control button.next:before {background-position-x:-14em;}
.mainCultureWrap .more {position:absolute; right:2.27em; top:3.1em;}

.mainCultureWrap .slider a {display:block; position:relative; height:18em; overflow:hidden;}
.mainCultureWrap .slider a img {display:block; position:relative; width:100%; min-height:100%; z-index:0;}
.mainCultureWrap .slider a:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); transition:.3s all; -webkit-transition:.3s all;}

.mainCultureWrap .slider a .cover {display:flex; flex-direction:column; justify-content:center; position:absolute; color:#fff; left:0; right:0; bottom:0; padding:1.5em; z-index:2; transition:.3s all; -webkit-transition:.3s all;}
.mainCultureWrap .slider a .cover > * {display:block; position:relative;}
.mainCultureWrap .slider a .cover .subj {font-family:'STUNNING'; font-weight:800; font-size:1.2em; line-height:1.3em; height:2.6em; margin-bottom:.5em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow:ellipsis;}
.mainCultureWrap .slider a .cover .date {display:block; position:rleative; font-size:.9em; padding-left:4.5em; font-weight:600; color:#F8F8F8;}
.mainCultureWrap .slider a .cover .date em {display:block; position:absolute; top:0; left:0; font-weight:800; font-style:normal; color:#fff;}
.mainCultureWrap .slider a .cover .date em:after {content:""; display:block; position:absolute; left:3.94em; width:1px; top:.27em; bottom:.27em; background:#fff; opacity:.4;}
.mainCultureWrap .slider a .cover .detail {display:block; position:relative; width:5.3em; height:0; opacity:0; border-radius:9em; line-height:2.1em; border:1px solid rgba(255,255,255,.3); margin:0 auto 0; text-align:center; transition:.3s all; -webkit-transition:.3s all;}
.mainCultureWrap .slider a .cover .detail:before {content:""; display:block; position:absolute; width:1px; bottom:3.7em; left:50%; background:rgba(255,255,255,.3); height:3em;}
.mainCultureWrap .slider a .cover .state {display:block; position:relative; margin-bottom:1.11em; font-size:.9em; padding:.2em; width:3.89em; text-align:center; background:#ED1A86; color:#fff; font-weight:600;}
.mainCultureWrap .slider a .cover .state.end {background:#222222; color:#fff; width:4.5em;}

.mainCultureWrap .slider a:hover:before,
.mainCultureWrap .slider a:focus:before {background:rgba(0,0,0,.8);}
.mainCultureWrap .slider a:hover .cover .detail,
.mainCultureWrap .slider a:focus .cover .detail {margin-top:6em; height:2.1em; opacity:1;}
.mainCultureWrap .slider a:hover .cover,
.mainCultureWrap .slider a:focus .cover {top:0; align-items:center;}
.mainCultureWrap .slider a:hover .cover .subj,
.mainCultureWrap .slider a:focus .cover .subj {text-align:center;}


/* 메인 문화예술교육 구분별 디폴트 이미지 오케스트라 : O / 청춘합창단 : C / 미술가강의 : A / 퇴근길강의 : T */
.mainCultureWrap .slider li[data-target="O"] a img {content:url(../img/main/culture_main_01.png)}
.mainCultureWrap .slider li[data-target="C"] a img {content:url(../img/main/culture_main_05.png)}
.mainCultureWrap .slider li[data-target="A"] a img {content:url(../img/main/culture_main_04.png)}
.mainCultureWrap .slider li[data-target="T"] a img {content:url(../img/main/culture_main_03.png)}


@media all and (max-width:1024px) {
	.mainCultureWrap .swiper-slide {width:18em; max-width:100%;}
	.mainCultureWrap .slider a {width:100%; height:18em;}
	.mainCultureWrap .sec-tit {margin-right:5.5em;}
	.mainCultureWrap .more {display:block; position:relative; right:auto; top:auto; margin-top:2em;}
	.mainCultureWrap .control {top:3.7em; right:1em;}
}


/**************************************************
	Section 03
**************************************************/

.mainCalendarWrap {margin-top:4em; margin-bottom:4em; z-index:3;}

.mainCalendarWrap .sec-tit {/* display:flex; *//* justify-content:space-between; *//* align-items:center; *//* position:absolute; *//* top:0; *//* left:0; *//* width:28.75em; *//* margin-left:-4em; *//* transform-origin:0 0; *//* -webkit-transform-origin:0 0; *//* transform:rotate(-90deg) translate(-100%); *//* -webkit-transform:rotate(-90deg) translate(-100%); *//* margin-left: 3em; */margin-bottom: 2.5em;text-align: center;}
.mainCalendarWrap .sec-tit:before {/* content:""; *//* display:block; */position: absolute;width:2.4em;height:2.4em;background:url(../img/main/ico_title_star.svg) no-repeat 50% 50%;background-size:contain;left: -5px;}
.mainCalendarWrap .sec-tit:after {/* content:""; *//* display:block; */position: relative;left:3.25em;right:13.35em;height: 1px;top: 65%;background:#222;opacity:.8;}
.mainCalendarWrap .sec-tit strong {font-size: 2em;}

.calendarGrid {display:flex; flex-wrap:nowrap; position:relative;}
.calendarGrid > * {display:block; position:relative;}

.calendarGrid .calendar {width:53.125%; background:#F9F9F9; padding:2.5em 3em;}
.calendarGrid .schedule {width:46.875%; background:#222222; color:#fff; padding:2.5em;}

.calendarGrid .calendar .category {display:flex; justify-content:center; flex-wrap:wrap; align-items:center; margin-bottom:1.3em;}
.calendarGrid .calendar .category button {margin:.3em; height:2.2em; width:5.8em; text-align:center; border-radius:9em; border:1px solid rgba(34,34,34,.5);}
.calendarGrid .calendar .category button strong {font-weight:600; color:rgba(54,54,54,.8);}
.calendarGrid .calendar .category button.active,
.calendarGrid .calendar .category button:hover {background:#222; border-color:#222;}
.calendarGrid .calendar .category button.active strong,
.calendarGrid .calendar .category button:hover strong {color:#fff;}
.calendarGrid .calendar .category button .selected {display:none; position:absolute; top:0; left:0; width:0; height:0; text-indent:-999px; overflow:hidden;}
.calendarGrid .calendar .category button.active .selected {display:block;}


.calendarGrid .calendar .calHeader {display:flex; justify-content:center; flex-wrap:wrap; align-items:center; margin-bottom:.65em;}
.calendarGrid .calendar .calHeader button {display:block; position:relative; margin:0 .75em; width:2em; height:2em; text-indent:-999px; overflow:hidden; background:url(../img/main/spr_control.svg) no-repeat -8em 0; background-size:auto 100%;}
.calendarGrid .calendar .calHeader button.next {background-position-x:-10em;}
.calendarGrid .calendar .calHeader strong {font-size:1.65em; font-weight:800; color:#222;}
.calendarGrid .calendar .legend {display:flex; flex-wrap:nowra; justify-content:end; margin-bottom:.5em;}
.calendarGrid .calendar .legend > * {display:flex; flex-wrap:nowrap; align-items:center; margin-left:1.5em;}
.calendarGrid .calendar .legend span {display:block; position:relative; width:.75em; height:.75em; margin-right:.5em; border-radius:100%; text-indent:-999px; overflow:hidden; border:1px solid #fff;}
.calendarGrid .calendar .legend span.today {background:#333333;}

.calendarGrid .calendar .legend span.event {background:#E00307;}
.calendarGrid .calendar .legend span.display {background:#00B000;}

.calendarGrid .calendar .legend strong {font-weight:400;}

.calendarGrid .calendar table {width:100%; table-layout:fixed;}
.calendarGrid .calendar thead {border-top:3px solid #222; border-bottom:2px solid #222;}
.calendarGrid .calendar thead th {height:2.8em;}
.calendarGrid .calendar th,
.calendarGrid .calendar td {position:relative; width:calc(100% / 7); vertical-align:middle;}
.calendarGrid .calendar tr > *:first-child {color:#E00307;}
.calendarGrid .calendar tr > *:last-child {color:#0029CE;}
.calendarGrid .calendar tbody td {border-bottom:1px solid #ddd; height:3.8em;}
.calendarGrid .calendar td .date {display:block; position:relative; font-size:1.1em; font-weight:600; text-align:center; z-index:1;}
.calendarGrid .calendar td.is-today {background: #333;}
.calendarGrid .calendar td.is-today .date {color:#fff;}
.calendarGrid .calendar td.is-today .date:before {content:"";display:block;position:absolute;width:2.27em;height:2.27em;border-radius:100%;/* background:#333; */top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);z-index:-1;}

.calendarGrid .calendar td .point {position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.calendarGrid .calendar td .point span {margin-right: 3px;}
.calendarGrid .calendar td .point span:last-child {margin-right:0;}
.calendarGrid .calendar td .has-event{display: inline-block;/* position:absolute; */width:.35em;height:.35em;border-radius:100%;background:#E00307;/* left:55%; *//* top:.5em; *//* transform:translateX(-55%); *//* -webkit-transform:translateX(-55%); */}
.calendarGrid .calendar td .has-display{display: inline-block;/* position:absolute; */width:.35em;height:.35em;border-radius:100%;background:#00B000;/* left: 45%; *//* top: .5em; *//* transform: translateX(-45%); *//* -webkit-transform: translateX(-45%); */}

.calendarGrid .calendar td .event,
.calendarGrid .calendar td .today,
.calendarGrid .calendar td .daily-schedule {display:none; position:absolute; overflow:hidden;}

.calendarGrid .calendar td .event,
.calendarGrid .calendar td .today {text-indent:-999px;}

.calendarGrid .calendar td.is-today .today,
.calendarGrid .calendar td.has-event .event {display:block;}
.calendarGrid .calendar td.has-display .event {display:block;}

.calendarGrid .calendar td.is-today .event {display:none;}
.calendarGrid .calendar tbody td.active .date {text-decoration:underline;}

.calendarGrid .calendar td .event {position:absolute; top:0; left:0; width:100%; height:3.8em; z-index:2;}
.calendarGrid .calendar td .display {position:absolute; top:0; left:0; width:100%; height:3.8em; z-index:2;}

.calendarGrid .calendar td .daily-schedule {display:none; position:absolute; top:100%; left:-3em; width:16em; padding:1em; background:#fff; border:1px solid #333; z-index:3; box-shadow:.65em .65em 1em 0 rgba(0,0,0,.2); color:#333;}
.calendarGrid .calendar td .daily-schedule .close {display:block; position:absolute; top:.3em; right:.3em; width:1em; height:1em; background:url(../img/main/btn_close.svg) no-repeat 50% 50%; background-size:contain; text-indent:-999px; overflow:hidden;}
.calendarGrid .calendar td .daily-schedule li {min-height:2.2em; border-left:2px solid #222; padding-left:.5em;}
.calendarGrid .calendar td .daily-schedule li + li {margin-top:.5em;}
.calendarGrid .calendar td .daily-schedule li a {min-height:2.2em; display:block; position:relative;}
.calendarGrid .calendar td .daily-schedule li a > * {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.calendarGrid .calendar td .daily-schedule li strong {font-size:.85em; font-weight:800; line-height:1.3em; margin-bottom:5px;}
.calendarGrid .calendar td .daily-schedule li span {color:#555; font-size:.75em;}
.calendarGrid .calendar td.active .daily-schedule {display:block;}

.calendarGrid .schedule h4 {display:block; margin-bottom:1.5em;}
.calendarGrid .schedule h4 strong {font-size:1.5em; font-weight:800;}
.calendarGrid .schedule ul {display:block; position:relative; padding-right:.5em; max-height:26em; overflow-y:scroll;}
.calendarGrid .schedule ul li {border-bottom:1px solid rgba(255,255,255,.5);}
.calendarGrid .schedule li a {display:block; position:relative; white-space:nowrap; padding:1.75em 1em 1.75em 4.65em; transition:.3s all; -webkit-transition:.3s all;}
.calendarGrid .schedule li a .cate {display:block;position:absolute;top:50%;left:1.176em;font-style:normal;font-size:.85em;width:3em;text-align:center;padding:.2em 0;transform:translateY(-50%);-webkit-transform:translateY(-50%);background: #d6393c;}
.calendarGrid .schedule li a .cate.ty1 {background:#44B37C;}

.calendarGrid .schedule li a .subj {display:block; position:relative; margin-bottom:.5em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.1em; font-weight:600;}
.calendarGrid .schedule li a .date {display:block; position:relative; vertical-align:middle; font-size:.9em; color:#E4E4E4;}
.calendarGrid .schedule li a .time {display:block; margin-top:.5em; font-size:.85em; color:rgba(255,255,255,.8);}

.calendarGrid .schedule li a:before,
.calendarGrid .schedule li a:before {content:""; display:block; position:absolute; opacity:0; top:50%; right:1em; margin-top:-1em; width:2em; height:2em; background:url(../img/main/spr_control.svg) no-repeat -14em 0; background-size:auto 100%; transition:.3s all;-webkit-transition:.3s all;}
.calendarGrid .schedule li a:hover,
.calendarGrid .schedule li a:focus {padding-right:4em;}
.calendarGrid .schedule li a:hover:before,
.calendarGrid .schedule li a:focus:before {opacity:1;}


.calendarGrid .schedule ul::-webkit-scrollbar {width:10px;}
.calendarGrid .schedule ul::-webkit-scrollbar-thumb {border-radius:0; background:#fff;}
.calendarGrid .schedule ul::-webkit-scrollbar-track {background:rgba(255,255,255,0);}

@media all and (min-width:1025px) {
	.calendarGrid .schedule .more {position:absolute; top:2.45em; right:2.27em; width:5.7em; padding:0; border:none; background-position-x:100%; }
	.calendarGrid .schedule .more:focus,
	.calendarGrid .schedule .more:hover {background-color:transparent; color:inherit; background-image:url(../img/main/ico_more_w.svg);}
}
@media all and (max-width:1800px) {
	.mainCalendarWrap .sec-tit {position:relative; width:auto; top:auto; left:auto; margin:0 0 2em 0; transform:none;-webkit-transform:none;}
}
@media all and (max-width:1024px) {
	.calendarGrid,
	.calendarGrid > * {display:block; width:auto !important;}
	.calendarGrid {margin:0 -1em;}
	.calendarGrid > * {padding:2em 1.5em !important;}
	.calendarGrid .calendar .category button {margin:.1em;}
	.calendarGrid .schedule .more {display:block; width:100%; margin-top:1em;}

	.calendarGrid .calendar td .daily-schedule {width:17.9em;}
	.calendarGrid .calendar tr > td:nth-child(4) ~ td .daily-schedule {left:auto; right:0;}
}
@media all and (max-width:640px) {
	.calendarGrid .schedule li a {padding:1.75em 0;}
	.calendarGrid .schedule li a .cate {position:relative; left:auto; top:auto; transform:none; margin-bottom:.5em;-webkit-transform:none;}
}
@media all and (max-width:455px) {
	.calendarGrid > * {padding-left:1em !important; padding-right:1em !important;}
	.calendarGrid .calendar .category button {width:45%;}
}



/**************************************************
	Section 04
**************************************************/

.mainNoticeWrap:before,
.mainNoticeWrap:after {content:""; display:block; position:absolute; left:-50vw; right:-50vw; height:1px; background:#222; z-index:-1;}
.mainNoticeWrap:before {top:0;}
.mainNoticeWrap:after  {bottom:0;}

.mainNoticeWrap .inner {display:flex; justify-content:space-between; padding-top:3.5em; padding-bottom:3.5em; z-index:-1;}
.mainNoticeWrap > * {position:relative;}
.mainNoticeWrap .left {position:relative; width:50.6%;}
.mainNoticeWrap .right {width:44.4%;}

.mainNoticeWrap .sec-tit {margin-bottom:2em;}
.mainNoticeWrap .tabs {position:absolute; right:7.25em; top:.2em;}
.mainNoticeWrap .tabs ul {display:flex; flex-wrap:nowrap; align-items:center;}
.mainNoticeWrap .tabs li + li {margin-left:.5em;}
.mainNoticeWrap .tabs .selected {display:none; position:absolute; top:0; left:0; width:0; height:0; text-indent:-999px; overflow:hidden;}
.mainNoticeWrap .tabs .active .selected {display:block;}
.mainNoticeWrap .tabs button {height:2.2em; width:5.8em; text-align:center; border-radius:9em; border:1px solid rgba(34,34,34,.5);}
.mainNoticeWrap .tabs button strong {font-weight:600; color:rgba(54,54,54,.8);}
.mainNoticeWrap .tabs button.on,
.mainNoticeWrap .tabs button:hover {background:#222; border-color:#222;}
.mainNoticeWrap .tabs button.on strong,
.mainNoticeWrap .tabs button:hover strong {color:#fff;}
.mainNoticeWrap .tab-con {display:none;}
.mainNoticeWrap .tab-con.on {display:block;}
.mainNoticeWrap .tab-con ul {display:block; position:relative; border-top:2px solid #222;}
.mainNoticeWrap .tab-con li {border-bottom:1px solid rgba(54,54,54,.2);}
.mainNoticeWrap .tab-con li a {display:flex; position:relative; flex-wrap:nowrap; align-items:center; padding-right:2em;}
.mainNoticeWrap .tab-con li a:after {content:""; display:none; position:absolute; top:50%; right:0; margin-top:-1em; width:2em; height:2em; background:url(../img/main/spr_control.svg) no-repeat -10em 0; background-size:auto 100%;}
.mainNoticeWrap .tab-con li a > * {display:block; position:relative; }
.mainNoticeWrap .tab-con li .date {width:6em; text-align:center; padding:1.25em 0; letter-spacing:-.03em;}
.mainNoticeWrap .tab-con li .date > * {display:block; position:relative; font-style:normal;}
.mainNoticeWrap .tab-con li .date em {font-size:1.6em; font-weight:800;}
.mainNoticeWrap .tab-con li .date span {font-size:.85em;}
.mainNoticeWrap .tab-con li .subj {font-size:1.1em; width:calc(100% - 5.4545em); font-weight:400; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mainNoticeWrap .tab-con li a:hover:after,
.mainNoticeWrap .tab-con li a:focus:after {display:block;}
.mainNoticeWrap .tab-con li a:hover .subj,
.mainNoticeWrap .tab-con li a:focus .subj {font-weight:800; text-decoration:underline;}

.mainNoticeWrap .guide {display:flex; flex-wrap:nowrap; margin-bottom:2em; align-items:center; padding:.35em; background:#F9F9F9;}
.mainNoticeWrap .guide > div {display:block; position:relative; width:56%; flex-grow:1; padding:1.15em 1.2em;}
.mainNoticeWrap .guide > div + div {width:44%;}
.mainNoticeWrap .guide > div + div:before {content:""; display:block; position:absolute; left:0; top:1.15em; bottom:1.15em; width:1px; background:rgba(0,0,0,.1);}
.mainNoticeWrap .guide dl {display:block; position:relative; padding-left:2.75em;}
.mainNoticeWrap .guide dl:before {content:""; display:block; position:absolute; width:2em; height:2em; top:50%; left:0; margin-top:-1em; background:url(../img/main/spr_guide_icon.svg) no-repeat 0 0; background-size:auto 4em;}
.mainNoticeWrap .guide dl + dl {margin-top:1.2em;}
.mainNoticeWrap .guide dl.ticket:before {background-position-x:-2.7em;}
.mainNoticeWrap .guide dl dt {font-family:'STUNNING'; font-weight:800; color:#222; margin-bottom:.35em;}
.mainNoticeWrap .guide dl dd {font-size:1.8em; font-weight:800;}
.mainNoticeWrap .guide .time {margin-bottom:.7em;}
.mainNoticeWrap .guide .time:before {content:""; display:block; width:2em; height:2em; margin:0 auto .4em; background:url(../img/main/spr_guide_icon.svg) no-repeat -5.4em 0; background-size:auto 4em;}
.mainNoticeWrap .guide .time strong {display:block; position:relative; font-family:'STUNNING'; font-weight:600; font-size:1em; text-align:center;}
.mainNoticeWrap .guide .time ~ * {display:block; text-align:center;}
.mainNoticeWrap .guide .time ~ p {font-weight:600;}
.mainNoticeWrap .guide .time ~ span {color:#7e7e7e; font-size:.9em; font-weight:500; letter-spacing:-.02em;}

.mainNoticeWrap .quickLink ul {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
.mainNoticeWrap .quickLink ul li {display:block; position:relative; width:7.5em; height:7em; max-width:25%;}
.mainNoticeWrap .quickLink ul li a {display:block; position:relative; height:7em; text-align:center; padding:.95em .5em;}
.mainNoticeWrap .quickLink ul li a i {display:block; position:relative; margin:0 auto .75em; width:3em; height:3em; background:url(../img/main/spr_quick_icons.svg) no-repeat 0 0; background-size:auto 6em;}
.mainNoticeWrap .quickLink ul li a i.ty1 {background-position-x:0;}
.mainNoticeWrap .quickLink ul li a i.ty2 {background-position-x:-3em;}
.mainNoticeWrap .quickLink ul li a i.ty3 {background-position-x:-6em;}
.mainNoticeWrap .quickLink ul li a i.ty4 {background-position-x:-9em;}
.mainNoticeWrap .quickLink ul li a span {display:block; color:#222;}

.mainNoticeWrap .quickLink ul li a:hover,
.mainNoticeWrap .quickLink ul li a:focus {background-color:#e11537; box-shadow: 8px 8px 14px 0px rgba(0, 0, 0, 0.1);}
.mainNoticeWrap .quickLink ul li a:hover i,
.mainNoticeWrap .quickLink ul li a:focus i {background-position-y:-3em;}
.mainNoticeWrap .quickLink ul li a:hover span,
.mainNoticeWrap .quickLink ul li a:focus span {color:#fff; font-weight:600;}

@media all and (min-width:1025px) {
	.mainNoticeWrap .more {position:absolute; top:.65em; right:0; width:5.7em; padding:0; border:none; background-position-x:100%; }
	.mainNoticeWrap .more:focus,
	.mainNoticeWrap .more:hover {background-color:transparent; color:inherit; background-image:url(../img/main/ico_more.svg);}
}
@media all and (max-width:1024px) {
	.mainNoticeWrap .inner {display:block;}
	.mainNoticeWrap .left,
	.mainNoticeWrap .right {width:auto;}
	.mainNoticeWrap .left {margin-bottom:2em;}

	.mainNoticeWrap .more {display:block; width:auto; margin-top:1em;}
	.mainNoticeWrap .tabs {right:0; top:-.1em;}
}
@media all and (max-width:540px) {
	.mainNoticeWrap .guide {display:block;}
	.mainNoticeWrap .guide > div {width:auto !important;}
	.mainNoticeWrap .guide > div + div:before {width:auto; left:0; right:0; top:0; height:1px; bottom:auto;}
	.mainNoticeWrap .guide > div + div {padding-left:3.95em; text-align:left;}
	.mainNoticeWrap .guide > div + div * {text-align:left !important;}
	.mainNoticeWrap .guide .time:before {position:absolute; left:1.2em; top:.7em; margin:0;}
	.mainNoticeWrap .guide dl dd {font-size:1.5em;}
}
@media all and (max-width:450px) {
	.mainNoticeWrap .sec-tit {margin-bottom:1em;}
	.mainNoticeWrap .tabs {top:auto; position:relative; margin-bottom:1em;}
	.mainNoticeWrap .tab-con li .date {width:4em;}
	.mainNoticeWrap .tab-con li .subj {width:calc(100% - 3.56em);}

	.mainNoticeWrap .quickLink ul {flex-wrap:wrap;}
	.mainNoticeWrap .quickLink ul li {width:50%; max-width:100%;}
}



/**************************************************
	Section 05
**************************************************/

.mainSnsWrap {padding-top:3.5em;}
.mainSnsWrap .icon {display:block; position:relative; text-indent:-999px; overflow:hidden; width:2em; height:2em; background:url(../img/main/spr_sns.svg) no-repeat 0 0; background-size:auto 100%;}
.mainSnsWrap .icon.youtube {background-position-x:0;}
.mainSnsWrap .icon.facebook {background-position-x:-3em;}
.mainSnsWrap .icon.insta {background-position-x:-6em;}
.mainSnsWrap .icon.naver {background-position-x:-9em;}
.mainSnsWrap .icon.kakao {background-position-x:-12em;}

.mainSnsWrap .sec-tit {text-align:center; margin-bottom:2.5em;}
.mainSnsWrap .rotate-sns {display:block; position:absolute; top:4.5em; right:-3.35em; width:7.25em; height:7.25em; background:url(../img/main/ico_circle_sns.svg) no-repeat 50% 50%; background-size:contain; z-index:-1;}
.mainSnsWrap .list {display:flex; flex-wrap:wrap; margin-bottom:.5em; margin-left:-.2em; margin-right:-.2em;}
.mainSnsWrap .list > li {display:block; position:relative; width:calc(100% / 4); padding:0 .2em;}
.mainSnsWrap .list > li + li {border-left-width:0;}
.mainSnsWrap .list a {display:block; position:relative; overflow:hidden; height:100%; border: 1px solid #222;}
.mainSnsWrap .list a:before {content:""; display:block; position:relative; padding-top:90%;}
.mainSnsWrap .list li:nth-of-type(1) a img,
.mainSnsWrap .list li:nth-of-type(2) a img {min-height:auto; top: 0; -webkit-transform: translate(-50%,0);}
.mainSnsWrap .list li:nth-of-type(3) a img,
.mainSnsWrap .list li:nth-of-type(4) a img {max-width:100%; max-height:100%;}
.mainSnsWrap .list a img {display:block;position:absolute;top:50%;left:50%;min-width:110%;min-height:100%;max-width:200%;max-height:200%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);z-index:-1;object-fit:cover;}
.mainSnsWrap .list a strong {display:block; position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden;}
.mainSnsWrap .list a .icon {position:absolute; top: 50%; transform: translateY(-50%); left:.75em; font-size:1.25em;}

.mainSnsWrap .list a .cover {display:flex; flex-direction:column; justify-content:flex-start; position:absolute; color:#fff; left:0; right:0; bottom:0; padding:1em 1em 1em 4em; z-index:2; overflow:hidden; }
.mainSnsWrap .list a .cover .subj {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.mainSnsWrap .list li:nth-of-type(1) a .cover,
.mainSnsWrap .list li:nth-of-type(2) a .cover {background:#222;}
.mainSnsWrap .list li:nth-of-type(3) a .cover,
.mainSnsWrap .list li:nth-of-type(4) a .cover {background:rgba(0,0,0,.6);}


.quickSNS {display:flex; flex-wrap:wrap; align-items:center; padding:1.2em 0; background:#222; overflow:hidden;}
.quickSNS li {display:block; position:relative; width:20%; flex-grow:1;}
.quickSNS li:before {content:""; display:block; position:absolute; left:-1px; top:0; bottom:0; width:1px; background:#fff; opacity:.2;}
.quickSNS li a {display:flex; justify-content:center; align-items:center; color:#fff;}
.quickSNS li a .icon {margin-right:.7em;}
.quickSNS li a:hover {text-decoration:underline;}

@media all and (max-width:890px) {
	.mainSnsWrap .rotate-sns {display:none;}
	.mainSnsWrap .list > li {width:50%;}
	.mainSnsWrap .list > li:nth-of-type(1),
	.mainSnsWrap .list > li:nth-of-type(2) {width:100%;}
	.mainSnsWrap .list li:nth-of-type(1) a .cover,
	.mainSnsWrap .list li:nth-of-type(2) a .cover {height:10em;}
	.mainSnsWrap .list > li + li {border-right-width:1px;}
	.mainSnsWrap .list > li:nth-child(even) {border-left-width:0px;}

}
@media all and (max-width:890px) and (min-width:641px) {
	.quickSNS li {width:33.33%;}
	.quickSNS li:nth-child(3) ~ li {margin-top:1em;}
}
@media all and (max-width:640px) {
	.quickSNS li a .icon {margin-right:0;}
	.quickSNS li a span {position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden;}
}





/**************************************************
	firstScreen02 Section 01 공연안내
**************************************************/
.mainPosterWrap:after {content:""; display:block; position:absolute; bottom:-3em; left:-50vw; right:-50vw; height:2px; background:#222;}

.mainPosterWrap .rotate-location.ticket {display:block; position:absolute; top:0; right:10.5em; width:7em; height:7em; background:url(../img/common/img_sub_circle_ticket.svg) no-repeat 50% 50%; background-size:contain; z-index:2;}
.mainPosterWrap .btnvrWrap {position:absolute; top:1em; right:20em; z-index:2;}
.mainPosterWrap .btnvrWrap:hover .btn-vr {text-decoration:underline;}
.mainPosterWrap .btn-vr {display:block; position:relative; padding: 1.5em 1.25em 1.5em 8em;background:linear-gradient(93.58deg,rgba(0, 145, 219, 1) 0%,rgba(253, 35, 146, 1) 100%); color:#fff; font-family:'STUNNING';font-size:.8em;border-radius: .5em;}
.mainPosterWrap .btn-vr:before {content:''; display:block; position:absolute; left:1em; bottom:0; width:5.5em; height:6.3em; background: url(../img/main/ico_btnvr.svg) no-repeat 0 1em;}

.mainPosterWrap .sec-bar-tit {display:flex; position:absolute; justify-content:space-between; padding-left:1.85em; height:3.5em; align-items:center; left:12em; bottom:0; right:12em; background:#222; z-index:1;}
.mainPosterWrap .sec-bar-tit * {color:#fff;}
.mainPosterWrap .sec-bar-tit h3 strong {font-weight:800;}
.mainPosterWrap .sec-bar-tit .control {display:flex; flex-wrap:nowrap; align-items:center;}
.mainPosterWrap .sec-bar-tit .swiper-pagination-fraction {display:flex; flex-wrap:nowrap; align-items:center; position:relative; bottom:auto; padding:0 1em; width:auto;}
.mainPosterWrap .sec-bar-tit .swiper-pagination-fraction .dash {height:1px; width:1em; margin:0 1em; background:#fff; opacity:.5;}
.mainPosterWrap .sec-bar-tit .control  button {width:3.5em; height:3.5em; border-left:1px solid rgba(255,255,255,.3);}
.mainPosterWrap .sec-bar-tit .control  button:before {background-position-x:-4em;}
.mainPosterWrap .sec-bar-tit .control  button.next:before {background-position-x:-6em;}

.mainPosterWrap .slider,
.mainPosterWrap .posterGroup {height:40em;}

.mainPosterWrap .slider {display:block; position:relative; z-index:0;}
.mainPosterWrap .swiper-container {height:100%;}

.posterGroup {display:flex; justify-content:space-between; position:relative;}
.posterGroup > * {display:flex; width:9em; height:100%; flex-direction:column;}
.posterGroup > * > * {height:calc(36em / 3);}
.posterGroup > * > * + *  {margin-top:2em;}
.posterGroup .item > button {display:block; position:relative; width:100%; height:100%; overflow:hidden; text-indent:-999px;}
.posterGroup .item > button strong {display:block; position:absolute; top:0; left:0; overflow:hidden; opacity:0; z-index:-9999;}
.posterGroup .item > button img {width:100%; height:100%; object-fit:cover; position:relative; z-index:0;}
.posterGroup .item > button:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:url(../img/main/ico_check.svg) no-repeat 50% 50% rgba(0,0,0,.5); background-size:2em auto; opacity:0; transition:.3s all;-webkit-transition:.3s all; z-index:1;}
.posterGroup .item .selected {display:none; position:absolute; top:0; left:0; overflow:hidden; opacity:0; z-index:-9999;}
.posterGroup .desc {display:none; position:absolute; top:0; bottom:6em; left:12em; right:12em;}
.posterGroup .desc * {white-space:normal !important;}
.posterGroup .desc .thumb {position:relative; width:43%; height:100%; border:1px solid #222; overflow:hidden;}
.posterGroup .desc .thumb img {display:block; position:relative; width:100%; min-height:100%;}
.posterGroup .desc .txt {position:absolute; right:0; bottom:0; width:50%;}
.posterGroup .desc .subj {margin-bottom:1.5em; padding-bottom:4.5em; /* background:url(../img/main/ico_poster_arrow.svg) no-repeat 100% 100%; background-size:2.6em auto; */ }
.posterGroup .desc .subj span {display:inline-block; background:#0086CB; color:#fff; font-family:'STUNNING'; padding:.45em .8em;}
.posterGroup .desc .subj span.ty0 {background:#ED1A86;} /* 대관 */
.posterGroup .desc .subj span.ty1 {background:#0069B6;} /* 기획 */
.posterGroup .desc .subj strong {display:block;position:relative;font-size:1.9em;line-height:1.3em; margin-top:.4em; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-family:'STUNNING'; font-weight:800;}
.posterGroup .desc .btn-detail {display:block; position:relative; text-align:center; padding:0 1em; margin-bottom:1.5em; line-height:3em; border:1px solid #222; color:#222; font-weight:800;}
.posterGroup .desc .btn-detail:hover,
.posterGroup .desc .btn-detail:focus {background:#222; color:#fff;}
.posterGroup .desc .info {display:flex; flex-wrap:wrap;}
.posterGroup .desc .info > * {display:block; position:relative; margin-bottom:.6em;}
.posterGroup .desc .info dt {width:5.5em; font-weight:600; color:#333;}
.posterGroup .desc .info dd {width:calc(100% - 5.5em); color:#444;}

.posterGroup .item.active > button:before {opacity:1;}
.posterGroup .item.active .selected {display:block;}
.posterGroup .active .desc {display:block;}


@media all and (max-width:1024px) {

	.mainPosterWrap {padding-bottom:3.5em;}
	.mainPosterWrap .rotate-location.ticket{position:relative; top:auto; right:auto; margin:0 -1em; background:linear-gradient(93.58deg,rgba(0, 145, 219, 1) 0%,rgba(253, 35, 146, 1) 100%); border-radius:0 !important; text-align:center; padding:1.2em 1em; animation:none; width:auto; height:auto; font-size:.9em; text-indent:inherit; color:#fff; font-family:'STUNNING';}
	.mainPosterWrap .btnvrWrap { }

	.mainPosterWrap .slider {margin:0 -1em;}
	.mainPosterWrap .slider,
	.mainPosterWrap .posterGroup {height:auto;}
	.mainPosterWrap .sec-bar-tit {left:0; right:0; padding-left:1em;}

	.posterGroup {display:block; padding-bottom:6em;}
	.posterGroup > * {display:block; width:auto; height:auto;}
	.posterGroup > * > * {height:auto;}
	.posterGroup > * > * + *  {margin-top:0;}
	.posterGroup .item > button {position:absolute; width:calc(100% / 6); height:6em; border-top:2px solid #222; left:0; bottom:0;}
	.posterGroup .item > button img {height:auto; min-height:100%;}
	.posterGroup .desc {justify-content:space-between; position:relative; left:auto; right:auto; bottom:auto; padding:2em 1em;}
	.posterGroup .desc .thumb {width:18em; height:25em;}
	.posterGroup .desc .txt {width:calc(100% - 20em); position:relative; left:auto; right:auto; bottom:auto; top:auto;}
	.posterGroup .desc .subj {font-size:.9em;}

	.posterGroup .active .desc {display:flex;}

	.posterGroup .left .item > button {left:0;}
	.posterGroup .left .item + .item > button {left:calc(100% / 6 * 1);}
	.posterGroup .left .item + .item + .item > button {left:calc(100% / 6 * 2);}
	.posterGroup .right .item > button {left:calc(100% / 6 * 3);}
	.posterGroup .right .item + .item > button {left:calc(100% / 6 * 4);}
	.posterGroup .right .item + .item + .item > button {left:calc(100% / 6 * 5);}
}
@media all and (max-width:780px) {
	.posterGroup .desc .thumb {width:12em; height:16.5em;}
	.posterGroup .desc .subj {padding-bottom:1.2em; background-size:1em auto;}
	.posterGroup .desc .subj strong {font-size:1.4em;}
	.posterGroup .desc .txt {width:calc(100% - 13.5em);}
	.posterGroup .desc .txt > * {font-size:.9em;}
}
@media all and (max-width:520px) {
	.posterGroup {padding-bottom:10.2em;}
	.posterGroup .active .desc {display:block;}
	.posterGroup .desc .thumb {position:absolute; top:2em; left:1em; width:8em; height:11em;}
	.posterGroup .desc .txt {width:auto;}
	.posterGroup .desc .txt .subj {margin-left:11em; min-height:12em;}

	.posterGroup .item > button {width:calc(100% / 3 - .4em); border:none; height:4.6em; margin:.2em; border:1px solid #222;}
	.posterGroup .left .item > button {left:0; bottom:5em;}
	.posterGroup .left .item + .item > button {left:calc(100% / 3 * 1);}
	.posterGroup .left .item + .item + .item > button {left:calc(100% / 3 * 2);}
	.posterGroup .right .item > button {bottom:0; left:0;}
	.posterGroup .right .item + .item > button {left:calc(100% / 3 * 1);}
	.posterGroup .right .item + .item + .item > button {left:calc(100% / 3 * 2);}
}


.mainListWrap .bod-event-header {margin-top:3em;}
.mainListWrap .bod-event-header > * {display:flex; flex-wrap:wrap;}
.mainListWrap .bod-event-header .year {justify-content:center; flex-wrap:nowrap; align-items:center; padding:2.22em 0 1.11em;}
.mainListWrap .bod-event-header .year span {display:block; font-size:1.83em; font-weight:800; margin:0 .45em;}
.mainListWrap .bod-event-header .year a {display:block;position:relative; width:2em; height:2em; text-indent:-999px; overflow:hidden; background: url(../img/main/spr_control.svg) no-repeat -8em 0; background-size: auto 100%;}
.mainListWrap .bod-event-header .year a.next {background-position-x:-10em;}
.mainListWrap .bod-event-header .month {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.mainListWrap .bod-event-header .month > * {display:block; position:relative; padding:1em; flex-grow:1; text-align:center; width:8.33%;}
.mainListWrap .bod-event-header .month > * > * {display:block; text-align:center;}
.mainListWrap .bod-event-header .month > * > strong {font-size:1.11em; font-weight:400;}
.mainListWrap .bod-event-header .month > *.on {background:#222222; color:#fff;}
.mainListWrap .bod-event-header .month > *.on > * {font-weight:600;}

.mainListWrap .bod-event-list li {display:block; position:relative; font-size:1.111111em; margin-top:1.5em; padding-left:12em;}
.mainListWrap .bod-event-list a {display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #D9D9D9; z-index:1; text-indent:-999px; overflow:hidden;}
.mainListWrap .bod-event-list a:hover,
.mainListWrap .bod-event-list a:focus {box-shadow:.5em 1.5em 1em 0 rgba(0, 0, 0, 0.05); border:2px solid #111111;}

.mainListWrap .bod-event-list .thumb {display:block;position:absolute;top:0;left:0;bottom:0; width:12em; background:url(../img/common/noimg.png) no-repeat 50% 50% #F8F8F8; background-size: auto 10em; overflow:hidden;}
.mainListWrap .bod-event-list .thumb img {display:block; position:absolute; top:50%; left:50%; min-height:100%; min-width:100%; width:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mainListWrap .bod-event-list .desc {display:block; position:relative; padding:2em;}
.mainListWrap .bod-event-list .desc > * {display:block;}
.mainListWrap .bod-event-list .subj {display:block;position:relative; font-size:1em;}
.mainListWrap .bod-event-list .subj .showSort {display:inline-block; vertical-align:middle; font-size:.81em; padding:.4em .75em; background:#0069B6; color:#fff; font-style:normal; font-weight:400;}
.mainListWrap .bod-event-list .subj .showSort.sort0 {background-color:#ED1A86;}
.mainListWrap .bod-event-list .subj .showSort.sort1 {background-color:#0069B6}
.mainListWrap .bod-event-list .subj strong {display:block;font-size:1.35em;margin-top:.5em;color:#111111;font-family:'STUNNING'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mainListWrap .bod-event-list .info {display:flex; flex-wrap:wrap; margin-top:1em; flex-direction:row; align-items: center;}
.mainListWrap .bod-event-list .info > * {position:relative; width:50%; display:flex; flex-direction:row; flex-wrap: nowrap; margin-bottom:.8em; font-size:.8em;}
.mainListWrap .bod-event-list .info dt {width:6.38em;padding-left:1.11em;background: url(../img/board/bul_event_info.svg) no-repeat top 0 left 0;font-weight:600;}
.mainListWrap .bod-event-list .info dd {width:calc(100% - 6.38em);}
.mainListWrap .bod-event-list .no-data {padding:1.67em 0; text-align:center; background:rgba(0,0,0,.02); font-size:.9em;}
.mainListWrap .bod-event-list .no-data:before {content:""; display:block; position:relative; margin:0 auto 1.67em; width:5.556em; height:5.556em; background:url(../img/icon/box/ico_design04.svg) no-repeat 50% 50%; background-size:contain;}

@media all and (max-width:1024px) {
	.mainListWrap .bod-event-header .month > * {width:calc(100% / 6);}
	.mainListWrap .bod-event-list .desc {padding:2em;}
}
@media all and (max-width:820px) {
	.mainListWrap .bod-event-list .thumb {width:12em;}
	.mainListWrap .bod-event-list li {padding-left:12em;}
	.mainListWrap .bod-event-list .info {flex-direction:column; align-items:start;}
	.mainListWrap .bod-event-list .info > *  {width:100%;}
}
@media all and (max-width:640px) {
	.mainListWrap .bod-event-list li {padding-left:0; font-size:1em;}
	.mainListWrap .bod-event-list .thumb {display:none;}
	.mainListWrap .bod-event-list .desc {padding:1em;}
}
@media all and (max-width:450px) {
	.mainListWrap .bod-event-header .month > * {width:calc(100% / 4);}
}