@charset "UTF-8";
@font-face { font-family: 'SUIT Variable'; font-weight: 100 900; src:url('../fonts/SUIT-Variable.woff2') format('woff2'),}
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 400; src: url('../fonts/Paperlogy-4Regular.woff') format("woff"),}
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 600; src: url('../fonts/Paperlogy-6SemiBold.woff') format("woff"),}
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 700; src: url('../fonts/Paperlogy-7Bold.woff') format("woff"),}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 
html { line-height: 1.5; letter-spacing: -0.02em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; margin: 0; padding: 0; } 
body { font-family: 'SUIT Variable', sans-serif; background: #fff; word-break: keep-all; color: #000; font-size: 16px; } 
a, button{font-family: 'SUIT Variable', sans-serif;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; } 
ul, ol, li { list-style:none; } 
img, button { border:0 none; } 
a:link, a:visited, a:hover, a:focus, a:active { text-decoration:none; color: inherit; } 


.site-header {position: absolute; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 50px 50px 0; margin: 0 auto;} 
.logo img { height: 30px; } 
.lang { display: flex; align-items: center; gap: 30px; } 
.lang-btn {position: relative; background: none; border: none; cursor: pointer; font-size: 22px; font-weight: 400; color: #fff; transition: color 0.15s; letter-spacing: -0.03em;} 
.lang-btn + .lang-btn::before{content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -15px; display: inline-block; width: 1px; height: 22px; background: #fff;}
.lang-btn.is-active { font-weight: 800; text-decoration: underline; text-underline-offset: 4px;} 

.visual {height: 920px; text-align: center; padding-top: 140px; background: url(../images/bg_visual.png) 50% bottom / cover no-repeat; } 
.visual h2 { font-size: 28px; font-weight: 700; line-height: 1.4; } 
.visual h2 em { font-style: normal; color: #F01942; } 

.inner { max-width: 1280px; padding: 0 80px; margin: 0 auto; } 
.pc{display: block;}
.mo{display: none;}
main{overflow: hidden;}
h2 {display: flex; width: fit-content; margin: 0 auto; font-family: 'Paperlogy', 'SUIT Variable'; font-size: 52px; font-weight: 700; text-align: center; } 

.calendar-section { margin: 0 auto; padding: 100px 0 60px; background: #F01942 url(../images/bg_squre.png) 0 -20px / 100% auto repeat-y; } 
.calendar-section h2 { padding: 0 162px; color: #fff; background: url(../images/bg_stit1.png) 0 0 / 100% auto no-repeat;} 
.calendar-section .period { display: block; text-align: center; font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 0; } 
.calendar-section .cal-slider { position: relative; display: flex; align-items: center; justify-content: center; gap: 25px; width: 300px; height: 68px; padding: 0 20px; margin: -5px auto 45px; background: url(../images/bg_caldate.png) 0 0 / 100% 100% no-repeat;} 
.calendar-section .cal-nav {position: absolute; top: 50%; transform: translateY(-50%); left: 30px; background: url(../images/caldate_prev.png) 0 0 / 100% 100% no-repeat; width: 32px; height: 32px; border: none; cursor: pointer; font-size: 48px; font-weight: 300; color: #fff; line-height: 1; padding: 0 8px; } 
.calendar-section .cal-nav.cal-next { left: auto; right: 30px; background: url(../images/caldate_next.png) 0 0 / 100% 100% no-repeat;} 
.calendar-section .cal-nav:disabled { opacity: 0; cursor: default; } 

.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; border-spacing: 0; background: #fff; position: relative;} 
.calendar::before{content: ''; position: absolute; top: -50px; left: -50px; display: inline-block; width: 128px; height: 103px; background: url(../images/bg_tape_left.png) 0 0 / 100% 100% no-repeat;}
.calendar::after{content: ''; position: absolute; top: -50px; right: -45px; display: inline-block; width: 121px; height: 142px; background: url(../images/bg_tape_right.png) 0 0 / 100% 100% no-repeat;}
.calendar thead th { text-align: center; padding: 15px; font-size: 23px; font-weight: 600; } 
.calendar thead th.sun { color: #F01942; } 
.calendar thead th.sat { color: #4162E4; } 
.calendar tbody td { text-align: center; padding: 1.34% 2.144%; font-size: 16px; border: 1px solid #E2E2EB; vertical-align: top; } 
.calendar tbody td.sun { color: #F01942; } 
.calendar tbody td.sat { color: #4162E4; } 
.calendar tbody tr > td:first-child{border-left: none !important;}
.calendar tbody tr > td:last-child{border-right: none !important;}
.calendar .num { display: block; font-size: 32px; font-weight: 800; } 
.calendar .event-tag { display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 9px; border: 1px solid #E2E2EB; background: #F4F4F4; color: #000; border-radius: 21px; font-weight: 500; } 
.calendar .event-tag::after { content: ''; display: inline-block; width: 13px; height: 13px; margin: 2px 0 0 7px; background: url(../images/cal_arrow.png) 0 0 / 100% auto no-repeat; } 
.calendar .is-disabled { cursor: default; pointer-events: none; } 
.calendar tbody td > div { display: flex; align-items: center; flex-direction: column; padding: 16.15% 0; border-radius: 100%; aspect-ratio: 1; border: 1px solid transparent; } 
.calendar tbody td.is-clickable { cursor: pointer; transition: background 0.15s; } 
.calendar tbody td.is-clickable:hover > div { background: #F7F7F7; border: 1px solid #EDEDED; } 
.calendar tbody td.is-clickable:hover .event-tag { border-color: #000; background: #121212; color: #fff; } 
.calendar tbody td.is-clickable:hover .event-tag::after { background-position: 0 -26px; } 
.calendar tbody td.is-active > div, .calendar tbody td.is-active:hover > div { background: #F01942; color: #fff; border: 1px solid #D50D33; } 
.calendar tbody td.is-active .num, .calendar tbody td.is-active:hover .num { color: #fff; } 
.calendar tbody td.is-active .event-tag, .calendar tbody td.is-active:hover .event-tag { background: #fff; color: #F01942; border-color: #D50D33; } 
.calendar tbody td.is-active .event-tag::after, .calendar tbody td.is-active:hover .event-tag::after { background-position: 0 -13px; } 
.calendar .is-empty { pointer-events: none; } 
.calendar .is-empty .num { color: #E2E2EB; }
.calendar .is-empty.sat .num { color: #D3E3F4; }
.calendar .is-empty.sun .num { color: #F6E0E0; }
.calendar-section .cal-noti{position: relative; height: 178px;text-align: center; background: url(../images/bg_cal.png) 0 bottom / 100% auto no-repeat;}
.calendar-section .cal-noti .inr{background: #fff; padding: 30px 0 10px;}
/* .calendar-section .cal-noti::after{content: ''; position: absolute; bottom: -97px; left: 0; display: block; width: 100%; height: 99px; background: url(../images/bg_cal.png) 0 0 / 100% auto no-repeat;} */
.calendar-section .cal-noti p{display: inline-block; padding: 10px 40px; background: #FAFAFB; border-radius: 5px; border: 1px solid #E2E2EB; color: #424242; font-size: 18px; font-weight: 600;}

.event-panel { display: none; position: relative; width: 100%; margin-top: 80px;} 
.event-panel.is-open { display: block; } 
.event-panel.has-date { display: block; } 
.event-panel .panel-body {max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } 
.event-panel .panel-body-inner {padding: 40px; overflow: hidden; background: #fff;}
.event-panel .panel-body-after{position: relative; width: 100%; height: 192px; margin-top: -30px; background: url(../images/bg_event.png) 0 0 / 100% 100% no-repeat;}
.event-panel.is-open .panel-body { max-height: 20000px; overflow: visible;} 


.event-panel .panel-head { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; padding: 15px; font-weight: 800; font-size: 32px; cursor: pointer; user-select: none; } 
.event-panel .panel-date #event-panel-date { display: flex; align-items: center; gap: 20px; } 
.event-panel .panel-date #event-panel-date::after { content: ''; display: inline-block; width: 32px; height: 32px; transition: transform 0.4s ease; background: url(../images/panel_arrow.png) 0 0 / 100% 100% no-repeat; } 
.event-panel.is-open #event-panel-date::after { transform: rotate(180deg); } 

.event-panel .event-item { background: #F7F7F7; border: 1px solid #E2E2EB; border-radius: 10px; padding: 30px 40px; margin-bottom: 20px; } 
.event-panel .event-item:last-child { margin-bottom: 0; } 
.event-item .item-title { font-size: 23px; font-weight: 700; margin-bottom: 20px; } 
.event-item .item-info { color: #424242; } 
.event-item .item-info li { display: flex; margin-bottom: 10px; } 
.event-item .item-info li:last-of-type { margin-bottom: 0; } 
.event-item .item-info li > span { display: flex; align-items: flex-start; flex-shrink: 0; gap: 7px; color: #000; font-weight: 600; margin-right: 6px; } 
.event-item .item-info li > span::before { content: ''; display: inline-block; width: 24px; height: 24px; background: url(../images/icon_date.png) 0 0 / 100% 100% no-repeat; } 
.event-item .item-info li > span.place::before { background-image: url(../images/icon_place.png); } 
.event-item .item-info li > span.introduce::before { background-image: url(../images/icon_introduce.png); } 
.event-item .item-info .place-link { display: block; text-decoration: underline; text-underline-offset: 2px; margin-bottom: 6px; } 
.event-item .item-info .place-link:last-child { margin-bottom: 0; } 
.event-item .item-link {position: relative; display: inline-block; width: fit-content; margin-top: 20px; font-size: 14px; color: #424242; font-weight: 500;} 
.event-item .item-link::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 3px; background: url(../images/itemlink_arrow.png) 0 0 / 100% 100% no-repeat; } 
.event-item .item-link::before{content: ''; display: block; width: 100%; height: 1px; background: #424242; position: absolute; bottom: 0; left: 0;}
.event-item .item-info p { margin-bottom: 6px; }
.event-item .item-info p:last-child { margin-bottom: 0; }
.event-item .item-info li div > span{display: inline-block;}
.event-item .item-info li div > span + span{margin-top: 6px;}

.travel-guide { padding: 100px 0 40px; background: url(../images/bg_guide.png) center / cover no-repeat; /*background: url('../images/bg_guide_left.png') no-repeat left center, url('../images/bg_guide_right.png') no-repeat right center; background-size: auto 100%, auto 100%;*/} 
.travel-guide h2 { padding: 0 48px; margin: 0 auto 40px; color: #fff; background: url(../images/bg_stit2.png) 0 0 / 100% auto no-repeat;}
.eng .calendar-section h2 { padding: 0 112px; }
.eng .travel-guide h2 { padding: 0 56px; background-image: url(../images/bg_stit2_eng_pc.png); }
.travel-guide .guide-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 35px; margin: 0 auto 40px; } 
.travel-guide .guide-wrap a { display: flex; flex-direction: column; align-items: center; } 
.travel-guide .card-img {position: relative; width: 100%; height: auto; aspect-ratio: 350 / 240; margin-bottom: 25px;} 
.travel-guide .card-img img { filter: grayscale(); position: absolute; top: 0; left: 0; width: 100%; object-fit: contain;} 
.travel-guide .guide-wrap a:hover img { filter: none;}
.travel-guide .name { display: flex; justify-content: center; align-items: center; gap: 2px; text-align: center; padding: 10px 30px; font-family: 'Paperlogy', 'SUIT Variable'; font-size: 26px; font-weight: 600; background: #FFF; border: 2px solid #000; box-shadow: 0px 4px 0px #000; border-radius: 32px; } 
.travel-guide .name.type1{border-radius: 46px; line-height: 1.2;}
.travel-guide .name::after { content: ''; display: inline-block; width: 22px; height: 22px; background: url(../images/guidename_arrow.png) 0 0 / 100% auto no-repeat; } 
.travel-guide .name + .sub { display: inline-block; font-size: 22px; font-weight: 400; margin-top: 10px;} 
.travel-guide .guide-wrap a:hover .name { color: #D50D33; border-color: #D50D33; box-shadow: 0px 4px 0px #D50D33; } 
.travel-guide .guide-wrap a:hover .name::after { background-position: 0 -22px; } 
.travel-guide .guide-wrap a:hover .sub { color: #D50D33; } 
.travel-guide .pdf-btn { display: flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 24px; margin: 0 auto 100px; text-align: center; background: #4162E4; box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.25); color: #fff; font-size: 26px; font-weight: 600; border-radius: 5px; border: 2px solid #000;}
.travel-guide .pdf-btn::after{content: ''; display: inline-block; width: 22px; height: 22px; background: url(../images/caldate_next.png) 0 0 / 100% 100% no-repeat;}
.travel-guide .inquiry-banner { display: flex; align-items: center; justify-content: center; gap: 6px; background: #FF6242; color: #fff; width: fit-content; padding: 18px 80px; margin: 0 auto; border-radius: 30px; font-size: 21px; pointer-events: none; letter-spacing: -0.03em; line-height: 1.2; } 
.travel-guide .inquiry-banner::before { content: ''; display: inline-block; width: 20px; height: 20px; background: url(../images/icon_call.png) 0 0 / 100% 100% no-repeat; } 
.travel-guide .inquiry-banner span { font-weight: 700; text-decoration: underline; } 

.site-footer { text-align: center; padding: 30px 0; font-size: 16px; letter-spacing: -0.03em; color: #fff; background: #121212; } 

@media all and (max-width:1280px) and (min-width:1024px){
    .inner{padding: 0 40px;}
    .calendar tbody td{padding: 1.2% 1.6%;}
    .calendar tbody td > div{padding: 10% 0;}
    .event-panel.is-open::before{width: 150px; height: 75px; right: -60px; bottom: -35px;}
}

@media (max-width: 1023px) { 

    .inner { padding: 0 12px; } 
    .pc{display: none;}
    .mo{display: block;}
    h2{font-size: 32px;}

    .site-header{padding: 20px 16px 0;}
    .logo img{height: 17px;}
    .lang{gap: 20px;}
    .lang-btn{font-size: 14px;}
    .lang-btn.is-active{text-underline-offset: 2px;}
    .lang-btn + .lang-btn::before{height: 14px; left: -10px;}

    .visual{height: 188.89vw; padding-top: 50px; background: url(../images/bg_visual_mo.png) bottom center / cover no-repeat;}
    .visual h2{padding: 0 15px;}
    .visual h2 img{width: 100%;}

    .calendar-section{padding: 40px 0 60px; background-image: none;}
    .calendar-section h2{padding: 0 94px;}
    .calendar-section .cal-slider{width: 180px; height: 40px; gap: 15px; padding: 0 10px; margin-bottom: 35px;}
    .calendar-section .cal-nav{width: 22px; height: 22px; left: 12px;}
    .calendar-section .cal-nav.cal-next{right: 12px;}
    .calendar-section .period{font-size: 22px;}
    .calendar::before{content: ''; top: -20px; left: 50%; transform: translateX(-50%); width: 100px; height: 40px; background: url(../images/bg_tape_mo.png) 0 0 / 100% 100% no-repeat;}
    .calendar::after{display: none;}
    .calendar thead th { font-size: 16px; padding: 40px 0 10px; } 
    .calendar tbody td { padding: 2px; height: 80px; } 
    .calendar tbody td > div { padding: 10px 3px; gap: 10px; aspect-ratio: auto; border-radius: 2px; border: none !important; } 
    .calendar tbody td.is-active > div, .calendar tbody td.is-active:hover > div { border: none !important; } 
    .calendar .num { font-size: 16px; } 
    .calendar .event-tag { height: 20px; padding: 0; width: 100%; max-width: 45px; font-size: 10px; } 
    .calendar .event-tag::after { width: 8px; height: 8px; margin-left: 3px; } 
    .calendar tbody td.is-clickable:hover .event-tag::after { background-position: 0 -16px; } 
    .calendar tbody td.is-active .event-tag::after, .calendar tbody td.is-active:hover .event-tag::after { background-position: 0 -8px; } 
    .calendar-section .cal-noti{height: 116px; background-size: 100% 30px;}
    .calendar-section .cal-noti .inr{padding: 15px 10px 10px;}
    .calendar-section .cal-noti::after{height: 30px; bottom: -28px;}
    .calendar-section .cal-noti p{ width: 100%; padding: 10px 20px; font-size: 14px;}

    .event-panel{margin-top: 40px;}
    .event-panel .panel-body-after{height: 60px; margin-top: -12px;}
    .event-panel.is-open .panel-body-before{width: 68px; height: 81px; right: 20px; bottom: -25px; background: url(../images/bg_event_tape_mo.png) 0 0 /100% auto no-repeat;}
    .event-panel .panel-date #event-panel-date { gap: 15px; } 
    .event-panel .panel-head { font-size: 20px; } 
    .event-panel .panel-date #event-panel-date::after { width: 22px; height: 22px; } 
    .event-panel .panel-body-inner { padding: 20px 10px; } 
    .event-panel .event-item { padding: 20px 15px; } 
    .event-item .item-title { font-size: 20px; } 
    .event-item .item-info li{flex-direction: column;}
    .event-item .item-info li > span + div{padding-left: 31px;}
    .event-item .item-link{margin-top: 15px;}

    .eng h2{font-size: 28px;}
    .eng .calendar-section h2{padding: 0 56px;}

    .travel-guide{padding: 45px 0 40px; background: none;}
    .travel-guide h2{padding: 0 30px; margin-bottom: 30px;}
    .eng .travel-guide h2{padding: 0 11px; background-image: url(../images/bg_stit2_eng_mo.png); letter-spacing: -0.05em;}
    .eng .travel-guide .name{height: 57px; width: 100%; line-height: 1.2; letter-spacing: -0.05em;}
    .eng .travel-guide .inquiry-banner{width: 100%; padding: 0;}
    .travel-guide .guide-wrap { grid-template-columns: repeat(2, 1fr); gap: 40px 10px; margin-bottom: 30px;} 
    .travel-guide .card-img img{filter: none;}
    .travel-guide .card-img{width: 100%;}
    .travel-guide .name { padding: 5px 12px; gap: 5px; font-size: 14px; text-align: center; letter-spacing: -0.03em; border: 1px solid #D50D33; color: #D50D33; box-shadow: 0px 2px 0px #D50D33; } 
    .travel-guide .name.type1{border-radius: 30px;}
    .travel-guide .name::after { width: 14px; height: 14px; background-position: 0 -14px; flex-shrink: 0;} 
    .travel-guide .guide-wrap a:hover .name::after{background-position: 0 -14px;}
    .travel-guide .name + .sub { font-size: 14px; margin-top: 6px; color: #D50D33; letter-spacing: -0.03em;} 
    .travel-guide .pdf-btn{font-size: 18px; margin-bottom: 60px; gap: 7px;}
    .travel-guide .pdf-btn::after{width: 14px; height: 14px;}
    .travel-guide .inquiry-banner { height: 50px; padding: 0 30px; pointer-events: auto; font-size: 16px; } 
}