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


/* 스와이퍼 */
.swiper {
    width: 100%;
    margin: 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: #c31b0e;
    color: #fff;
}

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

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

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

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

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

    30% {
        opacity: 0;
    }

    31% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scalx {

    0%,
    100% {
        opacity: 1;
        transform: scaleX(1.1);
    }


    50% {
        opacity: 0.8;
        transform: scaleX(0.9);
    }
}

@keyframes updown {

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

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

@keyframes ud_txt {

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

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

@keyframes ud_txt2 {

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

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

@keyframes ud_txt3 {

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

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


@keyframes tger_txt {

    0%,
    100% {
        transform: scale(1);
    }

    20% {
        transform: scale(0.92);
    }

    40% {
        transform: scale(0.92);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes sc_txt {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}


@keyframes tger1 {

    0%,
    100% {
        transform: scale(1);
    }

    20% {
        transform: scale(0.95);
    }

    26% {
        transform: scale(0.95);
    }

    30% {
        transform: scale(1.05);
    }

    40% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes tger2 {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

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

    35% {
        opacity: 0.2;
    }

    42% {
        transform: scale(1.4);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes txt-gradation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -300% 0%;
    }
}

@keyframes cloud1 {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }

    20% {
        transform: translate(-10%, 4%) rotate(-2deg);
    }

    40% {
        transform: translate(-20%, 8%) rotate(3deg);
    }

    60% {
        transform: translate(-15%, 12%) rotate(-1deg);
    }

    80% {
        transform: translate(-5%, 6%) rotate(2deg);
    }

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

@keyframes cloud2 {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }

    20% {
        transform: translate(8%, -3%) rotate(2deg);
    }

    40% {
        transform: translate(15%, 4%) rotate(-1deg);
    }

    60% {
        transform: translate(10%, 10%) rotate(3deg);
    }

    80% {
        transform: translate(5%, 5%) rotate(-2deg);
    }

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

@keyframes cloud3 {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }

    20% {
        transform: translate(3%, -2%) rotate(2deg);
    }

    40% {
        transform: translate(-4%, 3%) rotate(-2deg);
    }

    60% {
        transform: translate(5%, 2%) rotate(1deg);
    }

    80% {
        transform: translate(-2%, 4%) rotate(-1deg);
    }

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

@keyframes scaleBox {
    0% {
        transform: scale(0.9, 0.8);
        opacity: 0.3;
    }

    20% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.8;
    }

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

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

    50% {
        opacity: 0.2;
    }

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

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

    1% {
        opacity: 0.5;
    }

    60% {
        transform: scale(1.3);
        opacity: 0;
    }

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

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

    1% {
        transform: scale(0.7);
        opacity: 0.2;
    }

    60% {
        opacity: 0.2;
    }

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


@keyframes marqueeY {
    from {
        transform: translateY(0);
    }

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

@keyframes marqueeY_r {
    from {
        transform: translateY(0);
    }

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

@keyframes trophy {

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

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

@keyframes lamp {

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

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

@keyframes light {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes skewScale {

    0%,
    100% {
        transform: scaleX(1) skewX(0deg);
    }

    50% {
        transform: scaleY(1.1) skewX(3deg);
    }
}

@keyframes stop_spin {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(360deg);
    }

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

@keyframes biker {

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

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

@keyframes q_man {

    0%,
    100% {
        transform: none;
    }

    20% {
        transform: scale(1.1);
    }

    30% {
        transform: scale(1.1) rotate(10deg);
    }

    50% {
        transform: scale(1.1) rotate(10deg);
    }
}

@keyframes cute_man {

    0%,
    100% {
        transform: none;
    }

    20% {
        transform: scale(1.1)rotate(-3deg);
    }

    25% {
        transform: scale(1.1) rotate(3deg);
    }

    30% {
        transform: scale(1.1) rotate(-3deg);
    }

    35% {
        transform: scale(1.1) rotate(3deg);
    }
}

@keyframes g_man {

    0%,
    100% {
        transform: none;
    }

    20% {
        transform: scale(1.1);
    }

    30% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1);
    }

    60% {
        transform: scale(1.1);
    }
}

@keyframes center_tiger {

    0%,
    100% {
        transform: none;
    }

    20% {
        transform: scale(1);
    }

    28% {
        transform: scale(1.1);
    }
}

@keyframes center_tiger2 {

    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.6);
        opacity: 0;
    }

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

@keyframes stamp {
    0% {
        transform: scale(3);
        opacity: 0;
    }

    20% {
        transform: scale(2.5);
        opacity: 0.4;
    }

    25% {
        transform: scale(0.9);
        opacity: 0.7;
    }

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

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

@keyframes stamp2 {
    0% {
        transform: scale(3);
        opacity: 0;
    }

    20% {
        transform: scale(2.5);
        opacity: 0;
    }

    25% {
        transform: scale(0.9);
        opacity: 0.7;
    }

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

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

@keyframes it_txt {

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

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


}

@keyframes pokjug {

    0% {
        transform: translateY(20%);
        opacity: 0;
    }

    20% {
        transform: translateY(-20%);
        opacity: 1;
    }

    100% {
        transform: translateY(20%);
        opacity: 0;
    }
}

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

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

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

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

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

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

.c_tiger2 {
    animation: center_tiger2 4s infinite ease-in-out;
}

.c_tiger {
    animation: center_tiger 4s infinite ease-in-out;
}

.g_man {
    animation: g_man 4s infinite ease-in-out;
}

.cute_man {
    animation: cute_man 4s infinite ease-in-out;
}

.q_man {
    animation: q_man 4s infinite ease-in-out;
}

.biker {
    animation: biker 0.3s infinite ease-in-out;
}

.stop_spin {
    animation: stop_spin 4s infinite ease-in-out;
}

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

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

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

.light2 {
    animation: light 2.3s infinite ease-in-out;
}

.trophy {
    animation: trophy 3s infinite ease-in-out;
    transform-origin: bottom center;
}

.slide_y {
    animation: marqueeY 20s infinite linear;
}

.slide_y_r {
    animation: marqueeY_r 20s infinite linear;
}

.slide_y_wrap {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    overflow: hidden;
}

.slide_y img.absol {
    top: 100%;
}

.slide_y_r {
    animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
    bottom: 100%;
}

.scaleOpa {
    animation: scaleOpa infinite 2s;
}

.scaleOpa2 {
    animation: scaleOpa2 infinite 2s;
}

.scaleOpa3 {
    animation: scaleOpa infinite 2s;
}

.scaleOpa4 {
    animation: scaleOpa4 infinite 2s;
}

.scalx {
    animation: scalx 3s linear infinite;
}

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

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

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

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

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

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

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

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

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

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

.ud_txt2 {
    animation: ud_txt2 1.5s infinite ease-in-out;
}

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

.image_sd_wrap {
    overflow: hidden;
}

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

.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;
}



.red_txt {
    background: linear-gradient(130deg, #c31b0e, #c31b0e, #ff0000, #c31b0e, #c31b0e);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: txt-gradation 5s linear infinite;
}

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

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

section {
    overflow: hidden;
    font-family: 'Pretendard Variable';
    letter-spacing: 0;
}

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



.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_red {
    color: #c31b0e;
}

.bg_red {
    background: #c31b0e;
}

.bg_yell {
    background: #fff000;
}


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

.tab_content {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
}

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

.tab_content {
    position: relative;
}

.tab_item {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

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

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

.btn_wrap {
    display: flex;
    pointer-events: none;
}


.con_btn {
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    pointer-events: auto;
}

.hbtn1 {
    clip-path: inset(0 0 0 100%);

    transition: 0.4s;
    z-index: 10;
}

.hbtn2 {
    z-index: 1;
}

.con_btn {
    width: 3.8542vw;
}

@media screen and (min-width:600px) {

    /* PC */
    .con_btn:hover .hbtn1 {
        clip-path: inset(0 0 0 0);
    }
}




/* 버튼  HTML */
/* 

<div class="con10_btn_wrap btn_wrap absol">
          <div class="con10_btn_prev btn_prev con_btn rltv">
            <img class="hbtn1" src="/images/con06_30.png" alt="">
            <img class="hbtn2 absol" src="/images/con06_31.png" alt="">
          </div>
          <div class="con10_btn_next btn_next con_btn rltv rot180">
            <img class="hbtn1" src="/images/con06_30.png" alt="">
            <img class="hbtn2 absol" src="/images/con06_31.png" alt="">
          </div>
        </div><!-- con10_btn_wrap --> 
        
*/



.con_door {
    top: 0;

    display: flex;
}

.con_lt_door {
    left: -28.5vw;
}

.con_rt_door {
    right: -28.5vw;
}

.con_door_bg {
    width: 34vw;
    margin: 0 -0.1vw;
}

@media screen and (max-width:599px) {
    /* 모바일 */
    .con_lt_door {
        left: -61vw;
    }

    .con_rt_door {
        right: -61vw;
    }
    .con13 .con_lt_door {
        left: -69vw;
    }

    .con13 .con_rt_door {
        right: -69vw;
    }
}



/* 문짝 */
/* 

      <div class="con_door con_lt_door absol">
        <div class="bg_red con_door_bg"></div>
        <div class="con02_02">
          <img src="/images/con02_02.png" alt="">
        </div>
      </div><!-- con02_door -->

    <div class="con_door con_rt_door absol">
      <div class="con02_02">
        <img src="/images/con02_02.png" alt="">
      </div>
      <div class="bg_red con_door_bg"></div>
    </div><!-- con02_door -->
      
*/

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

    .con_btn {
        width: 13vw;
    }

    .btn_next .hbtn1 {
        clip-path: inset(0 0 0 0);
    }

}