@charset "utf-8";

@font-face {
	font-family: 'Paybooc';
	font-weight: 800;
	font-style: normal;
	src: url(../fonts/PayboocExtraBold.eot),
	url(../fonts/PayboocExtraBold.eot?#iefix) format('embedded-opentype'),
	url(../fonts/PayboocExtraBold.woff2) format('woff2'),
	url(../fonts/PayboocExtraBold.woff) format('woff');
}

/* 상단 띠 배너 */
.mainTopBn { text-align:center; }
/*.mainTopBn a { overflow:hidden; display:block; position:relative; width:100%; height:140px; background-color:#2e2f33; }
.mainTopBn a img { display:block; position:absolute; top:0; left:50%; max-width:none; height:100%; transform:translateX(-50%); }*/
.mainTopBn .popupWrap { z-index:20; position:relative; top:auto; left:auto; transform:none; text-align:center; }
.mainTopBn .popupWrap .popup.viewPop { display:block; margin:0; }
.mainTopBn .popupWrap .popup { max-width:none; }
.mainTopBn .popupWrap .popup .popupTop { border:none; }
.mainTopBn .popupWrap .popup .popupTop a { max-width:none; }
.mainTopBn .popupWrap .popupBtm { position:absolute; bottom:4px; right:4px; padding:4px 8px 4px 12px; border-radius:0.5em; background:rgba(000,000,000,0.75); }

#wrap { position:relative; }
.headUtil .shareItem { display: none; }
#container { position:relative; }
.sideNav.pos { position:absolute; }

/* main visual */
.mainVisual { position:relative; max-width:1920px; margin:0 auto; }
.mainVisual .visualSlide { position:relative; }
.mainVisual .visualSlide .slick-slide a { display:block; }
.mainVisual .visualSlide .slick-dots { display:flex; justify-content:center; position:absolute; left:50%; bottom:6.7834%; transform:translateX(-50%); }
.mainVisual .visualSlide .slick-dots li { margin:0 4px; }
.mainVisual .visualSlide .slick-dots li button { overflow:hidden; display:inline-block; width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,0.4); box-sizing:border-box; text-indent:-999px; }
.mainVisual .visualSlide .slick-dots li.slick-active button { border:none; background:#fff; }
.mainVisual .prevNext .slick-arrow { display:block; position:absolute; top:50%; width:6.333em; height:22px; padding-bottom:2px; border-bottom:1px solid #fff; color:#fff; transform:translateY(-50%); font-weight:300; font-size:0.938em; box-sizing:border-box; }
.mainVisual .prevNext .slick-arrow span { display:inline-block; position:absolute; top:0; transition:0.5s; }
.mainVisual .prevNext .slick-arrow.prev { left:0; }
.mainVisual .prevNext .slick-arrow.prev span { right:0; }
.mainVisual .prevNext .slick-arrow.prev:hover span,
.mainVisual .prevNext .slick-arrow.prev:focus span { right:30%; }
.mainVisual .prevNext .slick-arrow.prev::before { content:''; visibility:hidden; opacity:0; position:absolute; bottom:-9px; left:0; width:14px; height:17px; background:url(../images/main/bg_prev_visual.png) no-repeat 0 0; transition:0.4s 0.2s; }
.mainVisual .prevNext .slick-arrow.next { right:80px; }
.mainVisual .prevNext .slick-arrow.next span { left:0; }
.mainVisual .prevNext .slick-arrow.next:hover span,
.mainVisual .prevNext .slick-arrow.next:focus span { left:30%; }
.mainVisual .prevNext .slick-arrow.next::before { content:''; visibility:hidden; opacity:0; position:absolute; bottom:-9px; right:0; width:14px; height:17px; background:url(../images/main/bg_next_visual.png) no-repeat 0 0; transition:0.4s 0.2s; }
.mainVisual .prevNext .slick-arrow:hover::before,
.mainVisual .prevNext .slick-arrow:focus::before { visibility:visible; opacity:1; }
.mainVisual .prevNext .slick-arrow.slick-hidden { display:none; }
@media screen and (max-width: 1440px) {
	.mainVisual .prevNext .slick-arrow.next { right:0; }
}
@media screen and (max-width: 767px) {
	.mainTopBn .popupWrap .popupBtm { position:static; border-radius:0; }
	
	.mainVisual .visualSlide .slick-slide img { width:100%; }
	.mainVisual .prevNext { display:none; }
	.mainVisual .visualSlide .slick-dots li button { width:7px; height:7px; }
}

/* 공연·전시 */
.perforWrap,
.noticeWrap,
.eduCourse,
.socialSec { transform:translateY(15%); opacity:0.4; transition:0.8s; }
.perforWrap { padding:7.750em 5.5% 5em; }
.performList { position:relative; max-width:1235px; margin:0 auto; }
.performList h3 { margin-bottom:1.350em; font-weight:800; font-size:2.500em; font-family:'Paybooc', 'Noto Sans KR'; }
.performList .performSlide .item { margin:0 0.688em; }
.performList .performSlide .item a { display:block; position:relative; }
.performList .performSlide .item a span { display:block; }
.performList .performSlide .item a .poster { position:relative; }
.performList .performSlide .item a .img { overflow:hidden; position:relative; padding-top:133.4635%; border-radius:2em; }
.performList .performSlide .item a .img img { z-index:-1; display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
.performList .performSlide .item a .img::after { content:''; visibility:hidden; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background:transparent; transition:0.4s; }
.performList .performSlide .item a:hover .img::after,
.performList .performSlide .item a:focus .img::after { visibility:visible; opacity:0.9; background:rgb(100,118,232); background: rgb(100,118,232); background: linear-gradient(330deg, rgba(100,118,232,1) 14%, rgba(222,90,200,1) 100%); }
.performList .performSlide .item a .more { z-index:1; visibility:hidden; opacity:0; position:absolute; top:50%; left:50%; min-width:5.250em; padding:0 0.600em; transform:translate(-50%, -50%); color:#fff; text-align:center; letter-spacing:-0.03em; font-weight:700; font-size:1.250em; box-sizing:border-box; }
.performList .performSlide .item a .more::before,
.performList .performSlide .item a .more::after { position:absolute; top:0; }
.performList .performSlide .item a .more::before { content:'['; left:0; }
.performList .performSlide .item a .more::after { content:']'; right:0; }
.performList .performSlide .item a .more i { display:block; margin-top:2.750em; padding-top:6.000em; background:url(../images/main/btn_more.png) no-repeat 50% 0; background-size:5.000em auto; font-style:normal; font-size:1rem; font-family: 'LeferiPointSpecial', 'Noto Sans KR'; }
.performList .performSlide .item a:hover .more,
.performList .performSlide .item a:focus .more { visibility:visible; opacity:1; transition:0.4s 0.2s; }
.performList .performSlide .item a .tit { overflow: hidden; height:2.818em; margin-top:1.545em; padding:0 0.727em; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.4; letter-spacing:-0.03em; font-weight:700; font-size:1.375em; }
.performList .prevNext { position:absolute; top:0; right:0; }
.performList .prevNext .slick-arrow.slick-hidden { display:none; }
.performList .prevNext .slick-arrow { overflow:hidden; display:inline-block; width:35px; height:35px; margin:0 0.5em; background-repeat:no-repeat; background-position:50% 50%; background-size:1.938em auto; text-indent:-999px; }
.performList .prevNext .slick-arrow.prev { background-image:url(../images/main/btn_prev_perf.png); }
.performList .prevNext .slick-arrow.next { background-image:url(../images/main/btn_next_perf.png); }
.performList .prevNext .slick-arrow.prev::after { content:''; position:absolute; top:50%; left:50%; width:1px; height:1.125em; margin-top:-0.563em; background:#c9c9c9; }
@media screen and (max-width: 1200px) {
	.perforWrap,
	.noticeWrap,
	.eduCourse,
	.socialSec { opacity:1; transform:none; transition:none; }
}
@media screen and (max-width: 767px) {
	.perforWrap { padding:11% 5.5% 7.7%; }
	.performList h3 { text-align:center; font-size:1.545em; }
	.performList .prevNext { display:none; }
	.performList .performSlide .item { margin:0 0.364em; }
	.performList .performSlide .item a .tit { display:block; height:auto; text-overflow:ellipsis; white-space:nowrap; font-size:1.091em; }
	.performList .performSlide .item a .tit br { display:none; }
	.performList .performSlide .slick-dots { display:flex; justify-content:center; margin-top:1.818em; }
	.performList .performSlide .slick-dots li { margin:0 0.273em; }
	.performList .performSlide .slick-dots button { overflow:hidden; display:inline-block; width:0.727em; height:0.727em; border-radius:50%; background:#999; text-indent:-999px; }
	.performList .performSlide .slick-dots li.slick-active button { background:#000; }
}

/* 교육강좌 */
.eduCourse { max-width:1235px; margin:0 auto; padding:5em 5.5% 7.500em; }
.eduCourse .titBox { display:flex; justify-content:space-between; margin-bottom:1.875em; }
.eduCourse .titBox h3 { font-size:1.750em; font-family:'Paybooc', 'Noto Sans KR'; }
.eduCourse .titBox a { display:inline-block; margin-top:1em; padding-right:3.375em; background:url(../images/main/btn_more_edu.png) no-repeat right 0 top 50%; background-size:2.625em auto; font-weight:300; }
.eduCourse .eduSlider .item { margin:0 0.688em; }
.eduCourse .eduSlider .item a { display:block; }
.eduCourse .eduSlider .item a span { display:block; }
.eduCourse .eduSlider .item a i { display:inline-block; font-style:normal; }
.eduCourse .eduSlider .item a .img { overflow:hidden; position:relative; margin-bottom:2.375em; border-radius:1.2em; }
.eduCourse .eduSlider .item a .img::after { content:''; position:absolute; top:0; left:0; width:100%; height:0; }
.eduCourse .eduSlider .item a:hover .img::after,
.eduCourse .eduSlider .item a:focus .img::after { height:100%; background:rgba(000,000,000,0.2); transition:background 0.5s; }
.eduCourse .eduSlider .item a:hover .img img,
.eduCourse .eduSlider .item a:focus .img img { transform:scale(1.1); transition:0.4s ease-in; }
.eduCourse .eduSlider .item a .cate { display:flex; justify-content:space-between; align-items:center; }
.eduCourse .eduSlider .item a .cate i.txt { position:relative; padding-bottom:0.278em; font-weight:500; font-size:1.125em; }
.eduCourse .eduSlider .item a .cate i.txt::before { content:''; position:absolute; bottom:0; left:50%; width:90%; height:2px; background:#000; transform:translateX(-50%); }
.eduCourse .eduSlider .item a .cate i.view { padding-left:1.733em; background:url(../images/main/icon_view.png) no-repeat 0 50%; background-size:1.333em auto; color:#858585; font-size:0.938em; }
.eduCourse .eduSlider .item a .tit { overflow:hidden; margin-top:0.818em; letter-spacing:-0.03em; white-space:nowrap; text-overflow:ellipsis; line-height:1.4; font-weight:700; font-size:1.375em; }
@media screen and (max-width: 960px) {
	.eduCourse .eduSlider .slick-dots { display:flex; justify-content:center; margin-top:2em; }
	.eduCourse .eduSlider .slick-dots li { margin:0 0.273em; }
	.eduCourse .eduSlider .slick-dots button { overflow:hidden; display:inline-block; width:0.727em; height:0.727em; border-radius:50%; background:#999; text-indent:-999px; }
	.eduCourse .eduSlider .slick-dots li.slick-active button { background:#000; }
}
@media screen and (max-width: 767px) {
	.eduCourse { padding:9.5% 5.5% 13%; }
	.eduCourse .titBox { display:block; }
	.eduCourse .titBox h3 { text-align:center; font-size:1.818em; }
	.eduCourse .titBox a { display:none; }
	.eduCourse .eduSlider .item { margin:0 0.364em; }
	.eduCourse .eduSlider .item a .img { margin-bottom:1em; }
	.eduCourse .eduSlider .item a .cate { justify-content:flex-start; }
	.eduCourse .eduSlider .item a .cate i.txt { font-size:1em; }
	.eduCourse .eduSlider .item a .cate i.view { margin-left:1em; font-size:0.909em; }
	.eduCourse .eduSlider .item a .tit { margin-top:1em; font-size:1.091em; }
}
@supports (display:flex) {
	.performList .performSlide .item a .tit,
	.performList .performSlide .item a .more,
	.noticeWrap .noticeTop .boardItem .tabCon ul li a .tit,
	.eduCourse .eduSlider .item a .tit { font-family:'LeferiPointBlack', 'Noto Sans KR'; }
	.noticeWrap .noticeTop .boardItem .tabBtn { font-family:'LeferiPointSpecial', 'Noto Sans KR'; }
}

/* Notice */
.noticeWrap { padding:5.375em 5.5% 5.875em; background-color:#fafafa; }
.noticeWrap .noticeTop { display:flex; max-width:1235px; margin:0 auto; }
.noticeWrap .noticeTop h3 { font-family:'Paybooc', 'Noto Sans KR'; }
.noticeWrap .noticeTop .boardItem { flex-grow:1; position:relative; width:100%; }
.noticeWrap .noticeTop .boardItem h3 { margin-bottom:0.5rem; font-weight:800; font-size:2.500em; }
.noticeWrap .noticeTop .boardItem .tabBtn { display:flex; align-items:center; position:absolute; top:0.25em; right:0; }
.noticeWrap .noticeTop .boardItem .tabBtn li a { display:inline-block; min-height:2.500em; padding:0.938em 1.125em 0; border-radius:30px; box-sizing:border-box; }
.noticeWrap .noticeTop .boardItem .tabBtn li a.on { background:#000000; color:#78ff74; }
.noticeWrap .noticeTop .boardItem .tabCon ul { display:flex; flex-wrap:wrap; width:100%; }
.noticeWrap .noticeTop .boardItem .tabCon ul li { width:32%; margin-top:1.188em; }
.noticeWrap .noticeTop .boardItem .tabCon ul li:nth-child(3n-1) { margin-left:2%; margin-right:2%; }
.noticeWrap .noticeTop .boardItem .tabCon ul li a { display:block; padding:1.563em; border-radius:1.2em; border:1px solid #000; line-height:1.4; }
.noticeWrap .noticeTop .boardItem .tabCon ul li a:hover,
.noticeWrap .noticeTop .boardItem .tabCon ul li a:focus { background-color:#fff; }
.noticeWrap .noticeTop .boardItem .tabCon ul li a:hover .tit,
.noticeWrap .noticeTop .boardItem .tabCon ul li a:focus .tit { text-decoration:underline; }
.noticeWrap .noticeTop .boardItem .tabCon ul li a span { display:block; }
.noticeWrap .noticeTop .boardItem .tabCon ul li a .date { margin-bottom:0.5rem; color:#666; font-size:0.938em; font-family:'LeferiPointSpecial', 'Noto Sans KR'; }
.noticeWrap .noticeTop .boardItem .tabCon ul li a .tit { overflow: hidden; height:4.200em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; line-height:1.4; letter-spacing:-0.03em; font-weight:700; font-size:1.250em; }
.noticeWrap .noticeTop .noticeSlide { flex-shrink:0; position:relative; width:279px; margin-left:4.7%; }
.noticeWrap .noticeTop .noticeSlide h3 { margin-top:0.250em; margin-bottom:1.179em; font-size:1.750em; }
.noticeWrap .noticeTop .noticeSlide ul li { text-align:center; }
.noticeWrap .noticeTop .noticeSlide ul li a { overflow:hidden; display:inline-block; border-radius:1.2em; }
.noticeWrap .noticeTop .noticeSlide .prevNext { position:absolute; top:0; right:0; }
.noticeWrap .noticeTop .noticeSlide .prevNext .slick-arrow { overflow:hidden; display:inline-block; width:35px; height:35px; margin:0 0.5em; background-repeat:no-repeat; background-position:50% 50%; background-size:1.938em auto; text-indent:-999px; }
.noticeWrap .noticeTop .noticeSlide .prevNext .slick-arrow.prev { background-image:url(../images/main/btn_prev_perf.png); }
.noticeWrap .noticeTop .noticeSlide .prevNext .slick-arrow.next { background-image:url(../images/main/btn_next_perf.png); }
.noticeWrap .noticeTop .noticeSlide .prevNext .slick-arrow.prev::after { content:''; position:absolute; top:50%; left:50%; width:1px; height:1.125em; margin-top:-0.563em; background:#c9c9c9; }
.noticeWrap .quickLink { max-width:1235px; margin:0 auto; margin-top:3.000em; }
.noticeWrap .quickLink ul { display:flex; gap:0.875rem; }
/*.noticeWrap .quickLink ul li { width:23.8057%; }*/
.noticeWrap .quickLink ul li a { display:block; }
.noticeWrap .quickLink ul li a span.vr { display:inline-block; position:relative; }
.noticeWrap .quickLink ul li a span.vr::after { content:''; position:absolute; bottom:0.625em; right:0.625em; width:2.813rem; height:2.813rem; border-radius:50%; background-color:rgba(000,000,000,0.8); background-image:url(../images/main/icon_360.png); background-repeat:no-repeat; background-position:50% 50%; background-size:contain; }
@media screen and (max-width: 960px) {
	.noticeWrap .noticeTop .boardItem .tabBtn li a { padding:0.938em 0.625em 0; }
	.noticeWrap .noticeTop .boardItem .tabCon ul { justify-content:space-between;; }
	.noticeWrap .noticeTop .boardItem .tabCon ul li:nth-child(5),
	.noticeWrap .noticeTop .boardItem .tabCon ul li:nth-child(6) { display:none; }
	.noticeWrap .noticeTop .boardItem .tabCon ul li { width:48.5%; }
	.noticeWrap .noticeTop .boardItem .tabCon ul li:nth-child(3n-1) { margin-left:0; margin-right:0; }
}
@media screen and (max-width: 767px) {
	.noticeWrap { padding:10.5% 5.5% 13%; }
	.noticeWrap .noticeTop { display:block; }
	.noticeWrap .noticeTop .boardItem h3 { margin-bottom:0.750em; text-align:center; font-size:1.818em; }
	.noticeWrap .noticeTop .boardItem .tabBtn { position:static; justify-content:center; }
	.noticeWrap .noticeTop .boardItem .tabBtn li { flex-grow:1; text-align:center; }
	.noticeWrap .noticeTop .boardItem .tabBtn li a { padding:0.938em 0.634em 0.637em; }
	.noticeWrap .noticeTop .noticeSlide { margin-top:3.455em; margin-left:0; width:100%; }
	.noticeWrap .noticeTop .noticeSlide .prevNext { display:none; }
	.noticeWrap .noticeTop .noticeSlide h3 { margin-top:0; text-align:center; font-size:1.818em; }
	.noticeWrap .quickLink { margin-top:2em; }
	.noticeWrap .quickLink ul { flex-direction:column; align-items:center; }
	.noticeWrap .quickLink ul li { margin-bottom:1em; }
}
@media screen and (max-width: 359px) {
	.noticeWrap .noticeTop .boardItem .tabBtn { flex-wrap:wrap; justify-content:flex-start; }
	.noticeWrap .noticeTop .boardItem .tabBtn li { flex-grow:0; }
	.noticeWrap .noticeTop .boardItem .tabBtn li a { padding:0.938em 1em 0.637em; } 
}

/* sns */
.socialSec { padding:5.875em 5.5% 6.750em; }
.socialSec .inner { display:flex; align-items:flex-end; max-width:1235px; margin:0 auto; }
.socialSec h3 { margin-bottom:1.066em; font-size: 1.875em; }
.socialSec .snsWrap { width:45.5061%; }
.socialSec .snsWrap a { display: block; }
.socialSec .snsWrap a span,
.socialSec .instagram a span { overflow: hidden; display: block; position: relative; border-radius:1.2em; }
.socialSec .snsWrap a span img,
.socialSec .instagram a span img { display: block; object-fit:cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.socialSec .snsWrap .youtube a span { padding-top:55.8719%; }
.socialSec .snsWrap .youtube a span::after { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:rgba(000,000,000,0.46); background-image: url(../images/main/icon_play.png); background-repeat: no-repeat; background-position: 50% 50%; background-size:3.938em auto; }
.socialSec .instagram { width:25.4252%; margin-left:1.7814%; }
.socialSec .instagram a { display: block; }
.socialSec .instagram a span { padding-top: 100%; }
.socialSec .instagram a span::after { content:''; position: absolute; right: 1em; bottom: 0.875em; width: 3.375em; height: 3.375em; background:url(../images/main/icon_instagram.png) no-repeat 50% 50% / contain; }
.socialSec .snsWrap a:hover img,
.socialSec .snsWrap a:focus img,
.socialSec .instagram a:hover img,
.socialSec .instagram a:focus img { transform:scale(1.1); transition:ease-in 0.4s; }
.socialSec .newsletter { width:22.6721%; margin-left:4.6152%; }
.socialSec .newsletter a { overflow: hidden; display: block; border-radius:1.2em; }
.socialSec .newsletter a span { display: block; position: relative; padding-top:112.1429%; }
.socialSec .newsletter a span img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit:cover; object-position:center top; }
@media screen and (max-width: 767px) {
	.socialSec { padding:10.5% 5.5% 13%; }
	.socialSec .inner { flex-wrap:wrap; justify-content:space-between; }
	.socialSec h3 { margin-bottom: 0.75em; text-align: center; font-size:1.818em; }
	.socialSec .snsWrap { width: 100%; margin-bottom:1.454em; }
	.socialSec .instagram { width: 48%; margin-left: 0; margin-right: 0; }
	.socialSec .newsletter { width: 100%; margin-top:1.454em; margin-left: 0; }
	.socialSec .newsletter h3 { display: none; }
	.socialSec .newsletter a span { padding-top: 100%; }
}

/* 레이어 팝업 */
.popupWrap { display:none; position:absolute; top:280px; left:0; right:0; width:100%; max-width:1920px; margin:0 auto; z-index:10; }
.popupWrap.viewWrap { display:block; text-align:center; }
.popupWrap .popup {	display:none; margin:0 5px; box-sizing:border-box; }
.popupWrap .popup.viewPop { display:inline-block; vertical-align:top; }
.popupWrap .popup .popupTop { border:1px solid #462e2e; box-sizing:border-box; }
.popupWrap .popup .popupTop a { display:block; max-width:500px; }
.popupWrap .popup iframe { width:640px; height:360px; }
.popupWrap .popupBtm { padding:6px; background:#000; color:#fff; text-align:center; line-height:22px; font-size:14px; }
.popupWrap .popupBtm label { display:inline-block; padding:0 5px; vertical-align: middle; }
.popupWrap .popupBtm button { width:35px; height:21px; border:1px solid #dcdcdc; vertical-align:middle; color:#fff; }
@media all and (max-width: 1200px) {
	.popupWrap { top:7em; left:0; width:100%; max-width:100%; transform:none; }
	.popupWrap .popup { max-width:100%; margin:0; }
	.popupWrap .popup .popupTop a { max-width:none; }
}
@media all and (max-width: 767px) {
	.popupWrap .popup iframe { width:100% !important; height:auto !important; }
	.popupWrap .popupBtm { font-size: 11px; }
}