main .container { width:100%; max-width:1280px; place-self:center; margin-bottom:100px; }

.section-title { margin-top:100px; display:flex; flex-direction:column; align-items:center; }
.section-title h2 { font-size:30px; }
.section-title p { font-size:16px; }

.stay-detail-wrap { display:flex; margin-top:40px; gap:20px; }
.stay-detail { flex:1; position: relative; display:grid; gap:10px; }
.stay-detail::after { content: ''; position: absolute; top: 0; right:-10px; width: 1px; height: 100%; background: #ccc; }
.stay-detail .img-wrap { max-width:600px; }
.stay-detail .img-wrap img { width:100%; }

.stay-reserve { position:relative; width:440px; }
.stay-reserve-contianer { position:sticky; top:80px; display:grid; gap:20px; }

.stay-calendar { position:relative; flex:1; height:100%; display:flex; flex-direction:column; }
.stay-calendar > .calendar-header { display:flex; align-items:center; gap:20px; }
.stay-calendar > .calendar-header > .calendar-center { flex:1; font-size:20px; display:flex; justify-content:center; align-items:center; gap:10px; }
.stay-calendar > .calendar-header > .calendar-center > .month { margin-right:20px; }
.stay-calendar > .calendar-header > div > button { position:relative; padding:5px 15px; border-radius:5px; border: 1px solid #ccc; }
.stay-calendar > .calendar-header > div > button > span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

.stay-calendar > .calendar-days { height:40px; margin-top:20px; display:flex; justify-content:center; align-items:center; border: 1px solid #ccc; }
.stay-calendar > .calendar-days > div { flex:1; display:flex; justify-content:center; align-items:center; }


.stay-calendar > .calendar-content { display:grid; }
.stay-calendar > .calendar-content > .list { height:50px; display:flex; justify-content:center; align-items:center; border-bottom: 1px solid #ccc; }
.stay-calendar > .calendar-content > .list > .item { flex:1; position:relative; height:100%; user-select: none; color:#ccc; background:#f6f6f6; }
.stay-calendar > .calendar-content > .list > .item:not(:last-child) { border-right: 1px dashed #ccc; }
.stay-calendar > .calendar-content > .list > .item:first-child { color:#ff5757; }
.stay-calendar > .calendar-content > .list > .item:last-child { color:#6464ff; }
.stay-calendar > .calendar-content > .list > .item.next_day {  }
.stay-calendar > .calendar-content > .list > .item.prev_day {  }
.stay-calendar > .calendar-content > .list > .item.underdate {  }
.stay-calendar > .calendar-content > .list > .item.possible { color:#000; background:#fff; cursor:pointer; }

.stay-calendar > .calendar-content > .list > .item > span { position:absolute; right:5px; top:5px; width:25px; height:25px; z-index:2; display:flex; justify-content:center; align-items:center; pointer-events: none; } 
.stay-calendar > .calendar-content > .list > .item.today {  }
.stay-calendar > .calendar-content > .list > .item.today:after { content:""; position:absolute; width:25px; height:25px; border-radius:50%; background:#7d7dff; right:5px; top:5px; pointer-events: none; }
.stay-calendar > .calendar-content > .list > .item:has(.holiday-name) { color:#ff5757; }
.stay-calendar > .calendar-content > .list > .item.on { background:#ff6600; color:#fff; }

.calendar-icon { position:absolute; width:100%; text-align:center; font-size:11px; bottom:5px; left:50%; transform:translateX(-50%); }

.stay-reserve-btn { width:100%; height:50px; background:#222; color:#fff; }

#course-list { display:flex; flex-wrap:wrap; gap:10px; }
#course-list > .item { position:relative; display:grid; gap:5px; }
#course-list > .item .image { position:relative; width:300px; height:200px; background:#eee; }
#course-list > .item .image img { position:absolute; width:100%; height:100%; object-fit: cover; }
#course-list > .item > button { position:absolute; right:10px; top:12px; font-size:10px; color:#fff; background:rgba(0, 0, 0, 0.8); border-radius:5px; padding:2px 5px;}
#course-list input { width:250px; height:30px; }
#course-list .inputFile2 { cursor:pointer; }


@media screen  and  (max-width : 1280px) {
	main > .container { padding:20px; }
}

@media screen  and  (max-width : 1024px) {
	main > .container { padding:20px; }
	.stay-detail-wrap { display:grid; }
	.stay-reserve { position:relative; width:100%; }
}