/* 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;}


/* 왼쪽 큰 아티스트 정보 */
.art1 {width: 100%; margin: 0px auto; height: 100%;}
.art2 {display: none;}
.art1 .inner {width: 85%; margin: 0px auto; position: relative; min-width: 0;}
.art1 .inner .top {display: flex; justify-content: space-between; padding: 25px; color: #fff; background: #000;}
.art1 .inner .top .left h1 {font-size: clamp(20px, 3vw, 34px); font-weight: 500; margin-bottom: 15px; flex-wrap: nowrap;}
.art1 .inner .top .left p {font-size: clamp(14px, 2vw, 18px);}
.art1 .inner .top .right {padding: 20px 10px;}
.art1 .inner .top .right ul {display: flex; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; gap: 10px; width: 100%; }
.art1 .inner .top .right ul li {flex: 0 1 auto; font-size: clamp(19px, 2vw, 24px); padding: 0 0.3vw; white-space: nowrap; text-align: center;}


/* 아래 박스들 */
.art1 .inner .artist { margin: clamp(20px, 3vw, 35px) 0 0; width: clamp(230px, 25vw, 270px); border-radius: 8px; box-shadow: 0 0px 7px 2.5px rgba(0,0,0,0); cursor: pointer; display: flex; align-items: center; padding: clamp(10px, 2vw, 18px); background: #fafafa; transition: box-shadow 0.3s; min-width: 0; box-sizing: border-box; overflow: hidden;}
.art1 .inner .artist:hover {box-shadow: 0 0px 20px 2px rgba(0,0,0,0.12)}
.art1 .inner .artist a {display: flex; align-items: center; color: inherit; width: 100%; min-width: 0; }
.art1 .inner .artist .img {flex: 0 0 auto; width: clamp(27px, 4vw, 50px); height: clamp(27px, 4vw, 50px); margin-right: clamp(8px, 1.5vw, 14px);}
.art1 .inner .artist .img img {width: 100%; height: 100%; object-fit: cover;}
.art1 .inner .artist .textBox {min-width: 0; margin-right: clamp(3px, 2vw, 5px);}
.art1 .inner .artist .textBox .tit {font-weight: 600; margin-bottom: 5px; font-size: clamp(12px, 1.5vw, 15px); color: #555; white-space: nowrap; }
.art1 .inner .artist .textBox .text {font-weight: 500; letter-spacing: -0.7px; font-size: clamp(15px, 2vw, 20px); white-space: nowrap;}
.art1 .inner .artist .rightImg {flex: 0 0 clamp(5px, 2vw, 10px); margin-left: clamp(10px, 2vw, 20px); opacity: 0.6;}
.art1 .inner .artist .rightImg img {width: 100%; height: auto;}


/* 슬라이드 */
.art1 .inner .slider {width: 100%; position: relative; height: auto; overflow: hidden; margin: 0 auto;} 
.art1 .inner .slider .slides {display: flex; gap: 10px; transition: transform 0.8s ease-in-out; align-items: flex-start; box-sizing: border-box; width: 100%; margin-bottom: 80px;}
.art1 .inner .slider .slides .poster {width: 14vw; height: auto; flex-shrink: 0; align-items: flex-start; transition: transform 0.5s ease; transform: scale(0.9); transform-origin: center center; box-sizing: border-box; cursor: pointer;}
.art1 .inner .slider .slides .poster .img-wrapper {width: 100%; aspect-ratio: 1 / 1; transition: transform 0.5s ease; transform-origin: center center;} 
.art1 .inner .slider .slides .poster.big {width: 25vw; height: auto; transform: scale(1); opacity: 1; z-index: 2; margin-top: 21px; margin-right: 15px;}
.art1 .inner .slider .slides .poster img {width: 100%; height: 100%; object-fit: cover; user-select: none;}
.art1 .inner .slider .slides .poster p {margin: 20px 0 10px; font-size: 22px; font-weight: bold;}
.art1 .inner .slider .slides .poster span {color: #444; font-weight: 400; line-height: 1.6; font-size: 17px;}

/* 버튼 */
.art1 .inner .direction {position: absolute; bottom: 10%; right: 1.5%; display: flex; gap: 20px;}
.art1 .inner .direction button {border: none; width: 100%; cursor: pointer; background: #fff;}
.art1 .inner .direction button img {width: 100%;}
.arrow.left {opacity: 30%;}

section.art1:nth-of-type(1) .top .right ul li:nth-child(1) {font-weight: bold;}
section.art1:nth-of-type(2) .top .right ul li:nth-child(3) {font-weight: bold;}
section.art1:nth-of-type(3) .top .right ul li:nth-child(1) {font-weight: bold;}

.content {width: 85%; margin: 0 auto 170px; height: 100%;}
.content .top1 {margin-bottom: 90px; width: 100%;}
.content .top1 ul, 
.content .bottom ul {display: flex; justify-content: space-between; gap: 70px;}
.content > div.bottom:nth-of-type(2) {margin-bottom: 90px;}
.content .top1 ul li a, 
.content .bottom ul li a {width: 100%;}
.content .top1 ul li a .img, 
.content .bottom ul li a .img {margin-bottom: 20px;}
.content .top1 ul li a .img img, 
.content .bottom ul li a .img img {width: 100%;}
.content .top1 ul li a .text, 
.content .bottom ul li a .text {font-size: 18px; font-weight: 600; margin: 10px 0 7px; color: #444;}
.content .top1 ul li a span, 
.content .bottom ul li a span {line-height: 1.4; font-size: 16px; color: #444;} 
.content .number {display: flex; justify-content: space-between; width: 12%; padding-top: 130px; margin: 0 auto;}
.content .number li {color: #333;}
.content .number li:nth-child(1) {font-weight: bold; font-size: 17px;}


/* 반응형 */
@media (max-width: 1690px) {
.art1 {width: 100%; margin: 0px auto;}
}
@media (max-width: 1024px) {
.search-wrap .inner {width: 85%; margin: 50px auto 120px;}
.art1 {display: none;}
.art2 {display: block; width: 100%; margin: 0px auto; height: 100%;}
.art2 .inner {width: 85%; position: relative; min-width: 0; overflow: visible; margin: 0 auto;}
.art1 .inner .slider {width: 100%;} 
.art2 .inner .top {display: flex; justify-content: space-between; padding: 25px; background: #000; color: #fff;}
.art2 .inner .top .left h1 {font-size: clamp(20px, 3vw, 34px); font-weight: 500; margin-bottom: 15px; flex-wrap: nowrap;}
.art2 .inner .top .left p {font-size: clamp(14px, 2vw, 18px);}
    
.art2 .inner .top .right {padding: 20px 10px;}
.art2 .inner .top .right ul {display: flex; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; gap: 10px; width: 100%; }
.art2 .inner .top .right ul li {flex: 0 1 auto; font-size: clamp(19px, 2vw, 24px); padding: 0 0.3vw; white-space: nowrap; text-align: center;}
 /* 아래 박스들 */
.art2 .inner .artist { margin: clamp(20px, 3vw, 35px) 0 0; width: clamp(220px, 25vw, 230px); border-radius: 8px; box-shadow: 0 0px 7px 2.5px rgba(0,0,0,0); cursor: pointer; display: flex; align-items: center; padding: clamp(10px, 2vw, 18px); background: #fcfcfc; transition: box-shadow 0.3s; min-width: 0; box-sizing: border-box; overflow: hidden;}
.art2 .inner .artist:hover {box-shadow: 0 0px 20px 2px rgba(0,0,0,0.12)}
.art2 .inner .artist a {display: flex; align-items: center; color: inherit; width: 100%; min-width: 0; }
.art2 .inner .artist .img {flex: 0 0 auto; width: clamp(27px, 4vw, 50px); height: clamp(27px, 4vw, 50px); margin-right: clamp(8px, 1.5vw, 14px);}
.art2 .inner .artist .img img {width: 100%; height: 100%; object-fit: cover;}
.img-wrapper {overflow: hidden; display: block;}
.slider .poster .img-wrapper img {transition: transform 0.3s ease;}
.slider .poster .img-wrapper:hover img {transform: scale(1.1);}
.art2 .inner .artist .textBox {min-width: 0; margin-right: clamp(3px, 2vw, 5px);}
.art2 .inner .artist .textBox .tit {font-weight: 600; margin-bottom: 5px; font-size: clamp(12px, 1.5vw, 15px); color: #555; white-space: nowrap; }
.art2 .inner .artist .textBox .text {font-weight: 500; letter-spacing: -0.7px; font-size: clamp(15px, 2vw, 20px); white-space: nowrap;}
.art2 .inner .artist .rightImg {flex: 0 0 clamp(5px, 2vw, 10px); margin-left: clamp(10px, 2vw, 20px); opacity: 0.6;}
.art2 .inner .artist .rightImg img {width: 100%; height: auto;}
.art2 .inner .slider {width: 90%; position: relative; height: auto; overflow: hidden; margin: 40px auto 0; } 
.art2 .inner .slider .topPicture {display: flex; justify-content: space-between;}
.art2 .inner .slider .botPicture {display: flex; justify-content: space-between; margin: -200px 0 0 0;}
.art2 .inner .slider .slides .topPicture .poster {width: 45%;}
.art2 .inner .slider .slides .botPicture .poster {width: 45%;}
.art2 .inner .slider .slides .topPicture .poster:nth-child(2) {margin: 150px 0;}
.art2 .inner .slider .slides .botPicture .poster:nth-child(2) {margin: 140px 0 50px;}
.art2 .inner .slider .slides .topPicture .poster .img-wrapper {width: 100%; aspect-ratio: 1 / 1; transition: transform 0.5s ease; transform-origin: center center;} 
.art2 .inner .slider .slides .botPicture .poster .img-wrapper {width: 100%; aspect-ratio: 1 / 1; transition: transform 0.5s ease; transform-origin: center center;}

.art2 .inner .slider .slides .poster img {width: 100%; height: 100%; object-fit: cover; user-select: none;}
.art2 .inner .slider .slides .poster p {margin: 12px 0 5px; font-size: clamp(18px, 2vw, 20px); font-weight: bold;}
.art2 .inner .slider .slides .poster span {color: #444; font-weight: 400; line-height: 1.6; font-size: clamp(14px, 2vw, 16px);}

 /* 버튼 */
.art2 .inner .direction {display: none;}
.art2:nth-of-type(2) .top .right ul li:nth-child(1) {font-weight: bold;}

.content {width: 85%; margin: 0 auto 100px;}
.content .top1 {margin: 70px 0 90px; width: 100%;}
.content .top1 ul, 
.content .bottom ul {flex: wrap; gap: 30px;}
.content .number {width: 17%;}
}


@media (max-width: 768px) {
.art2:nth-of-type(1) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2 .inner .top {display: block; padding: 25px; background: #000; color: #fff;}
.art2 .inner .top .left h1 {font-size: clamp(25px, 3vw, 35px); font-weight: 500; margin-bottom: 15px; flex-wrap: nowrap;}
.art2 .inner .top .left p {font-size: clamp(17px, 2vw, 21px);}
.art2 .inner .artist {width: 180px; margin-left: 30px;}

.art2 .inner .top .right {padding: 25px 0 0px;}
.art2 .inner .top .right ul {display: flex; justify-content: flex-start; flex-wrap: nowrap; white-space: nowrap; gap: 0px; width: 100%;}
.art2 .inner .top .right ul li {flex: 0 1 auto; font-size: clamp(18px, 2vw, 22px); margin-right: 10px; white-space: nowrap; text-align: center;}
.gallery-section .img .overlay-text {font-size: 18px;}

.content {width: 85%; margin: 0 auto 100px;}
.content .top1 {margin: 50px 0 90px; width: 100%;}
.content .top1 ul, .content .bottom ul {flex-wrap: wrap; gap: 30px;}

.content .top1 ul li,  .content .bottom ul li {flex: 1 1 calc(28% - 20px); max-width: calc(28% - 20px);}
.content .top1 ul li a .img, .content .bottom ul li a .img { margin-bottom: 15px;}
.content .top1 ul li a .text, .content .bottom ul li a .text {font-size: 16px; font-weight: 600; margin: 8px 0 5px;}
.content .top1 ul li a span, .content .bottom ul li a span {line-height: 1.4; font-size: 15px;}
.content .number {width: 23%;}}


@media (max-width: 480px) {
.art2:nth-of-type(1) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2 .inner .artist {width: 170px; margin-left: 20px;}
.art1 .inner .slider .slides .poster p {font-size: 18px}
.art2 .inner .slider .botPicture {margin: -220px 0 0 0;}


.content {width: 85%; margin: 0 auto 70px;}
.content .top1 {margin: 50px 0 0px; width: 100%; overflow: hidden;}
.content .top1 .top-slider {gap: 0; flex-wrap: nowrap; display: flex; width: calc(100% * 5); transition: transform 0.5s ease-in-out; flex-direction: row;}
.content .top-slider li {width: 100%; flex: 0 0 100%; box-sizing: border-box;}
.content .top1 .top-slider li a {width: 100%; display: block; overflow: hidden;}

.content .top1 .top-slider li a .text {font-size: 17px; font-weight: 600; margin: 8px 0 10px;}
.content .top1 .top-slider li a span {line-height: 1.5; font-size: 14.5px;}
.content .number {width: 60%; padding-top: 100px;}
.content .bottom {display: none;}
}