area:focus {
    outline: none;
}

.snowflakes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 972px;
    height: 2101px;
    z-index: 1;
    border-radius: 500px 500px 0 0;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;
    margin-top: 4px;
    margin-left: 4px;
    margin-right: 4px;
}

.snowflake__inner:before {
    background-color: #fff;
    border-radius: 100%;
}

.event_xmas {
    background: #000;
    overflow: hidden;
    position: relative;
}

.event_xmas {
    font-family: 'Roboto', 'Noto Sans KR', 'sans-serif';
    box-sizing: border-box;
}

    .event_xmas * {
        box-sizing: border-box;
    }

    .event_xmas input,
    .event_xmas button,
    .event_xmas select,
    .event_xmas textarea {
        font-family: 'Roboto', 'Noto Sans KR', 'sans-serif';
    }

.event_xmas--items {
    position: relative;
}

.event_xmas--buttons {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

    .event_xmas--buttons button {
        outline: 0 !important;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
        border: 0;
        position: absolute;
        background: none;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0;
        margin: 0;
    }

        .event_xmas--buttons button.on .event_xmas--star {
            display: block;
        }

        .event_xmas--buttons button.on .event_xmas--light {
            opacity: 1;
            display: block;
        }

        .event_xmas--buttons button:nth-child(1) {
            left: 292px;
            bottom: 1057px;
        }

            .event_xmas--buttons button:nth-child(1) .event_xmas--items {
                transform: rotateY(180deg);
            }

            .event_xmas--buttons button:nth-child(1) .event_xmas--date {
                top: 30px;
                left: -17px;
            }

            .event_xmas--buttons button:nth-child(1).on .event_xmas--date {
                transform: rotate(18deg);
                top: -45px;
                left: 2px;
            }

        .event_xmas--buttons button:nth-child(2) {
            left: 508px;
            bottom: 1055px;
        }

            .event_xmas--buttons button:nth-child(2) .event_xmas--date {
                top: 32px;
                right: -20px;
            }

            .event_xmas--buttons button:nth-child(2).on .event_xmas--date {
                top: -40px;
                right: -5px;
                transform: rotate(-5deg);
            }

        .event_xmas--buttons button:nth-child(3) {
            left: 215px;
            bottom: 875px;
        }

            .event_xmas--buttons button:nth-child(3) .event_xmas--items {
                transform: rotateY(180deg);
            }

            .event_xmas--buttons button:nth-child(3) .event_xmas--date {
                top: 30px;
                left: -19px;
            }

            .event_xmas--buttons button:nth-child(3).on {
                left: 205px;
                bottom: 845px;
            }

                .event_xmas--buttons button:nth-child(3).on .event_xmas--date {
                    top: -46px;
                    left: 4px;
                    transform: rotate(18deg);
                }

        .event_xmas--buttons button:nth-child(4) {
            left: 406px;
            bottom: 855px;
        }

            .event_xmas--buttons button:nth-child(4) .event_xmas--date {
                top: 20px;
                right: 40px;
            }

            .event_xmas--buttons button:nth-child(4).on {
                left: 376px;
                bottom: 820px;
            }

                .event_xmas--buttons button:nth-child(4).on .event_xmas--date {
                    top: -32px;
                    right: 5px;
                    transform: rotate(-5deg);
                }

        .event_xmas--buttons button:nth-child(5) {
            left: 612px;
            bottom: 858px;
        }

            .event_xmas--buttons button:nth-child(5) .event_xmas--items {
                transform: rotateY(160deg) rotate(-10deg);
            }

            .event_xmas--buttons button:nth-child(5) .event_xmas--date {
                top: 13px;
                right: 22px;
            }

            .event_xmas--buttons button:nth-child(5).on {
                bottom: 830px;
                left: 580px;
            }

                .event_xmas--buttons button:nth-child(5).on .event_xmas--items {
                    transform: rotateY(0deg);
                }

                .event_xmas--buttons button:nth-child(5).on .event_xmas--date {
                    top: -41px;
                    right: -6px;
                    transform: rotate(-12deg);
                }

        .event_xmas--buttons button:nth-child(6) {
            left: 155px;
            bottom: 662px;
        }

            .event_xmas--buttons button:nth-child(6) .event_xmas--items {
                transform: rotate(-10deg);
            }

            .event_xmas--buttons button:nth-child(6) .event_xmas--date {
                top: 42px;
                left: -1px;
            }

            .event_xmas--buttons button:nth-child(6).on {
                left: 165px;
                bottom: 638px;
            }

                .event_xmas--buttons button:nth-child(6).on .event_xmas--items {
                    transform: rotateY(-180deg);
                }

                .event_xmas--buttons button:nth-child(6).on .event_xmas--date {
                    top: -26px;
                    left: -17px;
                    transform: rotate(7deg);
                }

        .event_xmas--buttons button:nth-child(7) {
            left: 389px;
            bottom: 602px;
        }

            .event_xmas--buttons button:nth-child(7) .event_xmas--items {
                transform: rotateY(180deg) rotate(-20deg);
            }

            .event_xmas--buttons button:nth-child(7) .event_xmas--date {
                top: 10px;
                right: 18px;
            }

            .event_xmas--buttons button:nth-child(7).on {
                left: 365px;
                bottom: 592px;
            }

                .event_xmas--buttons button:nth-child(7).on .event_xmas--items {
                    transform: rotateY(0deg);
                }

                .event_xmas--buttons button:nth-child(7).on .event_xmas--date {
                    top: 15px;
                    right: -50px;
                    transform: rotate(34deg);
                }

        .event_xmas--buttons button:nth-child(8) {
            left: 589px;
            bottom: 642px;
        }

            .event_xmas--buttons button:nth-child(8) .event_xmas--date {
                top: 30px;
                right: -20px;
            }

            .event_xmas--buttons button:nth-child(8).on {
                left: 610px;
                bottom: 630px;
            }

                .event_xmas--buttons button:nth-child(8).on .event_xmas--date {
                    top: 22px;
                    right: -53px;
                    transform: rotate(28deg);
                }

        .event_xmas--buttons button:nth-child(9) {
            left: 132px;
            bottom: 442px;
        }

            .event_xmas--buttons button:nth-child(9) .event_xmas--items {
                transform: rotateY(180deg) rotate(-2deg);
            }

            .event_xmas--buttons button:nth-child(9) .event_xmas--date {
                top: 30px;
                left: -22px;
            }

            .event_xmas--buttons button:nth-child(9).on {
                left: 128px;
                bottom: 422px;
            }

                .event_xmas--buttons button:nth-child(9).on .event_xmas--date {
                    top: -22px;
                    left: -28px;
                }

        .event_xmas--buttons button:nth-child(10) {
            left: 382px;
            bottom: 374px;
        }

            .event_xmas--buttons button:nth-child(10) .event_xmas--date {
                top: 16px;
                right: -8px;
            }

            .event_xmas--buttons button:nth-child(10).on {
                left: 355px;
                bottom: 350px;
            }

                .event_xmas--buttons button:nth-child(10).on .event_xmas--date {
                    top: 18px;
                    right: -57px;
                    transform: rotate(40deg);
                }

        .event_xmas--buttons button:nth-child(11) {
            left: 617px;
            bottom: 405px;
        }

            .event_xmas--buttons button:nth-child(11) .event_xmas--items {
                transform: rotateY(180deg) rotate(-14deg);
            }

            .event_xmas--buttons button:nth-child(11) .event_xmas--date {
                top: 12px;
                right: 16px;
            }

            .event_xmas--buttons button:nth-child(11).on {
                left: 614px;
                bottom: 380px;
            }

                .event_xmas--buttons button:nth-child(11).on .event_xmas--items {
                    transform: rotateY(0deg) rotate(0deg);
                }

                .event_xmas--buttons button:nth-child(11).on .event_xmas--date {
                    top: 20px;
                    right: -50px;
                    transform: rotate(30deg);
                }

.event_xmas--light {
    position: absolute;
    bottom: 50px;
    right: -62px;
    display: none;
    opacity: 0.8;
    animation: blink-transition 0.8s ease-in-out infinite;
}

.event_xmas--star {
    display: none;
    position: absolute;
    right: 62px;
    bottom: 50px;
    animation: dungdung2 2s ease-in-out infinite;
}

    .event_xmas--star + .event_xmas--star {
        right: -20px;
        bottom: 120px;
        animation: dungdung1 3s ease-in-out infinite;
    }

.event_xmas--date {
    position: absolute;
}

@keyframes blink-transition {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes dungdung1 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 8px);
    }
}

@keyframes dungdung2 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(1px, 3px);
    }
}