@charset "utf-8";

/********************************************************
	layout
********************************************************/
.subVisual:before {background:url(../img/common/img_sub_visual07.png) no-repeat 100% 0 #000;}
#body #left h2 {position:relative; display:flex; width:100%; height:9em; align-items:center; justify-content:center; padding:1em; background:url(../img/common/snb_bg06.png) no-repeat;}


/* 전당소개 - 연혁 */
.history-arts {position:relative; display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; padding:2.5em 0; background:#F8F9FD url(../img/content/sub06/img0601_bg.png) no-repeat 50% 100%;}
.history-arts .con:after {content:''; display:block; position:absolute; left:50%; top:0; bottom:0; margin-top:-3em; border-right:3px solid #E4E7F1;}
.history-arts .tit {position:relative; display:flex; align-items:center; margin-bottom:3em; width:12em; height:12em; border-radius:12em; background:#F6E1EF;}
.history-arts .tit .inner {display:flex; flex-direction:column; justify-content:center; align-items:center; width:10em; height:10em; border-radius:10em;background:linear-gradient(120deg, #F24CA1, #FF5672);}
.history-arts .tit em {font-style:normal; font-weight:600; color:#FFF2C6; }
.history-arts .tit p {font-size:2em; font-weight:800; color:#fff;}

.history-arts .con {position: relative;width: calc(100% - 2em);}
.history-arts .con dl {position:relative; width:50%; float:right; display:inline-block; box-sizing:border-box; clear:both; padding-left:4em;}
.history-arts .con dl + dl {margin-top:2em;}
.history-arts .con dt {position:relative;color:#D90170; font-weight:800; font-size:1.333333em;}
.history-arts .con dt:before {content:'';position: absolute;top: 0.35em;left:-3.2em; display:inline-block; width:0.25em; height:0.25em; background-color:#fff;border-radius:50%;border:3px solid #D90170;z-index:10;}
.history-arts .con dl:after {content:''; display:inline-block; position:absolute; top:.75em; left:0; background-color:#CBCBCB; width:3.334em; height:1px;}
.history-arts .con dl .hisCon {position:relative;}
.history-arts .con dl .hisCon li .date {padding-right:1.5em; float:left;}

.history-arts .con dl.left {float:left; padding-right:4em; text-align:right;}
.history-arts .con dl.left:after {left:auto; right:0;}
.history-arts .con dl.left dt:before {left:auto; right:-3.35em;}
.history-arts .con dl.left .hisCon li {padding-right:3em;}
.history-arts .con dl.left .hisCon li .date {position:absolute; right:0; padding-right:0;}

.director-wrap {}
.director-wrap > .box-text {background:url(../img/content/sub06/img0601_obj.svg) no-repeat 50% 50%; background-size:80% auto;}
.director-wrap > .box-text * {display:block; text-align:center; margin:0 auto;}
.director-wrap > .box-text .name {margin-top:.75em; font-size:1.277777em; font-weight:800;}
.director-wrap > .box-text .date {font-size:.944444em; color:#555;}
.director-wrap > .box-text {flex-grow:unset;}


@media all and (max-width:960px) {
	.history-arts .con:after {left:auto;}
	.history-arts .con dl {width:100%; float:left; text-align:left;}
	.history-arts .con dl + dl {margin-top:1em;}
	.history-arts .con dl.left {padding-right:0; text-align:left;}
	.history-arts .con dl.left .hisCon li .date {position:relative;}
	.history-arts .con dl.left:after {left:0;}
	.history-arts .con dl.left dt:before {left:-3.35em;}
	.history-arts .con dl.left .hisCon li {padding-right:0;}
	.history-arts .con dl .hisCon li ul li span {width:100%; display:inline-block;}
}

/* 전당소개 - 인사말 */
.greeting {position:relative;}
.greeting:before {content:'';display:block;background: url(/arts/img/content/sub06/img0602_tit.png) no-repeat 0 20%;position:absolute;right:0; bottom:11em; width:20.5556em; height:11em; z-index:-1; background-size:contain;}
.greeting:after {content:'';display:block;background: url(/arts/img/content/sub06/img0602_00.png) no-repeat 0 20%;position:absolute;right:0;top:0;width: 100%;height:20em;z-index:-1;}
.greeting .box-txt {padding-top: 17em;}
.greeting .box-txt .tit {width: calc(100% - 12em);background: #fff;margin-top:0;padding: 2em .5em 1em;font-family:'STUNNING';font-size:1.6em;}
.greeting .box-txt .tit em {color:#0069B6; font-style:normal;}
.greeting .box-txt .txt {position:relative;width:calc(100% - 22em);padding: 1em 1em;background:#fff;word-break: keep-all;z-index: 5;}
.greeting .box-txt .txt .sign {font-weight:800;}
.greeting .box-txt .txt p + p {margin-top:2em;}


@media all and (max-width:1024px) {
	.greeting:before {display:none;}
	.greeting .box-txt .tit {width:calc(100% - 10em); background:#fff;}
	.greeting .box-txt .txt {width:calc(100% - 12em); padding:2.5em 3em 0 0; }
}

@media all and (max-width:960px) {
	.greeting:after {width:100%; background-position:80% 60%;}
	.greeting .box-txt {padding-top:15em;}
	.greeting .box-txt .tit,
	.greeting .box-txt .txt {width:100%; padding:1em; }
}


/* 전당소개 - 시설소개 */
.fac-wrap {position:relative; display:flex;}
.fac-wrap .lcont {width:38.888888em;}
.fac-wrap .rcont {width:calc(100% - 38.888888em - 2.778em); margin-left:2.778em;}
.fac-wrap .rcont .txt {padding-top:1em; border-top:2px solid #222222;}


/* 시설소개 홀 좌석배치도 모달창 */
/*********************************************************
	레이어팝업
*********************************************************/
body.scroll-stop {overflow:hidden; height:100%;}
.facmodalWrap {display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.3);overflow:auto; z-index:99999;}
.facmodalWrap .facmodalFrame {position: relative;display:flex;align-items: center;justify-content: center;width: 100%;min-height: 100%;}
.facmodalWrap .modal-box {position:relative;width: 100%;max-width: 1120px;z-index: 30;padding:2em;background: #fff;border-radius: 0px;overflow:hidden;box-shadow: 0 10px 25px rgba(28,35,45,.1);}
.facmodalWrap .inner {position:relative;padding: 1em;font-size: 0.9em;}
.facmodalWrap .close {display:block;position:absolute;top: 1em;right: 1em;width:2.778em;height: 2.778em;background:url(../img/common/modal-close.svg) no-repeat 50% 50%;overflow:hidden;border-radius: 2.778em;text-indent:-999px;z-index: 10;}
.facmodalWrap .inner .tab-content {padding: 0.5em 1em;border:0;overflow-y: auto;max-height: 33em;}
.facmodalWrap .inner .tab-content .box-image.fac-image > img {display:inline-block; text-align:center;}
.facmodalWrap .inner .tab-content .box-image > img {line-height:0;}


@media all and (max-width:1024px) {
	.fac-wrap {flex-direction:column;}
	.fac-wrap .lcont,
	.fac-wrap .rcont {width:100%;}
	.fac-wrap .rcont {margin-left:0; margin-top:2.778em;}
}

@media all and (max-width:640px) {
	.facmodalWrap .modal-box {padding:1em;}
}

/* 전당소개 - CI */
.ci-color {}
.ci-color > .ci-list {border:0; padding:1.5em;}
.ci-color > .ci-list ul {}
.ci-color > .ci-list ul li em {display:inline-block; width:11.1115em; padding:.5em 1em; margin-right:1em; color:#fff; border-radius:2em; text-align:center; font-style:normal;}
.ci-color > .ci-list ul li + li {margin-top:.5em;}
.ci-color > .ci-list ul li:nth-of-type(1) em {background:#196AAE;}
.ci-color > .ci-list ul li:nth-of-type(2) em {background:#2CB430;}
.ci-color > .ci-list ul li:nth-of-type(3) em {background:#E4432F;}

@media all and (max-width:640px) {
	.ci-color > .ci-list ul li em {width:100%; margin-right:0; margin-bottom:1em;}
	.ci-color > .ci-list ul li span {width:100%; display:inline-block; text-align:center;}
}

/* 공연안내 - 장애인 이용 안내 */
.person-wrap {}
.person-wrap .top {position:relative; min-height:13.3333em; background:url(../img/content/sub01/img0106_bak.png) no-repeat; background-size:cover; padding:4.118em 2em; text-align:center;}
.person-wrap .top > * {color:#fff; line-height:1.7;}
.person-wrap .disable-wrap {margin:1em 0 2em 0;}
.person-wrap .disable-wrap .box-text {border:0; padding:2.2em 1.8em; margin:0; }
.person-wrap .disable-wrap .box-text + .box-text {border-left:1px solid #d9d9d9;}
.person-wrap .disable-wrap .box-text h4 {margin-bottom:.5em; font-size:1.33333em !important; font-family:'Pretendard';}

.person-wrap .service-wrap {margin-top:2.6em;}
.person-wrap .service-wrap .box {position:relative; min-height:16.666em; border:0; background:#F8F8F8; padding-left:29em; overflow:hidden;}

.person-wrap .service-wrap .box + .box {margin-top:1em;}
.person-wrap .service-wrap .box .thumb {position:absolute; top:0; bottom:0; left:0; width:27.778em;}
.person-wrap .service-wrap .desc {position:relative; display:block; padding:2em;}
.person-wrap .service-wrap .desc .subj {font-size:1.5em; font-weight:800; color:#1877BD;}
.person-wrap .service-wrap .desc .subj em {margin-right:.3em; color:#CECCCC; font-size:2.6em; font-family: 'Playfair';  font-weight:500;}
.person-wrap .service-wrap .desc .txt {font-size:1.1em;}

.person-wrap .service-wrap .box:nth-child(even) {padding-right:29em; padding-left:0;}
.person-wrap .service-wrap .box:nth-child(even) .thumb {position:absolute; top:0; bottom:0; right:0; left:auto;}
.person-wrap .service-wrap .box:nth-child(even) .desc {text-align:right;}
.person-wrap .service-wrap .box:nth-child(even) .desc .subj {color:#ED1A86;}
.person-wrap .service-wrap .box:nth-child(even) .desc .subj em {}

.video-wrap {margin-top:2em;}
.video-wrap .sub {padding:1.5em; max-height:17.5em; overflow-x: auto;background:#F8F9FD;}
.disable-wrap .box-text {padding:2em;}
.disable-wrap .box-text h5 {font-size:1.333333em !important;}
.disable-box > div + div {margin-top:2em;}
.disable-box .box-content .con {padding-top:1em;}


@media all and (max-width:960px) {
	.person-wrap .top {padding:2em;}
	.person-wrap .top > * + * {margin-top:.5em;}
	.person-wrap .disable-wrap .box-text + .box-text {border-top:1px solid #d9d9d9; border-left:0;}
	.person-wrap .service-wrap .box .thumb,
	.person-wrap .service-wrap .box:nth-child(even) .thumb {position:static; margin:0 auto; width:auto;}
	.person-wrap .service-wrap .box,
	.person-wrap .service-wrap .box:nth-child(even) {padding:0;}
	.person-wrap .service-wrap .desc,
	.person-wrap .service-wrap .box:nth-child(even) .desc {padding:1em;}
	.person-wrap .service-wrap .desc .subj {font-size:1.2em;}
	.person-wrap .service-wrap .desc .subj *,
	.person-wrap .service-wrap .box:nth-child(even) .desc {text-align:left;}
}