@charset "utf-8";

body { }
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-thumb { background-color: #111111; /* 스크롤바 색상 */ border-radius: 10px; /* 스크롤바 둥근 테두리 */ }
body::-webkit-scrollbar-track { background: #232323;  /*스크롤바 뒷 배경 색상*/ }

.container { width: 100%; background: url('/resources/img/bg_pc.jpg') no-repeat center top/cover; background-attachment: fixed; position: sticky; }
.container::before { content: ''; display: block; width: 100%; height: 100%; background-image: url('/resources/img/bg.png'); background-repeat: repeat; background-attachment: fixed; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0.2; }
.container .mobile-wrap { width: 100%; max-width: 520px; margin: 0 auto; background-color: #fff; position: relative; z-index: 3; }

.main-kvis .img-box { width: 100%; position: absolute; left: 0; top: 0; }
.main-kvis > div { width: 100%; height: 96vh; max-height: 920px; position: relative; z-index: 4; }
.main-kvis .sub-tit { width: 35.7692307vw; max-width: 186px; position: absolute; left: 13px; top: 370px; }
.main-kvis .main-tit { width: 100%; position: absolute; left: 0; top: 590px; z-index: 5; }
.main-kvis .main-tit > img { display: block; width: 62.307692307vw; max-width: 324px; margin: 0 auto; padding-left: 20px; box-sizing: content-box; }
.main-kvis .scroll-box { width: 100%; text-align: center; position: absolute; left: 0; bottom: 5%; }
.main-kvis .scroll-box p { font-size: 12px; }
.main-kvis .scroll-box p.ico-box { width: 13px; height: 63px; margin: 8px auto 0; animation: downzigle 3s linear 0.5s infinite normal both; }

.main-content { padding-top: 160px; position: relative; }
.main-content .tit-box { text-align: center; margin-bottom: 72px; }
.main-content .tit-box p { font: 500 24px/100% var(--font-family); }
.main-content .tit-box p.img-box { width: 90%; max-width: 406px; margin: 32px auto 24px; }

.main-content .city-box + .city-box { margin-top: 72px; }
.main-content .date-box { text-align: center; margin-bottom: 32px; position: relative; }
.main-content .date-box::before { content: ''; width: 92%; height: 1px; background-color: #aaa; position: absolute; left: 50%; top: 32px; transform: translateX(-50%); z-index: -1; opacity: 0; animation: lineFadeIn 0.6s linear 0.8s 1 normal forwards; }
.main-content .date-box .city { width: max-content; min-width: 200px; padding: 16px; margin: 0 auto 32px; border-radius: 40px; font: 600 28px/100% var(--font-family); background-color: #232323; color: #fff; }
.main-content .date-box .date { font: 700 28px/100% var(--font-family); margin-bottom: 12px; }
.main-content .date-box .sub-date { display: flex; justify-content: center; align-items: center; gap: 10px; }
.main-content .date-box .sub-date > span { font-size: 17px; }
.main-content .date-box .sub-date > img { display: block; width: 4px; }
@keyframes lineFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.main-content .place-box { display: flex; justify-content: space-between; align-items: center; width: 92%; max-width: 456px; border-radius: 12px; padding: 16px 32px; background-color: #f5f5f5; margin: 0 auto 48px; }
.main-content .place-box > div { display: flex; align-items: center; gap: 8px; }
.main-content .place-box .ico-box { width: 17px; height: 22px; }
.main-content .place-box p { font: 600 20px/100% var(--font-family); }
.main-content .ico-wrap a { display: block; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; font-size: 0; text-indent: -9999px; background-color: pink; }
.main-content .ico-wrap a.map-naver { background: url('/resources/img/ico_map_naver.png') no-repeat center/contain; }
.main-content .ico-wrap a.map-kakao { background: url('/resources/img/ico_map_kakao.png') no-repeat center/contain; }

.main-content .info-box { width: 92%; max-width: 456px; margin: 0 auto; color: #686868; } 
.main-content .info-box .tit { font: 600 17px/100% var(--font-family); margin-bottom: 12px; }
.main-content .info-box .txt { font: 400 17px/100% var(--font-family); letter-spacing: -0.17px; padding-left: 10px; position: relative; }
.main-content .info-box .txt::before { content: ''; width: 4px; height: 4px; background-color: #686868; position: absolute; left: 0; top: calc(50% - 2px); }
.main-content .info-box .txt + .txt { margin-top: 8px; }

.main-content .line { width: 92%; max-width: 456px; height: 1px; margin: 40px auto; background: url('/resources/img/line_dahsed6.png') repeat-x left top; }

.main-content .quick-box { width: 92%; max-width: 456px; margin: 40px auto; }
.main-content .quick-box p { text-align: center; font: 500 20px/100% var(--font-family); margin-bottom: 32px; }
.main-content .quick-box > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.main-content .quick-box > div.only-btn { display: flex; justify-content: center; }
.main-content .quick-box > div.only-btn p { display: flex; justify-content: center; align-items: center; width: 100% ; height: 64px; border-radius: 12px; background-color: #888; color: #fff; font: 500 22px/100% var(--font-family); margin-bottom: 0; }
.main-content .quick-box a { display: flex; justify-content: center; align-items: center; width: 100%; height: 64px; border-radius: 12px; font-size: 0; text-indent: -9999px; }
.main-content .quick-box a.btn-nol { background: #3549FF url('/resources/img/btn_logo_nol.svg') no-repeat center/146px 22px; }
.main-content .quick-box a.btn-ticket { background: #FA2828 url('/resources/img/btn_logo_ticket.svg') no-repeat center 43%/81px 32px; }

footer { margin-top: 64px; padding: 48px 24px; background-color: #f5f5f5; }
footer ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; max-width: 294px; margin: 0 auto; font-size: 12px; letter-spacing: -0.24px; }
footer ul b { font-weight: 600; margin-right: 2px; }
footer p { font: 300 12px/100% var(--font-family); letter-spacing: -0.24px; text-align: center; margin: 24px auto 0; }


/* 애니메이션 정의 */
@keyframes downzigle {
    0% { transform: translateY(0); }
    60% { transform: translateY(0); }
    70% { transform: translateY(5px);  }
    80% { transform: translateY(0); }
    90% { transform: translateY(5px); }
    100% { transform: translateY(0); }
}



/* 반응형 */
@media screen and (max-width:1024px){
.main-content .ico-wrap a.map-kakao { display: none; }
}
@media screen and (max-width:520px){
    .main-kvis .sub-tit { top: 71.15384615vw; }
    .main-kvis .main-tit { top: 113.46153846vw; }
    .main-content { padding-top: 30.76923076vw; }
    .main-content .tit-box { margin-bottom: 56px; }
    .main-content .tit-box p { font-size: 22px; }
    .main-content .tit-box p.img-box { width: 80%; margin-top: 24px; }
    .main-content .date-box .date { font-size: 6.9230769vw; }
    .main-content .date-box .sub-date { gap: 6px; }
    .main-content .quick-box a.btn-nol { background-size: 30vw auto; }
    .main-content .quick-box a.btn-ticket { background-size: 18vw auto; }
}
@media screen and (max-width:400px){
    .main-content .date-box .sub-date > span { font-size: 15px; }
    .main-content .place-box { flex-direction: column; gap: 20px; padding: 24px; }
    .main-content .quick-box p { font-size: 22px; }
}