.section1{background: url(/images/event/e251021_aion2_advance_reservation_event/img_01_bg.jpg) no-repeat center; background-size: cover;}
.section2{background: url(/images/event/e251021_aion2_advance_reservation_event/img_02_bg.jpg) no-repeat center; background-size: auto;}
.section3{background: url(/images/event/e251021_aion2_advance_reservation_event/img_03_bg.jpg) no-repeat center; background-size: auto;}
.section4{background: url(/images/event/e251021_aion2_advance_reservation_event/img_04_bg.jpg) no-repeat center; background-size: auto;}

.evt_wrap{position: relative; margin: 0 auto; width: 100%; max-width: 720px;}
.evt_wrap img{width: 100%;}
.e_btn_wrap{width: 90%;}
.done{pointer-events: none;}

.section1 .event_date{right: 10px; color: #22135c; font-family: "맑은 고딕", sans-serif; letter-spacing: -1px;}
.section1 .title_img{width: 100%; max-width: 720px;}

.section2 .evt1 .input_box{top: 27%; width: 77%; height: 8%; max-width: 554px; max-height: 60px;}
.section2 .evt1 .input_box input[type=text]{width: 100%; height: 100%; color: #4dddff; font-weight: bold; text-align: center; border: 0; outline: 1px solid #4dddff; background-color: #09062b; letter-spacing: inherit;}
.section2 .evt1 .input_box input[type=text]:focus{outline: 1px solid #4dddff;}
.section2 .evt1 .input_box input[type=text]::placeholder{color: #777;}
.section2 .evt1 .e_btn_wrap{top: 43%;}

.section3 .evt2 .evt2_wrapper{top: 13%; width: 100%; height: 35%; max-height: 454px; display: flex; justify-content: space-between; padding: 0 35px;}
.section3 .evt2 .evt2_wrapper .evt2_example_box{width: 43%; height: 100%; max-width: 270px; padding: 5px 8px; border-radius: 10px; border: 3px solid #4b3280; background-color: #1b0c3c;}
.section3 .evt2 .evt2_wrapper .evt2_example_box h1{height: 13%; font-size: 15px; color: #9969ff; font-weight: bold;}
.section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper{height: 87%; display: flex; flex-direction: column; gap: 5px;}
.section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper div{width: 100%; height: 20%; border-radius: 10px; background-color: #4b3280; border: 1px dashed #fff; font-size: 13px; color: #fff; font-weight: 500; display: flex; justify-content: center; align-items: center; cursor: pointer; letter-spacing: -1px; line-height: 13px; word-break: keep-all;}
.section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper div:hover{background-color: #864dff;}
.section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper .hidden{visibility: hidden;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box{width: 54%; height: 100%; max-width: 340px; padding: 5px 8px; border-radius: 10px; background-color: #331a6a;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box h1{height: 14%; font-size: 15px; color: #fff; font-weight: bold;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper{height: 86%; display: flex; gap: 7px;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num{height: 100%; display: flex; flex-direction: column; gap: 5px;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num div{height: 20%; font-size: 13px; color: #ba90ff; font-weight: bold; font-family: "맑은 고딕", sans-serif; display: flex; justify-content: center; align-items: center;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer{width: 100%; height: 100%; display: flex; flex-direction: column; gap: 5px;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer div{width: 100%; height: 20%; border-radius: 10px; background-color: #1b0c3c; font-size: 13px; color: #fff; font-weight: bold; display: flex; justify-content: center; align-items: center; cursor: pointer; letter-spacing: -1px; line-height: 13px; word-break: keep-all;}
.section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer .selected{outline: 3px solid #ba90ff;}
.section3 .evt2 .evt2_wrapper .evt2_result_box{width: 100%; border-radius: 10px; padding: 5px 0; background-color: #331a6a;}
.section3 .evt2 .evt2_wrapper .evt2_result_box h1{height: 13%; font-size: 15px; color: #fff; font-weight: bold;}
.section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper{height: 87%; display: flex; gap: 7px; padding: 0 20%;}
.section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num{height: 100%; display: flex; flex-direction: column; gap: 5px;}
.section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num div{height: 20%; font-size: 13px; color: #ba90ff; font-weight: bold; font-family: "맑은 고딕", sans-serif; display: flex; justify-content: center; align-items: center;}
.section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result{width: 100%; height: 100%; display: flex; flex-direction: column; gap: 5px;}
.section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result div{position: relative; width: 100%; height: 20%; border-radius: 10px; background-color: #1b0c3c; font-size: 13px; color: #fff; font-weight: bold; display: flex; justify-content: center; align-items: center; letter-spacing: -1px; line-height: 13px;}
.success_icon{width: 9%; height: 14%; max-width: 60px; max-height: 60px; z-index: 1; position: absolute; background: url(/images/event/e251021_aion2_advance_reservation_event/img_one.png) no-repeat center / 100% 100%;}
.fail_icon{width: 9%; height: 14%; max-width: 60px; max-height: 60px; z-index: 1; position: absolute; background: url(/images/event/e251021_aion2_advance_reservation_event/img_x.png) no-repeat center / 100% 100%;;}

.section3 .evt2 .e_btn_wrap{top: 59%;}

.section4 .evt3 .evt3_attend{top: 17%; width: 70%; height: 9%; max-width: 500px; max-height: 80px; outline: 3px solid #0086bc; border-radius: 10px; background-color: #003247; padding: 0 12px; display: flex; justify-content: space-between; align-items: center;}
.section4 .evt3 .evt3_attend span{color: #fff;}
.section4 .evt3 .evt3_attend .attend_title{font-size: 14px;}
.section4 .evt3 .evt3_attend .attend_count{font-size: 18px; font-weight: bold;}

.notice{background-color: #07042c; color: #fff;}
.notice .e_container{padding:0 10px;}

@media(min-width: 400px) {
    .section2 .evt1 .input_box input[type=text]{font-size: 22px; outline: 1px solid #4dddff;}
    .section2 .evt1 .input_box input[type=text]:focus{outline: 1px solid #4dddff;}

    .section3 .evt2 .evt2_wrapper{padding: 0 46px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box{padding: 12px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box h1{font-size: 17px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper{gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper div{font-size: 14px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box{padding: 12px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box h1{height: 13%; font-size: 17px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper{height: 87%; gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num{gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num div{font-size: 16px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer{gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer div{font-size: 14px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box{padding: 12px 0;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box h1{font-size: 17px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper{gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num{gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num div{font-size: 16px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result{gap: 10px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result div{font-size: 14px;}

    .section4 .evt3 .evt3_attend{padding: 0 20px;}
    .section4 .evt3 .evt3_attend .attend_title{font-size: 17px;}
    .section4 .evt3 .evt3_attend .attend_count{font-size: 25px;}
}

@media(min-width: 500px) {
    .section1 .event_date{top: 15px; font-size: 16px;}
    .section2 .evt1 .input_box input[type=text]{font-size: 24px; outline: 2px solid #4dddff;}
    .section2 .evt1 .input_box input[type=text]:focus{outline: 2px solid #4dddff;}

    .section3 .evt2 .evt2_wrapper .evt2_example_box{padding: 18px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box h1{font-size: 19px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper{gap: 11px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper div{font-size: 16px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box{padding: 18px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box h1{font-size: 19px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper{gap: 11px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num{gap: 12px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num div{font-size: 18px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer{gap: 12px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer div{font-size: 16px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box{padding: 18px 0;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box h1{font-size: 19px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper{gap: 11px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num{gap: 12px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num div{font-size: 18px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result{gap: 12px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result div{font-size: 16px;}

    .section4 .evt3 .evt3_attend{padding: 0 25px;}
    .section4 .evt3 .evt3_attend .attend_title{font-size: 20px;}
    .section4 .evt3 .evt3_attend .attend_count{font-size: 30px;}
}

@media(min-width: 660px) {
    .section1 .event_date{top: 20px; font-size: 18px;}
    .section2 .evt1 .input_box input[type=text]{font-size: 28px; outline: 3px solid #4dddff;}
    .section2 .evt1 .input_box input[type=text]:focus{outline: 3px solid #4dddff;}

    .section3 .evt2 .evt2_wrapper .evt2_example_box{padding: 20px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box h1{font-size: 23px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper{gap: 13px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper div{font-size: 18px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box{padding: 20px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box h1{font-size: 23px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper{gap: 13px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num div{font-size: 22px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer div{font-size: 20px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box{padding: 20px 0;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box h1{font-size: 23px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper{gap: 13px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num div{font-size: 22px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result div{font-size: 20px;}

    .section4 .evt3 .evt3_attend{padding: 0 35px;}
    .section4 .evt3 .evt3_attend .attend_title{font-size: 25px;}
    .section4 .evt3 .evt3_attend .attend_count{font-size: 35px;}
}

@media(min-width: 740px) {
    .section3 .evt2 .evt2_wrapper .evt2_example_box{padding: 22px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box h1{font-size: 25px;}
    .section3 .evt2 .evt2_wrapper .evt2_example_box .evt2_example_wrapper div{font-size: 24px;}

    .section3 .evt2 .evt2_wrapper .evt2_answer_box{padding: 22px 40px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box h1{font-size: 25px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper{gap: 15px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer_num div{font-size: 25px;}
    .section3 .evt2 .evt2_wrapper .evt2_answer_box .evt2_answer_wrapper .evt2_answer div{font-size: 24px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box{padding: 22px 0;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box h1{font-size: 25px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper{gap: 15px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result_num div{font-size: 25px;}
    .section3 .evt2 .evt2_wrapper .evt2_result_box .evt2_result_wrapper .evt2_result div{font-size: 24px;}
}