@charset "utf-8";

@font-face {font-family: 'GmarketSansMedium';src: url('https://tkfile.yes24.com/entimg/font/GmarketSansMedium/GmarketSansMedium.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'GmarketSansBold';src: url('https://tkfile.yes24.com/entimg/font/GmarketSansMedium/GmarketSansBold.woff2') format('woff2');font-weight: normal;font-style: normal; }
@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: 600; src: url("https://tkfile.yes24.com/entimg/font/Ptd/Pretendard-SemiBold.woff2") format('woff2'),}
/* CSS Document */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select { margin:0;padding:0;-webkit-text-size-adjust:none;list-style: none;}
.evtDCWrap_pc{min-width: 1300px;cursor: default;}
.evtDCWrap span, .evtDCWrap p{letter-spacing: -0.05em;}

:root {--safe-area-inset-top: env(safe-area-inset-top);}
.nanum{font-family: 'NanumBarunGothic', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif;}
.gsansM{font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif;}
.gsansB{font-family: 'GmarketSansBold', 'Noto Sans KR', sans-serif;}
.ptdM{font-family: 'ptd', 'Noto Sans KR', sans-serif;font-weight: 400;}

/* 팝업창 */
.dcPopWrap{font-family: 'ptd', 'Noto Sans KR', sans-serif;font-weight: 600;font-size: 22px;line-height: 34px;text-align: center;cursor: default;letter-spacing: 0;}
.dcPopWrap .dcPop{border-radius: 20px;border: 2px solid #101010;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50% );width: 500px;background-color: #fff;z-index: 11;font-family: 'ptd', 'Noto Sans KR', sans-serif;font-weight: 600;}
.dcPopWrap .dcPop div{padding: 60px;box-sizing: border-box;color: #101010;font-weight: 600;word-break: keep-all;}
.dcPopWrap a{color: #101010;display: block;width: 100%;font-size: 20px;line-height: 1;padding: 20px 0;border-top: 1px solid #dcdcdc;cursor: pointer;}
#eventwrap.popbg::after,#content_wrap.popbg::after{content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);}
.loading-content{font-size: 16px;line-height: 20px;font-family: 'ptd', 'Noto Sans KR', sans-serif;}

/* 상단 이미지 영역 */
.evtDCWrap .dc_hd{background: linear-gradient(to bottom, #6f5da9 0%,#9d84c7 20%, #fff 50%);}
.evtDCWrap .dc_hd .hdtop{text-align: center;position: relative;max-width: 900px;margin: 0 auto;}
.evtDCWrap .dc_hd .hdtop .topImg{padding: 65px 0 30px;}
.evtDCWrap_pc .dc_hd .hdtop .titImg{width: 750px;margin: 0 auto;} /* width: 805px; */
.evtDCWrap_pc .dc_hd .hdtop .titImg img{width: 100%;}
.evtDCWrap .dc_hd .hdtop .charImg > div{position: absolute;}
.evtDCWrap .dc_hd .hdtop .charImg > div.char01{top: 120px;left: -195px;}
.evtDCWrap .dc_hd .hdtop .charImg > div.char02{top: 125px;right: -208px;}
.evtDCWrap .dc_hd .subtxt{font-size: 54px;margin: 60px auto 30px; position: relative;}
.evtDCWrap .dc_hd .subtxt span{font-family: 'GmarketSansBold', 'Noto Sans KR', sans-serif;color: #3c3c3c;line-height: 60px;}
.evtDCWrap .dc_hd .subtxt .red{color: #f06421;}
.evtDCWrap .dc_hd .subtxt .blue{color: #41abeb;}
.evtDCWrap .dc_hd .subtxt .goHowto{position: absolute;right: 219px;bottom: 7px;width: 80px;height: 40px;cursor: pointer;}

.chk_area{display: none;}

/* 쿠폰 다운 */
.coupon_area{max-width: 860px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;padding-bottom: 30px;}
.coupon_area .cpBtn{height: 160px;cursor: pointer;}
.coupon_area .cpBtn.btn03{display: none;}
.coupon_area .cpBtn.btn04{display: none;}

/* 추천공연 탭 추가 */
.subinfo{text-align: center;padding-bottom: 80px;}
.perfWrap{background-color: #d8ddff;position: relative;}
.perfWrap .perfTabArea{display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;width: 100%;}
.perfWrap .perfTabArea, header.notch.on::after{background: #645599;}
.perfWrap .perfTabArea.on{position: fixed;top: calc(0px + env(safe-area-inset-top));left: 0;width: 100%;z-index: 10;}
.perfWrap .tab{display: inline-block;padding: 30px 60px;margin-top: 7px;transition: background-color .1s linear;width: 400px;box-sizing: border-box;text-align: center;}
.perfWrap .perfTabArea div{display: inline-block;cursor: pointer;}
.perfWrap .tab.on{background-color: #d8ddff; border-top-left-radius:10px; border-top-right-radius:10px;}
.perfWrap .tab img{transition: filter .2s linear;transition-delay: .1s;}
.perfWrap .tab.on img{filter: invert(1);}

.perfContsArea{padding-top: 200px;}
.perfContsArea .contsPerfArea{max-width: 1200px;margin: 0 auto;padding-bottom: 120px;display: flex;align-items: center;gap: 30px 30px;flex-wrap: wrap;align-items: flex-start;}
.perfContsArea .contsTit{text-align: center;margin-bottom: 60px;}
.perfContsArea a{cursor: pointer;width: calc(50% - 15px);box-sizing: border-box;border-radius: 10px;background-color: #fff;display: inline-block;position: relative;margin-bottom: 0px;text-decoration: none;}
.perfContsArea a:last-child{margin-bottom: 0;}
.perfContsArea a .poster{width: 155px;height: 217px;margin: 10px 0 10px 10px;border-radius: 5px;overflow: hidden;border: 1px solid #eee;}
.perfContsArea a .poster.wht{border: 1px solid #eee;}
.perfContsArea a .poster img{width: 100%;}
.perfContsArea a .perfinfo{position: absolute;top: 0;right: 30px;width: calc(100% - 230px);}
.perfContsArea a .perfinfo div{font-family: 'ptd', sans-serif;}
.perfContsArea a .perfinfo .perftit{font-size: 28px;line-height: 34px;letter-spacing: -0.03em;color: #3c3c3c;font-weight: 700;padding-bottom: 10px;}
.perfContsArea a .perfinfo .perfdate{font-size: 18px;line-height: 24px;letter-spacing: -0.03em;color: #666;font-weight: 500;}
.perfContsArea a .perfinfo .top{padding: 30px 0 15px;}
.perfContsArea a .perfinfo .btt{font-size: 20px;line-height: 24px;letter-spacing: -0.03em;color: #ff6318;font-weight: 700;position: relative;padding-top: 15px;}
.perfContsArea a .perfinfo .btt::before{content: '';position: absolute;top: 0;left: 0;width: 322px;height: 1px;background-color: #d5d5d5;}

/* 사용방법 */
.howtoWrap{text-align: center;background-color: #fff;padding: 88px 0 30px;}
.howtoWrap .htTit{padding-bottom: 56px;}

/* 꼭 확인해주세요 */
.infoWrap{color: #3c3c3c;background-color: #fff;text-align: center;padding: 40px 0;}
.infoWrap .infoBgWrap{background-image: url('https://tkfile.yes24.com/img/event/2025/0804/evtDC_infoBgimg.png');background-position: calc(100% - 0px) 0px;background-size: 555px 479px;background-repeat: no-repeat;text-align: left;}
.evtDCWrap_M .infoWrap > div,
.infoWrap .infoBgWrap, .infoWrap .infoBgWrap > div{max-width: 1170px;margin: 0 auto 30px;}
.infoWrap .prg{padding-bottom: 60px;}
.infoWrap .prg:last-child{padding-bottom: 0;}
.infoWrap .prg:last-child .infoTxt{margin-left: -8px;}
.infoWrap .infoTit{font-size: 28px;line-height: 1;padding: 0px 0 15px; letter-spacing: -1.5px; text-align: left;}
.infoWrap .infoTxt{letter-spacing: -0.03em;font-size: 20px;line-height: 34px;padding-bottom: 0px; text-align: left;}
.infoWrap .infoTxt span, .infoWrap .infoTxt p{font-family: 'ptd', 'Noto Sans KR', sans-serif;}
.infoWrap .infoTxt .ptcolor{color: #f06421; font-weight: 600;}
.infoWrap .infoTxt .subtxt{font-size: 18px; line-height: 31px;}
.infoWrap .infoTxt .dot{padding-left: 18px;}

/* MOB */
.evtDCWrap_M .infoWrap .infoBgWrap{background-image: none;}
@media screen and (max-width: 1200px) {
    /* 사용방법 */
    .evtDCWrap_M .howtoWrap{padding: 88px 30px 0px;}
    .evtDCWrap_M .infoWrap{padding: 70px 30px;}
    .evtDCWrap_M .howtoWrap .htConts img{width: 100%;}

    /* 추천공연 탭 추가 */
    .evtDCWrap_M .perfContsArea .contsPerfArea{max-width: 100%;padding-bottom: 120px;padding: 0 30px 120px;}
    .evtDCWrap_M .perfContsArea a{width: calc(50% - 15px);}
    .evtDCWrap_M .perfContsArea a .perfinfo{right: 12px;width: calc(100% - 200px);}
    .evtDCWrap_M .perfContsArea a .perfinfo .perftit{font-size: 26px;}
    .evtDCWrap_M .perfContsArea a .perfinfo .btt{font-size: 18px;line-height: 22px;}
    .evtDCWrap_M .perfContsArea a .perfinfo .btt::before{width: 100%;}
}
@media screen and (max-width: 960px) {
    .evtDCWrap_M img{width: 100%;}
    /* 팝업창 */
    .evtDCWrap_M.evtDCWrap .dc_hd, .evtDCWrap_M .infoWrap{padding: 0 20px;}
    .evtDCWrap_M .dcPopWrap .dcPop{border-width: 1px;border-radius: 15px;}
    .evtDCWrap_M .dcPopWrap .dcPop div{padding: 0 115px;font-size: 17px;line-height: 20px;height: 120px;display: flex;justify-content: center;align-items: center;}
    .evtDCWrap_M .dcPopWrap a{font-size: 17px;padding: 15px 0;}

    /* 상단 이미지 영역 */
    .evtDCWrap_M.evtDCWrap .dc_hd{background: linear-gradient(to bottom, #6f5da9 0%, #9d84c7 20%, #fff 60%);}
    .evtDCWrap_M.evtDCWrap .dc_hd .titImg{padding: 0 30px;}
    .evtDCWrap_M.evtDCWrap .dc_hd .hdtop .topImg{padding: 60px 130px 50px;}
    .evtDCWrap_M.evtDCWrap .dc_hd .subtxt{font-size: 40px;margin: 60px 0 80px;line-height: 48px;}
    .evtDCWrap_M.evtDCWrap .dc_hd .subtxt .goHowto{right: 17.073vw;bottom: 0.854vw;width: 10.976vw;height: 5.488vw;}
    
    /* 쿠폰 다운 */
    .evtDCWrap_M .coupon_area{gap: 20px;padding-bottom: 30px;}
    .evtDCWrap_M .coupon_area .cpBtn{width: calc(100% / 2 - 10px);height: 134px;}

    /* 추천공연 탭 추가 */
    .evtDCWrap_M .perfWrap .tab{padding: 30px 40px;}
    .evtDCWrap_M .perfContsArea{padding-top: 150px;}
    .evtDCWrap_M .perfContsArea .contsTit{margin-bottom: 50px;padding: 0 180px;}
    .evtDCWrap_M .perfContsArea .contsPerfArea{gap: 10px;gap: 10px;padding: 0px 15px 40px;}
    .evtDCWrap_M .perfContsArea a{width: calc(50% - 5px);}
    .evtDCWrap_M .perfContsArea a .poster{width: 125px;height: auto;margin: 10px 0px 10px 10px;box-sizing: border-box;}
    .evtDCWrap_M .perfContsArea a .perfinfo{text-align: left;right: unset;width: 50%;left: 140px;width: calc(100% - 140px);}
    .evtDCWrap_M .perfContsArea a .perfinfo .top{padding: 15px 0px 10px;}
    .evtDCWrap_M .perfContsArea a .perfinfo .perftit{font-size: 18px;line-height: 23px;padding: 5px 15px 10px 10px;}
    .evtDCWrap_M .perfContsArea a .perfinfo .perfdate{font-size: 14px;line-height: 20px;padding: 0 10px;}
    .evtDCWrap_M .perfContsArea a .perfinfo .btt{font-size: 15px;line-height: 20px;padding: 10px 10px 10px 10px;text-align: left;}
    .evtDCWrap_M .perfContsArea a .perfinfo .btt::before{width: calc(100% - 20px);height: 1px;left: 50%;transform: translateX(-50%);}

    /* 꼭 확인해주세요 */
    .evtDCWrap_M .infoWrap{padding: 70px 30px;}
    .evtDCWrap_M .infoWrap .infoTit{font-size: 18px;padding: 0px 0 20px;}
    .evtDCWrap_M .infoWrap .infoTxt{font-size: 15px;line-height: 24px;}
    .evtDCWrap_M .infoWrap .infoTxt span{font-size: 15px;line-height: 24px;}
    .evtDCWrap_M .infoWrap .prg{padding-bottom: 30px;}
    .evtDCWrap_M .infoWrap .prg:last-child{padding-bottom: 0px;}
    .evtDCWrap_M .infoWrap .infoTxt .dot{padding-left: 13px;}
}
@media screen and (max-width: 750px) {
    /* 팝업창 */
    .evtDCWrap_M .dcPopWrap .dcPop{width: calc(100% - 50px);}
    .evtDCWrap_M .dcPopWrap .dcPop div{padding: 25px 35px;font-size: 17px;line-height: 20px;}
    /* 상단 이미지 영역 */
    .evtDCWrap_M.evtDCWrap .dc_hd .hdtop .topImg{padding: 30px 15px 20px;}
    .evtDCWrap_M.evtDCWrap .dc_hd .titImg{padding: 0;}
    .evtDCWrap_M.evtDCWrap .dc_hd .subtxt{font-size: 22px;margin: 20px 10px;line-height: 30px;}
    .evtDCWrap_M.evtDCWrap .dc_hd .subtxt span{line-height: 1;}
    .evtDCWrap_M .subinfo{padding: 0 15px 40px;}

    /* 추천공연 탭 추가 */
    .evtDCWrap_M .perfWrap .tab{padding: 20px 10px 17px; margin-top: 5px;}
    .evtDCWrap_M .perfContsArea{padding-top: 100px;}
    .evtDCWrap_M .perfContsArea .contsTit{margin-bottom: 20px;padding: 0 75px;}
    .evtDCWrap_M .perfContsArea a, .evtDCWrap_M .perfContsArea a .poster{border-radius: 5px;}
    .evtDCWrap_M .perfContsArea a .poster img{border-radius: 0;}
    .evtDCWrap_M .perfContsArea a{width: 100%;}

    /* 쿠폰 다운 */
    .evtDCWrap_M .coupon_area{gap: 10px;}
    .evtDCWrap_M .coupon_area .cpBtn{width: calc(100% / 2 - 5px);height: 16vw;}

    /* 사용방법 */
    .evtDCWrap_M .howtoWrap{padding: 35px 20px;}
    .evtDCWrap_M .howtoWrap .htTit{padding-bottom: 20px;}

    /* 꼭 확인해주세요 */
    .evtDCWrap_M .infoWrap{padding: 10px 20px;}
    .evtDCWrap_M .infoWrap .infoTit{padding: 0px 0 10px;}
    .evtDCWrap_M .infoWrap .infoTxt p{text-indent: -13px;padding-left: 13px;}
    .evtDCWrap_M .infoWrap .infoTxt .dot{padding-left: 13px;text-indent: -1px;}
}
@media screen and (max-width: 450px) {
    .evtDCWrap_M.evtDCWrap .dc_hd .subtxt .goHowto{right: 15.200vw;bottom: 0.800vw;width: 9.33vw;height: 4.53vw;}
}