@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css"); * { 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; } 



.visual-wrapper, .scroll-wrapper { width: 100%; padding: 0; margin: 0; } 
.visual { display: flex; flex-wrap: wrap; gap: 40px; padding: 150px 0; width: 100%; } 
.visual .text p { font-weight:300; margin-left: 150px; } 
.visual .text p:nth-child(1) { font-size: 28px; margin-bottom: 30px; } 
.visual .text p:nth-child(2) { font-size: 24px; margin-bottom: 30px; } 
.visual .text p:nth-child(3) { font-size: 18px; line-height: 1.8; } 
/* .visual .image { flex: 1; background: #ccc; height: 600px; background-image: url(../img/main.png); } */
.visual .text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; } 
.visual { display: flex; width: 100%; height: 100vh; /* 전체 화면 높이 */
 min-height: 700px; } 

.visual .image { flex: 1; background-image: url('/img/exhibition_list/main.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } 

.visual .text { flex: 1; background: white; padding: 80px; display: flex; flex-direction: column; justify-content: center; } 

.section { margin: 100px 0 100px; text-align: center; } 
.section-title { font-size: 40px; font-weight: normal; margin-bottom: 20px; } 

.about-description { font-size: 20px; max-width: 780px; margin: 0 auto; text-align: left; } 
.about-description p { margin-bottom: 30px; line-height: 1.5 } 

.horizontal-scroll-wrapper { overflow-x: auto; overflow-y: hidden; display: flex; gap: 20px; padding: 20px 10px; cursor: grab; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; white-space: nowrap; /* ✨ 이 두 줄이 빠져 있었음 */
-ms-overflow-style: none; scrollbar-width: none; } 
.horizontal-scroll-wrapper::-webkit-scrollbar { display: none; } 

.card { flex: 0 0 auto; width: 348px; height: 435px; background: #ccc; display: inline-block; } 
.card2 { flex: 0 0 auto; width: 348px; height: 300px; background: #ccc; display: inline-block; } 
.card img , .card2 img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; user-drag: none; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; pointer-events: none; /* 드래그 방지용 */ } 

/* textBox */
/* 운영 프로그램 카드와 텍스트박스 정렬 */
.program-card { display: flex; flex-direction: column; /*width: 348px;*/ flex-shrink: 0; /*margin-right: 20px;*/ } 
.program-card img { width: 100%; display: block; } 
/* 이미지 아래 텍스트박스 */
.program-card .textBox { margin-top: 12px; background-color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } 

/* 기본 상태에서는 줄임표 제거 */
/* .about-description {
  font-size: 20px;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  overflow: visible;
  display: block;
} */

/* 줄임표는 collapsed 상태에서만 */
/* .about-description.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
} */

/* 내부 paragraph */
.about-description p {
  margin-bottom: 30px;
  line-height: 1.5;
}

/* 더보기 버튼 기본 숨김 */
.more-btn {
  display: none;
  margin-top: 10px;
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  padding-left:20px;
}

/* ABOUT */
.ABOUT { text-align: left; display: flex; gap: 40px; }
.ABOUT_SECTION { flex: 0 0 560px; }
.subname p { font-size: 20px; }



/* 반응형 */
@media (max-width: 1024px) { 
 
.visual { flex-direction: column; height: auto; } 
.visual .image { flex: none; /* ✅ 또는 flex: 0 0 auto; */ height: 50vh; } 
.visual .text { padding: 60px 0px; } 
.ABOUT {display: block;}
.ABOUT_SECTION {margin: 0 100px 50px;}
}

@media (max-width: 1246px){
  .visual .image { height: 60vh; } 
  .visual .text { padding: 40px 30px; } 
  .card { width: 240px; height: 240px; } 
  .visual .text p {margin-left: 10px;}
  .about-description {margin-left: 20px;}
  .ABOUT_SECTION {margin: 0 20px 50px;}
 }

@media (max-width: 768px){
 .visual .image { height: 40vh; } 
 .visual .text { padding: 40px 30px; } 
 .card { width: 240px; height: 240px; } 
 .visual .text p {margin-left: 10px;}
 .about-description {margin-left: 20px;}


 .card {
  width: 230px;
  height: 300px;
}
.card2 {
  width: 350px;
  height: 300px;
}
}

@media screen and (max-width: 500px){
  .visual .text p:nth-child(1) {font-size: 25px;}
  .visual .text p:nth-child(2) {font-size: 18px;}
  .visual .text p:nth-child(3) {font-size: 15px;}
  .section-title {font-size: 25px;}
  .subname p {font-size:20px;}
 .visual .image { height: 330px; } 
 .visual .text { padding: 30px 20px; } 
 .visual .text h2 { font-size: 18px; } 
 .visual .text h3 { font-size: 14px; } 
 .visual .text p { font-size: 13px; } 

 .about-description {
  font-size: 15px;
}

.more-btn {
  display: block;
}
 
.about-description.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.horizontal-scroll-wrapper {
  gap: 12px;
  padding: 20px 5px;
}

.card2 {
  width: 100%;
}
}