@charset "utf-8";
@import url(./../../_guide/css/contents.css);


/* 문화달력 */
.perfMonth-wrap {border-top:2px solid var(--color-main);}
.calendar { width: 100%; border-collapse: collapse; border-top:2px solid var(--color-text-dark); }
.calendar th, .calendar td { border: 1px solid #dedede; text-align: left; vertical-align: top; }
.calendar td {height:20rem; border-top:0; padding:1rem;font-size:1.4rem; }
.calendar th { width:calc(100% / 7); text-align:center; padding:2rem; font-weight:2rem; font-weight:700; background:#fbf7f4;}
.calendar td .date { display:flex; flex-wrap:wrap; align-items:center;}
.calendar td .date span {width:3.6rem; height:3.6rem; text-align:center; align-content: center; margin-right:1rem;border-radius:50%;}

.calendar td.today .date span {background:#333; color:#fff;}
.calendar td.closed .date span { background:#ff0000; color:#fff;}
.calendar .disable,
.calendar .closed { background-color: #f9f9f9; color: #999; }

.calendar a.perL {margin:0.7rem 0; display:block; padding:0; font-size:1.4rem; position:relative; padding-left:2.5rem; line-height:1.2em;}
.calendar a.perL em {display:block; width:2rem; height:2rem; border-radius:0.5rem; margin-right:0.5rem; position:absolute; top:-0.2rem; left:0; color:#fff; text-align:center; align-content:center; font-size:1.3rem;}

.calendar a.perL .t1 {background:#802027;}
.calendar a.perL .t2 {background:#c88033;}
.calendar a.perL .t3 {background:#13684f;}
.calendar a.perL .t4 {background:#204080;}
.calendar .sun .date span { color: red; }
.calendar .sat .date span { color: blue; }

.calinfo {background:#f9f9f9; padding:1rem; margin-bottom:1rem; text-align:center;}
.calinfo span {margin-right:2rem; display:inline-block; position:relative; font-size:1.4rem; }
.calinfo span em {color:#fff; display:inline-block; width:2rem; height:2rem;  border-radius:0.5rem; margin-right:0.5rem; font-size:1.3rem; align-content:center;}
.calinfo span em.t1{background:#802027;}
.calinfo span em.t2{background:#c88033;}
.calinfo span em.t3{background:#13684f;}
.calinfo span em.t4{background:#204080;}
.calinfo span:last-child {margin-right:0;}

.calmodal {position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); width:100%; height:100%; z-index:999; display:flex; align-items:center; justify-content: center; display:none; overflow: hidden; min-width:320px;}
.calmodal > div {background:#fff; width:calc(100% - 3rem); max-width:80rem; padding:3rem; border-radius:3rem; position:relative;}
.calmodal > div #modal-title {color:var(--color-main); font-size:2.4rem; font-weight:700; border-bottom:1px solid var(--color-main); padding-bottom:1rem; margin-bottom:1rem;}
.calmodal > div #modal-econt {margin:2rem 0; max-height:30rem; overflow-y:auto;}
.calmodal > div #modal-econt::-webkit-scrollbar { width:6px;}
.calmodal > div #modal-econt::-webkit-scrollbar-track { background:rgba(0,0,0,0.2);border-radius: 10px; }
.calmodal > div #modal-econt::-webkit-scrollbar-thumb {background: var(--color-sub);border-radius:3px; }
.calmodal > div #modal-econt::-webkit-scrollbar-thumb:hover {background: var(--color-sub);}
.calmodal > div #modal-econt li {display:flex; flex-wrap:wrap; margin:1rem 0;}
.calmodal > div #modal-econt li strong{width:10rem;}
.calmodal > div #modal-econt li span{width:calc(100% - 11rem);}

.close-button { font-size:3rem; font-weight:200; position:absolute; top:-1rem; right:-1rem; background:var(--color-main); color: #fff; width:4rem; height:4rem; border-radius:50%; display:flex; align-items: center; justify-content: center;}
.close-button:hover,
.close-button:focus { color: #fff; text-decoration: none; cursor: pointer; background:#000;}

body.modal-open { overflow: hidden; }
 
.calmonth {text-align:center; margin-bottom:3rem; display:flex; align-items: center; justify-content: center;}
.calmonth > a {border-radius:1rem; background:#f2f2f2; display:inline-block; width:3rem; height:3rem; overflow:hidden; display:flex; align-items: center; justify-content: center;}
.calmonth > a span {text-indent:-9999px; display:inline-block; transition:all .2s;}
.calmonth > strong {font-size:4rem; margin:0 1.5rem;}
.calmonth > strong em {color:var(--color-main);}
.calmonth > a:nth-of-type(1) {transform: rotate(-45deg);}
.calmonth > a:nth-of-type(2) {transform: rotate(45deg);}
.calmonth > a:hover {background:var(--color-main); color:#fff;}

@media (max-width:1024px) {
	.calendar thead {display:none;}
	.calendar td {display:block; height:auto;}
	.calendar td.disable {display:none;}
	.calendar a.perL {display:flex; font-size:1.8rem; flex-wrap:wrap; justify-content: space-between;}
	.calendar a.perL em {width:2.2rem; height:2.2rem; transform: translateY(0.1rem);}
}

.performanceSear {background:#f9f9f9; padding:5rem; border-radius:2rem; text-align:center; margin-bottom:5rem;}
.performanceSear select { width:20rem; border-radius:5rem; padding:1rem 2rem!important; border:0!important;}
.performanceSear input[type="text"] {border-radius:5rem; width:40rem; padding:1rem 2rem!important; border:0!important;}
.performanceSear input[type="submit"] {border-radius:5rem; width:15rem; height: 5rem !important; border:0; color:#fff; margin-left:-2rem; 
	background: var(--color-main);
	background: -webkit-linear-gradient(90deg,var(--color-sub) 1%, var(--color-main) 100%);
	background: -moz-linear-gradient(90deg,var(--color-sub) 1%, var(--color-main) 100%);
	background: linear-gradient(90deg,var(--color-sub) 1%, var(--color-main) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
	startColorstr="var(--color-sub)",
	endColorstr="var(--color-main)",
	GradientType=1);
}
.performanceSear input[type="submit"]:hover {background:var(--color-main);}
@media (max-width:1024px) {
	.performanceSear {padding:5rem 2rem;}
	.performanceSear select { width:30%;}
	.performanceSear input[type="text"] {width:50%;}
	.performanceSear input[type="submit"] {width:15%;}
}
@media (max-width:768px) {
	.performanceSear {padding:3rem 1rem;}
	.performanceSear select { width:40%;}
	.performanceSear input[type="text"] {width:56%;}
	.performanceSear input[type="submit"] {width:96%; margin:1rem 0;}
}

.perList {position:relative;}
.perList ul {display:flex; flex-wrap:wrap; justify-content: space-between;}
.perList ul li {margin-bottom:5rem; text-align:center; width:30%;}
.perList ul li a {display:block;}
.perList ul li a .thum {aspect-ratio: 1 / 1.2 ; object-fit:cover; overflow:hidden; border-radius:1rem;}
.perList ul li a .thum:not(:has(img)) {background:#dedede url(/portal/images/common/logo.png) no-repeat 50% 50% / 20rem auto; filter:grayscale(1); opacity:0.2;}
.perList ul li a .thum img  {transition: 0.5s; width:100%;}
.perList ul li a p.tit {margin-top:1.5rem;}
.perList ul li a:hover .thum img {transform: scale(1.1); filter: brightness(1.5);}
.perList ul li a:hover p.tit {color:var(--color-main); text-decoration: underline;}

.perList ul li a:before {content:'진행중'; position:absolute; top:1rem; right:1rem; background:var(--color-main); color:#fff; padding:0.5rem 1rem; font-size:1.4rem; z-index:2; border-radius:0.5rem; z-index:2;}
.perList ul li a.ready:before {content:'예정'; background:#666;}
.perList ul li a.close {filter:grayscale(1);}
.perList ul li a.close:before {content:'종료'; background:#000;}

@media (max-width:768px) {
	.perList ul li {width:47%; margin-bottom:3rem;}
	.perList ul li a .thum:not(:has(img)) {background-size:15rem auto;}
}


/* 공연 뷰 */
.performence_view {border-top:3px solid var(--color-main);}
.performence_view .performence_tit {width:100%; background:#fbf7f4; border-bottom:1px solid var(--color-sub); text-align:center; display:flex; align-items: center; justify-content: center; padding:2rem 0;}
.performence_view .performence_tit span { color:#fff; padding:0.5rem 1rem; display:inline-block;
background:var(--color-sub); font-size:1.4rem; border-radius:1rem; margin-right:1rem;}
.performence_view .performence_tit p {font-weight:600; font-size:2.6rem; line-height:1.2em; }

.performence_con {display:flex; flex-wrap:wrap; justify-content: space-between; padding:3rem; border-bottom:1px solid var(--color-sub); position:relative;}
.performence_view .performence_img {width:30%; transition:all .2s; margin-top:1rem;}
.performence_view .performence_img img {margin:0 auto; max-width:100%; display:block; border-radius:2rem;  transition:all .2s;}
.performence_view .performence_txt {width:calc(70% - 5rem); color:var(--color-text-dark);}

.performence_view .performence_img:not(:has(img)) {background: #dedede url(/portal/images/common/logo.png) no-repeat 50% 50% / 20rem auto; filter: grayscale(1);opacity: 0.2; }
    
    
    
.performence-list li { margin:1.5rem 0; border-radius:1rem; font-size:1.8rem; display:flex; flex-wrap:wrap; justify-content: space-between;}
.performence-list li strong {width:11rem; color:var(--color-text-dark);}
.performence-list li strong:before {content:''; display:inline-block; width:0.8rem; height:0.8rem; border-radius:50%; background:var(--color-sub); margin-right:0.5rem; transform: translateY(-0.3rem);}
.performence-list li p {width:calc(100% - 12rem); color:var(--color-text-light);}
.performence-list li p span {margin:0.2rem 2rem 0.2rem 0; display:inline-block;}
.performence-list li p span em {text-transform: uppercase; color:#fff; padding:0.2rem 1rem; border-radius:0.8rem; background:#000; margin-right:0.5rem; font-size:1.5rem; font-weight:400;}
.performence-list li p span em.T1 {background:#0a6761;}
.performence-list li p span em.T2 {background:#224fa2;}
.performence-list li p span em.T3 {background:#e62a7d;}
.performence-list li p span em.T4 {background:#45398f;}

.percon { line-height:1.8em; max-height:80rem; overflow:hidden; position:relative; border-radius:2rem 2rem 0 0; border:1px solid #dedede; padding:3rem;}
.percon img {margin:0 auto; max-width:100%; display:block;}
.percon:after { content: ''; height:8rem; width: 100%; position: absolute; left: 0; bottom: 0;  background: transparent linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,100) 100%) 0% 0% no-repeat; }
.percon + .performence_more { background:var(--color-main); text-align:center;  margin-bottom:4rem; border-radius:0 0 2rem 2rem;}
.percon + .performence_more button {width:100%; padding:2rem 0;  color:#fff;}
.percon + .performence_more button:after {content:'\EA4A'; display:inline-block; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased;font-size:2rem; margin-left:0.5rem;}

.percon + .performence_more:has(>button.on) {background:#fafafa; border:1px solid #dedede; border-top:0;}
.percon + .performence_more button.on:after {transform: rotate(180deg);}
.percon + .performence_more button.on {color:#333;}
.TTime span {display:block; margin-top:1rem;}

@media (max-width:1280px){
	.performence_view .performence_img {width:40%;}
	.performence_view .performence_txt {width:calc(60% - 5rem);}
	.performence_view .performence_tit p {font-size:3.2rem; }
	.performence-list {margin-top:2rem;}
}
@media (max-width:768px){
	.performence_view .performence_img {position:absolute; top:4rem; left:0rem; width:auto; transform: rotate(-7deg);}
	.performence_view .performence_img img {width:13rem!important; display:block;margin:0;  }
	.performence_view .performence_txt {width:100%; padding-left:11rem;}
}
@media (max-width:480px){
	.performence_con {padding:2rem 0;}
	.performence_con .performence_img {position:relative; top:auto; left:auto; width:auto; transform: rotate(0); width:100%;}
	.performence_con .performence_img img {width:100%!important;}
	.performence_con .performence_txt {width:100%; padding-left:0; margin-top:2rem;}
	.performence-list {margin-top:0;}
	.performence-list li strong {width:9rem;}
	.performence-list li p {width:calc(100% - 10rem);}
}



.sisul-top {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between;}
.sisul-top .imgslide-wrap {width:51rem; position:relative;}
.sisul-top .imgslide-wrap .img-slide {border-radius:2rem; overflow:hidden;}
.sisul-top .imgslide-wrap .img-slide img {width:100%;}
.sisul-top .imgslide-wrap .controll {position:absolute; bottom:-2.5rem; left:0; background:#fff; border-radius:3rem; display:flex; align-items:center; padding:1.5rem 3rem;}
.sisul-top .imgslide-wrap .controll .count { display:flex; position:relative; margin-right:4rem;}
.sisul-top .imgslide-wrap .controll .count:before {content:''; display:block; width:4px; height:4px; border-radius:50%; background:#dadada; position:absolute; top:50%; left:50%;}
.sisul-top .imgslide-wrap .controll .count span {width:3rem; height:3rem; border-radius:50%; display:flex; align-items:center; justify-content:center;font-size:1.2rem; color:#7f7f7f; font-weight:600;}
.sisul-top .imgslide-wrap .controll .count span.current {background:#000; color:#fff; margin-right:2rem;}
.sisul-top .imgslide-wrap .controll button {margin-top:-0.2rem; opacity:0.5; transition:all .2s;}
.sisul-top .imgslide-wrap .controll button span {display:inline-block; text-indent:-9999px;}
.sisul-top .imgslide-wrap .controll button i {font-size:2.4rem;}
.sisul-top .imgslide-wrap .controll button:hover {opacity:1;}

.sisul-top .sisul-con {width:calc(100%  - 56rem);}
.sisul-top .sisul-con p.tit {font-size:2.8rem; font-weight:700; border-bottom:1px solid #e7e7e7; padding-bottom:1rem; margin-bottom:2rem;}
.sisul-top .sisul-con ul li {background:#f9fbfe; padding:1rem; margin-top:0.7rem; border-radius:0.3rem; display:flex; flex-wrap:wrap;}

.sisul-top .sisul-con ul li strong {font-weight:500; width:12rem;}
.sisul-top .sisul-con ul li strong i {margin-right:1rem; transform: translateY(-0.2rem); display:inline-block}
.sisul-top .sisul-con ul li span {color:#55504d; width:calc(100% - 12rem);}

@media (max-width:1024px) {
	.sisul-top .imgslide-wrap {width:40%;}
	.sisul-top .sisul-con {width:calc(60%  - 3rem);}
}

@media (max-width:768px) {
	.sisul-top .imgslide-wrap {width:100%;}
	.sisul-top .sisul-con {width:100%; margin-top:5rem;}
}

/* 탭메뉴 콘텐츠 */
.tabmenu {display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom:2rem; gap:1rem;}
.tabmenu a {display:block; text-align:center; border-radius:0.5rem; border: solid 2px #f3f3f3; padding:1.5rem 2rem; font-weight:600; color:#444;}
.tabmenu a.active {border:2px solid var(--color-main); color:var(--color-main);}

.tabmenu2 {position:relative;}
.tabmenu2 .bb {display:none;}
@media (min-width:769px) {
	.tabmenu2 > div {display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom:2rem; gap:1rem;}
	.tabmenu2 a.tab {display:block; text-align:center; border-radius:0.5rem; border: solid 2px #f3f3f3; padding:1.5rem 2rem; font-weight:600; color:#444;}
	.tabmenu2 a.tab.active {border:2px solid var(--color-main); color:var(--color-main);}
}

@media (max-width:768px) {
	.tabmenu2 .bb {display:block; border:2px solid var(--color-main); padding:1rem; border-radius:1rem; position:relative;}
	.tabmenu2 .bb:after {content:'\ea4e'; display:block; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; position:absolute; top:calc(50% - 1rem); right:1rem; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; transition:all .2s;}
	.tabmenu2 .bb.active:after {transform:rotate(180deg);}
	.tabmenu2 > div {display:none; border:1px solid #dedede; padding:1rem; border-radius:1rem; margin-top:1rem; background:#fafafa;}
	.tabmenu2 > div a {display:inline-block; margin:0.5rem 1rem 0.5rem 1rem; font-size:1.6rem;}
	.tabmenu2 > div a.active {color:var(--color-main); font-weight:700;}
	.tabmenu2 > div a:before {content:''; display:inline-block; width:6px; height:6px; background:#666; margin-right:0.5rem; transform: translateY(-0.5rem); border-radius:50%;}
	.tabmenu2 > div a.active:before {background:var(--color-main);}
}



.tabcon {display:none;}
.tabcon.active {display:block;}
.imgslide-wrap2 {position:relative; border-radius:3rem; overflow:hidden;}
.imgslide-wrap2 button {width:4rem; height:4rem; border-radius:50%; background:rgba(0,0,0,0.5); position:absolute; top:calc(50% - 2rem); z-index:1; text-indent:-9999px;}
.imgslide-wrap2 button:before {color:#fff; text-indent:0; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content: center; font-size:2.4rem;}
.imgslide-wrap2 button.slick-prev {left:2rem;}
.imgslide-wrap2 button.slick-prev:before {content:'\ea64'; }
.imgslide-wrap2 button.slick-next {right:2rem;}
.imgslide-wrap2 button.slick-next:before {content:'\ea6e'; }
.img-slide2 .items {position:relative;}
.img-slide2 .items > span {position:absolute; bottom:0; left:0; width:100%; display:block; padding:1rem; text-align:center; color:#fff; background:rgba(0,0,0,0.5);}


.Donation{background:#2c1c19 url(/portal/images/sub/Donation_bg.jpg) no-repeat center 0; border-radius:1rem; padding: 5rem 1rem 6rem 1rem;}
.Donation .inner{background:#fff; border-radius:1rem 5rem 5rem 5rem; padding:3rem 5rem;}
.Donation .btxt{text-align: center;}
.Donation ul{    display: flex;   flex-wrap: wrap;  justify-content: flex-start;}
.Donation li{padding: 0.5rem; width: 14.2%; box-sizing:border-box;}
.Donation li span{display:block; border:1px solid #ddd;  border-radius:3rem; padding:1.8rem 0; font-size:1.8rem; color:#55504d; text-align: center;}

.Donation ul.c_list li{width: 20%;}
.Donation ul.c_list li span{padding:1.0rem 0;}

@media (max-width:768px) {
	
	.Donation li,
	.Donation ul.c_list li{width: 33.3%; }
	.Donation .inner{padding: 2.5rem;}
}

@media (max-width:500px) {
	
	.Donation li,
	.Donation ul.c_list li{width:50%; }
}


/*인사말*/
.intro_tit {width:50%; padding-left:5rem;}
.intro_tit .stxt{ position:relative;    }
.intro_tit .stxt span{display:inline-block; font-size:2.0rem; color:var(--color-main); padding-right:2rem; background:#fff;  font-weight: 700;  position: relative;  z-index: 1;} 
.intro_tit .stxt:before{content:''; display:block; width:100%; height:1px; background:var(--color-main);     position: absolute;   top: 50%;  left: 0;}
.intro_tit .btxt{color:#333; font-size:3.0rem; font-weight:700; line-height:4.0rem; padding:5rem 0; }

.intro_greeting{background:#fafbff; border-radius:3rem; padding:5rem;}
.intro_greeting .greeting_txt{padding-bottom:5.5rem; line-height:3.4rem; position: relative;}
.intro_greeting .sain{font-weight: 700; color:#333; font-size:2.0rem; padding-top:4.5rem; border-top:1px solid #ddd; }
.intro_greeting .intro_pic{position: absolute;  right: 12rem;  top:0rem;  border-radius: 2rem;}


@media (max-width:1550px) {
	
	.intro_greeting .intro_pic{width:280px; right: 5rem;}
}

@media (max-width:1200px) {
	
	.intro_greeting .intro_pic{position: relative;  left: 5rem; top: -5rem;}
}

@media (max-width:1024px) {
	
	.intro_tit{width:100%;}
}

@media (max-width:768px) {
	
	.intro_greeting .intro_pic{left:0; width:auto; right:auto;}
	.intro_greeting {background: #fafbff;  border-radius: 3rem;  padding: 3rem 1rem 1rem 1rem;}
	.intro_tit{padding-left: 1rem;}
}