@import url('/font/style.css');


/* 스와이퍼 */
.swiper {
    width: 100%;
    margin: 0;
    z-index: 0;
}

div.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.swiper-wrapper.flow {
    pointer-events: none;
    transition-timing-function: linear;
}

/* -------------------------------------------------- 커스텀 ----------------------------------------------------- */

*::selection {
    background: #00000090;
    color: #fff;
}

@keyframes blk {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scaleOpa {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes scaleOpa2 {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes marqueeX {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes marqueeX_r {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin2 {
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    25% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 1;
        transform: scale(1);
    }

    85% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes boom {
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes hand {

    0%,
    100% {
        transform: none;
    }

    20% {
        transform: translate(20%, 10%);
    }

    30% {
        transform: translate(5%, 20%);
    }

    35% {
        transform: translate(25%, 15%);
    }

    60% {
        transform: translate(0%, 10%);
    }
}

@keyframes ddmY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15%);
    }
}

@keyframes ddmY2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7%);
    }
}

@keyframes ddmY3 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3%);
    }
}

@keyframes ddm4 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0.4%);
    }
}

.ddd {
    animation: ddd 0.2s infinite ease-in-out;
}

.ddmY_2nd {
    animation: ddmY2 2s infinite ease-in-out;
}

.ddmY_4th {
    animation: ddm4 3s infinite ease-in-out;
}

.ddmY_4th {
    animation: ddmY3 2.5s infinite ease-in-out;
}

.ddmY {
    animation: ddmY 2s infinite ease-in-out;
}

.ddmY2 {
    animation: ddmY 2s 0.1s infinite ease-in-out;
}

.ddmY3 {
    animation: ddmY 2s 0.2s infinite ease-in-out;
}

.ddmY4 {
    animation: ddmY 2s 0.3s infinite ease-in-out;
}

.ddmY5 {
    animation: ddmY 2s 0.4s infinite ease-in-out;
}

.ddmY6 {
    animation: ddmY 2s 0.7s infinite ease-in-out;
}

.hand {
    animation: hand infinite 8s;
}

.boom {
    animation: boom infinite 2s;
}

.fadeInOut1 {
    animation: fadeInOut 6s ease-in-out 0s infinite;
}

.fadeInOut2 {
    animation: fadeInOut 6s ease-in-out 0.2s infinite;
}

.fadeInOut3 {
    animation: fadeInOut 6s ease-in-out 0.4s infinite;
}

.fadeInOut4 {
    animation: fadeInOut 6s ease-in-out 0.6s infinite;
}

.fadeInOut5 {
    animation: fadeInOut 6s ease-in-out 0.8s infinite;
}

.fadeInOut6 {
    animation: fadeInOut 6s ease-in-out 1.0s infinite;
}

.fadeInOut7 {
    animation: fadeInOut 6s ease-in-out 1.2s infinite;
}

.fadeInOut8 {
    animation: fadeInOut 6s ease-in-out 1.4s infinite;
}

.fadeInOut9 {
    animation: fadeInOut 6s ease-in-out 1.6s infinite;
}




.spin {
    animation: spin 10s infinite linear;
}

.spin2 {
    animation: spin2 10s infinite linear;
}

.image_sd_wrap {
    overflow: hidden;
}

.image_sd .absol {
    left: 100%;
}

.image_sd_r .absol {
    right: 100%;
}

.image_sd {
    animation: marqueeX 20s infinite linear;
}

.image_sd_r {
    animation: marqueeX_r 20s infinite linear;
}

.scaleOpa {
    animation: scaleOpa infinite 2.5s;
}

.scaleOpa2 {
    animation: scaleOpa2 infinite 3s ease-in-out;
}

.animate-blk {
    animation: blk 1s infinite ease-in-out;
}

/* --------------------------------------------------------------------------------------- */

.rot180 {
    transform: rotate(180deg);
}

.rltz {
    position: relative;
    z-index: 10;
}


/* ----------------------- */

.c_fff {
    color: #fff;
}

.bg_fff {
    background: #fff;
}

.c_000 {
    color: #000;
}

.bg_000 {
    background: #000;
}

.c_111 {
    color: #111;
}

.bg_111 {
    background: #111;
}

.c_777 {
    color: #777;
}

.c_ddd {
    color: #ddd;
}

.c_yell {
    color: #f8bb15;
}

.bg_yell {
    background: #f8bb15;
}

.c_org {
    color: #f87516;
}

.bg_org {
    background: #f87516;
}

.c_ivry {
    color: #fff8e8;
}

.bg_ivry {
    background: #fff8e8;
}


/* ---------- */

.con_btn_next {
    transform: scaleX(-1);
}

.con_btn_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    pointer-events: none;
}

.con_btn {
    width: 2.344vw;
    cursor: pointer;
    pointer-events: all;
}



@media screen and (max-width:599px) {
    /* 모바일 */

    .con_btn {
        width: 8vw;
    }

    .con_btn_wrap {
        gap: 16vw;
        margin-top: 6vw;
    }
}


.pc-mobile {
    display: flex;
}

.mobile-pc {
    display: none;
}

@media screen and (max-width:599px) {
    .pc-mobile {
        display: none;
    }

    .mobile-pc {
        display: flex;
    }
}





/* section:not(.con09, .con10) {
    display: none !important
} */