@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* 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 Variable", sans-serif;}




/* seach-Wrap */
.detail_filter_wrap {display: none; margin-top: 30px;}
.search-wrap .inner {width: 85%; margin: 50px auto 150px; font-family: 'Pretendard', sans-serif; padding-top: 60px;}
.search-wrap .inner h2 {font-size: 24px; font-weight: 700; margin-bottom: 25px;}
.search_bar {display: flex; gap: 8px; margin-bottom: 40px;}
.search_input {width: 500px; padding: 10px 15px; font-size: 16px; border: none; border-radius: 4px; background-color: #eee; border-radius: 30px; color: #979494;}

.search_btn, .detail_btn {padding: 10px 30px; border-radius: 30px; font-size: 16px; cursor: pointer; border: none;}
.search_btn {background: #000; color: #fff; margin: 0 3px;}
.detail_btn {background: #666; color: #fff; padding: 10px 40px 10px 30px;}


.filter_section {display: flex; flex-wrap: wrap;}
.filter_section select {appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff;
border: 1px solid #ccc; border-radius: 6px; padding: 10px 90px 10px 20px; font-size: 15px; font-family: 'Pretendard', sans-serif; color: #222; min-width: 150px; height: 46px; background-image: url('../img/collection/icon_arrow.svg'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; transition: border-color 0.3s ease; margin:10px 10px;}
.filter_section select:focus {border-color: #999; outline: none;}
.selected_filter_wrap {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 19px;}
.selected_tags {display: flex; flex-wrap: wrap; gap: 8px;}
.tag {background: #000; color: #fff; padding: 4px 12px; border-radius: 9px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px;}
.tag button.remove {background: none; border: none; color: #fff; font-weight: bold; font-size: 14px; cursor: pointer; line-height: 1;}
.count {font-size: 18px; font-weight: 500; margin: 0; white-space: nowrap;}

.btn_area {display: flex; width: 100%; justify-content: right; margin-top: 30px;}
.reset-btn {width: 130px; height: 40px; padding: 6px 14px; border: 1px solid #999; border-radius: 30px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; background: #fff;}
.reset-btn:hover {color: #888;}
.apply_btn {width: 130px; height: 40px; padding: 6px 14px; border: 1px solid #999; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; background: #000; color: #fff; margin-left: 15px;}
.apply_btn:hover {color: #ddd;}
.result_bar {display: flex; justify-content: space-between; align-items: center; padding: 20px 0 20px; margin: 0 0 50px;  border-top: 1px solid #aaa;}
.result_count {font-size: 18px;}
.sort_controls {display: flex; gap: 8px;}
.sort_controls p { border-right: 1px solid #ccc; display: inline-block; padding: 0px 17px;}
.sort_btn, .apply_sort_btn {padding: 4px 12px; font-size: 20px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer;}

#sortFilter {width: auto; padding: 8px 24px 8px 18px; border-radius: 6px; appearance: none; border: none; background-image: url('../img/collection/icon_arrow.svg'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;}
.apply_btn2 {width: 80px; height: 38px; padding: 5px 8px 6px; border: 1px solid #ccc; border-radius: 30px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; background: #000; color: #fff; margin-left: 15px;}
.apply_btn2:hover {color: #ddd;}




.gallery-section {}
.gallery-section .inner {width: 100%; font-family: 'Pretendard', sans-serif;}
.gallery-section .inner .gridContainer {display: flex;}
.gallery-section .inner .gridContainer .left {display: block; margin-right: 8px; position: relative; width: 59%;}
.gallery-section .inner .gridContainer .left .slider {position: relative; overflow: hidden; width: 100%; height: auto;}
.gallery-section .inner .gridContainer .left .slider .slide-track {display: flex; transition: transform 0.5s ease;}
.gallery-section .inner .gridContainer .left .slider .img {width: 100%; flex: 0 0 100%;}
.gallery-section .inner .gridContainer .left .slider .img img {width: 100%;}
.gallery-section .inner .gridContainer .left .slider .text {position: absolute; right: 35px; top: 40px; color: #fff; font-size: 28px;}
.gallery-section .inner .gridContainer .left .slider .prev,
.gallery-section .inner .gridContainer .left .slider .next {width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); background: #f0efef; border: none; color: #191919; cursor: pointer; z-index: 10; font-size: clamp(22px, 2vw, 30px); display: flex; justify-content: center; align-items: center; padding: 0 0 5px 2px;}
.gallery-section .inner .gridContainer .left .slider .prev {left: 20px; padding-right: 3px;}
.gallery-section .inner .gridContainer .left .slider .next {right: 20px;}
.slider .dots {display: flex; justify-content: center; gap: 10px; margin-top: 20px; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); z-index: 5;}
.slider .dot { width: 12px; height: 12px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s;}
.slider .dot.active {background: #fff; border: 2px solid #000;}


.gallery-section .inner .gridContainer .left .bottomLeft {display: flex; margin-top: 9px;}
.gallery-section .inner .gridContainer .left .bottomLeft .img {width: 100%;}
.gallery-section .inner .gridContainer .left .bottomLeft .img:nth-child(1) {margin-right: 9px;}
.gallery-section .inner .gridContainer .left .bottomLeft .img img {width: 100%;}
.gallery-section .inner .gridContainer .right {width: 87.5%; display: flex; flex-direction: column; gap: 10px; height: 100%;}
.gallery-section .inner .gridContainer .right .artGrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%;}
.gallery-section .inner .gridContainer .right .artGrid .img {width: 100%;}
.gallery-section .inner .gridContainer .right .artGrid .img img {width: 100%; display: block;}
.gallery-section .inner .gridContainer .right .bottomRight {width: 100%; background-color: #111; padding: 50px; color: #fff; height: auto; display: flex; justify-content: space-between; margin-left: 1px; box-sizing: border-box; height:321px;}
.gallery-section .inner .gridContainer .right .bottomRight p {font-size: 19px; font-weight: 300; line-height: 1.5;}
.gallery-section .img {position: relative; overflow: hidden;}
.gallery-section .img .overlay-text {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); color: white; font-size: 24px; font-weight: 500; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease;}
.gallery-section .img:hover .overlay-text {opacity: 0; visibility: hidden;}


/* 반응형 */
@media (max-width: 1690px) {
.search-wrap .inner {width: 85%; margin: 50px auto 0px;}
.gallery-section .inner .gridContainer .right .bottomRight {width: 100%; background-color: #111; padding: 40px 20px; color: #fff; margin-left: 1px; height: clamp(200px, 20vw, 274px); display: block;}
.gallery-section .inner .gridContainer .right .bottomRight p {font-size: clamp(13px, 2vw, 18px); font-weight: 300; line-height: 1.5; display: block; width: 100%;}
.gallery-section .inner .gridContainer {display: flex;}
.gallery-section .inner .gridContainer .left {flex: 1.4; margin-right: 8px;}
.gallery-section .inner .gridContainer .right {flex: 2.09; display: flex; flex-direction: column; gap: 10px;}}

@media (max-width: 1024px) {
.search-wrap .inner {width: 85%; margin: 50px auto 50px;}
.search_bar {display: flex; gap: 8px; margin-bottom: 40px;}
.search_input {width: 350px; padding: 10px 15px; font-size: 16px; border-radius: 30px; color: #979494;}
.search_btn, .detail_btn {padding: 10px 25px; border-radius: 30px; font-size: 15px; cursor: pointer; border: none;}
.search_btn {background: #000; color: #fff; margin: 0 3px;}
.detail_btn {background: #666; color: #fff; padding: 10px 30px 10px 25px;}
.filter_section select {appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff;
border: 1px solid #ccc; border-radius: 6px; padding: 8px 80px 8px 15px; font-size: 14px; min-width: 120px; height: 40px; background-image: url('../img/collection/icon_arrow.svg'); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; transition: border-color 0.3s ease; margin:10px 10px;}
.gallery-section .inner {width: 100% !important;}
.gallery-section .inner .gridContainer .left {flex: 9; margin-right: 8px;}
.gallery-section .inner .gridContainer .right {flex: 13.5; display: flex; flex-direction: column; gap: 10px;}
.gallery-section .inner .gridContainer .left .slider .text {position: absolute; right: 12px; top: 20px; color: #fff; font-size: clamp(16px, 3vw, 19px);}
.gallery-section .img .overlay-text {font-size: clamp(15px, 3vw, 18px);}
.gallery-section .inner .gridContainer .right .artGrid {gap: 8px;}
.gallery-section .inner .gridContainer .right {display: flex; flex-direction: column; gap: 8px;}
.gallery-section .inner .gridContainer .right .bottomRight {padding: 30px 20px; color: #fff; margin-left: 0px; height: 165px; width: 100%;} 
.gallery-section .inner .gridContainer .right .bottomRight p {font-size: clamp(12px, 3vw, 14px);}
.gallery-section .inner .gridContainer .left .bottomLeft {margin-top: 8px;}
.gallery-section .inner .gridContainer .left .bottomLeft .img:nth-child(1) {margin-right: 8px;}
.gallery-section .inner .gridContainer .left .slider .prev,
.gallery-section .inner .gridContainer .left .slider .next {padding: 3px 1px 5px 2px;}
.gallery-section .inner .gridContainer .left .slider .prev {left: 20px; padding-right: 3px;}
.gallery-section .inner .gridContainer .left .slider .next {right: 20px;}
}

@media (max-width: 768px) {
.filter_section select {padding: 8px 55px 8px 15px; font-size: 14px; min-width: 100px; height: 35px;}
.gallery-section .inner .gridContainer {display: block;}
.gallery-section .inner .gridContainer .left .bottomLeft {display: flex; margin-top: 9px;}
.gallery-section .inner .gridContainer .left {display: block; margin-bottom: 8px; position: relative;}
.gallery-section .inner .gridContainer .left .slider .text {position: absolute; right: 20px; top: 30px;}
.gallery-section .inner .gridContainer .right {width: 98.5%;}
.search_bar {display: flex; gap: 8px; margin-bottom: 30px;}
.search_input {width: 300px; padding: 10px 15px; font-size: 16px; border: none; border-radius: 40px; background-color: #eee; border-radius: 30px; color: #979494;}
.search_btn, .detail_btn {padding: 9px 22px; border-radius: 50px; font-size: 15px; cursor: pointer; border: none;}
.search_btn {background: #000; color: #fff; margin: 0 3px;}
.detail_btn {background: #666; color: #fff; padding: 8px 30px 9px 20px;}
}

@media (max-width: 480px) {
.filter_section select {padding: 8px 50px 8px 15px; font-size: 13px; min-width: 100px; height: 34px;}
.search_bar {display: block; gap: 8px; margin-bottom: 50px;}
.search_input {width: 300px; padding: 10px 15px; font-size: 16px; border: none; border-radius: 40px; background-color: #eee; color: #979494; display: block; margin-bottom: 20px;}
.search_btn, .detail_btn {padding: 7px 21px; border-radius: 30px; font-size: 15px; cursor: pointer; border: none;}
.search_btn {background: #000; color: #fff; margin: 0 3px;}
.detail_btn {background: #666; color: #fff; padding: 7px 25px 8px 20px;}
.result_bar {display: block;}
.result_count {margin-bottom: 10px;}
.sort_controls p {padding: 0 15px 0 0;}
.apply_btn2 {width: 80px; height: 30px; padding: 4px 8px 6px;}

.gallery-section .inner .gridContainer .left {width: 100%;}
.gallery-section .inner .gridContainer .left .bottomLeft {display: flex;}
.filter_section {display: block; width: 100%;}
.gallery-section .inner .gridContainer .right {width: 98%; display: flex; flex-direction: column; gap: 10px; height: 100%;}
.gallery-section .inner .gridContainer .right .artGrid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%;}
.gallery-section .inner .gridContainer .right .bottomRight {width: 100%; height: 100%; background-color: #111; padding: 20px 20px;}
.gallery-section .inner .gridContainer .right .bottomRight p {font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.gallery-section .inner .gridContainer .right .bottomRight ul {overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}}




/* 왼쪽 큰 아티스트 정보 */
.art1 {width: 100%; margin: 0px auto; height: 95vh;}
.art2 {display: none;}
.art1 .inner {width: 100%; position: relative; min-width: 0; overflow: visible;}
.art1 .inner .top {display: flex; justify-content: space-between; padding: 25px; background: #000; color: #fff;}
.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 .topBox {display: flex; justify-content: space-between;}
.art1 .inner .topBox .moreBtn {width: clamp(40px, 25vw, 80px); margin: clamp(20px, 3vw, 50px) 0 0; padding: 20px 10px 0 0;}
.art1 .inner .topBox .moreBtn a {display: flex; justify-content: space-between;}

.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: #fcfcfc; transition: box-shadow 0.3s; min-width: 0; box-sizing: border-box; overflow: hidden; opacity: 0;}
.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 .artist .moreBtn {display: flex; width: 40%;}

/* 슬라이드 */
.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%;}
.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: 6px; right: 3%; 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(3) .top .right ul li:nth-child(1) {font-weight: bold;}
section.art1:nth-of-type(5) .top .right ul li:nth-child(1) {font-weight: bold;}

/* 반응형 */
@media (max-width: 1690px) {
.art1 {width: 100%; margin: 0px auto; height: 95vh;}
.art2:nth-of-type(4) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(6) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(8) .top .right ul li:nth-child(1) {font-weight: bold;}
.art1 .inner .direction {display: none;}
}

@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: 100%; position: relative; min-width: 0; overflow: visible;}
.art2 .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 .topBox {display: flex; justify-content: space-between; margin-top: 10px;}
.art2 .inner .topBox .moreBtn {width: clamp(40px, 25vw, 80px); margin: clamp(20px, 3vw, 50px) 0 0; padding: 20px 10px 0 0;}
.art2 .inner .topBox .moreBtn a {display: flex; justify-content: space-between;}
.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(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: #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 .inner .direction button {border: none; width: 100px; height: auto; cursor: pointer; color: #000; background: #fff;}
.art2 .inner .direction button img {width: 100px;}
.art2:nth-of-type(2) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(4) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(6) .top .right ul li:nth-child(1) {font-weight: bold;}
}

@media (max-width: 768px) {
.art2:nth-of-type(1) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(3) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(5) .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 .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;}
.art2 .inner .direction {display: none;}
}

@media (max-width: 480px) {
.art2:nth-of-type(1) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(3) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2:nth-of-type(5) .top .right ul li:nth-child(1) {font-weight: bold;}
.art2 .inner .slider .slides .poster p {font-size: 18px}
.art2 .inner .slider .botPicture {margin: -220px 0 0 0;}
.art2 .inner .direction {display: none;}
}