@charset "utf-8";
.section .inner-flex { display: flex; justify-content: space-between; }
.section .inner-flex .sec-tit { flex-shrink: 0; width: 400px; }
.section .inner-flex .sec-con { flex-grow: 1; max-width: 1300px; }
.section .bg { position: absolute; bottom: 0; z-index: 0; }
@media only screen and (max-width: 1300px) {
    .section .inner-flex .sec-tit { width: 250px; }
    .section .txt-65 { font-size: 5rem; }
}
@media only screen and (max-width: 1023px) {
    .section .txt-65 { margin-bottom: 3rem; }
    .section .inner-flex { flex-direction: column; gap: 3rem; }

}


/****************** 메인비주얼 ******************/
.section1 { position: relative; height: 100vh; }
.section1 .main-swiper { position: relative; width: 100vw; height: 100vh; }
.section1 .main-swiper .swiper-wrapper { background-color: #000; }
.section1 .main-swiper .swiper-slide { display: flex; align-items: center; }
.section1 .main-swiper .swiper-slide .img-wrap { position: relative; width: 100%; height: 100%; background-color: #000; }
/*.section1 .main-swiper .swiper-slide .img-wrap::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 100%); }*/
/*.section1 .main-swiper .swiper-slide .img-wrap::after { content:""; position: absolute; top:  0; left: 0; width: 100%; height: 100%; background: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%); }*/
.section1 .main-swiper .swiper-slide .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.section1 .main-swiper .swiper-pagination-st1 { position: absolute; left: 50%; transform: translateX(-50%); bottom: 30vh; z-index: 1; }
.section1 .txt-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 100%; text-align: center; }
.section1 .txt-wrap .inner-padding { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.section1 .txt-wrap .lg-tit strong { display: block; line-height: 1.4; font-size: clamp(50px, 4.6875vw, 90px); -webkit-text-stroke: 2px #fff; -webkit-text-fill-color: transparent; }
@media only screen and (max-width: 1023px) {
    .section1 .txt-wrap .lg-tit strong {-webkit-text-stroke: 1px #fff;}
}
@media only screen and (max-width: 767px) {
    .section1 { height: auto; }
    .section1 .main-swiper { height: auto; }
    .section1 .main-swiper .swiper-slide .img-wrap { height: 0; padding-bottom: 140%; }
    .section1 .main-swiper .swiper-slide .img-wrap img.pc { display: none; }
    .section1 .main-swiper .swiper-slide .img-wrap img.mo { display: block; }
    .section1 .main-swiper .swiper-pagination-st1 { bottom: 20px; }
    .section1 .txt-wrap .lg-tit strong { font-weight: 900; font-size: 40px;}
    .section1 .txt-wrap p { padding: 8px 12px; font-size: 16px; }

}
@media only screen and (max-width: 450px) {
    .section1 .txt-wrap .lg-tit strong { font-size: 30px;}

}

/****************** 공연랭킹 ******************/
.section2 { position: relative; padding: 10rem 0; background: linear-gradient(to bottom, #000000, #1F120F); }
.section2 .accord-list { flex-grow: 1; max-width: 1300px; display: flex; gap: 2rem; }
.section2 .accord-list .item { position: relative; display: block; width: calc(33.3% - 1.5rem); height: 500px; overflow: hidden; transition: width .3s ease; }
.section2 .accord-list .item .img-wrap { position: relative; width: 100%; height: 100%; background-color: #000; }
.section2 .accord-list .item .img-wrap::before { content:""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, #00000000 0%, #00000000 50%, #000 100%); z-index: 1; pointer-events: none; }
.section2 .accord-list .item .img-wrap .img { position: relative; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: opacity .3s ease; z-index: 0; }
.section2 .accord-list .item .inner { position: absolute; top: 0; left: 0; display: flex; align-items: flex-end; gap: 2rem; width: 100%; height: 100%; padding: 2rem; color: #fff; z-index: 2; }
.section2 .accord-list .item .inner .num { margin-bottom: -4rem; font-family: var(--head-font); font-size: 12rem; }
.section2 .accord-list .item.on { width: 35%; }
@media only screen and (max-width: 1300px) {
    .section2 .accord-list { gap: 1.5rem; }
    .section2 .accord-list .item.on { width: calc(100% - 155px * 2 - 1.5rem * 2); }
    .section2 .accord-list .item .inner .num { margin-bottom: -5rem; font-size: 11rem; }
    .section2 .accord-list .item .inner .txt-30 { font-size: 2.4rem; }
    .section2 .accord-list .item .inner .txt-20 { font-size: 1.8rem; }
}
@media only screen and (max-width: 1023px) {
    .section2 { padding: 5rem 0; }
    .section2 .accord-list { flex-direction: column; }
    .section2 .accord-list .item.on { width: 100% }
    .section2 .accord-list .item { width: 100%; height: 300px; }
    .section2 .accord-list .item .inner { display: flex; gap: 1.5rem; padding: 20px; }
    .section2 .accord-list .item .inner .num { margin-bottom: unset; font-weight: 600; font-size: 6rem; }
}
@media only screen and (max-width: 767px) {

}

/****************** 공연슬라이드 ******************/
.section3 { padding: 6rem 0; }
.section3 .inner-padding {  }
.section3 .per-swiper { width: 100%; }
.section3 .per-swiper .swiper-button-st2 { justify-content: flex-end; }
.section3 .per-swiper .swiper-wrapper { align-items: flex-end; }
.section3 .per-swiper .swiper-slide a { position: relative; display: block; }
.section3 .per-swiper .swiper-slide a .img-wrap { background-color: #000; }
.section3 .per-swiper .swiper-slide a .img-wrap::before { content: ''; position: absolute; z-index: 10; inset: 0; border: 6px solid transparent; transition: border-color 0.3s; }
.section3 .per-swiper .swiper-slide a .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; }
.section3 .per-swiper .swiper-slide:hover a .img-wrap::before { border-color: var(--primary700); }
.section3 .per-swiper .swiper-slide:hover a .img-wrap img { opacity: .8; }
.section3 .per-swiper .swiper-slide:hover .txt-wrap .tit { text-decoration: underline; }

@media only screen and (max-width: 1500px) {
}
@media only screen and (max-width: 1300px) {
    
}
@media only screen and (max-width: 1023px) {
    .section3 .per-thumb-swiper { display: none; }
}

/****************** 배너 ******************/
.section4 { position: relative }
.section4 .inner { display: block; background-color: var(--primary700); }
.section4 .inner .txt-wrap { position: relative; z-index: 1; padding: 3rem 0; text-align: center; }
.section4 .inner .img-wrap { position: relative; top: 0; left: 0; width: 100%; height: 0; padding-bottom: 8.125%; }
.section4 .inner .img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
@media only screen and (max-width: 767px) {
    .section4 .inner .img-wrap { padding-bottom: 17%; }
    .section4 .inner .img-wrap img.pc { display: none; }
    .section4 .inner .img-wrap img.mo { display: block; }
}
@media only screen and (max-width: 560px) {
    .section4 .inner img { width: 100px; }
    
}


/****************** 공연티켓 ******************/
.section5 { position: relative; padding: 10rem 0; }
.section5 .bg { position: absolute; bottom: 0; z-index: -1; }
.section5 .ticket-list { display: flex; flex-wrap: wrap; row-gap: 2rem; }
.section5 .ticket-list .item { width: 50%; }
.section5 .ticket-list .item:nth-child(odd) a { border-right: 2px dashed #fff; }
.section5 .ticket-list .item a { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 205px; padding: 30px 50px; background: var(--primary900); 
    --corner: 30px;
    mask: 
    radial-gradient(circle at 0 0, transparent var(--corner), black calc(var(--corner) + 0.5px)) top left,
    radial-gradient(circle at 100% 0, transparent var(--corner), black calc(var(--corner) + 0.5px)) top right,
    radial-gradient(circle at 0 100%, transparent var(--corner), black calc(var(--corner) + 0.5px)) bottom left,
    radial-gradient(circle at 100% 100%, transparent var(--corner), black calc(var(--corner) + 0.5px)) bottom right;
    mask-size: 51% 51%;
    mask-repeat: no-repeat; 
}
.section5 .ticket-list .item a:hover { background: linear-gradient(65deg, var(--primary500)); }


.section5 .ticket-list .item a:hover .txt-over2 { text-decoration: underline; }
@media only screen and (max-width: 1023px) {
    .section5 { padding: 5rem 0; }
    .section5 .ticket-list .item a { padding: 20px 30px; --corner: 20px; }
}
@media only screen and (max-width: 767px) {
    .section5 .ticket-list { flex-direction: column; }
    .section5 .ticket-list .item { width: 100%; }
    .section5 .ticket-list .item:nth-child(odd) a { border-right: none; }
    .section5 .ticket-list .item a .txt-over2 { font-size: 2rem; }
}