@charset "utf-8";

:root {
    --main-color: #7A45E5;
    --gray-color: #E6E6EB;
}
.calendar_box {position: relative; background: #F6F7FE url(../img/calendar/calendar_bg.png) top center / 100% auto no-repeat; width: 100%; padding: 80px 0 66px 0;}
.calendar_box button {border: 0; padding: 0; background: none; cursor: pointer;}
.calendar_box .inner {max-width: 928px; width: 100%; margin: 0 auto;}

/* .info_wrap */
.calendar_box .info_wrap .title {display: block; font-weight: 700; font-size: 32px; line-height: 100%; color: #33333D; text-align: center;}
.calendar_box .info_wrap p {font-weight: 400; font-size: 18px; line-height: 100%; color: #4D4D57; display: flex; justify-content: center; align-items: center; gap: 4px; padding: 0 0 40px 0;}
.calendar_box .info_wrap p::before {content: ""; background: url(../img/calendar/icon_info.svg) 50% 50% / cover no-repeat; width: 24px; height: 24px;}
.calendar_box .date_btn {text-align: center; position: relative; margin: 0 auto; width: fit-content;}
.calendar_box .date_btn .date {font-weight: 700; font-size: 72px; line-height: 51px; letter-spacing: -0.05em; color: var(--main-color); display: block; padding: 24px 0;}
.calendar_box .date_btn .prev, .calendar_box .date_btn .next {width: 44px; height: 44px; text-indent: -9999px; font-size: 0; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.2s;}
.calendar_box .date_btn .prev {background: url(../img/calendar/arrow_left_off.png) 50% 50% / cover no-repeat; left: -84px;}
.calendar_box .date_btn .next {background: url(../img/calendar/arrow_right_off.png) 50% 50% / cover no-repeat; right: -84px;}
.calendar_box .date_btn .prev:hover {background: url(../img/calendar/arrow_left_on.png) 50% 50% / cover no-repeat;}
.calendar_box .date_btn .next:hover {background: url(../img/calendar/arrow_right_on.png) 50% 50% / cover no-repeat;}

.calendar_box .badge_status {display: none;}
.calendar_box colgroup col {width: calc(100% / 7)}

/* table hader */
.calendar_box .calendar_header {border-radius: 8px; background: #6E3ECE; padding: 0 14px;}
.calendar_box .calendar_header tr th {font-weight: 500; font-size: 20px; line-height: 100%; color: #FFF; height: 40px; box-sizing: border-box;}

/* table body */
.calendar_box .calendar_body {margin: 10px 0 0 0; padding: 14px; border: 1px solid var(--main-color); box-shadow: 0px 0px 25px rgba(122, 69, 229, 0.15); border-radius: 8px; background: #fff; overflow: hidden;}
.calendar_box .calendar_body tr td {position: relative; height: 125px; border-bottom: 1px solid var(--gray-color); border-right: 1px solid var(--gray-color); vertical-align: top; text-align: left; box-sizing: border-box; padding: 0; transition: 0.2s;}
.calendar_box .calendar_body tr td:last-child {border-right: 0;}
.calendar_box .calendar_body td button {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 16px; border: 1px solid transparent;}
.calendar_box .calendar_body tr td .time {color: #4D4D57; font-weight: 700; font-size: 18px; line-height: 13px;}
.calendar_box .calendar_body tr td .time.holiday {color: #FF245A;}
.calendar_box .calendar_body tr td .time.saturday {color: #315AFF;}
.calendar_box .calendar_body tr td .status {display: flex; flex-direction: column; gap: 4px; width: 100%;}
.calendar_box .calendar_body tr td .status > div {display: flex; justify-content: space-between; align-items: center; height: 25px; padding: 7px; font-weight: 500; font-size: 13px; line-height: 100%; border-radius: 6px;}
.calendar_box .calendar_body tr td .status .start {color: #E50A59; background: rgba(255, 228, 238, 0.5); border: 1px solid #FABED4;}
.calendar_box .calendar_body tr td .status .ongoing {color: var(--main-color); background: rgba(235, 227, 251, 0.5); border: 1px solid #D6C5F7;}
.calendar_box .calendar_body tr td .status .num {font-weight: 700;}
.calendar_box .calendar_body tr td.empty {background: rgba(242, 242, 247, 0.3); pointer-events: none;}
.calendar_box .calendar_body tr td.on button {border: 1px solid var(--gray-color); border-radius: 12px; background: var(--main-color);}
.calendar_box .calendar_body tr td.on .time {color: #fff;}
.calendar_box .calendar_body tr td.on .status > div {border: 1px solid #fff; background: #fff;}
.calendar_box .calendar_body tr td:not(.on):hover button { background: #F6F7FE; border-radius: 0; border: 1px solid transparent;}

/* 축제 리스트 목록 */
.festival_list_box {padding: 64px 0 0 0; scroll-margin-top: 64px;}

.festival_list_header {padding: 0 0 60px 0;}
.festival_list_header strong {font-weight: 700; font-size: 32px; line-height: 23px; color: #1A1A24; padding: 0 0 40px 0; border-bottom: 1px solid var(--gray-color); display: block;}
.festival_list_header strong span {color: var(--main-color);}

.festival_list_none {padding: 39px 0 107px 0;}
.festival_list_none p {font-weight: 500; font-size: 24px; line-height: 17px; color: #1A1A24; display: flex; gap: 50px; flex-direction: column; align-items: center;}
.festival_list_none p::before {content: ""; background: url(../img/calendar/calendar_img.png) 50% 50% / cover no-repeat; width: 110px; height: 99px;}
.festival_list_none span {font-weight: 500; font-size: 16px; line-height: 11px; color: #9999A3; text-align: center; display: block; padding: 20px 0 0 0;}

.calendar_wrapper .other_list.type2 .tab_cont_area {padding: 0;}
.calendar_wrapper .other_list .inner .other_festival_ul {margin: 0; display: flex; gap: 32px;}
.calendar_wrapper .other_list .inner .other_festival_ul li {width: calc((100% - 64px) / 3); height: auto; margin: 0;}
.calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content strong {line-height: 28px; padding: 16px 0 0 0; word-break: keep-all;}
.calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content .date {line-height: 20px; padding: 8px 0;}
.calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content .loc {line-height: 20px; padding: 0;}
.calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_img > span {font-weight: 700; padding: 0 8.5px;}
.calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_img > span.start {background: #E50A59;}
.calendar_wrapper .other_list .inner .other_festival_img {height: 216px;}
.calendar_wrapper .other_list .inner .other_festival_ul li a img {object-fit: cover;}
.calendar_wrapper .tab_cont_area .list_more_btn {margin: 32px auto 56px; padding: 0;}

@font-face {
    font-family: "GmarketSansMedium";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
    font-weight: normal;
    font-style: normal;
}

table, tbody, tfoot, thead, th, tr, td, colgroup, col{padding: 0; margin: 0;}
/* .calendar_wrap{height: 1102px; background:url(../img/calendar/bg_cal.png) center center no-repeat;}*/
.calendar_wrap{height: auto; padding-bottom: 50px; background:#f8f9ff url(../img/calendar/bg_cal.png) top center no-repeat;}

.calendar_wrap .inr{width:940px;margin:0 auto;}
.calendar_wrap h3{padding-top: 60px; font-size: 32px; font-weight: 700;}
.calendar_wrap .month_btn{display: flex; justify-content: space-between; align-items: center;}
.calendar_wrap .month_btn button{width: 38px; height:38px;vertical-align: middle;text-indent: -9999px; border: none; background-color: transparent; background-size: 100% auto; background-repeat: no-repeat;}
.calendar_wrap .month_btn .prev{background-image:url(../img/calendar/arrow_prev.png); margin-right: 10px;}
.calendar_wrap .month_btn .next{background-image:url(../img/calendar/arrow_next.png);}
.calendar_wrap .month_btn .prev:hover, .calendar_wrap .month_btn .next:hover{background-position: 0 -38px;}
.calendar_wrap .month_btn span{display:block;padding:0 0 30px;font-size:64px; font-weight: 500; letter-spacing: -1px;color:#7a45e5;}
.calendar_wrap table{box-sizing: border-box; border-radius: 8px; border: 1px solid #7a45e5; overflow: hidden; border-collapse: separate; text-align: center; }
.calendar_wrap table th{height:60px;font-size: 32px;line-height:48px;color:#000; font-weight: 500; border-bottom: 1px solid #7a45e5; background: #ece8fd;}
.calendar_wrap table th span{display:block;font-size: 13px;line-height:16px;font-weight: 300;font-family:NotoSansKR;}
.calendar_wrap table th.holiday{color:#f60056;}
.calendar_wrap table td.holiday{color:#ff3179;}
.calendar_wrap table .saturday{color:#2572E4;}
.calendar_wrap table tbody{background: #fff;}
.calendar_wrap table td{height:150px; position: relative;}
.calendar_wrap table td a > span{display:block;font-size:16px;font-weight: 500;line-height:18px; position: relative;}
.calendar_wrap td a > span:after{content:'';display:inline-block; position: absolute; left: 50%; top: calc(100% + 8px);; transform: translateX(-50%); width:12px;height:8px;background:url(../img/calendar/arrow_down.png) no-repeat;}
.calendar_wrap td span em{font-size:16px;color:#80808a;}
.calendar_wrap table td a{display:block;height:100%;}
.calendar_wrap table td a strong{display:block;padding:32px 0 10px;font-weight: 500;font-size: 40px;line-height:40px;letter-spacing: -2px;color:#1a1a2a;}
.calendar_wrap table td.holiday a strong{color:#ff3179;}
.calendar_wrap table td.saturday a strong{color:#2572E4;}
.calendar_wrap table tbody tr{position: relative;}
.calendar_wrap table tbody tr:after{content: ''; display: block; width: 100%; height: 1px; background-color: #e6e6eb; position: absolute; left: 0; top: 100%;}
.calendar_wrap table tbody tr:first-child td{border-top:0;}
.calendar_wrap table tbody tr:last-child td:first-child{border-bottom:0;}
.calendar_wrap table tbody tr:last-child td:last-child{border-bottom:0;}
.calendar_wrap table tbody td:first-child{border-left:0;}
.calendar_wrap table tbody tr td:last-child{border-right:0;}
.calendar_wrap table tbody td.on{background:#7a45e5; border-radius: 8px; position: relative;}
.calendar_wrap table tbody td.on a strong{color: #fff;}
.calendar_wrap table tbody td.on a > span{color: #fff;}
.calendar_wrap table tbody td.on a > span::after{background-image: url(../img/calendar/arrow_down_on.png);}
.calendar_wrap table tbody td.on span em{color: #fff;}
.calendar_wrap table tbody td a:hover{background-color: #f8f9ff;}
.calendar_wrap table tbody td a:hover strong, .calendar_wrap table tbody a:hover span em{color: #7a45e5;}
.calendar_wrap table tbody td a:hover > span:after{background-image: url(../img/calendar/arrow_down_hover.png);}
.calendar_wrap table tbody td a:hover::after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;border:2px solid #7A45E5 ; border-radius: 8px; box-sizing: border-box;}

.other_festival h4{font-size: 32px; font-weight: 700; border-bottom: 1px solid #e6e6eb; padding-bottom: 30px;}
.other_list.type2 .tab_cont_area.list_none{padding-top: 130px;}
.other_festival .list_none img{width: 110px;}
.other_festival .list_none p{font-size: 24px; text-align: center; margin: 50px 0 10px; font-weight: 500;}
.other_festival .list_none span{display: block; font-size: 16px; color: #9999a3; text-align: center; font-weight: 500;}

/* 모바일 */
@media all and (max-width: 1008px) {
    .calendar_wrap{height: auto; background:url(../img/calendar/bg_mcal.png) top center / cover no-repeat; padding-bottom: 25px;}
    .calendar_wrap h3{font-size: 20px; padding-top: 30px;}
    .calendar_wrap .month_btn .arrowbtn{margin-top: -20px;}
    .calendar_wrap .month_btn button{width: 36px; height: 36px; background-size: 100% auto !important;}
    .calendar_wrap .month_btn .prev{margin-right: 5px;}
    .calendar_wrap .month_btn .prev:hover, .calendar_wrap .month_btn .next:hover{background-position: 0 -36px;}
    .calendar_wrap .month_btn span{font-size: 40px; padding: 0 0 20px;}
    .calendar_wrap table th{font-size: 16px; height: 48px;}
    .calendar_wrap table td{height: 80px;}
    .calendar_wrap table td a strong{font-size: 24px; line-height: 24px; padding: 16px 0 4px;}
    .calendar_wrap table td a > span{font-size: 12px; line-height: 14px;}
    .calendar_wrap td a > span:after{width: 10px; height: 6px; background-size: 100% 100%; top: calc(100% + 4px); background-image: url(../img/calendar/arrow_mdown.png);}
    .calendar_wrap table tbody td.on{border-radius: 6px; background: #7a45e5;}
    .calendar_wrap table tbody td.on a > span::after, .calendar_wrap table tbody td a:hover > span:after{background-image: url(../img/calendar/arrow_mdown_on.png);}
    .calendar_wrap td span em{font-size: 12px;}
    .calendar_wrap table tbody td a:hover{background-color: #7a45e5; border-radius: 6px;}
    .calendar_wrap table tbody td a:hover strong{color: #fff;}
    .calendar_wrap table tbody td a:hover span em{color: #fff;}
    .calendar_wrap table tbody td a:hover::after{content:'';display:none;width:100%;height:100%;position:absolute;left:0;top:0;border:2px solid #7A45E5 ; border-radius: 8px; box-sizing: border-box;}

    .other_festival h4{font-size: 20px; padding-bottom: 20px;}
    .other_list.type2 .tab_cont_area.list_none{padding-top: 70px;}
    .other_festival .list_none img{width: 88px;}
    .other_festival .list_none p{font-size: 18px; margin: 30px 0 10px; }
    .other_festival .list_none span{font-size: 14px;}

    .calendar_box {padding: 32px 0; background: #F6F7FE url(../img/calendar/calendar_bg_m.png) top center / 100% auto no-repeat;}
    .calendar_box .inner {max-width: none;}

    /* .info_wrap */
    .calendar_box .info_wrap .title {font-weight: 500; font-size: 18px; line-height: 100%; color: #1A1A24;}
    .calendar_box .info_wrap p {font-size: 13px; line-height: 100%; word-break: keep-all; padding: 0 0 20px 0; align-items: flex-start; gap: 2px;}
    .calendar_box .info_wrap p::before {width: 20px; min-width: 20px; height: 20px; margin: -3.5px 0 0 0px;}
    .calendar_box .date_btn .date {padding: 16px 0; font-size: 36px; line-height: 40px;}
    .calendar_box .date_btn .prev, .calendar_box .date_btn .next {width: 28px; height: 28px;}
    .calendar_box .date_btn .prev {left: -52px;}
    .calendar_box .date_btn .next {right: -52px;}

    .calendar_box .badge_status {display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin: 0 0 12px 0;}
    .calendar_box .badge_status > span {font-weight: 400; font-size: 13px; line-height: 100%; display: flex; align-items: center; gap: 4px;}
    .calendar_box .badge_status > span::before {content: ""; border-radius: 4px; width: 12px; height: 12px; box-sizing: border-box;}
    .calendar_box .badge_status > span:first-child {color: #E50A59;}
    .calendar_box .badge_status > span:first-child::before {border: 1px solid #E50A59; background: rgba(255, 228, 238, 0.5);}
    .calendar_box .badge_status > span:last-child {color: var(--main-color);}
    .calendar_box .badge_status > span:last-child::before {border: 1px solid var(--main-color); background: rgba(235, 227, 251, 0.5);}

    /* table hader */
    .calendar_box .calendar_header {padding: 0; border-radius: 6px;}
    .calendar_box .calendar_header tr th {font-size: 15px; line-height: 100%; height: 27px; padding: 6px 0;}

    /* table body */
    .calendar_box .calendar_body {padding: 0; border-radius: 6px; margin: 8px 0 0 0; box-shadow: 0px 0px 16px rgba(122, 69, 229, 0.15);}
    .calendar_box .calendar_body tr td {height: 78px;}
    .calendar_box .calendar_body tr td:not(.on):hover button {background: transparent;}
    .calendar_box .calendar_body tr:last-child td {border-bottom: 0;}
    .calendar_box .calendar_body td button {padding: 9px 7px;}
    .calendar_box .calendar_body tr td .time {font-size: 16px; line-height: 11px;}
    .calendar_box .calendar_body tr td .status {gap: 3px;}
    .calendar_box .calendar_body tr td .status > div {font-size: 11px; justify-content: center; border-radius: 4px; padding: 1.5px 0; height: auto;}
    .calendar_box .calendar_body tr td .status > div > span:first-child {display: none;}
    .calendar_box .calendar_body tr td.on button {border-radius: 6px;}

    /* 축제 리스트 목록 */
    .festival_list_box {padding: 30px 0 0 0; scroll-margin-top: 30px;}

    .festival_list_header {padding: 0 0 25px 0;}
    .festival_list_header strong {font-size: 20px; line-height: 24px; padding: 0 0 16px 0; word-break: keep-all;}

    .festival_list_none {padding: 50px 0 100px 0;}
    .festival_list_none p {font-size: 18px; line-height: 13px; gap: 32px;}
    .festival_list_none p::before {background: url(../img/calendar/calendar_img_m.png) 50% 50% / cover no-repeat; width: 88px; height: 79px;}
    .festival_list_none span {font-size: 14px; line-height: 10px; padding: 14px 0 0 0;}

    .calendar_wrapper .other_list .inner .other_festival_ul {gap: 32px 8px;}
    .calendar_wrapper .other_list .inner .other_festival_ul li {width: calc(50% - 4px);}
    .calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content {padding: 0;}
    .calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content strong {padding: 8px 0 0 0; line-height: 24px;}
    .calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content .date {padding: 4px 0; line-height: 17px; word-break: break-word;}
    .calendar_wrapper .other_list .inner .other_festival_ul li a .other_festival_content .loc {line-height: 17px;}
    .calendar_wrapper .other_list .inner .other_festival_img {height: 122px;}
    .calendar_wrapper .tab_cont_area .list_more_btn { margin: 32px auto 100px;}
}