@charset "utf-8";

@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}

@keyframes scale {
    0% { opacity: 0; transform: scale(.2); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes showHide {
    0%, 100% { opacity: 0; } 
    50% { opacity: 1; } 
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.mainVisual .inner { opacity: 0;}
.mainVisual.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.new .inner { opacity: 0;}
.new.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.guide .inner { opacity: 0;}
.guide.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.video .inner { opacity: 0;}
.video.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.guide .inner { opacity: 0;}
.guide.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.best .inner { opacity: 0;}
.best.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.all .inner { opacity: 0;}
.all.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.review .inner { opacity: 0;}
.review.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.QnA .inner { opacity: 0;}
.QnA.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.partner .partnerSwiper { opacity: 0;}
.partner.on .partnerSwiper { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }
.partner .partnerSwiperUnder { opacity: 0;}
.partner.on .partnerSwiperUnder { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

/* detail.html ani */
.sec1 .inner { opacity: 0;}
.sec1.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.sec2 .inner { opacity: 0;}
.sec2.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.sec3 .inner { opacity: 0;}
.sec3.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.sec4 .inner { opacity: 0;}
.sec4.on .inner { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }

.sec5 .sec5_title { opacity: 0;}
.sec5.on .sec5_title { animation: fadeIn 0.6s ease-in-out .1s 1 forwards running; }
.sec5 .sec5_ul { opacity: 0;}
.sec5.on .sec5_ul { animation: fadeIn 0.6s ease-in-out .6s 1 forwards running; }
.sec5 .sec5_carImg { opacity: 0;}
.sec5.on .sec5_carImg { animation: fadeIn 0.6s ease-in-out 1.1s 1 forwards running; }

/* 1/6 지연 추가 : 로고 애니메이션 효과 */

header .logoBox .logo1{ animation: logoCarLeftShow 2s ease-in-out 0s infinite; }
header .logoBox .logo2{ opacity: 0; animation: logoCarHideToShow 2s ease-in-out 0.1s infinite; }
header .logoBox .logo3{ animation: logoCarFloating1 2s linear 0.2s infinite; }
header .logoBox .logo4{ animation: logoCarFloating2 2s linear 0.2s infinite; }
header .logoBox .logo5{ animation: logoCarFloating3 2s linear 0.2s infinite; }

@keyframes logoCarLeftShow {
    0% {transform: translate3d(-30px, 0px, 0px); }
    50% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes logoCarHideToShow {
    0% { opacity: 0; }
    50% { opacity: 1;}
    100% { opacity: 1; }
}
@keyframes logoCarFloating1 {
    0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
    10% { opacity: 1; transform: translate3d(0px, -2px, 0px);}
    20% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes logoCarFloating2 {
    0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
    20% { opacity: 1; transform: translate3d(0px, -2px, 0px);}
    30% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes logoCarFloating3 {
    0% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
    30% { opacity: 1; transform: translate3d(0px, -2px, 0px);}
    40% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}