/* 상단 배너 : S */
.top_banner_area {
    width: 100%;
    aspect-ratio: 2560/766;
    padding: 0 40px;
    background: url('/_skin/pass_sidae_renew/event/top_banner_bg.png') center top no-repeat;
}

.top_banner_area .top_banner_wrap {
    max-width: 1656px;
    width: 100%;
    aspect-ratio: 1656/724;
    margin: 0 auto;
    background: url('/_skin/pass_sidae_renew/event/top_banner_img.png') center top / contain no-repeat;
    transform: translateX(70px);
}

/* 상단 배너 : E */
/* 쿠폰 이용 방법 : S */
.coupon_use_area {
    padding: 120px 40px 207px;
    background: #ffffff;
}

.coupon_use_area .title {
    padding-bottom: 6px;
}

.coupon_use_area .coupon_use_wrap ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 117px;
}

.coupon_use_area .coupon_use_wrap ul li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 19px;
    width: 324px;
    height: 339px;
    padding: 54px 0 44px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    font-family: 'spoqa4';
    letter-spacing: -0.065em;
    text-align: center;
    list-style: none;
}

.coupon_use_area .coupon_use_wrap ul li:nth-child(3),
.coupon_use_area .coupon_use_wrap ul li:nth-child(4) {
    padding-top: 37px;
}

.coupon_use_area .coupon_use_wrap ul li img {
    display: block;
    margin: 0 auto;
}

.coupon_use_area .coupon_use_wrap ul li p {
    margin-bottom: 6px;
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: bold;
    line-height: 1.4;
    color: #f39595;
}

.coupon_use_area .coupon_use_wrap ul li strong {
    display: block;
    font-size: clamp(18px, 2.5vw, 25px);
    font-weight: bold;
    line-height: 1.4;
}
/* 쿠폰 이용 방법 : E */
/* 쿠폰 등록 : S */
.coupon_regi_area {
    width: 100%;
    height: 392px;
    padding: 0 40px;
    background: #ffffff url('/_skin/pass_sidae_renew/event/coupon_regi_bg.png') left 19% top no-repeat;
}

.coupon_regi_area .coupon_regi_wrap {
    padding-top: 99px;
}

.coupon_regi_area .coupon_num_area {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1070px;
    width: 100%;
    padding-top: 53px;
}

.coupon_regi_area .fl {
    line-height: 1.8;
    color: #ffffff;
}

.coupon_regi_area .fl strong {
    font-family: 'spoqa4';
    font-size: 32px;
    font-weight: bold;
    letter-spacing: -0.065em;
}

.coupon_regi_area .fl p {
    font-size: clamp(16px, 2.3vw, 23px);
    letter-spacing: -0.065em;
}

.coupon_regi_area .coupon_num_wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 858px;
    width: 100%;
}

.coupon_regi_area .coupon_num_wrap li {
    max-width: 270px;
    width: 100%;
    height: 52px;
    border-radius: 10px;
    background: #ffffff;
    font-family: 'spoqa4';
    font-size: 16px;
    font-weight: bold;
    letter-spacing: -0.045;
}

.coupon_regi_area .coupon_btn {
    width: 186px;
    height: 52px;
    padding: 0 33px;
    border-radius: 50px;
    background: #345ea4 url('/_skin/pass_sidae_renew/event/coupon_arrow.png') 85% center no-repeat;
    font-family: 'spoqa4';
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
    cursor: pointer;
}

.coupon_regi_area .coupon_btn.no_next {
    color: #668dcc;
}

.coupon_regi_area .coupon_num_wrap li input {
    width: 100%;
    height: 100%;
    padding: 0 34px;
}
/* 쿠폰 등록 : E */
/* 유의사항 : S*/
.precaution_area {
    width: 100%;
    padding: 73px 40px 100px;
    background: #f1f3f8;
}

.precaution_area ul {
    margin-top: 40px;
}

.precaution_area ul li {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.8;
    letter-spacing: -0.065em;
    word-break: keep-all;
}
/* 유의사항 : E*/

/* ------반응형 영역------ */
/* 타블렛 */
@media screen and (max-width: 1023px) {
    /* 쿠폰 이용 방법 : S */
    .coupon_use_area .coupon_use_wrap ul {
        flex-wrap: wrap;
        gap: 30px;
    }

    .coupon_use_area .coupon_use_wrap ul li {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        width: calc(50% - 15px);
        height: 260px;
        padding: 32px;
        text-align: left;
    }

    .coupon_use_area .coupon_use_wrap ul li img {
        margin: 0;
    }

    .coupon_use_area .coupon_use_wrap ul li strong {
        font-size: clamp(14px, 2.4vw, 25px);
    }
    /* 쿠폰 이용 방법 : E */
    /* 쿠폰 등록 : S*/
    .coupon_regi_area {
        height: 38.32vw;
    }

    .coupon_regi_area .coupon_regi_wrap {
        padding-top: 10.75vw;
    }

    .coupon_regi_area .coupon_num_wrap {
        gap: 2.35vw;
    }

    .coupon_regi_area .fl strong {
        font-family: 'spoqa4';
        font-size: clamp(24px, 3.13vw, 32px);
        font-weight: bold;
    }
    /* 쿠폰 등록 : E */
}

/* 쿠폰 등록시 확인 레이어 팝업창 S */
.popup_wrap {
	display: none;
}
.cart_pop {	
    position: fixed;
    top: 40%;
    left: 50%;
    width: 400px;
    height: 234px;
    border: 4px solid #324051;
    padding: 45px 0;
    z-index: 999;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
}
.cart_pop .close_btn{
	float:right;
	display:block;
	width:20px;
	height:20px;
	line-height:16px;
	text-align:''center;
	color:#ffffff;
	background:#363c4a;	
	cursor:pointer
}
.cart_pop strong {
    font-size:26px;
    color:#000;
}
.btn_box {    
    margin-top: 20px;
}
.btn_box a {
    display: inline-block;
    width: 113px;
    height: 42px;
    color: #fff;
    line-height: 42px;
    font-size: 20px;
    border-radius: 30px;
}
.btn_box a + a {
    margin-left:7px;
}
.btn_box a.btn_now {
    background-color:#2246ff;
}
.btn_box a.btn_later {
    background-color:#9f9f9f;
}
/* 쿠폰 등록시 확인 레이어 팝업창 E */

/* 모바일 */
@media screen and (max-width: 767px) {
    /* 상단 배너 : S */
    .top_banner_area {
        aspect-ratio: 720/916;
        padding: 0 5.556vw;
        background: url('/_skin/pass_sidae_renew/mobile/event/top_banner_bg_mo.png') center top / cover no-repeat;
    }

    .top_banner_area .top_banner_wrap {
        aspect-ratio: 680/916;
        background: url('/_skin/pass_sidae_renew/mobile/event/top_banner_img_mo.png') center top / contain no-repeat;
        transform: translateX(0px);
    }
    /* 상단 배너 : E */
    /* 쿠폰 이용 방법 : S */
    .coupon_use_area {
        padding: 17.222vw 5.556vw 25vw;
    }

    .coupon_use_area .coupon_use_wrap ul {
        gap: 4.167vw;
        margin-top: 11.806vw;
    }

    .coupon_use_area .coupon_use_wrap ul li {
        gap: 0;
        width: calc(50% - 2.083vw);
        height: 24.444vw;
        padding: 6.389vw 2.778vw;
        border-radius: 4.167vw;
    }

    .coupon_use_area .coupon_use_wrap ul li:nth-child(2) {
        padding-right: 1.389vw;
    }

    .coupon_use_area .coupon_use_wrap ul li:nth-child(3),
    .coupon_use_area .coupon_use_wrap ul li:nth-child(4) {
        padding: 6.389vw 2.778vw;
    }

    .coupon_use_area .coupon_use_wrap ul li img {
        margin-top: 2.083vw;
    }

    .coupon_use_area .coupon_use_wrap ul li:first-child img {
        width: 14.167vw;
    }

    .coupon_use_area .coupon_use_wrap ul li:nth-child(2) img {
        width: 18.056vw;
    }

    .coupon_use_area .coupon_use_wrap ul li:nth-child(3) img {
        width: 15.972vw;
    }

    .coupon_use_area .coupon_use_wrap ul li:nth-child(4) img {
        width: 17.222vw;
    }

    .coupon_use_area .coupon_use_wrap ul li p {
        margin-bottom: 1.944vw;
        font-size: clamp(11px, 2.056vw, 14.8px);
    }

    .coupon_use_area .coupon_use_wrap ul li strong {
        font-size: clamp(10px, 3.211vw, 23.12px);
    }
    /* 쿠폰 이용 방법 : S */
    /* 쿠폰 등록 : S*/
    .coupon_regi_area {
        height: 66.667vw;
        min-height: 276px;
        padding: 0 min(40px, 5.556vw);
        background: #ffffff url('/_skin/pass_sidae_renew/mobile/event/coupon_regi_bg_mo.png') center top no-repeat;
    }

    .coupon_regi_area .coupon_regi_wrap {
        padding-top: 15.278vw;
    }

    .coupon_regi_area .fl strong {
        font-size: clamp(11px, 4.167vw, 30px);
        line-height: 1.2;
    }

    .coupon_regi_area .coupon_num_area {
        flex-direction: column;
        gap: 5.417vw;
        padding-top: 7.778vw;
    }

    .coupon_regi_area .fl p {
        margin-top: 3.333vw;
        font-size: clamp(11px, 2.639vw, 19px);
    }

    .coupon_regi_area .coupon_num_wrap li {
        height: 7.222vw;
        min-height: 32px;
    }

    .coupon_regi_area .coupon_num_wrap li input {
        padding: 0 4.722vw;
    }

    .coupon_regi_area .coupon_btn {
        width: 34.167vw;
        height: 7.222vw;
        min-width: 160px;
        min-height: 32px;
        font-size: clamp(11px, 2.222vw, 16px);
        text-align: center;
        text-indent: -2.083vw;
    }
    /* 쿠폰 등록 : E*/
    /* 유의사항 : S*/
    .precaution_area {
        padding: 11.111vw 5.556vw 13.889vw;
    }

    .precaution_area ul li {
        font-size: clamp(12px, 3.5vw, 17px);
    }
    /* 유의사항 : E*/
}