@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 marqueeX {
    from {
        transform: translateX(0);
    }

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

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

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

@keyframes ddm_txt {
    50% {
        transform: translateY(15%);
    }
}

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

@keyframes ddm_txt3 {
    50% {
        transform: translateY(10%);
    }
}

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

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

@keyframes updown {

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

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

@keyframes updown2 {

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

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


@keyframes smoke {
    0% {
        transform: translate(0, 30%);
        opacity: 0;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

@keyframes vd_move1 {
    50% {
        transform: translateX(-20%);
    }
}

@keyframes vd_move2 {
    50% {
        transform: translateX(20%);
    }
}

@keyframes vd_move3 {
    50% {
        transform: translateX(-20%);
    }
}

@keyframes vd_move4 {
    50% {
        transform: translateX(20%);
    }
}


@keyframes sway {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

@keyframes sway2 {

    0%,
    100% {
        transform: rotate(-1deg);
    }

    50% {
        transform: rotate(1deg);
    }
}

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

    30% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.sway_top {
    animation: sway 2s infinite ease-in-out;
    transform-origin: top;
}

.sway_left {
    animation: sway2 2s infinite ease-in-out;
    transform-origin: left;
}

.sway_right_top {
    animation: sway2 2s infinite ease-in-out;
    transform-origin: right top;
}



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

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

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

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

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

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

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

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

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

.ddm_txt {
    animation: ddm_txt 1.4s infinite ease-in-out;
}

.ddm_txt2 {
    animation: ddm_txt2 1.4s infinite ease-in-out;
}

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

.ddm_txt4 {
    animation: ddm_txt3 2.2s infinite ease-in-out;
}

.image_sd_wrap {
    overflow: hidden;
}

.image_sd .absol {
    left: 100%;
}

.image_sd_r .absol {
    right: 100%;
}

.smk {
    width: 40.5729vw;

    z-index: 10;
}

.smoke {
    animation: smoke infinite 5s ease-in-out;
}

.smoke2 {
    animation: smoke infinite 5s 0.3s ease-in-out;
}

.smoke3 {
    animation: smoke infinite 5s 0.6s ease-in-out;
}

.smoke4 {
    animation: smoke infinite 5s 0.9s ease-in-out;
}

.smoke5 {
    animation: smoke infinite 5s 1.2s ease-in-out;
}

.smoke5 {
    animation: smoke infinite 5s 1.5s ease-in-out;
}

.smoke6 {
    animation: smoke infinite 5s 1.8s ease-in-out;
}









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

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

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

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


.call_ddm_item {
    width: 8vw;
    height: 1.771vw;
    opacity: 0;
    visibility: hidden;

    transition: 0.2s ease-in-out;
}

.ft_cdd_item {
    top: -3vw;
    left: 26vw;
}

.hd_cdd_item {
    bottom: -3vw;
    left: 7vw;

}

.call_ddm_txt {
    z-index: 10;
    border-radius: 10vw;
    background: #c63427;
    color: #fff;
    transition: 0.4s;
    font-size: 0.8333vw;
}

.header_cwrap .call_ddm_item::before {
    content: "";
    top: -0.6vw;
    position: absolute;
    border-left: 0.45vw solid transparent;
    border-right: 0.45vw solid transparent;
    border-bottom: 0.9vw solid #c63427;

    transition: 0.4s;
}

.contact_service .call_ddm_item::before {
    content: "";
    position: absolute;
    bottom: -0.6vw;
    left: 50%;
    border-left: 0.45vw solid transparent;
    border-right: 0.45vw solid transparent;
    border-top: 0.9vw solid #c63427;

    transition: 0.4s;
}


@media screen and (min-width:600px) {
    .header_cwrap:hover .call_ddm_item {
        opacity: 1;
        visibility: visible;
    }

    .contact_service:hover .call_ddm_item {
        opacity: 1;
        visibility: visible;
    }

}

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

.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_eee {
    color: #eee;
}

.bg_red {
    background: #c63427;
}

.c_red {
    color: #c63427;
}

.bg_yell {
    background: #fafb00;
}

.c_yell {
    color: #fafb00;
}

.bg_blue {
    background: #23484f;
}


/* ------------------ */
.tab_content {
    width: 100%;

    display: flex;
    justify-content: center;
    position: relative;
}


.tab_menu {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab_item {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    visibility: hidden;

    transition: 0.2s;

    transform: translateY(10%);
    transition: 0.4s;
}

.tab_item.on {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    transition: 0.4s 0.4s;
}


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

    .smk {
        width: 70vw;
    }
}