@charset "utf-8";

/***************animation**********************/

.fadeIn {
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
    -moz-transition: all .8s ease;
    transition: all .8s ease;
    -ms-transition: all .8s ease;
}

.fadeIn[data-emergence=hidden] {
    opacity: 0;
}

.fadeIn[data-emergence=visible] {
    opacity: 1;
}

[data-emergence=hidden] .fadeIn {
    opacity: 0;
}

[data-emergence=visible] .fadeIn {
    opacity: 1;
}

.fadeIn[data-emergence=visible].delay-1s {
    transition-delay: 0.3s;
}

.fadeIn[data-emergence=visible].delay-2s {
    transition-delay: 0.6s;
}

.fadeIn[data-emergence=visible].delay-3s {
    transition-delay: 0.9s;
}

.fadeIn[data-emergence=visible].delay-4s {
    transition-delay: 1.2s;
}

.fadeIn[data-emergence=visible].delay-5s {
    transition-delay: 1.5s;
}

.fadeInUp {
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
    -moz-transition: all .8s ease;
    transition: all .8s ease;
    -ms-transition: all .8s ease;
}

.fadeInUp[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px)
}

.fadeInUp[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

[data-emergence=hidden] .fadeInUp {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px)
}

[data-emergence=visible] .fadeInUp {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.fadeInRight {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease
}

.fadeInRight[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px);
}

.fadeInRight[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

[data-emergence=hidden] .fadeInRight {
    opacity: 0;
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    transform: translateX(30px);
}

[data-emergence=visible] .fadeInRight {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.fadeInLeft {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease
}

.fadeInLeft[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px)
}

.fadeInLeft[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

[data-emergence=hidden] .fadeInLeft {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px)
}

[data-emergence=visible] .fadeInLeft {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.fadeInDown {
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
    -moz-transition: all .8s ease;
    transition: all .8s ease;
    -ms-transition: all .8s ease;
}

.fadeInDown[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px)
}

.fadeInDown[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

[data-emergence=hidden] .fadeInDown {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px)
}

[data-emergence=visible] .fadeInDown {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

[data-emergence="hidden"].emergence-zoomIn {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

[data-emergence="visible"].emergence-zoomIn {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}


/* 背景兩張疊圖閃光動畫 */

@-webkit-keyframes img_shine {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

@keyframes img_shine {
    0% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}


/* 文字漸層動畫 */

#loreal-compaign .color-text-2 {
    /* background: -webkit-linear-gradient(left, #010415 0%, #000745 24%, #010415 36%, #000745 46%, #010415 52%, #000745 58%, #000745 67%, #010415 100%); */
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: -webkit-text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-animation-name: colorText;
    animation-name: colorText;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-iteration-count: masked-light infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes colorText {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.zoom_in {
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.zoom_in[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
}

.zoom_in[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.fadeIn[data-emergence=visible].delay-1s {
    transition-delay: 0.3s;
}

.fadeIn[data-emergence=visible].delay-2s {
    transition-delay: 0.6s;
}

.fadeIn[data-emergence=visible].delay-3s {
    transition-delay: 0.9s;
}

.fadeIn[data-emergence=visible].delay-4s {
    transition-delay: 1.2s;
}

.fadeIn[data-emergence=visible].delay-5s {
    transition-delay: 1.5s;
}

[data-emergence=visible] .fadeIn.delay-1s {
    transition-delay: 0.3s;
}

[data-emergence=visible] .fadeIn.delay-2s {
    transition-delay: 0.6s;
}

[data-emergence=visible] .fadeIn.delay-3s {
    transition-delay: 0.9s;
}

[data-emergence=visible] .fadeIn.delay-4s {
    transition-delay: 1.2s;
}

[data-emergence=visible] .fadeIn.delay-5s {
    transition-delay: 1.5s;
}

.fadeInDown[data-emergence=visible].delay-1s {
    transition-delay: 0.3s;
}

.fadeInDown[data-emergence=visible].delay-2s {
    transition-delay: 0.6s;
}

.fadeInDown[data-emergence=visible].delay-3s {
    transition-delay: 0.9s;
}

.fadeInDown[data-emergence=visible].delay-4s {
    transition-delay: 1.2s;
}

.fadeInDown[data-emergence=visible].delay-5s {
    transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInDown.delay-1s {
    transition-delay: 0.3s;
}

[data-emergence=visible] .fadeInDown.delay-2s {
    transition-delay: 0.6s;
}

[data-emergence=visible] .fadeInDown.delay-3s {
    transition-delay: 0.9s;
}

[data-emergence=visible] .fadeInDown.delay-4s {
    transition-delay: 1.2s;
}

[data-emergence=visible] .fadeInDown.delay-5s {
    transition-delay: 1.5s;
}

.fadeInUp[data-emergence=visible].delay-1s {
    transition-delay: 0.3s;
}

.fadeInUp[data-emergence=visible].delay-2s {
    transition-delay: 0.6s;
}

.fadeInUp[data-emergence=visible].delay-3s {
    transition-delay: 0.9s;
}

.fadeInUp[data-emergence=visible].delay-4s {
    transition-delay: 1.2s;
}

.fadeInUp[data-emergence=visible].delay-5s {
    transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInUp.delay-1s {
    transition-delay: 0.3s;
}

[data-emergence=visible] .fadeInUp.delay-2s {
    transition-delay: 0.6s;
}

[data-emergence=visible] .fadeInUp.delay-3s {
    transition-delay: 0.9s;
}

[data-emergence=visible] .fadeInUp.delay-4s {
    transition-delay: 1.2s;
}

[data-emergence=visible] .fadeInUp.delay-5s {
    transition-delay: 1.5s;
}

.fadeInLeft[data-emergence=visible].delay-1s {
    transition-delay: 0.3s;
}

.fadeInLeft[data-emergence=visible].delay-2s {
    transition-delay: 0.6s;
}

.fadeInLeft[data-emergence=visible].delay-3s {
    transition-delay: 0.9s;
}

.fadeInLeft[data-emergence=visible].delay-4s {
    transition-delay: 1.2s;
}

.fadeInLeft[data-emergence=visible].delay-5s {
    transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInLeft.delay-1s {
    transition-delay: 0.3s;
}

[data-emergence=visible] .fadeInLeft.delay-2s {
    transition-delay: 0.6s;
}

[data-emergence=visible] .fadeInLeft.delay-3s {
    transition-delay: 0.9s;
}

[data-emergence=visible] .fadeInLeft.delay-4s {
    transition-delay: 1.2s;
}

[data-emergence=visible] .fadeInLeft.delay-5s {
    transition-delay: 1.5s;
}

.fadeInRight[data-emergence=visible].delay-1s {
    transition-delay: 0.3s;
}

.fadeInRight[data-emergence=visible].delay-2s {
    transition-delay: 0.6s;
}

.fadeInRight[data-emergence=visible].delay-3s {
    transition-delay: 0.9s;
}

.fadeInRight[data-emergence=visible].delay-4s {
    transition-delay: 1.2s;
}

.fadeInRight[data-emergence=visible].delay-5s {
    transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInRight.delay-1s {
    transition-delay: 0.3s;
}

[data-emergence=visible] .fadeInRight.delay-2s {
    transition-delay: 0.6s;
}

[data-emergence=visible] .fadeInRight.delay-3s {
    transition-delay: 0.9s;
}

[data-emergence=visible] .fadeInRight.delay-4s {
    transition-delay: 1.2s;
}

[data-emergence=visible] .fadeInRight.delay-5s {
    transition-delay: 1.5s;
}


/* AOS動畫 */


/* 純淡入動畫 */

.onlyFadeInAnimate {
    opacity: 0;
    position: relative;
}

@-webkit-keyframes onlyFadeInAnimate {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes onlyFadeInAnimate {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.swiper-slide-active.aos-animate .onlyFadeInAnimate {
    animation: onlyFadeInAnimate 1.0s forwards;
    -webkit-animation: onlyFadeInAnimate 1.0s forwards;
}


/* 由上往下淡入動畫 */

.fadeInTopToDownAnimate {
    position: relative;
    opacity: 0;
}

@-webkit-keyframes fadeInTopToDownAnimate {
    0% {
        transform: translate( 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate( 0, 50px);
        opacity: 1;
    }
}

@keyframes fadeInTopToDownAnimate {
    0% {
        transform: translate( 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate( 0, 50px);
        opacity: 1;
    }
}

.swiper-slide-active.aos-animate .fadeInTopToDownAnimate {
    animation: fadeInTopToDownAnimate 1.0s forwards;
    -webkit-animation: fadeInTopToDownAnimate 1.0s forwards;
}

.swiper-slide-active.aos-animate .delay-1s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.swiper-slide-active.aos-animate .delay-2s {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.swiper-slide-active.aos-animate .delay-3s {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}


/* 由左往右淡入動畫 */

.fadeInLeftToRightAnimate {
    position: relative;
    opacity: 0;
}

@-webkit-keyframes fadeInLeftToRightAnimate {
    0% {
        transform: translate( 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate( 5px, 0);
        opacity: 1;
    }
}

@keyframes fadeInLeftToRightAnimate {
    0% {
        transform: translate( 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate( 5px, 0);
        opacity: 1;
    }
}

.swiper-slide-active.aos-animate .fadeInLeftToRightAnimate {
    animation: fadeInLeftToRightAnimate 1.0s forwards;
    -webkit-animation: fadeInLeftToRightAnimate 1.0s forwards;
}


/* 由右往左淡入動畫 */

.fadeInRightToLeftAnimate {
    position: relative;
    opacity: 0;
}

@-webkit-keyframes fadeInRightToLeftAnimate {
    0% {
        transform: translate( 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate( -5px, 0);
        opacity: 1;
    }
}

@keyframes fadeInRightToLeftAnimate {
    0% {
        transform: translate( 0, 0);
        opacity: 0;
    }
    100% {
        transform: translate( -5px, 0);
        opacity: 1;
    }
}

.swiper-slide-active.aos-animate .fadeInRightToLeftAnimate {
    animation: fadeInRightToLeftAnimate 1.0s forwards;
    -webkit-animation: fadeInRightToLeftAnimate 1.0s forwards;
}