@charset "UTF-8";

/* 컨테이너 */
.container { padding:5vh 0; }

/* main_visual */
.mainSlide { width:100%; position:relative; margin:0 auto; overflow: hidden; }
.mainSlide .slider-wrapper { display:flex; gap: 20vh; transition:transform 0.5s ease-in-out; justify-content:flex-start; }
.mainSlide .slide { flex:0 0 1200px; box-sizing:border-box; }
.mainSlide .slide img { width:100%; border-radius:20px; }
.mainSlide .slide .mo_ver { display:none; }
.mainSlide .control { position: absolute;top: 50%;width: 1300px;left:50%;margin-left:-650px;display: flex;justify-content: space-between;transform: translateY(-50%); }
.mainSlide .control span { display:block; width:90px; height:90px; border-radius:50%; background:#fff; text-align:center; z-index:1; }
.mainSlide .control .left { left:-45px; }
.mainSlide .control .right { right:-45px; }
.mainSlide .control span .button { background:#efefef; width:63px; height:63px; cursor: pointer; border-radius: 50%; font-size:0; margin-top: 14px; }
.mainSlide .control span .button i { font-size:30px; }
.mainSlide .button:hover { background-color: rgba(0, 0, 0, 0.8); }
.mainSlide .button:hover i { color:#7354ed; } /* 웹접근성 수정*/
.mainSlide .control2 { position:relative; width:1200px;  justify-content: flex-end; align-items: center; margin:10px auto 0; left: 0; transform: translateY(0); }
.mainSlide .control2 .slide-number { font-size:16px; line-height: 22px; padding-right: 5px; }
.mainSlide .control2 .slide-number span.active {  font-weight: bold; color: #ff5733; }
.mainSlide .control2 span { display:block; width:auto; height:auto; border-radius:0; background:none; text-align:center; }
.mainSlide .control2 span .button,
.mainSlide .control2 button { background:none; width:auto; height:auto; cursor: pointer; border-radius:0; font-size:0; margin-top:0; }
.mainSlide .control2 button i,
.mainSlide .control2 span .button i { font-size:22px; }


/* 이 공연, 전시 어때  */
 .recommend { margin-top:8vh; }
 .recommend .layout_fix { }
 .recommend .top { display: inline-block; width: 100%; }
 .recommend .top .title { font-size:36px; color:#262626; font-weight:800; float:left; }
 .recommend .tab-menu {display: flex;justify-content: space-between;margin-left: 30px;border: 1px solid #e1d9ff;border-radius: 30px;background: #f7f6fe;height: 45px;line-height: 45px;width: 350px;float: left;padding: 0 15px;}
 .recommend .tab { cursor: pointer; font-size:18px; color:#7a6c93; }
 .recommend .tab.nolticket { font-size:0; background: url(/images/homepage/www/kr/main/tab_nolticket.png) center no-repeat; width:85px; }
 .recommend .tab.yes { font-size:0; background: url(/images/homepage/www/kr/main/tab_yes.png) center no-repeat; width:85px; }
 .recommend .tab-menu button:first-child { padding-left:30px; }
 .recommend .tab-menu button:last-child { padding-right:30px; }
 .recommend .tab.active { color:#fff; padding: 11px 30px 9px; position:relative;  z-index: 2; }
 .recommend .tab.active::before {content: "";background-color: #7354ed;width: 140%;height: 100%;border-radius: 30px;z-index: -1;position: absolute;top: 0;left: -16px;}
 .recommend .tab.nolticket.active::before { background: url(/images/homepage/www/kr/main/tab_nolticket_on.png) center no-repeat; }
 .recommend .tab.yes.active::before { background: url(/images/homepage/www/kr/main/tab_yes_on.png) center no-repeat; }

.recommend .tabBox { display: inline-block;width: 100%; margin-top:3.5vh; }
 .recommend .sub-tab { float: left; }
 .recommend .sub-tab .selected-option { display:none; }
 .recommend .sub-tab .genre { float:left; }
 .recommend .genre li { float:left; }
 .recommend .genre li a { font-size:20px; color:#262626; display:block; padding:0 25px; line-height:40px; }
 .recommend .genre li:first-child a { padding-left:0; }
 .recommend .genre li:hover a,
 .recommend .genre .active a { color:#f3413d; font-weight:600; text-decoration:underline; }

 .recommend .controls { text-align: center; float:right; }
 .recommend .controls button,
 .recommend .controls a {cursor: pointer; border: 1px solid #e0e0e0; border-radius:50%; background: #fff; font-size:0; width:40px; height:40px; text-align:center; line-height:40px; display:inline-block; margin-left:7px; }
 .recommend .controls a i,
 .recommend .controls button i { font-size:20px; }
 .recommend .controls button:hover,
 .recommend .controls a:hover { border: 1px solid #7354ed; background:#7354ed; color: white; }

.recommend .tab-content { display: flex; justify-content: flex-start; align-items: center; margin-top: 1.5vh; overflow: hidden;  position: relative;  min-height: 460px; }
/* .recommend .tabslide { display: none; } */
.recommend .tabslide .inner {  display:flex; transition:transform 0.5s ease-in-out; width:auto; }
.recommend .tabslide img { border-radius:10px; height:300px; width:225px; }
/* .recommend .tabslide.active { display: block; } */
.recommend .tabslide .inner .noContent { width:225px; }

.recommend .item { width:250px; transition: transform 0.5s ease-in-out; }
.recommend .item .image { position:relative; }
.recommend .item .image a { display:block; }
.recommend .item .ticket { position: absolute; bottom: 10px;left: 10px; width: 50%; height: 35px; background: rgba(255, 255, 255, 0.5); text-align: center; border-radius: 5px; padding-top: 5px; }
.recommend .item .ticket img { height:auto; width:auto;  }
.recommend .item .detail { margin-top:2vh; }
.recommend .item .mark span { height:35px; line-height:35px; border:1px solid; border-radius:20px; font-size:16px; text-align:center; padding:0 14px; display:inline-block; margin-right:3px; }
.recommend .item .mark .type1 { color:#f3413d; border-color:#f3413d; background:#fef6f6; }
.recommend .item .mark .type2 { color:#1ea47d; border-color:#1ea47d; background:#f4fffb; }
.recommend .item .title { font-size:18px; color:#262626; font-weight:600; padding:20px 0 0; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; min-height:67px; }
.recommend .item ul { margin-top:5px; }
.recommend .item li { padding:5px 0; color:#6e6e6e; letter-spacing:0; }

.recommend .item .hidden-link { position: absolute; left: -9999px; /* 초점을 방지하기 위해 화면 밖으로 이동 */ }
.recommend .item .hidden-link:focus { position: static; left: auto; }

.recommend .tab-content .noContent { position: absolute; top: 0; left: 0; min-height:460px; background:url(/images/homepage/www/kr/common/no_content.png) center top 60px no-repeat; padding:150px 0 50px; }

/* 공지사항 이용후기  */
.noticeBoard { margin-top:7vh; display:inline-block; width:100%; }
.noticeBoard .title { display: flex; justify-content: space-between;  align-items: center; border-bottom:1px solid #e3e3e3; padding-bottom:1vh; }
.noticeBoard .title span { font-size:36px; color:#242424; font-weight:800;  }
.noticeBoard .title a {font-size:0;cursor: pointer;border-radius: 50%;background: #009368;width: 40px;height: 40px;text-align: center;line-height: 40px;display:block;color:#fff;}
.noticeBoard .title a:hover { background:#000; color:#fff; }
.noticeBoard .title i { font-size:23px;  }
.noticeBoard .notice { float:left; width:50%; padding-right:6.5vh; }
.noticeBoard .notice .top { background:#f7f7f7; border-radius:5px; padding:2vh; }
.noticeBoard .substance { margin-top:2vh; }
.noticeBoard .substance dt { font-size:18px; color:#191919; font-weight:700; padding-bottom:5px;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; }
.noticeBoard .substance dd { color:#707070; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; }
.noticeBoard .substance .date { font-size:14px; color:#7A7A7A; padding-top:8px; } /* 웹접근성 수정 */
.noticeBoard .notice .top:hover { background:#009368; }
.noticeBoard .notice .top:hover dt,
.noticeBoard .notice .top:hover dd { color:#fff; }
.noticeBoard .notice ul { margin-top:1.5vh; }
.noticeBoard .notice li { position:relative; padding:7px 80px 7px 15px; }
.noticeBoard .notice li::before {content:"";width:4px;height:4px;background:#009368;position:absolute;top:15px;left:2px;}
.noticeBoard .notice li::after {content:"";width:100%;height:1px;background:#009368;position:absolute;bottom:0;left:0;display:none;}
.noticeBoard .notice li a { color:#3a3a3a; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; }
.noticeBoard .notice li .date { font-size:14px; color:#7a7a7a; letter-spacing:0; position:absolute; top:0; right:0; }
.noticeBoard .notice li:hover::after { display:block; }

.postscript { float:left; width:50%;     overflow: hidden;}
.noticeBoard .script { display:inline-block; width:100%; margin:2vh 0 0; }
.noticeBoard .script .box { float:left; width:50%; padding:0 17px; }
.noticeBoard .script .thumb,
.noticeBoard .postscript .thumb { width:100%; background:#f5f5f5 url(/images/homepage/www/kr/common/no_content_b.png) center no-repeat; height: 147px; border-radius: 14px; }
.noticeBoard .script .thumb img,
.noticeBoard .postscript .thumb img { border-radius:14px; height:147px; width: 100%; object-fit: cover; object-position: top;}
.noticeBoard .script dl { margin-top:2.5vh; }
.noticeBoard .postscript dl { margin-top:2.5vh; text-align:left; }
.noticeBoard .script dt,
.noticeBoard .postscript dt { font-size:18px; color:#191919; font-weight:600; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;  -webkit-line-clamp: 1; }
.noticeBoard .script dd,
.noticeBoard .postscript dd { color:#707070; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:2; line-height: 1.5; margin-top: 1vh; }
.noticeBoard .script ul,
.noticeBoard .postscript ul { display:flex; justify-content:space-between; align-items: center; margin-top:2vh; }
.noticeBoard .script li,
.noticeBoard .postscript li { color:#2a2a2a; display:flex; align-items:center;}

.noticeBoard .script li i { font-size:22px; padding-right:4px;}
.noticeBoard .script .box:hover dt,
.noticeBoard .script .box:hover dd { text-decoration:underline; }

/* 청년문화예술패스 소식  */
.newsGroup { margin-top:8vh; display: inline-block; width:100%;  }
.news { float:left; width:50%; overflow: hidden;  padding-right: 6.5vh; }
.news .title ul { display: flex; justify-content: center; align-items: center; gap:40px; }
.news .title li a { color:#111; display:block; }
.news .controls button,
.epilogue .controls button {
	cursor: pointer;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    font-size: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    margin-left: 7px;
}
.epilogue .controls button:hover,
.news .controls button:hover,
.epilogue .controls a:hover,
.news .controls a:hover { border: 1px solid #7354ed; background:#7354ed; color: white; }
.news .controls button i,
.news .controls a i { font-size:20px; }
.news .controls2 button { font-size:0; }
.news .controls2 .more,
.news .controls .more,
.epilogue .controls .more {
    cursor: pointer;
    border-radius: 50%;
    border:1px solid #009368;
    background: #009368;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    display: inline-block;
}
.epilogue .controls .more:hover,
.news .controls .more:hover,
.news .controls2 .more:hover { border:1px solid #000; background: #000; color: #fff; }
.news .controls2,
.epilogue .controls2 { position:absolute; width:100%; top:40%; z-index:2; }
.news .controls2 button,
.epilogue .controls2 button {
	margin-left:0;
	cursor: pointer;
    font-size: 0;
}
.news .controls2 button i,
.epilogue .controls2 button i { font-size:60px; color: #fff; }
.news .controls2 button:hover i,
.epilogue .controls2 button:hover i { color:#000; }
.news .controls2 #prev,
.epilogue .controls2 #prev2 { float:left; text-align:left; }
.news .controls2 #next,
.epilogue .controls2 #next2 { float:right; text-align:right; }


/* .news .newsCon { border:1px solid #e9e9e9; display:inline-block; width:100%; padding:3vh 2vh; border-radius: 30px; margin-top: 3vh; } */
.newsGroup .swiper { width: 100%; height: 100%; overflow: hidden; }
.newsGroup .swiper-wrapper { display:flex; margin-top:2vh; }
.newsGroup .swiper-slide { text-align: center; width: 50%; }
.newsGroup .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.newsGroup .news .thumb { height:147px; }
.newsGroup .news .thumb img { border-radius:14px; }
.newsGroup .news .icon { margin-top:2vh; display:block; }
.newsGroup .news .icon img { width:auto; }
.newsGroup .news dl { margin-top:1vh; text-align:left; }
.newsGroup .news dt { font-size:18px; color:#111; font-weight:600; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:2; line-height: 1.5; }
.newsGroup .news dd { color:#919191; padding-top:2.5vh; letter-spacing:0; }
.newsGroup .news .box:hover dt { text-decoration:underline; }

.newsGroup .epilogue { float:left; width:50%; }
.newsGroup.noticeBoard .epilogue ul { margin-top:1vh; }
.newsGroup.noticeBoard .epilogue dt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;  -webkit-line-clamp: 1; }
.newsGroup.noticeBoard .epilogue dd { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;  -webkit-line-clamp: 1;  margin-top:0; }
.newsGroup.noticeBoard .epilogue dd.date { color:#919191; margin-top:1vh; }




/* 레이어팝업  */
.layerWrap { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:999; }
.layer_pop { width:660px; margin:5% auto 0; padding:6.5vh 7vh 4vh; border-radius:15px; background:#fff; position:relative; }
.layer_pop .title { color:#222; font-size:24px; font-weight:600; position:relative; }
.layer_pop .title::before {content: "";background: url(/images/homepage/www/kr/sub/sub_deco03.gif) center no-repeat;width: 9px;height: 9px;position: absolute;top:0;right:-14px;}
.layer_pop .popCon { padding:40px 30px 0; }
.layer_pop .btnClose { position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; background:#282828; text-align:center; }
.layer_pop .btnClose i { color:#fff; font-size:28px; line-height:36px;}
.layer_pop .joinTable .tableTh { padding-left:10px; width:35%; font-weight:600; }
.layer_pop .joinTable .tableTd { width:75%; }
.layer_pop .joinTable .tableTh::before { display:none; }
.layer_pop .joinTable input { min-width:330px; }
.layer_pop .findPw.borderTop { margin-top:2vh; }
.layer_pop .btnArea { margin-top:4vh; }

/* 반응형 - media qurey 시작 */
/* 넓이가 1200px 이하일 때*/
@media all and (max-width:1200px){
	.container { padding: 50px 0; }
	.mainSlide .slider-wrapper { gap: 10vh; justify-content: flex-start; }
	.mainSlide .slide { flex: 0 0 calc(90% - 20px);  }
	.mainSlide .control { width: 100%; margin-left: -50%; }
	.mainSlide .control2 { margin-left:0; left: -60px; }
}

@media all and (max-width:970px){
	.recommend .top .title { font-size: 30px; margin-top: 5px; }
	.noticeBoard .title span,
	.news .title span,
	.noticeBoard .title span { font-size: 30px; }
	.news .controls2 { top:33%; }
	.news .controls2 button i { font-size: 50px; }
}

@media all and (max-width:920px){
	.mainSlide .control span { width: 77px; height: 77px;}
	.mainSlide .control2 span {  width:auto; height:auto;}
	.mainSlide .control span .button {  width: 50px; height: 50px;}
	.mainSlide .control2 span .button {  width:auto; height:auto;}
	.recommend .top .title,
	.noticeBoard .title span,
	.news .title span { font-size: 28px; }
	.recommend .tab-menu { height: 35px; line-height: 35px; justify-content: space-around;     width: 300px; padding:0; }
	.recommend .tab { font-size:15px; }
	.recommend .tab.active { padding:5px 30px 3px; }
	.recommend .tab.inter { width: 75px;  background-size: 100%; }
	.recommend .tab.inter.active::before { background-size: 100%; }
	.recommend .tab.yes { width: 45px;  background-size: 100%; }
	.recommend .tab.yes.active::before { background-size: 100%; }
	.recommend .tab-menu button:last-child {     padding-right: 47px; }

	.recommend .genre li a { font-size: 17px;  padding: 0 15px; }
	.recommend .controls button,
	.recommend .controls a { width: 30px; height: 30px; line-height: 30px;}
	.recommend .controls a i,
	.recommend .controls button i {  font-size: 16px; }
	.noticeBoard .title a { width: 30px; height: 30px; line-height: 30px;}
	.news .title ul { gap: 20px; }
	.news .newsCon { margin-top: 1vh; }
	.news .controls button,
	.news .controls .more { width: 30px; height: 30px; line-height: 30px; text-align:center; }

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

	.container { padding: 30px 0; }

	.mainSlide .slide { flex: 0 0 calc(98% - 20px); }

	/*.mainSlide .control { width:90%; margin-left:-45%; top:86%; }*/
	.mainSlide .control span {  width:50px;  height:50px;}
	.mainSlide .control span .button { width: 40px; height: 40px;     margin-top: 5px; }
	.mainSlide .control2 span { width:auto; height:auto;   }
	.mainSlide .control2 span .button { width:auto; height:auto; margin-top:0; }
    .mainSlide .control2 { left:-10px; margin: 0 auto; }

	.noticeBoard .notice,
	.postscript { float:none; width:100%; }
	.noticeBoard .notice { padding-right:0; }
	.postscript { margin-top:8vh; }
	.news .newsCon .box { width:50%; }

	.recommend .tabBox { position:relative;     margin-top: 2vh; }
	.recommend .sub-tab { position: relative; width:150px;  user-select: none; /* 텍스트 선택 비활성화 */ cursor: pointer; }
	.recommend .sub-tab .selected-option { padding: 7px 10px 5px; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; display: block; box-sizing:border-box;position:relative;}
	.recommend .sub-tab .selected-option i { position:absolute; top: 4px; right: 10px; font-size: 21px; }
	.recommend .sub-tab ul {   list-style: none;position: absolute;top: 100%;left: 0;width: 100%;max-height: 200px;overflow-y: auto; z-index: 10;border: 1px solid #ccc;background-color: #fff;box-sizing: border-box;}
	.recommend .sub-tab ul.collapsed { display: none; /* 기본적으로 숨김 */ }
	.recommend .sub-tab ul.expanded { display: block; /* 클릭 시 표시 */ }
	.recommend .sub-tab ul li { border-bottom: 1px solid #eee; float:none; }
	.recommend .sub-tab ul li:last-child { border-bottom: none; }
	.recommend .sub-tab ul li a { font-size:15px; line-height: 30px; }
	.recommend .genre li:first-child a { padding-left:15px; }
	.recommend .sub-tab ul li:hover { background-color: #f0f0f0; }

	.noticeBoard .script .box { float:none; width:100%; padding:0; }
	.noticeBoard .script .box + .box { margin-top:2vh; }
	.noticeBoard .script ul { margin-top:0; }

	.newsGroup .news { padding-right:0; }
	.newsGroup .news,
	.newsGroup .epilogue { float:none; width:100%; }
	.news .title { display:flex; width: 100%; }
	.news .title ul { justify-content: end; margin-top:10px; }
}

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

	.mainSlide .slide .pc_ver { display:none; }
	.mainSlide .slide .mo_ver { display:block; }

    .recommend .top .title,
    .noticeBoard .title span,
    .news .title span { font-size: 22px;  }

    .recommend .tab-menu { float:right; }
}

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

	.recommend .top .title { margin-bottom: 10px; }
    .recommend .tab-menu {  float: none;  clear: both;  margin: 0 auto;  }



    .news .title ul { gap: 10px; }
    .news .title li a { font-size:0; }
    .news .title li:first-child a { font-size:16px; }
    .news .newsCon .box { float:none; width:100%; padding: 0 10px 20px; }
    .news .newsCon .box:last-child { padding-bottom:0;  }
    .news .newsCon .icon { margin-top: 1vh; }
    .news .newsCon dl { margin-top: 0; }
    .news .newsCon dt { -webkit-line-clamp: 1; }
    .news .newsCon dd { padding-top: 0.5vh; }
}

/* 넓이가 400px 이하일 때*/
@media all and (max-width: 400px){
	.recommend { margin-top: 4vh; }
	.noticeBoard .substance dt { line-height: 25px; }
}