.content{background-color: #000;}

.section1{background: url(/images/event/e251022_architect_open_event/img_01_bg.jpg) no-repeat center; background-size: cover;}
.section2{background: url(/images/event/e251022_architect_open_event/img_02_bg.jpg) no-repeat center; background-size: cover;}
.section3{background: url(/images/event/e251022_architect_open_event/img_03_bg.jpg) no-repeat center; background-size: cover;}
.section4{background: url(/images/event/e251022_architect_open_event/img_04_bg.jpg) no-repeat center; background-size: cover;}
.section5{background: url(/images/event/e251022_architect_open_event/img_05_bg.jpg) no-repeat center; background-size: cover; overflow: visible;}

.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;}
.off{filter: grayscale(1);}

.piece{cursor: pointer; object-fit: cover;}

.section1 .event_date{top: 2%; right: 5px; font-family: "맑은 고딕", sans-serif; font-size: 13px; font-weight: bold; color: black; letter-spacing: -1px;}
.section1 .title_img{width: 100%; max-width: 720px;}

.section2 .piece{width: 14%; top: 34%; right: 0;}

.section3 .piece{width: 23%; top: 24%;}

.section4 .treasure_box_wrapper{width: 100%; top: 15%; display: grid; grid-template-columns: repeat(4, 22%); gap: 1%; justify-content: center;}
.section4 .treasure_box_wrapper .treasure_box{cursor: pointer;}
.section4 .ticket_cnt_wrapper{width: 35%; top: 43%; right: 19%; font-weight: bold; color: #e3c96a; letter-spacing: -1px; display: flex; align-items: baseline; gap: 2%;}
.section4 .ticket_cnt_wrapper .ticket_cnt{font-size: 24px; width: 90%; text-align: end; text-overflow: ellipsis; overflow: hidden;}
.section4 .ticket_cnt_wrapper .ticket_str{font-size: 14px;}
.section4 .ticket_btn_wrapper1{width: 32%; height: 11%; top: 76%; right: 4%; display: flex; flex-direction: column; gap: 7%;}
.section4 .ticket_btn_wrapper2{width: 32%; height: 10%; top: 88%; right: 4%; display: flex; flex-direction: column; gap: 16%;}
.section4 .ticket_btn{cursor: pointer;}

.section5 .piece{width: 14%; top: 2%; left: 15%;}
.section5 .vending_machine{top: 16%;}
.section5 .vending_shake{animation-name: shake; animation-duration: 1s; animation-iteration-count: 2; animation-direction: alternate;}
.section5 .vending_btn{background: url(/images/event/e251022_architect_open_event/btn_06.png) no-repeat center / cover; width: 50%; height: 5%; top: 40%; cursor: pointer;}
.section5 .vending_btn:hover{background: url(/images/event/e251022_architect_open_event/btn_06_over.png) no-repeat center / cover;}
.section5 .winner_user_wrapper{top: 71%; width: 100%; height: 26%; display: flex; flex-wrap: wrap; gap: 56px 0; justify-content: center;}
.section5 .winner_user_wrapper .winner_user{width: 300px; height: 5%; display: flex; gap: 5%; align-items: center;}
.section5 .winner_user_wrapper .winner_user .word_img{max-width: 72px; max-height: 72px; width: 22%;}
.section5 .winner_user_wrapper .winner_user .winner{font-size: 19px; font-weight: bold; color: #808080; letter-spacing: -1px;}
.section5 .winner_user_wrapper .winner_user .winner.on{color: #e9d8bb;}
.section5 .winner_user_wrapper .winner_info{margin: 0 8%; font-size: 14px; font-weight: bold; color: #fff;}

.notice{background-color: #191919; color: #d4d4d4;}
.notice .e_container{padding: 0 10px;}

@media(min-width: 400px) {
    .section1 .event_date{font-size: 13px;}

    .section4 .ticket_cnt_wrapper .ticket_cnt{font-size: 30px;}
    .section4 .ticket_cnt_wrapper .ticket_str{font-size: 17px;}
}

@media(min-width: 500px) {
    .section1 .event_date{font-size: 14px;}

    .section4 .ticket_cnt_wrapper .ticket_cnt{font-size: 40px;}
    .section4 .ticket_cnt_wrapper .ticket_str{font-size: 20px;}
}

@media(min-width: 580px) {
    .section1 .event_date{font-size: 14px;}

    .section4 .ticket_cnt_wrapper .ticket_cnt{font-size: 45px;}
    .section4 .ticket_cnt_wrapper .ticket_str{font-size: 25px;}

    .section5 .winner_user_wrapper .winner_user .winner{font-size: 21px;}
    .section5 .winner_user_wrapper .winner_info{font-size: 16px;}
}

@media(min-width: 660px) {
    .section1 .event_date{font-size: 15px;}

    .section4 .ticket_cnt_wrapper .ticket_cnt{font-size: 50px;}
    .section4 .ticket_cnt_wrapper .ticket_str{font-size: 30px;}

    .section5 .winner_user_wrapper .winner_user .winner{font-size: 23px;}
    .section5 .winner_user_wrapper .winner_info{font-size: 18px;}
}

@media(min-width: 740px) {
    .section1 .event_date{font-size: 16px;}
}

@keyframes shake {
    0% {transform: translate(-50%, 0);}
    25% {transform: translate(-53%, -10px);}
    50% {transform: translate(-56%, 10px);}
    75% {transform: translate(-53%, -10px);}
    100% {transform: translate(-50%, 0);}
}