.bg1{height: 100%; max-height: 950px; background-image: url(/image/Event/E260202_2026_new_year/img01.jpg); overflow: hidden;}
.bg2{height: 100%; max-height: 2260px; background-image: url(/image/Event/E260202_2026_new_year/img02.jpg); overflow: hidden;}
.bg3{height: 100%; max-height: 902px; background-image: url(/image/Event/E260202_2026_new_year/img03.jpg); overflow: hidden;}
.bg4{height: 100%; max-height: 1232px; background-image: url(/image/Event/E260202_2026_new_year/img04.jpg); overflow: hidden;}

/* ▼ 공통 */
.event .inner{max-width: 810px;}

.top{text-align: center; position: relative;}
.title_img{max-width: 100%;}
.sub_top{padding: 0 11%;}
.sub_img{position: absolute; top: 0; left: 0; width: 100%;}
.sub_bg{background-color: #f5ebd8; border-radius: 15px; padding: clamp(10px, 3vw, 22px) clamp(10px, 3vw, 30px);}

.layer_desc{font-size: clamp(12px, 3vw, 18px); font-weight: bold;}
.show_layer{max-width: 100%; display: inline-block; background-color: #303030; font-size: clamp(12px, 3vw, 15px); font-weight: bold; color: #FFF; padding: 0 15px; border-radius: 5px; align-content: center; margin-left: 7px;}

.event_notice .notice_wrapper{font-size: clamp(11px, 3vw, 16px); font-weight: bold; color: #3f3f3f; line-height: clamp(12px, 3vw, 24px); letter-spacing: -1px; text-align: start;}
.done{pointer-events: none;}
.gray{filter: grayscale(1);}
/* ▲ 공통 */

/* ▼ bg1 */
.bg1 .event_date{font-size: clamp(12px, 3vw, 17px); color: #E9E9E9; position: absolute; top: 0; right: 10px;}
/* ▲ bg1 */

/* ▼ bg2 */
.bg2 .layer_desc{color: #FFF;}
.bg2 .description{padding-bottom: 6%;}
.bg2 .sub_top .cont{padding-top: 43%;}

.bg2 .words_count{display: flex; justify-content: center; gap: clamp(8px, 3vw, 23px);}
.bg2 .words_count + .words_count{padding-top: 19%;}
.bg2 .words_count li{font-family: "tohoma", sans-serif; font-size: clamp(12px, 3vw, 23px); font-weight: bold; color: #FFF; align-content: end; width: 15%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.bg2 .draw_total{padding-top: 12%; font-family: "tohoma", sans-serif; font-size: clamp(12px, 4vw, 40px); font-weight: bold; color: #d44626;}
.bg2 .draw_total span{position: relative; display: inline-block; max-width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: text-top;}
.bg2 .draw_total .ko{right: -6%;}
.bg2 .draw_total .en{right: -35%;}

.bg2 .event_btn_wrapper{display: flex; gap: 3%; justify-content: center; padding: 8% 0 3%;}
.bg2 .event_notice{padding-bottom: 10%;}

.bg2 .sub_bg_wrapper{display: flex; flex-direction: column; gap: 10px; padding-bottom: 25%;}
.bg2 .sub_bg_wrapper .sub_bg{display: flex; justify-content: space-between; align-items: center; gap: 30%;}
.bg2 .sub_bg_wrapper .sub_bg .word_list{display: grid; grid-template-columns: repeat(5, 1fr); max-width: 50%;}
/* ▲ bg2 */

/* ▼ bg3 */
.bg3 .layer_desc{color: #303030;}
.bg3 .description{padding-bottom: 3%;}
.bg3 .sub_top .cont{padding-top: 13%;}

.bg3 .sub_bg .word_list1{display: grid; grid-template-columns: repeat(4, 11%); justify-content: center;}
.bg3 .sub_bg .word_list2{display: grid; grid-template-columns: repeat(9, 1fr); justify-content: center;}
.bg3 .sub_bg .card_img{max-width: 80%;}
.bg3 .sub_bg .card_img:not(.done) label{cursor: pointer;}
.bg3 .sub_bg .card_img:not(.done) label input[name="change_card"]:checked + img{box-shadow: inset 0 0 20px 0 yellow, 0 0 20px 0 yellow;}

.bg3 .event_btn_wrapper{display: flex; gap: 3%; justify-content: center; padding: 6% 0 3%;}
.bg3 .event_notice{padding-bottom: 26%;}
/* ▲ bg3 */

/* ▼ bg4 */
.bg4 .layer_desc{color: #35698f;}
.bg4 .description{padding-bottom: 12%;}

.bg4 .gauge_color_wrapper{position: absolute; bottom: 15%; width: 100%; height: 82%; display: flex; justify-content: center; align-items: flex-end;}
.bg4 .gauge_color{background: linear-gradient(to top, #376b92, #3b94d9); width: 55px; height: 0; border-radius: 27px;}
.bg4 .gift_img{width: 12%;}
.bg4 .gift_img1{top: -5%;}
.bg4 .gift_img2{top: 21%;}
.bg4 .gift_img3{top: 47%;}
.bg4 .gift_get{animation: zoom_in_out 1s ease-in-out infinite;}

.bg4 .gauge_btn_wrapper{position: absolute; bottom: 0; display: flex; justify-content: center; width: 100%;}
.bg4 .gauge_btn{width: 50%;}

.bg4 .event_notice{padding: 4% 0 33%;}
.bg4 .event_notice .notice_wrapper{text-align: center;}
/* ▲ bg4 */

/* ▼ 꼭 알아두세요 */
.notice{background-color: #152f41;}
.notice .inner{padding: 35px 20px 60px;}
.notice_title{font-size: 25px; font-weight: bold; color: #D4D4D4; margin-bottom: 25px;}
.notice_list{font-size: 15px; color: #D4D4D4;}
/* ▲ 꼭 알아두세요 */

/* ▼ 레이어 */
.layer .inner .title{height: 80px; background-color: #FFF !important; padding: 0 15vw; color: #303030; border: 5px solid #303030; border-bottom-width: 0;}
.layer .inner .title .title_wrapper{display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; height: 80px;}
.layer .inner .title .close{top: 5px; right: 18px;}
.layer .inner .title .close:after{font-size: 16px;}

.layer .inner .cont{border: 5px solid #303030; border-top-width: 0; border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; padding-top: 0;}
.layer .inner .cont ul{padding: 30px; display: flex; flex-direction: column; gap: 12px; background-color: #EFEFEF; border-radius: 20px; -webkit-border-radius: 20px;}
.layer .inner .cont ul li{display: flex; gap: 5px; font-size: 19px; font-weight: bold; color: #303030;}
.layer .inner .cont ul li .step{color: #fc584c; min-width: 75px;}

.layer .inner .cont .close_wrapper{width: 100%; text-align: center; margin: 30px 0 10px;}
.layer .inner .cont .close_wrapper .close_btn{width: 158px; height: 50px; line-height: 47px; background-color: #303030; font-size: 18px; font-weight: bold; color: #fff;}

.layer .inner .cont table{width: 100%; border-collapse: separate; border-spacing: 0 10px;}
.layer .inner .cont table tr{background-color: #EFEFEF; border-radius: 10px;}
.layer .inner .cont table .table_header{background-color: #e5e5e5;}
.layer .inner .cont table .no_list{background-color: #FFFFFF;}
.layer .inner .cont table tr th, .layer .inner .cont table tr td{text-align: center; color: #303030; padding: 1vh; font-size: 16px; align-content: center;}
.layer .inner .cont table tr th:first-child, .layer .inner .cont table tr td:first-child{border-radius: 10px 0 0 10px;}
.layer .inner .cont table tr th:last-child, .layer .inner .cont table tr td:last-child{border-radius: 0 10px 10px 0;}

#letter_history_layer .inner .cont table tr td:nth-child(2){color: #fc584c; font-weight: bold;}
#exchange_history_layer .inner .cont table tr td:nth-child(2), #exchange_history_layer .inner .cont table tr td:nth-child(3){color: #fc584c; font-weight: bold;}

.layer .inner .cont .prev_next{width: 100%; margin: 20px 0 10px; display: flex; gap: 15px; justify-content: center;}
.layer .inner .cont .prev_next a{font-size: 16px; color: #7a7a7a; font-weight: bold;}
.layer .inner .cont .prev_next a:not(.done){color: #303030;}

.layer .inner .cont .lucky_letter{padding-top: 20px;}
/* ▲ 레이어 */

/* ▼ 레이어 카드 */
.card_0{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_0.png) no-repeat center; overflow: hidden;}
.card_2{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_2.png) no-repeat center; overflow: hidden;}
.card_6{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_6.png) no-repeat center; overflow: hidden;}
.card_a{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_a.png) no-repeat center; overflow: hidden;}
.card_e{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_e.png) no-repeat center; overflow: hidden;}
.card_i{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_i.png) no-repeat center; overflow: hidden;}
.card_m{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_m.png) no-repeat center; overflow: hidden;}
.card_n{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_n.png) no-repeat center; overflow: hidden;}
.card_t{height: 150px; background: url(/image/Event/E260202_2026_new_year/img_pop_card_t.png) no-repeat center; overflow: hidden;}
/* ▲ 레이어 카드 */

@keyframes zoom_in_out {
    0% {transform: scale(1);}
    50% {transform: scale(0.9);}
    100% {transform: scale(1);}
}

@media (max-width: 767px) {
    .bg2 .words_count + .words_count{padding-top: 18%;}
    .bg2 .draw_total{padding-top: 13%;}
    .bg2 .sub_bg_wrapper .sub_bg{gap: 40%;}
    .bg4 .gauge_color{width: clamp(22px, 7vw, 55px);}
}

@media (max-width: 576px) {
    .bg2 .sub_bg_wrapper .sub_bg{gap: 50%;}
}

@media (max-width: 390px) {
    .bg2 .sub_top .cont{padding-top: 42%;}
    .bg2 .draw_total{padding-top: 14%;}
}