* {box-sizing: border-box;}
html,body {margin: 0; padding: 0;}
a {text-decoration: none;}
ul, li, p, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; list-style: none;}

/* sub162 tab */
.movie-tabs {display:flex; justify-content:center; gap:32px; margin:4vmin 0 0; padding:0; list-style:none;}
.movie-tab {flex:0 0 130px!important; text-align:center; cursor:pointer; font-weight:700; font-size:22px; color:#bbb; padding:0 12px 8px; transition:color 0.2s, border-color 0.2s; position:relative;}
.movie-tab:after{display:inline-block;content:"";width:100%;height: 20px;position:absolute;bottom: 4px;left:0;z-index:-1;}
.movie-tab.active {color:#222;}
.movie-tab.active:after{background: var(--primary);opacity: 0.2;}

/* list */
.perf-list-section {margin: 3vmin auto 6vmin; max-width:1800px; overflow: hidden;}
.perf-list-inner {width: 100%; margin: 0 auto;}
.perf-list-topbar {display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px;}
.perf-list-notice {display: flex; align-items: center; gap: 10px; background: #fff; padding: 13px 22px; border-radius: 40px; border: 1px solid #e4e4e4; font-size: 16px; color: #777; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);}
.perf-list-notice-icon {display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; background: #c8c8c8; border-radius: 50%; color: #fff; font-weight: 700; font-size: 16px; font-style: italic; line-height: 1;}
.perf-list-more-btn {display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e4e4e4; padding: 10px 18px 10px 24px; border-radius: 40px; text-decoration: none; color: #222; font-size: 16px; font-weight: 500; transition: all 0.3s; white-space: nowrap;}
.perf-list-more-btn-arrow {display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-width: 34px; background: var(--primary); color: #fff; border-radius: 50%; transition: transform 0.3s;}
.perf-list-more-btn:hover {border-color: var(--primary); color: var(--primary);}
.perf-list-more-btn:hover .perf-list-more-btn-arrow {transform: rotate(-45deg);}
.perf-card {display:inline-block; width:100%; background:#fff; border-radius: 20px; overflow: hidden; border: 1px solid #e4e4e4; transition: box-shadow 0.4s, border-color 0.4s; }
.swiper-slide-active .perf-card {box-shadow:0 15px 30px rgba(0, 0, 0, 0.13); border-color: rgba(0, 0, 0, 0.04);}
.perf-card-poster {position: relative; overflow: hidden; flex-shrink: 0; width:100%; aspect-ratio: 1 / 1.4; border-radius: 20px;}
.perf-card-poster img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.perf-card:hover .perf-card-poster img {transform: scale(1.04);}
.perf-card-body {padding:2.5vmin}
.perf-card-title {font-size:22px; font-weight: 700; color: #222; margin: 0 0 16px; line-height: 1.45; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.perf-card-info {padding: 0; margin: 0 0 20px;}
.perf-card-info-row {display:flex; align-items: center; font-size: 16px; color: #777; line-height: 1.5;}
.perf-card-info-label {font-weight: 600; color: #050202; min-width: 34px; flex-shrink: 0;}
.perf-card-info-value {display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100% - 40px); color: #777;}
.perf-card-detail-btn {display:inline-block;width:100%; text-align: center; padding: 10px 28px; border: 1px solid #e4e4e4; border-radius: 21px; text-decoration: none; color: #222; font-size: 16px; transition: all 0.3s;}
.perf-card-detail-btn:hover {background: #003766; color: #fff; border-color: #003766;}
.perf-card-btns {display: flex;}
.perf-card-btns li {flex: 1;}
.perf-card-btns li:nth-child(2) .perf-card-detail-btn {color: #2093FF; border-color: #2093FF;}
.perf-card-btns li:nth-child(2) .perf-card-detail-btn:hover{background:#2093FF; color:#fff;} 
[class*="perfSwiper"] {padding: 30px 0 90px 40px!important; overflow: visible !important;}
[class*="perfSwiper"] .swiper-slide {transform: scale(1); height: auto !important;}
[class*="perfSwiper"].swiper-animated .swiper-slide {transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.45s ease;}
[class*="perfSwiper"] .swiper-slide-active {transform: scale(1.1); opacity: 1; z-index: 20;}
[class*="perfSwiper"] .swiper-button-prev, .perfSwiper .swiper-button-next {width: 52px; height: 52px; background: #fff; border: 1px solid #e4e4e4; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: all 0.3s; top: calc(50% - 30px);}
[class*="perfSwiper"] .swiper-button-prev {left: 24px;}
[class*="perfSwiper"] .swiper-button-next {right: 24px;}
[class*="perfSwiper"] .swiper-button-next:after,
[class*="perfSwiper"] .swiper-button-prev:after {display:inline-block; content:""; width:10px; height:10px; border:1.5px solid #222; border-color:transparent transparent #222 #222;}
[class*="perfSwiper"] .swiper-button-next:after{transform:rotate(225deg) translate(3px, -3px);}
[class*="perfSwiper"] .swiper-button-prev:after {transform:rotate(45deg)  translate(3px, -3px);}
[class*="perfSwiper"] .swiper-button-prev:hover, 
[class*="perfSwiper"] .swiper-button-next:hover {border-color: var(--primary); box-shadow: 0 6px 20px rgba(28, 79, 216, 0.15);}
[class*="perfSwiper"] .swiper-button-prev:hover::after, 
[class*="perfSwiper"] .swiper-button-next:hover::after {border-color:transparent transparent  var(--primary) var(--primary);}
[class*="perfSwiper"] .swiper-pagination.swiper-pagination-progressbar {top: auto !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%); width:60%!important; height: 3px !important; background: #e0e0e0; border-radius: 2px; overflow: hidden;}
[class*="perfSwiper"] .swiper-pagination-progressbar-fill {background: var(--primary); border-radius: 2px;}
.swiper-navigation-icon{display:none;}

@media (max-width: 768px) {
    .perf-list-topbar {flex-direction: column; align-items: flex-start; gap:10px; padding:0 2vmin; margin-bottom:3vmin; margin-top:3vmin;} 
    .perf-list-more-btn{width:100%; justify-content:space-between}
    [class*="perfSwiper"] .swiper-slide {transform: scale(0.9); opacity: 0.65;} 
    [class*="perfSwiper"] .swiper-slide-active {transform: scale(1.04); opacity: 1;} 
    .perf-card-title {font-size: 16px;}
}

.letterzone{background: #f4f4f4;border:1px solid #dddddd;display: flex;gap: 25px;align-items:center; margin:4vmin 0 6vmin;}
.letter-form-wrap{padding:6vmin 3vmin 5vmin;}
.letter-con{flex:1;}
.lettit{text-align:center; }
.lettit1{margin-top:10px; padding:1.2rem 2rem; background:#ebebeb;}
.lettit11{margin: 10px 0; font-size:16px; line-height:1.5;  }
.lettit11 h3{font-size:18px;}
.lettit11 p{opacity:0.8;}
.lettit h2{line-height:1.2;font-size:clamp(20px, 3vw, 32px); color:#4274d3; font-family:'Paperlogy'; margin-bottom:1vmin; word-break:keep-all;}
.lettit p{font-size:18px;}
.lettc{margin:3vmin 0 0;}
.lettc-form{width:90%; margin:0 auto;}
.lename, .lemail, .leadress, .lebtn{margin-top:1vmin;}
.lettc .ck .ck-lb{display: flex; align-items:center; gap:1%; justify-content:center;}
.lettc .ck label{ font-size: 16px; letter-spacing: 0}
.lettc > div input:not(#id-save){width:100%;}
.lettc input{ height: 55px; padding: 10px; box-sizing: border-box; border:none}
.lettc input::placeholder{font-size:16px;font-family: 'Pretendard-Regular'; color:#ccc;}
.lebtn {width:100%; height: 55px;background: #4274d3; color:#fff;font-weight: 600;font-size: 18px;padding: 0 20px;border-radius:30px;}
.letter-img img{width:100%; height:100%; object-fit:cover;}
@media (max-width:1400px){
	.letterzone{align-items:stretch;}
	.lettc-form{width:100%;}
	.lettit p,	.lettit11 p{font-size:14px;}
}
@media (max-width:780px){
	.letter-form-wrap{padding:6vmin 4vmin 5vmin;}
	.letterzone{flex-flow:column wrap;gap:0;}
	.letter-img{max-height:300px;}
	.lettc input, .lebtn{height:40px;} 
	.lettit p, 
	.lettc .ck label, 
	.lettc input::placeholder,
	.lebtn{font-size:14px;}
	
}
