@charset "utf-8";

/*토글버튼 애니메이션
@keyframes toggle01 {
    0% {top: 0px;opacity: 1;}
    50% {top: 13px;transform: rotate(0deg);}
    100% {top: 13px;transform: rotate(-45deg);}
}
@keyframes toggle02 {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes toggle03 {
    0% {bottom: 0px;opacity: 1;}
    50% {bottom: 13px;transform: rotate(0deg);}
    100% {bottom: 13px;transform: rotate(45deg);}
}
.toggle01 {
    animation-name: toggle01;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.toggle02 {
    animation-name: toggle02;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.toggle03 {
    animation-name: toggle03;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.toggle01_back {
    animation-name: toggle01;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-direction: reverse;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.toggle02_back {
    animation-name: toggle02;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-direction: reverse;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.toggle03_back {
    animation-name: toggle03;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-direction: reverse;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}*/

/*메인슬라이드 애니메이션*/
@keyframes slidetext01 {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    85% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(500px);
        opacity: 0;
    }
}

@keyframes slidetext02 {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }

    85% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(-500px);
        opacity: 0;
    }
}

@keyframes slidetext03 {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    85% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(500px);
        opacity: 0;
    }
}

@keyframes slidetext04 {
    0% {
        transform: translateX(-500px);
        opacity: 0;
    }

    85% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(200px);
        opacity: 0;
    }
}

@keyframes slidetext05 {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }

    85% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(-500px);
        opacity: 0;
    }
}

@keyframes slidetext06 {
    0% {
        transform: translateX(500px);
        opacity: 0;
    }

    85% {
        transform: translateX(0px);
        opacity: 1;
    }

    100% {
        transform: translateX(-200px);
        opacity: 0;
    }
}

.slidetext01 {
    animation-name: slidetext01;
    animation-duration: 4.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.slidetext02 {
    animation-name: slidetext02;
    animation-duration: 4.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.slidetext03 {
    animation-name: slidetext03;
    animation-duration: 4.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.slidetext04 {
    animation-name: slidetext04;
    animation-duration: 4.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.slidetext05 {
    animation-name: slidetext05;
    animation-duration: 4.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.slidetext06 {
    animation-name: slidetext06;
    animation-duration: 4.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

@media screen and (max-width: 1023px) {
    .slidetext01 {
        animation-name: none;
    }

    .slidetext02 {
        animation-name: none;
    }

    .slidetext03 {
        animation-name: none;
    }

    .slidetext04 {
        animation-name: none;
    }

    .slidetext05 {
        animation-name: none;
    }

    .slidetext06 {
        animation-name: none;
    }
}