/* ▼ 배경 */
.bg_header{height: 100%; max-height: 741px; background-image: url(/image/Event/E260413_songkran/bg01.png); background-repeat: no-repeat; overflow: hidden;}
.bg1{height: 100%; max-height: 1300px; background-image: url(/image/Event/E260413_songkran/bg02.png); background-repeat: no-repeat; overflow: hidden;}
.bg2{height: 100%; max-height: 1171px; background-image: url(/image/Event/E260413_songkran/bg03.png); background-repeat: no-repeat; overflow: hidden;}
.bg3{height: 100%; max-height: 1238px; background-image: url(/image/Event/E260413_songkran/bg04.png); background-repeat: no-repeat; overflow: hidden;}
/* ▲ 배경 */

/* ▼ 공통 */
.event .inner{max-width: 1000px; width: 100%; margin: 0 auto;}
.title_img{max-width: 100%;}
.flex_center{display: flex; justify-content: center; align-items: center;}
.e_btn_wrap{width: 100%; padding: 2% 0; display: flex; justify-content: center; align-items: center; position: relative;}

/* e_btn_wrap 버튼 a 태그 — max-width를 a 태그에 적용, img는 width:100% */
#show_layer01, #show_layer02, #show_layer03{display: block; width: 100%; max-width: 403px;}
#btn_history01{display: block; width: 100%; max-width: 570px;}
#main_btn03{display: block; width: 100%; max-width: 585px;}
#btn_gamecash{display: block; width: 100%; max-width: 585px;}

#show_layer01 img, #show_layer02 img, #show_layer03 img,
#btn_history01 img,
#main_btn03 img,
#btn_gamecash img{display: block; width: 100%;}
.event_notice .notice_wrapper{font-size: clamp(14px, 3vw, 16px); font-weight: bold; color: #fff; line-height: clamp(20px, 3vw, 24px); letter-spacing: -1px; text-align: center;}
/* ▲ 공통 */

/* ▼ bg_header */
.bg_header .inner{position: relative; padding-top: 3%; padding-bottom: 5%;}
.bg_header .event_date{font-size: clamp(12px, 3vw, 17px); color: #fff; position: absolute; top: 0; right: 10px;}
/* ▲ bg_header */

/* ▼ bg1 */
.bg1 .inner{padding-top: 2%; padding-bottom: 8%;}
.bg1 .inner:first-child{padding-bottom: 0;}
.bg1 .inner:last-child{padding-top: 0;}

.balloon_line{width: 100%; display: block; margin-bottom: -5%; position: relative; z-index: 1;}
.balloon_area{gap: clamp(6px, 2vw, 20px); flex-wrap: nowrap; padding: 0 0 3%; position: relative; z-index: 2;}

.balloon_item{width: 18%; cursor: pointer; transition: transform 0.15s; transform-origin: top center;}
.balloon_item:nth-child(1){margin-top: -1%;}
.balloon_item:nth-child(2){margin-top: 2%;}
.balloon_item:nth-child(3){margin-top: 4%;}
.balloon_item.popped{pointer-events: none;}

/* 터트릴 기회 컨테이너 */
.chance_wrap > div{position:relative;}
.chance_wrap img{width: 100%; max-width: 827px;}
.chance_wrap .chance{color: #FFF000; font-size: clamp(30px, 9vw, 60px); position: absolute; right: 30%; top: -15%; font-weight: bold;text-align: right;}

@media(min-width:400px){
    .chance_wrap .chance{top:-15%;}
}

@media(min-width:680px){
    .chance_wrap .chance{top:-10%;}
}

@media(min-width:740px){
    .chance_wrap .chance{top:-5%;}
}

@media (min-width: 800px){
    .chance_wrap .chance{top: 0;}
}

@media (min-width: 1000px) {
    .chance_wrap .chance{right:250px;}
}

.bg1 .event_notice{padding: 8% 0 0;}
/* ▲ bg1 */

/* ▼ bg2 */
.bg2 .inner{padding-top: 2%; padding-bottom: 8%;}
.elephant_wrap{padding: 0 0 7%;}
.elephant_wrap img{width: 100%; max-width: 715px;}
.bg2 .event_notice{padding-bottom: 8%;}
/* ▲ bg2 */

/* ▼ bg3 */
.bg3 .inner{padding-top: 2%; padding-bottom: 8%;}

.gift_wrap{align-items: flex-end;position:relative;}
.gift_wrap .prize_img{width: 100%; max-width: 1046px;}
.gift_item{position: absolute; top: 0; bottom: 0; width: 33.33%; cursor: pointer; z-index: 2;}
.gift_item[data-threshold="3000"]{left: 0;}
.gift_item[data-threshold="6000"]{left: 33.33%;}
.gift_item[data-threshold="10000"]{left: 66.66%;}
.gift_item.claimed{pointer-events: none; opacity: 0.5;}
.gift_img_wrap{position: relative; display: inline-block; width: 100%;}
.gift_img_wrap .title_img{display: block; margin: 0 auto;}
.gift_img_wrap.active{filter: drop-shadow(0 0 8px rgba(255,220,0,0.85));}
.gift_mileage_badge{position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: clamp(10px, 2.2vw, 15px); font-weight: bold; color: #fff; background-color: rgba(0,0,0,0.6); border-radius: 20px; padding: 2px 10px; white-space: nowrap;}
.gift_sold_out{position: absolute;width: 18%;max-width: 142px;right: 5%;top: 10%;}
.gift_label{font-size: clamp(10px, 2.5vw, 14px); font-weight: bold; color: #fff; margin-top: 8px; line-height: 1.4;}

@media(min-width:700px){
    .gift_sold_out{top:13%;right:6%;}
}

@media(min-width:900px){
    .gift_sold_out{top:15%;right:7%;}
}
@media(min-width:1000px){
    .gift_sold_out{top:50px;right:68px;}
}

.payment_info{padding: 3% 0 0;}
.payment_amount{font-size: clamp(14px, 3vw, 20px); font-weight: bold; color: #fff; background-color: rgba(0,0,0,0.35); border-radius: 25px; padding: 8px 24px;}
.bg3 .event_notice{padding: 3% 0;}
.bg3 .e_btn_wrap{padding: 2% 0 8%;}
/* ▲ bg3 */

/* ▼ 꼭 알아두세요 */
.notice{background-color: #0d3050;}
.notice .inner{padding: 35px 20px 60px;}
.notice_title{font-size: clamp(18px, 4vw, 25px); font-weight: bold; color: #D4D4D4; margin-bottom: 25px;}
.notice_list{font-size: clamp(12px, 3vw, 15px); color: #D4D4D4; line-height: 1.8;}
/* ▲ 꼭 알아두세요 */

/* ▼ 레이어 */
.layer .inner{background:initial;max-width:1075px;}

/* 참여방법(1/2/3) + 당첨/미당첨 : 타이틀이 이미지에 포함되어 있어 title 영역 숨김 */
#event01_layer .inner .title,
#event02_layer .inner .title,
#event03_layer .inner .title,
#balloon_win_layer .inner .title,
#balloon_lose_layer .inner .title{display: none;}

/* 참여 내역 : 타이틀 HTML로 표시 */
#history_layer .inner .title{height: auto !important; background-color: transparent !important; padding: 20px 20px 10px; border: none !important;}
#history_layer .inner .title .title_wrapper{display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 4vw, 24px); font-weight: bold; height: auto; color: #1a6dbf;}
#history_layer .inner .title .close{top: 14px; right: 16px;}
#history_layer .inner .title .close:after{font-size: 18px; color: #aaa;}

/* cont 공통 */
.layer .inner .cont{border: none !important; border-radius: 0 !important; -webkit-border-radius: 0 !important; padding: 0 0 20px;}

/* 참여방법(1/2/3) + 당첨/미당첨 : 확인 버튼을 이미지 위에 절대 위치로 올림 */
#event01_layer .inner .cont,
#event02_layer .inner .cont,
#event03_layer .inner .cont,
#balloon_win_layer .inner .cont,
#balloon_lose_layer .inner .cont{position: relative; padding: 0;}

#event01_layer .inner .cont .close_wrapper,
#event02_layer .inner .cont .close_wrapper{position: absolute; bottom: 10%; left: 0; right: 0; margin: 0;}

#balloon_win_layer .inner .cont .close_wrapper,
#balloon_lose_layer .inner .cont .close_wrapper{position: absolute; bottom: 9%; left: 0; right: 0; margin: 0;}

#event03_layer .inner .cont .close_wrapper{position: absolute; bottom: 7%; left: 0; right: 0; margin: 0;}

/* 참여 내역 cont */
#history_layer .inner .cont{position: relative; padding: 0;}
.layer .inner .cont .cont_box{position: absolute; top: 17%; bottom: 28%; left: 10%; width: 80%; box-sizing: border-box;}
#history_layer .inner .cont .paging_wrap{position: absolute; bottom: 17%; margin: 0;}
#history_layer .inner .cont .close_wrapper{bottom: 6%;}

/* 당첨 금액 텍스트 */
.popup_msg{font-size: clamp(14px, 3.5vw, 36px); font-weight: bold; color: #303030; text-align: center; padding: 12px 20px 6px; position:absolute; top:60%; left:50%; transform: translateX(-50%); width:100%;}
@media(min-width:400px){
    .popup_msg{top:63%}
}
@media(min-width:700px){
    .popup_msg{top:65%}
}

/* 확인 버튼 */
.layer .inner .cont .close_wrapper{position:absolute;bottom:8%;width: 100%; text-align: center; margin: 12px 0 0;}
.layer .inner .cont .close_wrapper .close_btn{display: block; width: 100%; max-width: 366px; margin: 0 auto;}
.layer .inner .cont .close_wrapper .close_btn img{display: block; width: 100%;}

/* 테이블 */
.layer .inner .cont table{width: 100%; border-collapse: separate; border-spacing: 0;}
.layer .inner .cont table tr:not(.no_list) td{border-bottom: 1px solid #a0c8f1;}
.layer .inner .cont table tr:not(.no_list):last-child td{border-bottom: none;}
.layer .inner .cont table tr.no_list td{padding: 6% !important;}
.layer .inner .cont table tr th, .layer .inner .cont table tr td{text-align: center; color: #2e2e2e; padding: 8px; font-size: clamp(12px, 3vw, 15px); align-content: center;}
.layer .inner .cont table tr th:first-child{border-radius: 8px 0 0 8px;}
.layer .inner .cont table tr th:last-child{border-radius: 0 8px 8px 0;}
.layer .inner .cont table thead tr{background-color: #e5f2ff; border-radius: 10px;}
.layer .inner .cont table thead tr th:first-child{border-radius: 10px 0 0 10px;}
.layer .inner .cont table thead tr th:last-child{border-radius: 0 10px 10px 0;}

/* 페이징 */
.layer .inner .cont .paging_wrap{position:absolute;bottom:10%;width: 100%; margin: 10px 0 8px; display: flex; gap: 15px; justify-content: center;}
.layer .inner .cont .paging_wrap a{font-size: clamp(13px, 3vw, 20px); color: #7a7a7a; font-weight: bold;}
.layer .inner .cont .paging_wrap a:not(.done){color: #303030;}
/* ▲ 레이어 */
@media(min-width:700px){
    #history_layer .inner .cont table tr th{font-size: 24px;}
    #history_layer .inner .cont table tr td{font-size: 18px;}
}
@media(min-width:900px){
    #history_layer .inner .cont table tr th{font-size: 28px;}
    #history_layer .inner .cont table tr td{font-size: 24px;}
}
@media (max-width: 1000px) {
    .layer .inner .cont .close_wrapper .close_btn{width: 30%;}
}

@media(min-width:1000px){
    .balloon_line{margin-bottom:-50px;}
    #history_layer .inner .cont .paging_wrap{bottom: 21%;}
    #history_layer .inner .cont .paging_wrap a{font-size: 24px;}
}

@media (max-width: 800px) {
    #show_layer01, #show_layer02, #show_layer03{width: 65%;}
    #btn_history01, #main_btn03, #btn_gamecash{width: 90%;}
    #show_layer01 img, #show_layer02 img, #show_layer03 img,
    #btn_history01 img, #main_btn03 img, #btn_gamecash img{width: 100%;}
}

@media (max-width: 767px) {
    .balloon_item{width: 17%;}
}

@media (max-width: 480px) {
    .balloon_area{padding: 0 0 3%;}
    .layer .inner .cont ul{padding: 20px;}
    .layer .inner .cont ul li .step{min-width: 60px;}
}

@media (max-width: 560px) {
    #history_layer .inner .cont table tr th,
    #history_layer .inner .cont table tr td{padding: 4px 6px;}
}

@media (min-width: 560px) {
    #history_layer .inner .cont table tr th,
    #history_layer .inner .cont table tr td{padding: 2%;}
}

@media (max-width: 380px) {
    #history_layer .inner .cont table tr th,
    #history_layer .inner .cont table tr td{padding: 2px 6px;}
}

@media (max-width: 575.98px) {
    .layer{background-color: rgba(0, 0, 0, .7);}
    .layer .inner{top: 50%; transform: translateY(-50%);}
}