@charset "utf-8";
/* font */
@font-face {
    font-family: 'ptd';font-style: normal;font-weight: 400;
    src: url("https://tkfile.yes24.com/entimg/font/Ptd/Pretendard-Regular.woff2") format('woff2');
}
@font-face {
    font-family: 'ptd';font-style: normal;font-weight: 500;
    src: url("https://tkfile.yes24.com/entimg/font/Ptd/Pretendard-Medium.woff2") format('woff2');
}
@font-face {
    font-family: 'ptd';font-style: normal;font-weight: 600;
    src: url("https://tkfile.yes24.com/entimg/font/Ptd/Pretendard-SemiBold.woff2") format('woff2');
}
@font-face {
    font-family: 'ptd';font-style: normal;font-weight: 700;
    src: url("https://tkfile.yes24.com/entimg/font/Ptd/Pretendard-Bold.woff2") format('woff2');
}
@font-face {
    font-family: 'ptd';font-style: normal;font-weight: 800;
    src: url("https://tkfile.yes24.com/entimg/font/Ptd/Pretendard-ExtraBold.woff2") format('woff2');
}
/* font-weight */
.yFtwR{font-family: 'ptd', sans-serif;font-weight: 400;} /*Regular*/
.yFtwM{font-family: 'ptd', sans-serif;font-weight: 500;} /*Medium*/
.yFtwm{font-family: 'ptd', sans-serif;font-weight: 500;} /*Medium*/
.yFtwSb{font-family: 'ptd', sans-serif;font-weight: 500;} /*SemiBold*/
.yFtwB{font-family: 'ptd', sans-serif;font-weight: 700;} /*Bold*/
.yFtwEb{font-family: 'ptd', sans-serif;font-weight: 800;} /*ExtraBold*/

body{margin: 0;padding: 0;}

/* 0. 팝업 */
.ycfPopArea{border-radius: 30px;background-color: #fff;max-width: 450px;width: calc(100% - 55px);height: auto;/*450px*/padding: 40px 0;box-sizing: border-box;text-align: center;cursor: default;position: absolute;top: 50vh;left:  50%;transform: translate(-50%, -50%);z-index: 5;}
.ycfPopArea .cpTit{font-size: 30px;}
.ycfPopArea .cptxt{font-size: 28px;line-height: 37px;padding: 20px 0 30px;}
.ycfPopArea .cpPopClose{font-size: 26px;width: 170px;height: 60px;line-height: 60px;margin: 0 auto;border-radius: 5px;background-color: #000;color: #fff;cursor: pointer;box-sizing: border-box;display: inline-block;}
.ycfPopArea .imgClose{position: absolute;right: 30px;top: 30px;cursor: pointer;}
.ycfBg{background-color: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;width: 100%;height: 100%;}

.evt_ycf{text-align: center;line-height: 1;}
.evt_ycf a{text-decoration: none;}
/* 1. 이벤트 상단 */
.topArea_wrap{position: relative;overflow: hidden;}
.topArea_wrap .topbg{
    background-image: url('https://tkfile.yes24.com/img/event/2026/0804/evt_ycf_topbg02.png');
    background-repeat: no-repeat;
    background-position: center -150px;
    background-size: auto;
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
}
.topArea_wrap .topbg::after{
    content: '';
    background-image: url('https://tkfile.yes24.com/img/event/2026/0804/evt_ycf_topbg03.png');
    background-repeat: no-repeat;
    background-position: calc(50% + 130px ) 10px;
    background-size: auto;
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
}
.topArea{
    background-image: url('https://tkfile.yes24.com/img/event/2026/0804/evt_ycf_topbg01.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    padding: 150px 0 80px;
}
.topArea *{font-family: 'ptd', sans-serif;}

/* 상단 모션 */
/* 리본 */
.topArea_wrap .topbg{
    opacity: 0;
    transform: translateY(-25%) scale(0.7);
    transition: transform 0.8s ease,opacity 0.8s ease;
}
/* 컨페티 */
.topArea_wrap .topbg::after{
    opacity: 0;
    transition: transform 1s ease,opacity 1s ease;
    transform: scale(0.3);
}

.topArea_wrap .topArea > div{
    opacity: 0;
    transition: opacity 1s ease;
}
.topArea_wrap.active .topbg{
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.1s;
}
.topArea_wrap.active .topbg::after{
    opacity: 1;
    animation: ani02 forwards 0.3s 1 cubic-bezier(0, 0.24, 0.26, 1.2);
    transition-delay: 0.5s;
    animation-delay: 1.1s;
}

.topArea_wrap.active .topArea > div{
    opacity: 1;
    transition-delay: .5s;
}
@keyframes ani02 {
    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.topArea .typo{padding-top: 20px;padding-bottom: 50px;position: relative;z-index: 5;} 
.topArea .infoTxt{color: #fff;font-size: 30px;}
.topArea .infoTxt .txt01{opacity: .6;font-size: 26px;}
.topArea .infoTxt .txt02{padding: 40px 0 50px;line-height: 40px;}
.topArea .infoTxt .pink{color: #ffd6b5;}
.topArea .btnWrap .cpGoBtn{font-size: 30px;display: inline-block; /*width: 450px; height: 80px;*/min-width: 450px; line-height: 80px;padding: 0 0px;margin: 0 auto 10px;border-radius: 5px;background-color: #000;color: #fff;cursor: pointer; }
.topArea .btnWrap .cpGoBtn.ty2 {/*background-color: #fd662f;*/ color:#fd662f;}
.topArea .btnWrap{position: relative;z-index: 5;}

/* 2. 예컬페 공연 모아보기 */
.contsArea{background: linear-gradient(#fddbcd 0%, #f9f2ff 100%);padding-bottom: 148px;}
/* 타이틀 */
.evt_ycf .ycfTit{padding: 70px 0;}
.evt_ycf .ycfTit .sTxt{font-size: 25px;color: #fe7340;padding-top:20px; letter-spacing: -1px;}
.evt_ycf .ycfTit .mTxt{font-size: 48px;color: #000;}

/* 리스트 */
.perfListWrap{display: flex;flex-wrap: wrap;justify-content: center;gap: 80px 30px;min-width: 1428px;max-width: 90%;margin: 0 auto;}
.perfListWrap a{width: 260px; /*flex: 0 0 300px;*/}
.perfListWrap .perfList .poster{border-radius: 15px;overflow: hidden;width: 100%;position: relative; min-height: 362px; background-color: #f1f1f1;}
.perfListWrap .perfList .poster img{width: 100%;height: auto; }
.perfListWrap .perfList .poster .pBadge{position: absolute;bottom: 10px;right: 10px;width: 70px;height: 70px;line-height: 70px;background-color: #fff;color: #333;font-size: 24px;border: 3px solid #000;border-radius: 50px;}
.perfListWrap .perfInfo{text-align:center;padding-top: 30px;}
.perfListWrap .perfInfo .pPer{font-size: 34px;color: #fe7340;}
.perfListWrap .perfInfo .pTit{font-size: 20px;color: #333;margin: 15px 0 10px;}
.perfListWrap .perfInfo .pDate{font-size: 16px;color: #555;line-height: 22px;}
/* 공연 정보 말줄임(한 줄) */
.perfListWrap .perfInfo .pTit, .perfInfo .pDate{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; line-clamp: 1;
    -webkit-box-orient: vertical; box-orient: vertical;
}

/* 3. 추천 이벤트 */
.evtArea{background-color: #cfddff;padding-bottom: 150px;}
.evtArea .evtConts{display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;max-width: 1410px;margin: 0 auto;}
.evtArea .evtConts > a{width: auto;margin: 0 auto;border-radius: 20px;overflow: hidden;}

/* ----- MOB ----- */
.m_evt_ycf img{max-width: 100%;}
.m_evt_ycf .perfListWrap{min-width: unset;max-width: 750px;}

.topArea_wrap .resizing *,
.topArea_wrap .resizing *::before,
.topArea_wrap .resizing *::after {
    transition: none !important;
}

@media screen and (max-width: 750px) {
    .m_evt_ycf .ycfPopArea{padding: 50px 0 35px;border-radius: 15px;}
    .m_evt_ycf .ycfPopArea .cpTit{font-size: 15px;}
    .m_evt_ycf .ycfPopArea .cptxt{font-size: 20px;line-height: 25px;padding: 10px 0 33px;}
    .m_evt_ycf .ycfPopArea .cpPopClose{font-size: 15px;line-height: 40px;padding: 0 40px;width: auto;height: auto;border-radius: 2px;}
    .m_evt_ycf .ycfPopArea .imgClose{width: 20px;right: 15px;top: 15px;}

    /* 모션 */
    .m_evt_ycf .topArea_wrap.active .topArea > div{transition-delay: 0.5s;}
    .m_evt_ycf .topArea_wrap .topbg::after{transition-delay: 0.5s;animation-delay: 0.5s;background-size: 120%;background-position: calc(40% + 10px ) 10px;}
    .m_evt_ycf .topArea_wrap .topbg{background-size: 150%;background-position: calc(50% + 15px) -70px;}
    .m_evt_ycf .topArea{padding: 72px 0 35px;background-size: 340%;background-position: center top;}
    .m_evt_ycf .topArea .typo{padding: 0 40px 20px;}
    .m_evt_ycf .topArea .infoTxt{font-size: 18px;}
    .m_evt_ycf .topArea .infoTxt .txt01{font-size: 16px;}
    .m_evt_ycf .topArea .infoTxt .txt02{padding: 15px 0 30px;line-height: 24px;}
    .m_evt_ycf .topArea .cpGoBtn{font-size: 17px;line-height: 25px;padding: 10px 0px;border-radius: 2px; min-width:230px; font-weight: bold;}

    .m_evt_ycf .contsArea{padding-bottom: 74px;}
    .m_evt_ycf .ycfTit{padding: 40px 0 35px;}
    .m_evt_ycf .ycfTit .sTxt{font-size: 16px;padding-bottom: 8px;}
    .m_evt_ycf .ycfTit .mTxt{font-size: 28px;}

    .m_evt_ycf .perfListWrap{gap: 40px 20px;padding: 0 30px;}
    .m_evt_ycf .perfListWrap a{width: calc(50% - 10px);flex: 0 0 calc(50% - 10px);}
    .m_evt_ycf .perfListWrap .perfList .poster{border-radius: 10px; min-height: unset;}
    .m_evt_ycf .perfListWrap .perfList .poster .pBadge{bottom: 5px;right: 5px;width: 50px;height: 50px;line-height: 50px;font-size: 18px;border-width: 2px;}

    .m_evt_ycf .perfInfo{padding-top: 15px;}
    .m_evt_ycf .perfInfo .pPer{font-size: 28px;}
    .m_evt_ycf .perfInfo .pTit{font-size: 17px;margin: 10px 0;}
    .m_evt_ycf .perfInfo .pDate{font-size: 15px;line-height: 18px;}
    
    .perfListWrap .perfList .poster img{width: 100%;height: auto;}
}
@media screen and (max-width: 375px) {
    .m_evt_ycf .topArea{background-size: 350%;}
    .m_evt_ycf .perfInfo .pPer{font-size: 20px;}
}
@media screen and (min-width: 2560px) {
    .topArea_wrap {background-image: url('https://tkfile.yes24.com/img/event/2026/0804/evt_ycf_topbg01.jpg');background-repeat: repeat-x;background-size: cover;background-position: center top;}
}