@charset "UTF-8";

/* RESET */
html,body {-webkit-text-size-adjust:none}
body, button, input, select, option, textarea {color:#222; font-size:15px; letter-spacing:0; font-family:'Noto Sans KR', 'Helvetica Neue','Apple SD Gothic Neo','AppleGothic','Droid Sans fallback',sans-serif}
body,div,span,em,strong,select,section,article,nav,footer,header,address,caption,figure,figcaption,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,textarea,input,button,tr,th,td,table {margin:0; padding:0; box-sizing:border-box}
h1,h2,h3,h4,h5,h6 {font-size:100%}
ol,ul,li {list-style-type:none}
img,fieldset, iframe {border:0 none; vertical-align:top}
img {max-width:100%}
input,button,select,textarea,label {vertical-align:middle; resize:none; outline:none}
input,textarea {-webkit-appearance:none; -webkit-border-radius:0}
input[type='checkbox'] {-webkit-appearance:checkbox}
input[type='radio'] {-webkit-appearance:radio; -webkit-border-radius:10px}
input[type='button'], input[type='submit'], input[type='reset'] {cursor:pointer}
button {border:0 none; background:transparent; cursor:pointer}
i,em,address,optgroup {font-style:normal}
hr {display:none}
table {border-collapse:collapse; border-spacing:0}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
legend, .blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
caption {width:0; height:0; overflow:hidden; color:transparent; text-indent:-9999px}
a {color:#222; text-decoration:none}
a:hover {text-decoration:none}

/* 레이아웃 */
.layout-inner {max-width:1200px; margin:0 auto}
.content {position:relative}

.footer {padding:56px 0 64px; border-top:1px solid #ddd; color:#121212; font-size:14px; box-sizing:border-box; text-align:center; background-color:#fff}
.footer .ft-logo {display:block; width:67px; height:40px; margin:0 auto; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo.svg') no-repeat center/contain}
.footer .sns-insta {display:block; width:40px; height:40px; margin:40px auto 0; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-insta.svg') no-repeat center/contain}
.footer .ft-cont {margin-top:32px; padding:0 180px; box-sizing:border-box}
.footer .ft-item {display:inline-flex; gap:4px; margin:0 20px 10px; font-size:14px}
.footer .ft-item .tit {flex:0 0 auto; color:#888}
.footer .ft-item .txt {word-break:break-all}
.footer .copyright {margin-top:30px; font-family:'Pretendard Variable', sans-serif; font-weight:500; font-size:14px}

/* 패럴랙스 효과 */
.cont-box, .lineup-area {opacity:0; transition-property:opacity,transform; transition-timing-function:cubic-bezier(.175,.885,.32,1.275); -webkit-transform: translate3d(0,60px,0); transform:translate3d(0,60px,0); -webkit-transition: opacity 0.5s,-webkit-transform 0.5s; transition: opacity 0.5s,transform 0.5s,-webkit-transform 0.5s}
.animate {opacity:1; transform:translate3d(0,0,0)}

.visual-wrap .visual-tit,
.visual-wrap .visual-cont .date,
.visual-wrap .visual-cont .place,
.visual-wrap .btn-area {opacity:0}

.visual-wrap .visual-tit {animation: down20 1s ease forwards}
.visual-wrap .visual-cont .date {animation: fadeIn 1.5s ease .5s forwards}
.visual-wrap .visual-cont .place {animation: fadeIn 1.5s ease 0.7s forwards}
.visual-wrap .btn-area {animation: fadeIn 1.5s ease 0.5s forwards}

@keyframes down20 {
    from {transform:translateY(-20px)}
    to {transform:translateY(0); opacity:1}
}
@keyframes fadeIn {
    from {opacity:0}
    to {opacity:1}
}

/* gnb */
.header .layout-inner {position:relative; z-index:2;}
.header.fixed {position:fixed; top:0; left:0; right:0; width:100%; height:70px; border-bottom:1px solid #ddd; background-color:#fff; z-index:3; transition:all .2s}
.header.hover-type {position:relative; width:100%; height:70px; background-color:#fff; z-index:3; transition:all .2s}
.header.fixed .logo, .header.hover-type .logo {background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo.svg') no-repeat center/contain}
.header .gnb-wrap, .header .gnb-list {display:flex; align-items:center; z-index:1}
.gnb-wrap .menu-link {display:inline-flex; align-items:center; justify-content:center; height:33px; margin-right:40px; padding:0 12px; border-radius:100px; font-family:'Pretendard Variable', sans-serif; font-weight:700; color:#fff; font-size:18px; background-color:#103393}
.gnb-list {display:flex; align-items:center; gap:40px}
.gnb-list > li {position:relative; line-height:1}
.gnb-list > li::before {content:''; display:block; width:100%; height:30px; position:absolute; bottom:-20px; left:0; z-index:-1}
.gnb-list > li a {line-height:1; color:#fff; font-family:'Pretendard Variable', sans-serif; font-weight:700; font-size:16px}
.gnb-list > li.on > a {color:#3869F2 !important}
.header.fixed .gnb-list a, .header.hover-type .gnb-list a {color:#121212}
.gnb-list .sub-list {display:none; position:absolute; top:35px; left:0; width:140px; border-radius:4px; background-color:#fff; overflow:hidden; transition:all .3s}
.gnb-list > li:hover .sub-list {display:block; box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.20)}
.gnb-list .sub-list li {overflow:hidden}
.gnb-list .sub-list a {display:block; padding:10px 16px; font-weight:500; font-size:14px; color:#121212; box-sizing:border-box}
.gnb-list .sub-list li:hover a, .gnb-list .sub-list li.on a {color:#fff !important; background-color:#3869F2}

.mo-menu {display:flex; align-items:center}
.mo-layout {visibility:visible; opacity:1}

/* 비주얼 영역 */
.wrap {position:relative; overflow:hidden}
.wrap:not(.sub)::before {content:''; display:block; position:absolute; top:0; left:0; right:0; width:100%; height:1500px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-visual-w.jpg?v=2') no-repeat center bottom/cover}
.wrap:not(.sub)::after {content:''; display:block; position:absolute; top:1500px; left:0; right:0; width:100%; height:50%; background:linear-gradient(180deg, #4AC5E4 1%, #4597FC 30%, #6BC3FF 55%, #D1EFFF 80%, #FFF 100%); z-index:-1}
.layout-inner .header, .header .layout-inner {display:flex; align-items:center; justify-content:space-between; padding:16px 0; box-sizing:border-box}
.logo {position:relative; z-index:1; display:block; width:64px; height:38px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo-w.svg') no-repeat center/contain}
.visual-wrap .visual-box {position:relative; padding:10% 0; box-sizing:border-box}
.visual-wrap .visual-box::after {content:''; display:block; position:absolute; top:58px; right:-192px; width:716px; height:600px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/img-visual.png?v=2') no-repeat center/contain}
.visual-wrap .visual-tit {display:block; width:729px; height:147px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/img-title-w.png?v=2') no-repeat center left/contain}
.visual-wrap .visual-cont {margin-top:72px; font-family:'GmarketSans'; color:#fff}
.visual-wrap .visual-cont .date {font-size:46px; font-weight:500; text-shadow:2px 0px 6px rgba(0, 0, 0, 0.15), 0px 3px 6px rgba(0, 0, 0, 0.40)}
.visual-wrap .visual-cont .date .num {font-weight:700}
.visual-wrap .visual-cont .place {margin-top:20px; font-weight:700; font-size:42px; text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.40);}
.visual-wrap .btn-area {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center}
.visual-wrap .btn-ticket-link {position:relative; display:inline-flex; align-items:center; justify-content:center; max-width:500px; width:100%; height:90px; margin:0 8px 10px; padding:20px 50px; border:1px solid #4597FC; font-weight:600; font-size:24px; box-sizing:border-box; box-shadow:0px 1px 8px 0px rgba(0, 0, 0, 0.16); box-sizing:border-box; background-color:#fff; z-index:1; transition:all .3s}
.visual-wrap .btn-ticket-link > span::before {content:''; display:inline-block; margin-right:10px}
.visual-wrap .btn-ticket-link.nol > span::before {width:122px; height:20px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo-nol.svg') no-repeat center left/contain}
.visual-wrap .btn-ticket-link > span::after {content:''; display:inline-block; flex:0 0 auto; width:24px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' d='m7.5 15 5-5-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain; vertical-align:-3px}
.visual-wrap .btn-ticket-link:hover {box-shadow:0px 1px 12px 0px rgba(0, 0, 0, 0.30)}
.visual-wrap .btn-ticket-link.nol, .visual-wrap .btn-ticket-link.full-type, .visual-wrap .btn-ticket-link.interpark {margin-bottom:32px}
.visual-wrap .btn-ticket-link.right-type {margin-bottom:16px}

.visual-wrap .btn-ticket-link .lang {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:26px; margin-right:10px; padding:4px 8px; border:1px solid; border-radius:100px; color:#3869F2; font-size:14px; text-align:center; box-sizing:border-box}
.visual-wrap .btn-ticket-link .lang.ko, .visual-wrap .btn-ticket-link.full-type .lang {border-color:#fff; background-color:#fff}
.visual-wrap .btn-ticket-link .lang.en, .visual-wrap .btn-ticket-link.right-type .lang {border-color:#3869F2; background-color:#fff}

.visual-wrap .btn-ticket-link.nol, .visual-wrap .btn-ticket-link.full-type {color:#fff; border-color:rgba(16, 51, 147, 0.90); background-color:rgba(16, 51, 147, 0.90)}
.visual-wrap .btn-ticket-link.nol > span::before {background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo-nol-w.svg') no-repeat center left/contain}
.visual-wrap .btn-ticket-link.nol > span::after, .visual-wrap .btn-ticket-link.full-type > span::after {filter:invert(1)}
.visual-wrap .btn-ticket-link.interpark > span::before {width:162px; height:22px; vertical-align:middle; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo-interpark.svg') no-repeat center left/contain}

.visual-wrap .btn-ticket-link.interpark.full-type > span::before {filter:invert(1)}
.visual-wrap .btn-ticket-link.right-type {max-width:400px; height:76px; padding:18px; color:#101010; font-size:18px; background:rgba(255, 255, 255, 0.80)}
.visual-wrap .btn-ticket-link.right-type > span::before {display:none}
.visual-wrap .btn-ticket-link.right-type .lang {margin-right:8px}
.visual-wrap .btn-ticket-link.right-type > span {display:flex; align-items:center}


/* 콘텐츠 */
.content {padding:120px 0; box-sizing:border-box}
.fixed-area {opacity:0; position:fixed; right:16px; bottom:100px; transition:opacity 0.5s ease-in-out}
.fixed-area.active {opacity:1}
.fixed-area > div + div {margin-top:12px}
.fixed-area .btn {display:flex; justify-content:center; align-items:center; width:50px; height:50px; border-radius:50%; border:1px solid #ddd; box-sizing:border-box; background:#fff; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.fixed-area .btn-share {background:#fff url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-share.svg') no-repeat center/25px 25px}
.btn-top::before {content:''; display:inline-block; width:24px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20.606v-16m0 0-6 6m6-6 6 6'/%3E%3C/svg%3E") no-repeat 50% 50%/contain; vertical-align:top}

.layer-pop .btn-close {position:absolute; top:12px; right:12px}
.layer-pop .btn-close::before {content:''; display:block; width:18px; height:18px; background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}

.layer-pop {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999999; align-items:center; justify-content:center}
.layer-pop.active {display:flex}
.layer-pop .pop-inner {position:relative; padding:24px 10px; border-radius:10px; box-shadow: 0px 4.571px 11.429px 0px rgba(0, 0, 0, 0.10); box-sizing:border-box; background-color:#fff}
.layer-pop .pop-tit {display:block; margin-bottom:20px; font-family:'Pretendard Variable', sans-serif; font-size:16px; text-align:center}

.layer-pop.share-pop .pop-inner {width:380px; min-height:152px}
.sns-list {text-align:center}
.sns-list li {display:inline-block; margin-right:22px}
.sns-list li:last-child {margin-right:0}
.sns-list li > a {display:block; font-size:13px; text-align:center; cursor:pointer}
.sns-list li > a::before {content:''; display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin:0 auto; border-radius:50%; background-color:#000; margin-bottom:8px; background-repeat:no-repeat; background-size:18px 18px; background-position:center}
.sns-list li.link > a::before {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-link.svg')}
.sns-list li.kakao > a::before {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-kakao.svg')}
.sns-list li.facebook > a::before {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-facebook.svg')}
.sns-list li.twitter > a::before {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-twitter.svg')}
.sns-list li.line > a::before {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-line.svg')}


/* 라인업 */
.lineup-wrap .cont-tit {font-family:'Pretendard Variable', sans-serif; font-size:min(max(32px, 8vw), 130px); line-height:1; font-weight:900; color:#fff}
.lineup-wrap .cont-txt {margin-top:10px; color:#fff; font-size:min(max(16px, 2vw), 24px)}
.lineup-wrap .lineup-area {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:60px}
.lineup-area .lineup-box {width:calc(50% - 32px)}
.lineup-area .lineup-date {display:flex; align-items:center;}
.lineup-area .lineup-date > span {flex:0 0 auto; font-family:'Pretendard Variable', sans-serif; color:#fff; font-weight:700; font-size:min(max(18px, 3.5vw), 42px)}
.lineup-area .lineup-date::before {content:''; flex:1 1 auto; width:calc(100% - 223px); height:2px; margin-right:16px; background-color:rgba(255,255,255,.6)}
.lineup-area .lineup-list {margin-top:min(max(16px, 2.66vw), 32px)}

.lineup-list li {position:relative; width:100%; height:100%; margin-bottom:32px}
.lineup-list li img {width:100%; height:100%; object-fit:cover}
.lineup-list .info-wrap {display:flex; flex-direction:column; justify-content:space-between; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; padding:30px 40px; font-family:"GmarketSans"; font-weight:600; color:#fff; box-sizing:border-box; background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 82%, rgba(0, 0, 0, 0.20) 102.83%), linear-gradient(181deg, rgba(116, 200, 250, 0.00) 75.88%, rgba(117, 195, 240, 0.64) 100.86%), linear-gradient(181deg, rgba(0, 0, 0, 0.00) 77.6%, rgba(0, 0, 0, 0.14) 86.55%, rgba(0, 0, 0, 0.70) 99.14%);}
.lineup-list .festival-info {display:flex; justify-content:space-between}
.lineup-list .festival-info .logo {display:block; width:67px; height:40px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/logo-w.svg') no-repeat center/contain}
.lineup-list .festival-date > span {display:block; line-height:1.45; font-size:min(max(11px, 2.33vw), 28px); text-shadow:0px 2px 10px rgba(0, 0, 0, 0.10);}
.lineup-list .artist-info {text-align:center}
.lineup-list .artist-info .sub-tit, .lineup-list .artist-info .artist-name {display:block}
.lineup-list .artist-info .sub-tit {font-size:min(max(10px, 2.5vw), 30px)}
.lineup-list .artist-info .artist-name {margin-top:min(max(6px, 1vw), 12px); font-size:min(max(20px, 6vw), 72px); line-height:1}

/* -----서브페이지----- */
.is-pc {display:block}
.is-mo {display:none}
.sub, .sub button {font-family:'Pretendard Variable', sans-serif}
.page-sub-tit, .page-tit {display:block; text-shadow:0px 2px 8px rgba(0, 0, 0, 0.30)}
.page-sub-tit {margin-bottom:8px; padding:0 16px; border-top:4px solid #fff; border-bottom:4px solid #fff; line-height:1.4; font-weight:800; font-size:min(max(18px, 2.34vw), 32px); box-sizing:border-box;}
.page-tit {font-size:min(max(46px, 5.98vw), 80px)}
.sub .content {padding:80px 0 120px}
.sub .top-head {position:relative; height:360px; margin-top:70px; background-repeat:no-repeat; background-size:cover; background-position:center;}
.sub .top-head::after {content:''; display:block; position:absolute; top:0; left:0; right:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.45)}
.sub .top-head .layout-inner {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#fff; z-index: 1;}

/* 서브 페이지 상단 */
.lineup-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-lineup.jpg')}
.press-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-press.jpg')}
.photo-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-photo.jpg')}
.video-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-video.jpg')}
.contact-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-contact.jpg')}
.faq-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-faq.jpg')}
.notice-page .top-head {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-notice.jpg')}

.thumb {position:relative; height:0; overflow:hidden}
.thumb > div, .thumb > a {display:block; position:absolute; top:0; left:0; width:100%; height:100%}
.thumb img {width:100%; height:100%; object-fit:cover; object-position:center top; transition:all .2s}
.video-item .thumb:hover img, .photo-list .thumb:hover img {transform:scale(1.1)}
.btn-area {text-align:center}

/* press */
.press-page .data-item > .col.date, .press-page .data-item > .col.comp {color:#101010; font-size:14px}
.press-page .data-item > .col.comp {width:160px}
.press-page .data-item > .col.tit {width:calc(100% - 280px); font-size:18px}
.press-list {display:flex; flex-wrap:wrap; gap:24px 24px}
.press-item {width:calc(25% - 18px); border-radius:8px; border:1px solid #eee; box-sizing:border-box; overflow:hidden}
.press-item .press-tit {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.4; font-size:18px}
.press-item .thumb {position:relative; height:0; padding-bottom:72%; overflow:hidden}
.press-item .press-cont {padding:16px 16px 32px; box-sizing:border-box}
.press-view {max-width:960px; margin:0 auto}
.view-head .news-tit {display:block; line-height:1.4; font-size:40px}
.view-head {padding-bottom:24px; border-bottom: 1px solid #EAEAEA; box-sizing:border-box}
.view-info {display:flex; align-items:center; gap:10px; margin-top:16px}
.view-info > span {font-size:14px}
.view-info > .comp {color:#585858}
.view-info > .date {color:#888}
.view-body {padding:32px 0 80px; line-height:1.5; font-size:18px; box-sizing:border-box}
.view-body .thumb-area {margin:16px 0}
.view-body .thumb-area img {width:100%; height:100%; object-fit:contain}
.view-body + .btn-area .btn-basic {display:inline-block; min-width:260px; padding:20px 24px; font-weight:700; color:#fff; font-size:16px; background-color:#103393; text-align:center; box-sizing:border-box}

/* 기본 스타일 복원 */
.view-body h1, .view-body h2, .view-body h3, .view-body h4, .view-body h5, .view-body h6 {font-size: inherit; font-weight: bold; margin: 0.67em 0}
.view-body p {margin: 1em 0}
.view-body ul, .view-body ol {margin: 1em 0; padding-left: 40px; list-style-type:disc}
.view-body li {margin: 0.5em 0}
.view-body table {border-collapse:separate; border-spacing:2px; text-align:left}
.view-body th, .view-body td {padding: 0.5em; border: 1px solid #ddd}
.view-body a {color:blue; text-decoration:underline}
.view-body button, .view-body input, .view-body select, .view-body textarea {font:inherit; margin:0}
.view-body textarea {resize:vertical}
.view-body blockquote {margin:1em 40px; padding:0}
.view-body hr {border:1px inset; margin:1em 0}

/* photo */
.photo-year {margin-bottom:40px}
.photo-year .year {display:inline-block; padding-bottom:8px; border-bottom:2px solid #3869F2; color:#3869F2; font-size:24px; box-sizing:border-box}
.photo-list {display:flex; flex-wrap:wrap; gap:16px 16px}
.photo-list .photo-item {width:calc(25% - 12px); overflow:hidden; cursor:pointer}
.photo-item .thumb {padding-bottom:75%}

.photo-slide-wrap .slick-initialized .slick-slide {width:100%}
.photo-slide-wrap {z-index:3; display:none; align-items:center; justify-content:center; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.80)}
.photo-slide-wrap.active {display:flex}

.photo-slide-wrap .photo-slide-box {position:relative; width:100%; max-width:1300px;}
.photo-slide-wrap .photo-slide {position:relative; display:block; width:100%; height:100%; padding:0 50px; box-sizing:border-box}

/* .photo-slide-wrap .photo-slide {position:relative; display:block; width:100%; max-width:1200px; height:auto; padding:0 50px; box-sizing:border-box} */
.photo-slide-wrap .photo-slide-item,
.layer-pop.video-pop .thumb-area:not(.iframe-type) {position:relative; height:calc(100vh - 130px); max-height:900px; text-align:center}
.photo-slide-wrap .photo-slide img,
.layer-pop.video-pop .thumb-area img {display:inline-block; max-width:100%; height:100%; object-fit:contain}
.photo-slide-wrap .btn-close,
.layer-pop.video-pop .btn-close {display:flex; align-items:center; justify-content:center; position:absolute; top:-60px; right:45px; width:40px; height:40px; border-radius:50%; background-color:rgba(0, 0, 0, 0.40); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='.938' d='m17.999 6-12 12m0-12 12 12'/%3E%3C/svg%3E"); background-position:center; background-size:24px 24px; background-repeat:no-repeat}
.layer-pop.video-pop .btn-close {right:0}
.layer-pop.video-pop .btn-close::before {display:none}
.photo-slide-wrap .slick-arrow {position:absolute; top:50%; width:55px; height:55px; background-size:30px 54px; background-repeat:no-repeat; transform:translateY(-50%); text-indent:-99999px; cursor:pointer; text-align:center; background-position:center}
.photo-slide-wrap .slick-prev.slick-disabled {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='54' fill='none'%3E%3Cpath stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M26.568 3 3.088 26.859 26.846 51'/%3E%3C/svg%3E");}
.photo-slide-wrap .slick-next.slick-disabled {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='54' fill='none'%3E%3Cpath stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.366 3 23.48 23.859L3.087 51'/%3E%3C/svg%3E");}
.photo-slide-wrap .slick-prev {left:-60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='54' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M26.568 3 3.088 26.859 26.846 51'/%3E%3C/svg%3E");}
.photo-slide-wrap .slick-next {right:-60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='54' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.366 3 23.48 23.859L3.087 51'/%3E%3C/svg%3E");}

/* video */
.video-page .thumb-icon {z-index:1; position:absolute; top:50%; left:50%; border-radius:50%; overflow:hidden; background-color:rgba(0, 0, 0, 0.60); background-repeat:no-repeat; background-position:center; color:transparent; text-indent:-9999px; pointer-events:none; transform-origin:right bottom; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transform:translate(-50%, -50%)}
.video-page .thumb-icon.thumb-vod {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-play.svg')}
.video-page .thumb {position:relative; padding-bottom:56.5%; cursor:pointer}
.video-page .thumb > .thumb-icon {width:60px; height:60px; background-size:30px 30px}
.video-list {display:flex; flex-wrap:wrap; gap:24px 24px}
.video-item {position:relative; border-radius:12px; box-sizing:border-box; overflow:hidden}
.video-item.main-video {width:100%; margin-bottom:24px}
.video-list .video-item {width:calc(50% - 12px)}
.video-item .news-tit {font-weight:500; color:#fff; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.video-item .news-tit > a {color:#fff}
.video-item .txt-cont {display:flex; flex-direction:column; justify-content:flex-end; padding:0 24px 32px; position:absolute; top:0; left:0; right:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(18, 18, 18, 0.00) 74.71%, rgba(18, 18, 18, 0.90) 95.17%), rgba(0, 0, 0, 0.20); pointer-events:none}

.video-page .video-pop .thumb-icon {width:100px; height:100px; background-size:50px 50px}
.layer-pop.video-pop {z-index:3; display:none; align-items:center; justify-content:center; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.80); overflow-y:auto}
.layer-pop.video-pop.active {display:flex}
.layer-pop.video-pop .pop-inner {width:1200px; height:auto; padding:0; border-radius:0; box-shadow:none; background:transparent}
/* .layer-pop.video-pop .thumb-area {max-height:675px} */
.layer-pop.video-pop .thumb-area > div {height:100%}

.iframe-youtube,
.view-body .media {position:relative; height:0; padding-bottom:56.25%; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0)}
.iframe-youtube iframe, .view-body iframe {position: absolute; top:0; left:0; width:100% !important; height:100% !important}

/* contact */
.contact-list .contact-item {padding:32px; border-radius:8px; background-color:#F1F7FF; box-sizing:border-box}
.contact-list .contact-item + .contact-item {margin-top:32px}
.contact-list .contact-item .tit {display:flex; gap:12px; margin-bottom:16px; padding-left:45px; font-weight:700; font-size:28px; box-sizing:border-box}
.contact-list .contact-item .txt {line-height:1.5; font-size:20px; word-break:break-all}
.contact-list .contact-item .txt > a {color:#3869F2}
.contact-list .contact-item.info-item .tit {background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-info.svg') no-repeat center left/32px 32px}
.contact-list .contact-item.spon-item .tit {background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-spon.svg') no-repeat center left/32px 32px}
.contact-list .contact-item.fnb-item .tit {background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-fnb.svg') no-repeat center left/32px 32px}

/* faq */
.tab-menu {display:inline-flex; align-items:center; gap:20px; margin-bottom:40px; white-space:nowrap}
.tab-menu .menu-item {padding:12px 0; font-weight:500; font-size:18px}
.tab-menu .menu-item.on {border-radius:100px; padding:12px 16px; font-weight:700; color:#fff; background-color:#3869F2}

.inner-scroll {position:relative; overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch}
.inner-scroll::-webkit-scrollbar {display:none}

.faq-item .txt {line-height:1.5; font-size:16px}
.faq-item .ko {color:#121212}
.faq-item .en {margin-top:4px; color:#888}
.faq-item {border-radius:8px; overflow:hidden}
.faq-item.active {border:1px solid #3869F2}
.faq-item.active .faq-cont {display:block}
.faq-item.active .faq-tit {font-weight:700}
.faq-item + .faq-item {margin-top:16px}
.faq-head .faq-tit {position:relative; display:block; width:100%; padding:20px 50px 20px 20px; line-height:1.5; background:#F5F5F7; box-sizing:border-box; text-align:left}
.faq-head .faq-tit::after {content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); right:20px; width:24px; height:24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M12.75 3v18h-1.5V3z'/%3E%3Cpath fill='%23000' d='M3 11.25h18v1.5H3z'/%3E%3C/svg%3E")}
.faq-item.active .faq-head .faq-tit::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23000' d='M3 11.25h18v1.5H3z'/%3E%3C/svg%3E");}
.faq-cont {display:none; padding:20px; background-color:#fff; box-sizing:border-box}

/* notice */
.data-list {border-top:1px solid #ddd; border-bottom:1px solid #ddd}
.data-item {display:flex; align-items:center; padding:20px 16px; box-sizing:border-box}
.data-item + .data-item {border-top:1px solid #EAEAEA}
.data-item > .col {flex:0 0 auto; padding:0 12px; line-height:1.5; font-size:16px; box-sizing:border-box}
.data-item > .col.num, .data-item > .col.date, .data-item > .col.comp {color:#888; text-align:center}
.data-item > .col.num {width:80px}
.data-item > .col.tit {display:block; width:calc(100% - 200px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.data-item > .col.tit > a:hover {text-decoration:underline}
.data-item > .col.date {width:120px; font-size:14px}
.data-item > .col.comp {width:80px}

.paging {display:flex; align-items:center; justify-content:center; margin-top:40px}
.paging > a + a {margin-left:4px}
.paging > a::before {content:''; display:block; width:18px; height:18px; background-position:center}
.paging .first::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' d='M13.5 12.75 9.75 9l3.75-3.75m-5.25 7.5L4.5 9l3.75-3.75'/%3E%3C/svg%3E")}
.paging .prev::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' d='M11.25 13.5 6.75 9l4.5-4.5'/%3E%3C/svg%3E")}
.paging .next::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23101010' stroke-linecap='round' stroke-linejoin='round' d='m6.75 13.5 4.5-4.5-4.5-4.5'/%3E%3C/svg%3E")}
.paging .last::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23101010' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75 8.25 9 4.5 5.25m5.25 7.5L13.5 9 9.75 5.25'/%3E%3C/svg%3E");}
.paging-list {display:flex; align-items:center; gap:4px; padding:0 16px}
.paging-list > li {position:relative; width:32px; text-align:center}
.paging-list > li > a {display:flex; align-items:center; justify-content:center}
.paging-list > li.on::before {content:''; display:block; position:absolute; top:-7px; left:0; width:32px; height:32px; border-radius:50%; background-color:#103393; z-index:-1}
.paging-list > li.on > strong, .paging-list > li.on > a {font-weight:600; color:#fff}

.notice-view .view-body + .btn-area {padding-top:60px; border-top:1px solid #EAEAEA; box-sizing:border-box}


@media screen and (max-height:800px) {
    .layer-pop.video-pop .thumb-area {height: calc(100vh - 130px)}
}
@media screen and (max-width:1400px) {
    .photo-slide-wrap .photo-slide {padding:0 50px}
    .photo-slide-wrap .slick-prev {left:0}
    .photo-slide-wrap .slick-next {right:0}
}

/* 모바일 */
@media screen and (max-width:1199px) {
    .layout-inner {padding:0 16px; box-sizing:border-box}
    .visual-wrap .visual-box::after {top:90px; width:50%}
    /* .fixed-area {bottom:100px; right:16px; margin-left:0} */
    .header .layout-inner {align-items:flex-start; padding:16px}
    
    /* .photo-slide-wrap .photo-slide-item, .photo-slide-wrap .photo-slide-box, .layer-pop.video-pop .thumb-area:not(.iframe-type), .layer-pop.video-pop .thumb-area.iframe-type {height:auto} */
    .layer-pop.video-pop {padding:0 16px}
    .visual-wrap .btn-area {flex-direction:column}
    .visual-wrap .btn-ticket-link.nol, .visual-wrap .btn-ticket-link.interpark {margin-bottom:12px}
}

@media screen and (max-width:768px) {
    .is-pc {display:none}
    .is-mo {display:block}

    .header {padding:10px 0}
    .footer {padding:60px 0}
    .footer .ft-cont {margin-top:24px; padding:0 16px}
    .footer .ft-logo {width:53px; height:32px}
    .footer .sns-insta {width:32px; height:32px; margin-top:32px}
    .fixed-area .btn {width:40px; height:40px}
    .fixed-area > div + div {margin-top:8px}
    .fixed-area .btn-share {background-size:20px 20px}
    .btn-top::before {width:20px; height:20px}

    .header.fixed {height:50px}
    .header .layout-inner {padding:0 16px}
    .header .gnb-wrap {align-items:flex-start}
    .gnb-wrap .menu-link {height:30px; margin-right:8px; font-size:15px}

    .btn-allmenu {display:block; width:30px; height:30px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-menu-w.svg') no-repeat center/24px 24px}
    .header.fixed .btn-allmenu, .header.hover-type .btn-allmenu {background-image:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-menu.svg?v=2')}
    .header .gnb-list {width:100%; height:100%; align-items:flex-start}

    .gnb-list {flex-direction:column; gap:0; padding-top:56px;}
    .gnb-list > li {width:100%; margin:8px 0}
    .gnb-list > li::before {display:none}
    .gnb-list > li a {display:block; padding:8px 0; color:#121212; font-size:18px; box-sizing:border-box}
    .gnb-list > li.sub-menu > a {display:flex; justify-content:space-between; align-items:center; gap:2px}
    .gnb-list > li.sub-menu > a::after {content:''; flex:0 0 auto; display:inline-block; width:24px; height:24px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23101010' stroke-linecap='square' stroke-width='1.5' d='m18 9-6 6-6-6'/%3E%3C/svg%3E"); transition:all .2s}
    .gnb-list > li.sub-menu.on > a::after {transform:rotate(180deg)}
    .gnb-list > li.sub-menu.on .sub-list {display:block}
    .gnb-list > li:hover .sub-list {display:none; box-shadow:none}
    .gnb-list .sub-list {position:relative; top:auto; left:auto; width:100%; border-radius:0}
    .gnb-list .sub-list li a {padding:8px 16px; color:#121212}
    .gnb-list .sub-list li:hover a, .gnb-list .sub-list li.on a {color:#3869F2 !important; background-color:#fff}

    .mo-layout {visibility:hidden; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.60); opacity:0; transition: opacity 0.3s ease;}
    .mo-layout.active {visibility:visible; opacity:1}
    .mo-menu {overflow-y:auto; position:absolute; top:0; right:-96%; bottom:0; width:85vw; height:100dvh; padding:32px 24px 40px; background-color:#fff; box-sizing:border-box; transform:translateX(0); transition:transform 0.3s ease}
    .mo-menu .btn-close {z-index:2; display:block; position:absolute; top:32px; right:24px; width:32px; height:32px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/icon-close.svg') no-repeat center/contain}
    .mo-layout.active .mo-menu {transform:translateX(-112%)}
    .mo-layout.closing .mo-menu {transform:translateX(0)}

    .logo {width:43px; height:26px}
    .wrap:not(.sub)::before {height:735px; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-visual-m.jpg?v=2') no-repeat center bottom/cover}
    .wrap:not(.sub)::after {top:734px}
    .visual-wrap .visual-tit {width:277px; height:64px; margin:0 auto; background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/img-title-m.png?v=2') no-repeat center/contain}
    .visual-wrap .visual-cont {margin-top:24px}
    .visual-wrap .visual-cont .date, .visual-wrap .visual-cont .place {font-size:18px}
    .visual-wrap .visual-cont .place {margin-top:8px}
    .visual-wrap .visual-box {padding:45px 0 17px; text-align:center}
    .visual-wrap .visual-box::after {position:relative; top:auto; right:auto; display:block; width:263px; height:220px; margin:15px auto 0}
    .visual-wrap .btn-ticket-link, .visual-wrap .btn-ticket-link.right-type {min-width:auto; max-width:100%; width:100%; height:52px; padding:20px 10px; margin:0 0 10px; font-size:15px}
    .visual-wrap .btn-ticket-link > span::before {width:85px; height:14px}
    .visual-wrap .btn-ticket-link > span::after {vertical-align:-6px}
    .visual-wrap .btn-ticket-link.nol > span::before {width:80px; height:13px}
    .visual-wrap .btn-ticket-link.interpark > span::before {width:103px; height:14px}

    .content {padding:80px 0}
    .page-sub-tit {padding:0 10px; border-width:2px; line-height:1.5}
    .sub .content {padding:60px 0}
    .sub .top-head {height:185px; margin-top:50px}
    .lineup-wrap .lineup-area {margin-top:32px}
    .lineup-area .lineup-date::before {margin-right:12px}
    .lineup-area .lineup-box {width:calc(50% - 8px)}
    .lineup-list li {margin-bottom:16px}
    .lineup-list .info-wrap {padding:8px}
    .lineup-list .festival-info .logo {width:24px; height:14px}
    .layer-pop.share-pop {padding:0 16px}

    /* photo */
    .photo-year {margin-bottom:32px}
    .photo-year .year {padding-bottom:6px; font-size:16px}
    .photo-list .photo-item {width:calc(50% - 8px)}
    .photo-slide-wrap {padding:0 10px}
    .photo-slide-wrap .photo-slide {padding:0 40px}
    .photo-slide-wrap .slick-arrow {width:32px; height:32px; background-size:18px 32px}
    /* .photo-slide-wrap .photo-slide-item, .photo-slide-wrap .photo-slide-box {max-height:400px} */
    /* .photo-slide-wrap .photo-slide-item, .photo-slide-wrap .photo-slide-box {height:auto; max-height:400px} */
    .photo-slide-wrap .btn-close,
    .layer-pop.video-pop .btn-close {top:-45px; width:32px; height:32px; background-size:18px 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='m13.5 5-9 9m0-9 9 9'/%3E%3C/svg%3E");}
    .photo-slide-wrap .photo-slide-item, .photo-slide-wrap .photo-slide-box, .layer-pop.video-pop .thumb-area:not(.iframe-type), .layer-pop.video-pop .thumb-area.iframe-type {height:auto}
    
    /* video */
    .video-list {gap:16px}
    .video-item {border-radius:4px}
    .video-item.main-video {margin-bottom:16px}
    .video-list .video-item {width:100%}
    .video-item .news-tit {font-size:14px}
    .video-page .thumb-icon, .video-page .video-pop .thumb-icon {width:40px; height:40px; background-size:20px 20px}
    .video-item .txt-cont {padding:0 16px 16px}

    /* contact */
    .contact-list .contact-item {padding:24px}
    .contact-list .contact-item + .contact-item {margin-top:24px}
    .contact-list .contact-item .tit {margin-bottom:16px; padding-left:32px; font-size:20px}
    .contact-list .contact-item .txt {font-size:16px}
    .contact-list .contact-item.info-item .tit, .contact-list .contact-item.spon-item .tit, .contact-list .contact-item.fnb-item .tit {background-size:24px 24px}

    /* faq */
    .tab-menu {gap:16px; margin-bottom:32px}
    .tab-menu .menu-item {padding:8px 0; font-size:16px}
    .tab-menu .menu-item.on {padding:8px 12px}
    .faq-head .faq-tit, .faq-cont {padding:16px}
    .faq-head .faq-tit {padding-right:48px}
    .faq-head .faq-tit::after {width:18px; height:18px; background-size:18px 18px}

    /* notice */
    .data-item {display:block; padding:16px 8px}
    .data-item > .col {width:100% !important; padding:0}
    .data-item > .col.num, .data-item > .col.date, .data-item > .col.comp {text-align:left}
    .data-item > .col.num {display:none}
    .data-item > .col.tit {white-space:normal; font-size:16px}
    .data-item > .col.date {margin-top:6px; font-size:13px}
    .press-page .data-item > .col.comp, .press-page .data-item > .col.date {display:inline-block; width:auto !important; margin-top:8px; vertical-align:middle}
    .press-page .data-item > .col.comp {margin-right:6px}
    .press-page .data-item > .col.tit {white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    

    .view-head .news-tit {font-size:26px}
    .view-info > .date {font-size:13px}
    .view-body {padding:24px 0 40px; font-size:16px}
    .notice-view .view-body + .btn-area {padding-top:40px}

}
@media screen and (max-width:375px) {
    html {background-color:#fff}
    .layer-pop.share-pop .pop-inner {width:280px; padding:24px 24px 0px}
    .sns-list {text-align:center}
    .sns-list li {margin:0 12px 24px}
}
@media screen and (max-width:345px) {
    .visual-wrap .btn-ticket-link > span::after {display:none}
}
@media screen and (max-width:320px) {
    .visual-wrap .btn-ticket-link .lang {margin-right:6px}
    .paging-list {padding:0 8px}
}
@media screen and (min-width:1500px) {
    .wrap:not(.sub)::before {background:url('https://static.hankyung.com/resource/event/atafestival/2025/img/bg-visual-wide.jpg?v=2') no-repeat center bottom/cover}
    .fixed-area {top:400px; right:auto; bottom:auto; left:50%; margin-left:700px}
}
@media screen and (min-width:1900px) {
    .visual-wrap .visual-box {padding:178px 0 200px}
}