@charset "utf-8";

/* 메인 공통 */
.section {margin-bottom: 10rem;}
.section h2 {margin-bottom: 5rem; padding: 1.5rem 0 1.5rem 10rem; background-position: left center; background-repeat: no-repeat;}
.section h2 > span {display: block; margin-bottom: 1.2rem; color: #6000c2;}
.section h2 > strong {display: block; font-size: 2.5rem; font-weight: 600;}
.section .item_list .title {display: block; color: #242424; font-size: 2.4rem;}
.section .item_list .desc {color: #252525;}
.section .item_list .date {color: #656565;}
.section:has(.more_btn) .inner {position: relative;}
.section .more_btn {position: absolute; right: 2rem; top: 3rem; padding: 0.8rem 2.5rem; background-color: #fff; border: 1px solid #dbdbdb; border-radius: 5rem;}
.section .more_btn > span {display: inline-block; padding-right: 3rem; background-image: url("../img/icon/more_arr.png"); background-size: 0.7rem; background-position: right center; background-repeat: no-repeat;}

/* 메인 비주얼 */
.sc_visual {position: relative; height: 120rem; background-image: url("../img/main/main_visual.png"); background-position: center; background-size: cover; background-repeat: no-repeat;}
.sc_visual .inner {position: relative; z-index: 2;}
.sc_visual .visual_title {position: absolute; left: 50%; top: 24rem; transform: translateX(-50%); width: 100%; padding: 3rem; text-align: center; background: url("../img/main/main_visual_star.png") top center no-repeat;}
.sc_visual .visual_title h2 {position: relative; display: inline-block; margin-bottom: 2rem; padding-left: 17.5rem; font-size: 6rem; font-weight: normal; color: #fff; font-family: 'JalnanGothic';}
.sc_visual .visual_title .left {position: absolute; left: 0; top: 1.5rem;}
.sc_visual .visual_title .right {text-align: left;}
.sc_visual .visual_title .color_txt {color: #e9c7ff; font-size: 10.7rem;}
.sc_visual .visual_title .color_txt.gradient {background: linear-gradient(to bottom, #b477ff 10%, #e9c7ff); background-clip: text; -webkit-background-clip: text; color: transparent;}
.sc_visual .visual_title > p {color: #fff; font-size: 3.8rem; text-align: center;}
.sc_visual .item_list {position: absolute; top: 70rem; left: 50%; transform: translateX(-50%); width: 100%; display: flex; justify-content: center; gap: 2rem 4rem; flex-wrap: wrap;}
.sc_visual .item_list > li {display: inline-block; height: 10rem; line-height: 10rem; border: 1px solid #a85dfe; border-radius: 5rem;}
.sc_visual .item_list > li > a {display: block; width: 100%; height: 100%; padding: 0 6rem;}
.sc_visual .item_list > li > a > span {display: inline-block; padding-left: 7rem; font-size: 2.8rem; color: #fff; font-weight: 500; background-position: left center; background-repeat: no-repeat;}
.sc_visual .item_list .program {background-image: url("../img/main/icon_program.png");}
.sc_visual .item_list .store {background-image: url("../img/main/icon_store.png");}

/* 메인 비주얼 - 별똥별 애니메이션*/
.shooting_star {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden;}
.shooting_star .star {position: absolute; width: 4px; height: 4px; background: #CEC8F6; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1); animation: Twinkle 6s linear infinite; opacity: 0.7;}
.shooting_star .star::before{content:''; position: absolute; top: 50%; transform: translateY(-50%); width: 100px; height: 1px; background: linear-gradient(90deg,#D3BFFF,transparent);}
.shooting_star .star:nth-child(1){top: 0; right: 0; animation-delay: 0s; animation-duration: 2.5s;}
.shooting_star .star:nth-child(2){top: 0; right: 80px; animation-delay: 0.4s; animation-duration: 6s;}
.shooting_star .star:nth-child(3){top: 80px; right: 0px; animation-delay: 0.8s; animation-duration: 4s;}
.shooting_star .star:nth-child(4){top: 0; right: 300px; animation-delay: 1.2s; animation-duration: 3s;}
.shooting_star .star:nth-child(5){top: 0; right: 600px; animation-delay: 1.6s;  animation-duration: 5s;}
.shooting_star .star:nth-child(6){top: 0; right: 800px; animation-delay: 1.6s; animation-duration: 8s;}

@keyframes Twinkle {
    0% {transform: rotate(300deg) translateX(0); opacity: 0.7;}
    70% {opacity: 0.7;}
    100% {transform: rotate(300deg) translateX(-1000px); opacity: 0;}
}

/* 오늘의 밤마실 */
.sc_today h2 {background-image: url("../img/main/iconTitle_cal.png"); background-size: 8.4rem;}
.sc_today .inner {overflow: hidden;}
.sc_today .swiper {overflow: visible;}
.sc_today .item_list {padding-bottom: 8rem;}
.sc_today .item_list > li {background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}
.sc_today .item_list > li:nth-child(even) {transform: translateY(6rem);}
.sc_today .item_list > li > a {position: relative; display: block; width: 100%; height: 100%; padding: 2rem;}
.sc_today .item_list .thumb {position: relative; width: 100%; height: 0; padding-top: 63.954%; margin-bottom: 3.5rem; background-color: #ddd; overflow: hidden;}
.sc_today .item_list .thumb::before {content: ''; opacity: 0; position: absolute; right: 10rem; bottom: 3rem; display: block; width: 6.5rem; height: 6.5rem; background-color: var(--primary-color); background-image: url("../img/icon/hover_arr.png"); background-size: 4rem; background-position: center; background-repeat: no-repeat; border-radius: 50%; box-shadow: 0 0 30px rgb(48 0 195 / 50%); transition: all 0.5s ease-in-out; z-index: 1;}
.sc_today .item_list .thumb img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease-in-out;}
.sc_today .item_list .info {padding: 0 1.2rem;}
.sc_today .item_list .title {height: 5.5rem; margin-bottom: 3.8rem;}
.sc_today .item_list .desc {margin-bottom: 1rem; padding-left: 2.5rem; background-position: left top 0.3rem; background-size: 1.6rem; background-repeat: no-repeat; line-height: 1.5;}
.sc_today .item_list .map {background-image: url("../img/main/icon_map.png");}
.sc_today .item_list .cal {background-image: url("../img/main/icon_cal.png");}

/* 밤마실 혜택 음식점 */
.sc_store {position: relative;}
.sc_store::before {position: absolute; left: 0; top: -15rem; width: 100%; height: 45rem; background: #f2f2ff; opacity: 0.75; filter: blur(80px); content: '';}
.sc_store h2 {background-image: url("../img/main/iconTitle_store.png"); background-size: 9.5rem;}
.sc_store .store_slide {position: relative; padding: 0 6rem;}
.sc_store .item_list > li {padding: 2px;}
.sc_store .item_list > li > a {display: block; width: 100%; height: 100%; background-color: #fff; overflow: hidden; outline: 1px solid #dbdbdb; border-radius: 3rem; transition: all 0.3s ease-in-out;}

.sc_store .item_list .thumb {position: relative; width: 100%; height: 0; padding-top: 66.67%; background-color: #ddd; overflow: hidden;}
.sc_store .item_list .thumb img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease-in-out;}
.sc_store .item_list .info {padding: 3rem 4rem;}
.sc_store .item_list .title {margin-bottom: 1.5rem;}
.sc_store .item_list .benefit {max-width: 32rem; margin: 4rem auto 0; padding: 1rem; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 5rem; font-size: 2rem; text-align: center; transition: all 0.4s ease-in-out;}
.sc_store .item_list .benefit .icon {display: inline-block; padding-left: 2rem; background-image: url("../img/main/icon_check.png"); background-size: 1.5rem; background-position: left top 0.5rem; background-repeat: no-repeat; transition: all 0.4s ease-in-out;}
.sc_store .slide_controls {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 3rem; z-index: 1;}
.sc_store .slide_btn {position: absolute; display: block; width: 6rem; height: 3rem; background-size: 5.9rem; background-position: center; background-repeat: no-repeat;}
.sc_store .slide_btn.prev {left: -2rem; background-image: url("../img/main/slide_prev.png");}
.sc_store .slide_btn.next {right: -2rem; background-image: url("../img/main/slide_next.png");}
.sc_store .slide_btn.swiper-button-disabled {opacity: 0.6;}

/* 공지사항 */
.sc_notice h2 {width: 24rem; background-image: url("../img/main/iconTitle_notice.png"); background-size: 9rem;}
.sc_notice .inner {position: relative; display: flex; align-items: start; gap: 2rem 6rem; flex-wrap: wrap;}
.sc_notice .item_list {width: calc(100% - 30rem);}
.sc_notice .item_list > li + li {margin-top: 2.5rem;}
.sc_notice .item_list > li > a {display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 3rem; border: 1px solid #dbdbdb; border-radius: 1.5rem; transition: all 0.4s ease-in-out;}
.sc_notice .item_list .title {width: calc(100% - 12rem); padding: 1.5rem 0 1.5rem 5rem; font-weight: 500; background-image: url("../img/main/icon_notice.png"); background-position: left top 1.5rem; background-size: 2.6rem; background-repeat: no-repeat;}
.sc_notice .more_btn {position: absolute; left: 11rem; top: 10rem; right: auto;}

/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/

/* Only PC */
@media all and (min-width:1280px){
    .sc_visual .item_list > li:hover {background-color: #fff; transition: all 0.5s ease-in-out;}
    .sc_visual .item_list > li:hover > a > span {color: #B760EF; transition: all 0.5s ease-in-out;}

    .sc_today .item_list > li > a:hover .thumb img {transform: scale(1.1); opacity: 0.6;}
    .sc_today .item_list > li > a:hover .thumb::before {opacity: 1; right: 3rem;}

    .sc_store .item_list > li > a:hover {outline-color: var(--primary-color); outline-width: 2px;}
    .sc_store .item_list > li > a:hover .thumb img {transform: scale(1.1);}
    .sc_store .item_list > li > a:hover .title {color: var(--primary-color);}
    .sc_store .item_list > li > a:hover .benefit {background-color: var(--primary-color); color: #fff;}
    .sc_store .item_list > li > a:hover .benefit .icon {color: #f6ff02; background-image: url("../img/main/icon_check_on.png");}

    .sc_notice .item_list > li > a:hover {border-color: var(--primary-color); background-color: #f8f8ff;}
}

/* Laptop */
@media all and (max-width:1280px){
    /* 오늘의 밤마실 */
    .sc_today .item_list .thumb {margin-bottom: 2rem;}
    .sc_today .item_list .info {padding: 0;}
    .sc_today .item_list .title {margin-bottom: 2rem;}

    /* 밤마실 혜택 음식점 */
    .sc_store .item_list .info {padding: 2rem;}
    .sc_store .slide_btn.prev {left: -1rem;}
    .sc_store .slide_btn.next {right: -1rem;}
}

/* Tablet */ 
@media all and (max-width:1024px){
    /* 메인 공통 */
    .section h2 {margin-bottom: 2.5rem; padding: 0.5rem 0 0.5rem 8rem; background-size: 6rem;}
    .section h2 > strong {font-size: 2.2rem;}
    .section h2 > span {margin-bottom: 0.8rem;}
    .section .item_list .title {font-size: 2rem;}
    
    /* 메인 비주얼 */
    .sc_visual {height: 80rem; margin-bottom: 5rem;}
    .sc_visual .visual_title {top: 8rem;}
    .sc_visual .visual_title h2 {padding-left: 12rem; font-size: 4rem;}
    .sc_visual .visual_title .left {top: 0.8rem;}
    .sc_visual .visual_title .color_txt {font-size: 8rem;}
    .sc_visual .visual_title > p {font-size: 2.4rem;}
    .sc_visual .item_list {top: 45rem; gap: 2rem;}
    .sc_visual .item_list > li {height: 8rem; line-height: 8rem;}
    .sc_visual .item_list > li > a {padding: 0 4rem;}
    .sc_visual .item_list > li > a > span {padding-left: 5rem; font-size: 2rem; background-size: 3.5rem;}

    /* 오늘의 밤마실 */
    .sc_today .item_list {padding-bottom: 2rem;}
    .sc_today .item_list > li:nth-child(even) {transform: none;}
    .sc_today .item_list .title {height: 5rem;}

    /* 밤마실 혜택 음식점 */
    .sc_store h2 {background-size: 6.8rem;}
    .sc_store .item_list .benefit {font-size: 1.7rem;}
    .sc_store .item_list .benefit .icon {background-position: left top 0.2rem;}
    .sc_store .store_slide {padding: 0;}
    .sc_store .slide_controls {display: none;}

    /* 공지사항 */
    .sc_notice .inner {gap: 0 2rem;}
    .sc_notice .item_list > li > a {padding: 1rem 2rem;}
    .sc_notice .item_list {width: calc(100% - 26rem);}
    .sc_notice .more_btn {left: 9rem;}
}

/* Mobile */
@media all and (max-width:780px){
    /* 메인 공통 */
    .section {margin-bottom: 6rem;}

    /* 메인 비주얼 */
    .sc_visual {height: 45rem; margin-bottom: 4rem;}
    .sc_visual .visual_title {top: 5rem; padding: 1rem; background-image: none;}
    .sc_visual .visual_title h2 {padding-left: 7rem; font-size: 2.6rem;}
    .sc_visual .visual_title .color_txt {font-size: 4rem;}
    .sc_visual .visual_title > p {font-size: 1.8rem;}
    .sc_visual .item_list {top: 25rem;}
    .sc_visual .item_list > li {height: 5rem; line-height: 5rem;}
    .sc_visual .item_list > li > a {padding: 0 2rem;}
    .sc_visual .item_list > li > a > span {padding-left: 3rem; font-size: 1.6rem; background-size: 2rem;}
    
    /* 공지사항 */
    .sc_notice {margin-bottom: 0;}
    .sc_notice h2 {width: 100%;}
    .sc_notice .item_list {width: 100%;}
    .sc_notice .item_list > li + li {margin-top: 1.5rem;}
    .sc_notice .item_list > li > a {padding: 1rem 1.2rem;}
    .sc_notice .item_list .title {padding: 1rem 0 1rem 3rem; background-position: left top 1rem; background-size: 2rem;}
    .sc_notice .more_btn {left: auto; top: 3rem; right: 2rem;}
}

@media all and (max-width:480px){
    /* 메인 공통 */
    .section h2 {padding: 0.5rem 0 0.5rem 6rem; background-size: 5rem;}
    .section h2 > strong {font-size: 2rem;}
    .section .item_list .desc {font-size: 1.5rem;}
    .section .item_list .date {font-size: 1.4rem;}
    .section .more_btn {padding: 0.6rem 1.5rem; font-size: 1.5rem;}
    .section .more_btn > span {padding-right: 2rem;}

    /* 오늘의 밤마실 */
    .sc_today .item_list li {opacity: 0.5;}
    .sc_today .item_list .swiper-slide-active {opacity: 1;}

    /* 밤마실 혜택 음식점 */
    .sc_store .inner {overflow: hidden;}
    .sc_store .store_slide .swiper {overflow: visible;}
    .sc_store .item_list .benefit {margin: 2.5rem auto 0; font-size: 1.5rem;}
    .sc_store .item_list li {opacity: 0.5;}
    .sc_store .item_list .swiper-slide-active {opacity: 1;}
    .sc_store .item_list > li > a {border-radius: 2rem;}
}