@import url("https://cdn.jsdelivr.net/gh/fonts-archive/TmoneyRoundWind/TmoneyRoundWind.css");

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Tmoney Round Wind", sans-serif;
    font-weight: 400;
    word-break: keep-all;
}

.box_s {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.text_sh {
    text-shadow: 0px 0px 40px rgba(0, 0, 0, 0.45);
}

.conb {
    width: 1240px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.conb1 {
    width: 1240px;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.mobile_area {
    width: 720px;
    margin: auto;
    overflow-x: hidden !important;
    /*
     box-sizing: border-box;
     position: relative;
     */
}

/*카드 pc*/
.color_style_pc .swiper-slide {
    width: 287px;
    transition: transform 0.3s ease;
    transform: scale(0.85);
    transform-origin: center;
}
.color_style_pc .swiper-slide-active {
    width: 287px;
    transform: scale(1);
    transform-origin: center;
}

.color_style_pc .swiper-slide-active .flip {
    perspective: 2000px;
    transform-origin: center center;
}
.color_style_pc .swiper-slide .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}
.color_style_pc .swiper-slide-active .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}
.color_style_pc .swiper-slide-prev .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}
.color_style_pc .swiper-slide-next .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}

.color_style_pc .swiper-slide-active .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.color_style_pc .swiper-slide-prev .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.color_style_pc .swiper-slide-next .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.color_style_pc .swiper-slide .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/*카드mo*/

.color_style .swiper-slide {
    width: 328px;
    transition: transform 0.3s ease;
    transform: scale(0.85);
    transform-origin: center;
}
.color_style .swiper-slide-active {
    width: 328px;
    transform: scale(1);
    transform-origin: center;
}
.color_style .swiper-slide-active .flip {
    perspective: 2000px;
    transform-origin: center center;
}
.color_style .swiper-slide .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}
.color_style .swiper-slide-active .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}
.color_style .swiper-slide-prev .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}
.color_style .swiper-slide-next .card_css {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.4s;
    transform-style: preserve-3D;
    backface-visibility: hidden;
}

.color_style .swiper-slide-active .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.color_style .swiper-slide-prev .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.color_style .swiper-slide-next .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.color_style .swiper-slide .card_front,
.card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card_back {
    transform: rotateY(180deg);
}

.p_icon {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.p_icon.show {
    opacity: 1;
    visibility: visible;
}

/*모션*/

.img_ho {
    overflow: hidden;
    transition: all 0.2s ease-out 0s;
}
.img_ho:hover {
    transition: all 0.2s ease-out 0s;
    transform: scale(1.1);
}

.main_c1 {
    animation: main_c1 2s infinite ease-in-out alternate;
}
.main_t1 {
    animation: main_t1 2s infinite ease-in-out alternate;
}
.main_t2 {
    animation: main_t2 1s infinite ease-in-out alternate;
}
.main_p1 {
    animation: main_p1 1s infinite ease-in-out alternate;
}
.main_p2 {
    animation: main_p2 1.5s infinite ease-in-out alternate;
}

@keyframes main_c1 {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-10px);
    }
}
@keyframes main_t1 {
    from {
        transform: translateY(0px);
    }
    to {
        transform: scale(1.05) translateY(-5px);
    }
}
@keyframes main_t2 {
    from {
        transform: translateY(0px);
    }
    to {
        transform: scale(1.05) translateY(-10px);
    }
}
@keyframes main_p1 {
    from {
        transform: translateY(0px);
    }
    to {
        transform: scale(1.05) rotate(-7deg) translateY(-10px);
    }
}
@keyframes main_p2 {
    from {
        transform: translateY(0px);
    }
    to {
        transform: scale(1.05) rotate(7deg) translateY(-10px);
    }
}

@keyframes f1_an {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-10px) translateX(-10px) rotate(7deg) scale(1.05);
    }
}