/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

body {font-family: "Pretendard", sans-serif;}



/* 왼쪽 큰 아티스트 정보 */
.ex {margin-bottom: 100px;}
.ex .inner {width: 85%; margin: 0px auto; position: relative; min-width: 0; padding-top: 130px;}
.ex .inner .top {display: flex; justify-content: space-between; margin-bottom: 40px;}
.ex .inner .top h1 {font-size: 27px;}
.ex .inner .top .right {width: 33%;}
.ex .inner .top .right ul {display: flex; justify-content: space-between; width: 100%;}
.ex .inner .top .right ul li {font-size: 17px; font-weight: 400; padding-top: 8px; width: 120px; text-align: center; height: 35px; cursor: pointer; position: relative; transition: font-weight 0.3s ease;}
.ex .inner .top .right ul li:nth-child(4) {position: relative; padding-top: 0px; border: none; margin-left: 0px; pointer-events: auto; align-items: center; justify-content: center; display: flex; width: 10%; cursor: pointer;}
.ex .inner .top .right ul li.active {font-weight: 700;}
.ex .inner .top .right ul li:hover {font-weight: bold;}

/* border-bottom 애니메이션 */
.ex .inner .top .right ul li::after {content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 0; background-color: #000; transition: width 0.3s ease-in-out;}
.ex .inner .top .right ul li:nth-child(-n+3):hover::after,
.ex .inner .top .right ul li:nth-child(-n+3).active::after {width: 100%;}
.ex .inner .top .right ul .img {width: 45px; height: 45px; padding: 10px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s;}
.ex .inner .top .right ul li:nth-child(4):hover .img {background: #ccc;}
.ex .inner .top .right ul .img img {width: 100%;}


/* 드롭다운 메뉴 - 기본 숨김 */
.museum_list {position: absolute; top: 100%; right: 0; margin-top: 8px; width: 200px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px; z-index: 100; display: none;}
/* a에 active가 붙었을 때만 museum_list 보이기 */
.right ul > li:last-child > a.active + .museum_list {display: block;}
.museum-list-header {font-size: 16px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee;}
.all-museum-item {border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 5px;}
.museum-item {display: flex; align-items: center; padding: 8px 4px; border-radius: 4px; transition: background-color 0.2s;}
.museum-item:hover {background-color: #f5f5f5;}
.museum-item input[type="checkbox"] {display: none;}
.museum-item label {font-size: 15px; color: #333; cursor: pointer; position: relative; padding-left: 30px; flex-grow: 1;}
.museum-item label::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 4px; background-color: #fff;}
.museum-item input[type="checkbox"]:checked + label::before {background-color: #007bff; border-color: #007bff;}
.museum-item input[type="checkbox"]:checked + label::after {content: '✔'; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #fff;}
.museum-item label, .museum-list-header, 
.museum-item label:hover,
.museum-item label:active,
.museum-item label:focus {font-weight: normal;}

.ex .inner .conBox {display: flex; justify-content: space-between;}
.ex .inner .conBox .left {padding: 40px 30px 60px; width: 40%; background-color: #3A3A3A; border-radius: 20px; overflow: hidden;}
.ex .inner .conBox .left .container {width: 100%; overflow: hidden; position: relative;}
/* 슬라이드 트랙 */
.ex .inner .conBox .left .container .mainSlider {display: flex; width: 100%; transition: transform 0.6s ease;}
.ex .inner .conBox .left .mainSlide {width: 100%; flex-shrink: 0; cursor: pointer; box-sizing: border-box;}
.ex .inner .conBox .left .mainSlide h2 {font-size: 17px; margin-bottom: 50px; color: #fff; white-space: nowrap;}
.ex .inner .conBox .left .mainSlide .bTit {font-size: 29px; font-weight: 600; color: #fff;}
.ex .inner .conBox .left .mainSlide .bTxt {font-size: 16px; color: #999; font-weight: 500; margin: 30px 0 15px; line-height: 1.3;}
.ex .inner .conBox .left .mainSlide .img {width: 100%;}
.ex .inner .conBox .left .mainSlide .img img {width: 100%; border-radius: 20px 20px 0 0;}
.ex .inner .conBox .left .mainSlide .slide {padding: 30px 20px; border-radius: 0 0 20px 20px; background-color: #000; color: #fff;}
.ex .inner .conBox .left .mainSlide .slide .sTit {font-size: 22px; font-weight: 400; margin-bottom: 10px;}
.ex .inner .conBox .left .mainSlide .slide .sTxt {font-size: 16px; font-weight: 300; line-height: 1.3;}
/* 도트 컨테이너 */
.ex .inner .conBox .left .dots {display: flex; justify-content: center; margin-top: 20px; gap: 10px;}
/* 기본 도트 스타일 */
.ex .inner .conBox .left .dot {width: 10px; height: 10px; background-color: #888; border-radius: 50%; opacity: 0.6; cursor: pointer; transition: all 0.3s ease;}
/* 활성 도트 스타일 */
.ex .inner .conBox .left .dot.active {background-color: #fff; border: 2px solid #fff; box-sizing: border-box; opacity: 1;}
.ex .inner .conBox .right {padding-top: 100px; margin-left: 20px; flex-shrink: 0; flex-grow: 0; width: 75%; overflow: hidden;}
.slider-wrapper {width: 100%; position: relative;}
.rBox {display: flex; transition: transform 0.6s ease-in-out; will-change: transform;}

.ex .inner .conBox .right .rBox {display: flex; padding: 0; margin: 0; gap: 30px; transition: transform 0.6s ease-in-out; will-change: transform; list-style: none;}
.ex .inner .conBox .right .rBox .poster {cursor: pointer; display: block; width: 23%; flex-shrink: 0; border-radius: 20px 20px 0 0; transition: transform 0.4s ease; padding-bottom: 20px;}
.ex .inner .conBox .right .rBox .poster:hover {transform: scale(1) translateY(-10px); box-shadow: 0 7px 12px rgba(0, 0, 0, 0.15);}


.ex .inner .conBox .right .rBox .poster .img-wrapper {width: 100%; margin-bottom: 15px; /*border-radius: 20px 20px 0 0;*/} 

.ex .inner .conBox .right .rBox .poster .img-wrapper img {width: 100%; /*border-radius: 20px 20px 0 0;*/ display: block; transition: transform 0.4s ease;}
.ex .inner .conBox .right .rBox .poster .cate {font-size: 16px; font-weight: 500; margin-bottom: 7px; padding-left: 12px; color: #666; letter-spacing: -0.8px;}
.ex .inner .conBox .right .rBox .poster .title {font-size: 19px; font-weight: 600; margin-bottom: 20px; padding-left: 12px;}
.ex .inner .conBox .right .rBox .poster .loca {font-size: 15px; font-weight: 500; color: #666; margin-bottom: 3px; padding-left: 12px;}
.ex .inner .conBox .right .rBox .poster .date {font-size: 15px; font-weight: 500; color: #777; margin-bottom: 9px; padding-left: 12px;}
.ex .inner .conBox .right .rBox .poster .situ {font-size: 15px; font-weight: 500; color: #e63946; margin-bottom: 7px; padding-left: 12px;}
.ex .inner .conBox .right .rBox .poster .for {font-size: 15px; font-weight: 500; color: #0077b6; padding: 6px 12px; border-radius: 20px; background: #eaf6fd; text-align: center; width: 40%; margin-top: 10px;}
.ex .inner .conBox .right .rBox .poster:nth-child(3) .for {}
.ex .inner .conBox .right .rBox .poster:nth-child(4) .for {}
.ex .inner .button {display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; position: absolute; bottom: 0%; right: 0;}
.ex .inner .direction {display: flex; margin-bottom: 10px;}
.ex .inner .direction .arrow {border: none; margin-left: 8px; border: 1px solid #ccc; padding: 9px; border-radius: 50%; background: #fff; align-items: center; transition: background 0.2s, border 0.2s; outline: none; cursor: pointer;}
.ex .inner .direction .arrow:hover {border: 1px solid #666;}
.ex .inner .direction .arrow img {width: 70%; color: #222; font-weight: bold;}
.ex .inner .button .more {display: inline-block; padding: 9px 7px 5px; transition: border-bottom 0.2s ease; position: relative; color: #222; overflow: hidden; cursor: pointer;}
.ex .inner .button .more::after {content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background-color: #666; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}
.ex .inner .button .more:hover::after {transform: scaleX(1);}
.right-tab {display: none;}
.right-tab.active {display: block;}



@media screen and (max-width: 1024px) {
.header .inner {width: 90%;}
.header .inner .logo {min-width: 100px;}
.header .inner .logo img{width: 100%; height: 100%;}
.header .gnb {width: 50%;}
.header .gnb a{width: 20%; white-space: nowrap; font-size: 15px;}
.search-input {padding: 6px 10px 6px; width: 110px; margin-right: 8px;}
.search-input::placeholder {color: #aaa;}
.header-right .search-icon {width: 20px; height: 20px; margin-right: 5px;}
.header-right .search-icon img {width: 100%;height: 100%;}
.header-right .hamburger-menu {display: none;}
.header .inner .header-right .login-btn {font-size: 14px; color: #333; cursor: pointer; transition: 0.2s ease; border: none;padding: 8px 20px; margin-right: 18px;}

.ex .inner {width: 93%;}
.ex .inner .top .right {width: 48%;}
.ex .inner .top .right ul {display: flex; justify-content: space-between; width: 90%;}
.ex .inner .top .right ul li {font-size: 16px; font-weight: 400; padding-top: 8px; width: 90px;}
.ex .inner .top .right ul li:nth-child(4) {padding-top: 0px; width: 11%;}
.ex .inner .top .right ul .img {width: 90%;} 
.ex .inner .top .right ul .img img {width: 100%;}


.ex .inner .conBox .left {padding: 30px 13px 20px; width: 100%;}
.ex .inner .conBox .left .mainSlide h2 {font-size: 15px; margin-bottom: 35px; white-space: nowrap; letter-spacing: -0.7; padding-left: 3px;}
.ex .inner .conBox .left .mainSlide .bTit {font-size: 23px; letter-spacing: -0.8; padding-left: 3px;}
.ex .inner .conBox .left .mainSlide .bTxt {font-size: 14px; margin: 30px 0 15px; letter-spacing: -0.9; padding-left: 3px;}
.ex .inner .conBox .left .mainSlide .img {width: 100%;}
.ex .inner .conBox .left .mainSlide .img img {width: 100%; border-radius: 10px 10px 0 0;}
.ex .inner .conBox .left .mainSlide .slide {padding: 20px 17px 25px;}
.ex .inner .conBox .left .mainSlide .slide .sTit {font-size: 18px; font-weight: 500; margin-bottom: 20px; white-space: nowrap;}
.ex .inner .conBox .left .mainSlide .slide .sTxt {font-size: 14px;}
/* 도트 컨테이너 */
.ex .inner .conBox .left .dots {display: flex; justify-content: center; margin-top: 20px; gap: 10px;}
/* 기본 도트 스타일 */
.ex .inner .conBox .left .dot {width: 7px; height: 7px;}
/* 활성 도트 스타일 */
.ex .inner .conBox .left .dot.active {background-color: #fff; border: 2px solid #fff; box-sizing: border-box; opacity: 1;}

.ex .inner .conBox .right {padding-top: 70px; margin-left: 20px; flex-shrink: 0; flex-grow: 0; width: 65%; overflow: hidden;}
.ex .inner .conBox .right .rBox {gap: 10px; display: flex; flex-wrap: nowrap; width: 95%;}
.ex .inner .conBox .right .rBox .poster {width: 20%;}
.ex .inner .conBox .right .rBox .poster .img-wrapper {width: 100%; margin-bottom: 15px;}
.ex .inner .conBox .right .rBox .poster .img-wrapper img {width: 100%; border-radius: 10px 10px 0 0;}
.ex .inner .conBox .right .rBox {flex-wrap: nowrap;}
.ex .inner .conBox .right .rBox .poster:nth-child(4) {display: none;}
/* 필요시 3개가 균등하게 보이도록 */
.ex .inner .conBox .right .rBox .poster {flex: 0 0 calc(36% - 20px); margin-left: 0px;}
/* 마지막 항목 안 보이므로 margin-left 첫 항목 없애도 깔끔 */
.ex .inner .conBox .right .rBox .poster:first-child {margin-left: 0;}

.ex .inner .button {bottom: 0%;}
.ex .inner .direction .arrow img {width: 60%;}
.ex .inner .direction .arrow {padding: 7px;}

.ex .inner .conBox .right .rBox .poster .img-wrapper img {border-radius: 10px 10px 0 0;}
.ex .inner .conBox .right .rBox .poster .cate {font-size: 15px; margin-bottom: 8px; letter-spacing: -0.4px;}
.ex .inner .conBox .right .rBox .poster .title {font-size: 18px; margin-bottom: 25px;}
.ex .inner .conBox .right .rBox .poster .loca {font-size: 15px; margin-bottom: 5px;}
.ex .inner .conBox .right .rBox .poster .date {font-size: 14px; white-space: nowrap; margin-bottom: 30px;}
.ex .inner .conBox .right .rBox .poster .situ {margin-bottom: 7px;}
.ex .inner .conBox .right .rBox .poster .for {font-size: 14px; font-weight: 500; padding: 6px 12px; width: 45%; margin-top: 10px;}
.ex .inner .conBox .right .rBox .poster:nth-child(3) .for {width: 50%;}
.ex .inner .conBox .right .rBox .poster:nth-child(4) .for {width: 50%;}
}


@media screen and (max-width: 768px) {
.ex .inner {width: 100%; margin-bottom: 70px;}
.ex .inner .top {width: 85%; margin: 0 auto 20px;}
.ex .inner .top .right {width: 77%; margin-bottom: 20px; display: flex; justify-content: right;}
.ex .inner .top .right ul {width: 70%;}
.ex .inner .top .right ul li {font-size: clamp(15px, 2vw, 18px);}
.ex .inner .top .right ul li:nth-child(4) {padding-top: 0px; width: 13.5%;}

.ex .inner .conBox {display: block;}
.ex .inner .conBox .left {padding: 40px 20px; width: 70%; margin: 30px auto;}
.ex .inner .conBox .left .mainSlide h2 {font-size: clamp(17px, 2vw, 19px); margin-bottom: 50px; letter-spacing: 0; padding-left: 5%;}
.ex .inner .conBox .left .mainSlide .bTit {font-size: 23px; letter-spacing: 0; padding-left: 5%;}
.ex .inner .conBox .left .mainSlide .bTxt {font-size: clamp(16px, 2vw, 17px); margin: 20px 0; letter-spacing: 0; padding-left: 5%;}
.ex .inner .conBox .left .mainSlide .img {width: 90%; margin: 0 auto;}
.ex .inner .conBox .left .mainSlide .img img {width: 100%; border-radius: 10px 10px 0 0;}
.ex .inner .conBox .left .mainSlide .slide {padding: 25px 18px; width: 90%; margin: 0 auto;}
.ex .inner .conBox .left .mainSlide .slide .sTit {font-size: 19px; font-weight: 500; margin-bottom: 15px;}
.ex .inner .conBox .left .mainSlide .slide .sTxt {font-size: 15px;}


.ex .inner .conBox .right {padding: 70px 0 90px; width: 85%; margin: 0 auto;}
.ex .inner .conBox .right .rBox {margin-bottom: 40px; gap: 20px; width: 100%;} 
.ex .inner .conBox .right .rBox .poster {flex: 0 0 calc(48% - 0px); margin-left: 0;}
.ex .inner .conBox .right .rBox .poster .img-wrapper {width: 100%; margin-bottom: 15px;}
.ex .inner .conBox .right .rBox .poster .loca {margin-bottom: 7px;}
.ex .inner .conBox .right .rBox .poster .date {margin-bottom: 7px;}
.ex .inner .conBox .right .rBox .poster .situ {margin-bottom: 25px;}
.ex .inner .conBox .right .rBox .poster .for {font-size: 15px; font-weight: 500; color: #0077b6; padding: 6px 10px; border-radius: 30px; background: #eaf6fd; text-align: center; width: 28%; margin-top: 0px;}
.ex .inner .button {bottom: 0%;}
.ex .inner .conBox .right .rBox .poster:nth-child(3) .for {width: 28%;}
.ex .inner .conBox .right .rBox .poster:nth-child(4) .for {width: 28%;}
.ex .inner .button {display: block; position: absolute; left: 45%; bottom: 0%;}
}

@media screen and (max-width: 480px) {
.header {display: none;}
.ex .inner {width: 100%; margin-bottom: 70px;}
.ex .inner .top {width: 85%; margin: 0 auto;}
.ex .inner .top .left {width: 100%;}
.ex .inner .top h1 {font-size: 24px;}
.ex .inner .top .right {width: 100%; display: flex; justify-content: flex-end;}
.ex .inner .top .right ul {width: 90%;}
.ex .inner .top .right ul li {font-size: clamp(14px, 2vw, 16px); width: 80px; margin-left: 5px;}
.ex .inner .top .right ul li:nth-child(4) {padding-top: 0px; width: 18%;}


.ex .inner .top .right ul .img {width: 100%;}
.ex .inner .conBox {display: block;}
.ex .inner .conBox .left {padding: 40px 20px; width: 85%; margin: 30px auto;}
.ex .inner .conBox .left .mainSlide h2 {font-size: clamp(17px, 2vw, 19px); margin-bottom: 50px; letter-spacing: 0; padding-left: 5%;}
.ex .inner .conBox .left .mainSlide .bTit {font-size: 23px; letter-spacing: 0; padding-left: 5%;}
.ex .inner .conBox .left .mainSlide .bTxt {font-size: clamp(16px, 2vw, 17px); margin: 20px 0; letter-spacing: 0; padding-left: 5%;}
.ex .inner .conBox .left .mainSlide .img {width: 90%; margin: 0 auto;}
.ex .inner .conBox .left .mainSlide .img img {width: 100%; border-radius: 10px 10px 0 0;}
.ex .inner .conBox .left .mainSlide .slide {padding: 25px 18px; width: 90%; margin: 0 auto;}
.ex .inner .conBox .left .mainSlide .slide .sTit {font-size: 19px; font-weight: 500; margin-bottom: 15px;}
.ex .inner .conBox .left .mainSlide .slide .sTxt {font-size: 15px;}


.ex .inner .conBox .right {padding: 50px 0 90px; width: 85%;}
.ex .inner .conBox .right .rBox .poster {flex: 0 0 calc(47% - 0px);}
.ex .inner .conBox .right .rBox .poster .situ {margin-bottom: 25px;}
.ex .inner .conBox .right .rBox .poster .for {width: 44%;}
.ex .inner .conBox .right .rBox .poster:nth-child(3) .for {width: 45%;}
.ex .inner .conBox .right .rBox .poster:nth-child(4) .for {width: 45%;}
.ex .inner .button {display: block; position: absolute; left: 45%; bottom: 0%;}
}