.meus_NkAnimatedCard * {
    -webkit-backface-visibility: hidden;
}

.meus_NkAnimatedCard .wrap {
    height: 100vh;
    position: relative;
}

.meus_NkAnimatedCard .back {
    height: 100%;
}

.meus_NkAnimatedCard .back__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* background: #1c1c1c; */
    transition: opacity 300ms 800ms linear;
}

.meus_NkAnimatedCard .back__slide .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    opacity: 0.5;
    background: linear-gradient(90deg, #7b29ff, #304ffe);
    transform-origin: 0% 50%;
    transform: scaleX(0);
}

.meus_NkAnimatedCard .back__slide:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.meus_NkAnimatedCard .back__slide.active {
    opacity: 1;
}

.meus_NkAnimatedCard .back__slide:nth-child(even) {
    background: #fff;
}

.meus_NkAnimatedCard .back__slide:nth-child(even) .progress {
    background: #000;
    transform-origin: 100% 50%;
    opacity: 0.5;
}

/* 第一張圖 */
.meus_NkAnimatedCard .back__slide:nth-child(1):before {
    /* background-image: url('https://nebulax.noonspace.com/w73/fit/MsgInfo/industry_bg.jpg'); */
    opacity: 0.8;
    background-image: url('https://nebulax.noonspace.com/w73/fit/MsgInfo/about_bg3.jpg');
    background-size: cover;
    opacity: 1;
}

/* 第二張圖 */
.meus_NkAnimatedCard .back__slide:nth-child(2):before {
background-image: url('https://nebulax.noonspace.com/w73/fit/MsgInfo/image55.jpg');
    background-repeat: no-repeat;
        /* background-size: 101% auto; */
    /* background-position: right calc(50% - 14rem); */
    background-size: cover;
}

.meus_NkAnimatedCard .back__slide:nth-child(2) .back-front-image:after {
    content: '';
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 80%);
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% + 20rem);
    height: 20.5rem;
    width: 100%;
}

.meus_NkAnimatedCard .back__slide:nth-child(2).active .back-front-image {
    opacity: 0.2;
    transform: translate3d(0, 0, 0);
    transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear;
}

.meus_NkAnimatedCard .card {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 70%;
    height: 70%;
    background: #000;
}

.meus_NkAnimatedCard .card__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0rem 2rem rgba(0, 0, 0, 0);
    transition: box-shadow 400ms 400ms linear;
}

.meus_NkAnimatedCard .card__slide.active {
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
}

.meus_NkAnimatedCard .card__slide.exit .date {
    transform: translatex(5rem) rotate(-90deg);
}

.meus_NkAnimatedCard .card__slide:nth-child(even) {
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
}

.meus_NkAnimatedCard .card__slide:nth-child(even) .date, .meus_NkAnimatedCard .card__slide:nth-child(even) .number {
    color: #000;
}

.meus_NkAnimatedCard .card__slide:nth-child(even) .date {
    left: 5.5%;
}

.meus_NkAnimatedCard .card__slide:nth-child(even) .number {
    left: 94.5%;
}

.meus_NkAnimatedCard .card__slide:nth-child(even) .date:before {
    border-bottom: 0.15rem solid #000;
}

.meus_NkAnimatedCard .card__slide:nth-child(even) .number:before {
    border-left: 0.15rem solid #000;
}

.meus_NkAnimatedCard .card__slide:nth-child(even):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 500ms 600ms ease-in-out;
}

.meus_NkAnimatedCard .card__slide:nth-child(even).active {
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
}

.meus_NkAnimatedCard .card__slide:nth-child(even).active .number {
    opacity: 1;
    transition: opacity 200ms 400ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(even).active .date {
    transition: transform 600ms 1200ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1200ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(even).active:after {
    transform: scaleX(1);
    transform-origin: 0% 50%;
}

.meus_NkAnimatedCard .card__slide:nth-child(even).exit .date {
    transform: translatex(0rem) rotate(-90deg);
}

.meus_NkAnimatedCard .card__slide:nth-child(even).exit .number {
    transform: translatex(4rem);
    transition: transform 600ms 700ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 700ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(1).active .image {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
    transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(1).exit .image {
    transform: translate3d(-45%, -60%, 0);
    transition: transform 600ms 300ms linear, opacity 300ms 500ms linear;
}

/* 第一張圖 */
.meus_NkAnimatedCard .card__slide:nth-child(1):after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://nebulax.noonspace.com/w73/fit/MsgInfo/image57.jpg');
    background-size: cover;
    background-position: center 85%;
    /* opacity: 0.15;
    filter: contrast(150%); */
}

.meus_NkAnimatedCard .card__slide:nth-child(2) {
    overflow: hidden;
}

/* 第二張圖 */
.meus_NkAnimatedCard .card__slide:nth-child(2) .back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://nebulax.noonspace.com/w73/fit/MsgInfo/industry_bg.jpg');
    background-size: 135% auto;
    background-position: center;
    /*background-image: url('https://nebulax.noonspace.com/w73/fit/MsgInfo/about_bg3.jpg');*/
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0;
    transform: translatey(0);
    transition: transform 600ms 300ms linear, opacity 300ms 500ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(2) .back-image:after {
    content: '';
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 50%;
    top: 50%;
}

.meus_NkAnimatedCard .card__slide:nth-child(2).active .image {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 1200ms 1300ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1300ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(2).active .back-image {
    opacity: 1;
    transform: translatey(-2rem);
    transition: transform 1200ms 1000ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms 1000ms linear;
}

.meus_NkAnimatedCard .card__slide:nth-child(2).exit .back-image {
    transform: translatey(-4rem);
}

.meus_NkAnimatedCard .content {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translatey(-50%);
    width: 74%;
    height: 68%;
    z-index: 2;
}

.meus_NkAnimatedCard .content__ping {
    position: absolute;
    bottom: 0;
    width: 4rem;
    transition: transform 500ms ease-out;
}

.meus_NkAnimatedCard .content__ping:after {
    content: '';
    display: block;
    height: 0.15rem;
    background: #000;
    width: 100%;
    transition: background 200ms 700ms linear;
    animation: widenFromLeft 1200ms ease-out;
}

@keyframes widenFromLeft {
    0% {
        transform: scaleX(1);
        transform-origin: 0 50%;
    }

    20% {
        transform: scaleX(4);
        transform-origin: 0 50%;
    }

    100% {
        transform: scaleX(1);
        transform-origin: 0 50%;
    }
}

@keyframes widenFromRight {
    0% {
        transform: scaleX(1);
        transform-origin: 100% 50%;
    }

    20% {
        transform: scaleX(4);
        transform-origin: 100% 50%;
    }

    100% {
        transform: scaleX(1);
        transform-origin: 100% 50%;
    }
}

.meus_NkAnimatedCard .content__ping--right {
    transform: translateX(35.5rem);
}

.meus_NkAnimatedCard .content__ping--right:after {
    background: #000;
    animation: widenFromRight 1200ms ease-out;
}

.meus_NkAnimatedCard .content__ping--noanimation:after {
    animation: none !important;
}

.meus_NkAnimatedCard .content__slide {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
	 overflow-x: hidden;
    overflow-y: hidden;
}

.meus_NkAnimatedCard .content__slide.active {
    pointer-events: auto;
}

.meus_NkAnimatedCard .content__slide.active .title__line:before {
    transform: scaleX(1);
    transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: 1000ms;
}

.meus_NkAnimatedCard .content__slide.active .title__line:nth-child(2):before {
    transition-delay: 1200ms;
}

.meus_NkAnimatedCard .content__slide.active .title__inner, .meus_NkAnimatedCard .content__slide.active .desc, .meus_NkAnimatedCard .content__slide.active .button-wrap {
    opacity: 1;
    transform: translatey(0);
}

.meus_NkAnimatedCard .content__slide.active .title__inner {
    transition-delay: 1600ms;
}

.meus_NkAnimatedCard .content__slide.active .desc {
    transition-delay: 1800ms;
}

.meus_NkAnimatedCard .content__slide.active .button-wrap {
    transition-delay: 2000ms;
}

.meus_NkAnimatedCard .content__slide.exit .title__inner, .meus_NkAnimatedCard  .content__slide.exit .desc, .meus_NkAnimatedCard .content__slide.exit .button-wrap {
    transform: translatey(-2.5rem);
    transition: transform 400ms ease-out, opacity 300ms linear;
}

.meus_NkAnimatedCard .content__slide.exit .title__inner {
    transition-delay: 150ms;
}

.meus_NkAnimatedCard .content__slide.exit .desc {
    transition-delay: 300ms;
}

.meus_NkAnimatedCard .content__slide.exit .button-wrap {
    transition-delay: 450ms;
}

.meus_NkAnimatedCard .content__slide:nth-child(even) {
    text-align: right;
}

.meus_NkAnimatedCard .content__slide.scrollbar-display {
    overflow-x: hidden;
    overflow-y: scroll;
}


.meus_NkAnimatedCard .content__slide:nth-child(even) .title {
       color: #0200FE;
    margin: 0 0 30px;
}

.meus_NkAnimatedCard .content__slide:nth-child(even) .button {
    background: transparent;
    color: #fff;
    border: 0.15rem solid #EC5210;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

.meus_NkAnimatedCard .content__slide:nth-child(even) .button:before, .meus_NkAnimatedCard .content__slide:nth-child(even) .button:after {
    display: none;
}

.meus_NkAnimatedCard .content__slide:nth-child(even) .button__hover {
    background: #EC5210;
    animation: full-rest 10s forwards;
}

@keyframes full-rest {
    0% {
        transform-origin: right center;
        transform: scaleX(1);
    }

    100% {
        transform-origin: right center;
        transform: scaleX(1);
    }
}

.meus_NkAnimatedCard .content__slide:nth-child(even) .button:hover .button__hover {
    animation: empty-swipe 500ms forwards;
}

@keyframes empty-swipe {
    0% {
        transform-origin: left center;
        transform: scaleX(1);
    }

    50% {
        transform-origin: left center;
        transform: scaleX(0);
    }

    51% {
        transform-origin: right center;
        transform: scaleX(0);
    }

    100% {
        transform-origin: right center;
        transform: scaleX(1);
    }
}

.meus_NkAnimatedCard .meus_NkAnimatedCard .content__slide:nth-child(even) .title__line:before {
    left: -4rem;
    /*background: #dddbdb;*/
    transform-origin: 0% 50%;
}

.meus_NkAnimatedCard .content__slide:nth-child(even).active .title__line:before {
    transform-origin: 100% 50%;
}

.meus_NkAnimatedCard .title {
    /* color: #fff; */
    font-size: 45px;
    color: #fff;
    line-height: 1.08349;
    font-weight: 600;
    letter-spacing: -.003em;
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

.meus_NkAnimatedCard .title__line {
    display: inline-block;
    position: relative;
}

.meus_NkAnimatedCard .title__line:before {
    /*background: linear-gradient(90deg, #7b29ff, #304ffe);*/
    transform-origin: 100% 50%;
    transition: transform 500ms ease-out;
    transform: scaleX(0);
    content: '';
    display: block;
    position: absolute;
    width: calc(100% + 6rem);
    top: 2rem;
    left: -2rem;
    height: 2rem;
    z-index: -1;
}

.meus_NkAnimatedCard .title__line:nth-child(2):before {
    transition-delay: 200ms;
}

.meus_NkAnimatedCard .title__inner {
    position: relative;
    display: inline-block;
}

.meus_NkAnimatedCard .desc {
    text-align: left;
    font-size: 2vh;
    font-family: 'Libre Franklin', sans-serif;
    line-height: 1.84;
    margin: 0 0 3.6rem;
    /* color: #fff; */
}

@media  (max-width: 768px) {
    .meus_NkAnimatedCard .card {
        width: 90%;
        height: 80%;
        top: 50%;
    } 

    .meus_NkAnimatedCard .title {
        font-size: 38px;
    }

    .meus_NkAnimatedCard .desc {
        /* font-size: 2vh; */
    }
}

.meus_NkAnimatedCard .button {
    background: #f44336bd;
    display: inline-block;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 1.15rem 2rem;
    cursor: pointer;
    position: relative;
    z-index: 2;
    color: #fff; 
    border-top: 0.15rem solid #304ffe;
    border-bottom: 0.15rem solid #7b29ff;
    box-shadow: 0 1rem 2rem rgba(123, 41, 255, 0.2);
    transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.meus_NkAnimatedCard .button:before, .meus_NkAnimatedCard .button:after, .meus_NkAnimatedCard .button__hover {
    content: '';
    position: absolute;
    top: -1%;
    height: 102%;
    width: 0.15rem;
    background: linear-gradient(#304ffe, #7b29ff);
}

.meus_NkAnimatedCard .button:before {
    left: 0;
}

.meus_NkAnimatedCard .button:after {
    right: 0;
}

.meus_NkAnimatedCard .button__hover {
    left: -1%;
    width: 102%;
    height: 102%;
    z-index: -1;
    animation: rest 10s forwards;
}

@keyframes rest {
    0% {
        transform-origin: right center;
        transform: scaleX(0);
    }

    100% {
        transform-origin: right center;
        transform: scaleX(0);
    }
}

.meus_NkAnimatedCard .button:hover {
    transform: translatey(-0.5rem);
}

.meus_NkAnimatedCard .button:hover .button__hover {
    animation: swipe 500ms forwards;
}

@keyframes swipe {
    0% {
        transform-origin: left center;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left center;
        transform: scaleX(1);
    }

    51% {
        transform-origin: right center;
        transform: scaleX(1);
    }

    100% {
        transform-origin: right center;
        transform: scaleX(0);
    }
}

.meus_NkAnimatedCard .title__inner, .meus_NkAnimatedCard .desc, .meus_NkAnimatedCard .button-wrap {
    opacity: 0;
    transform: translatey(2.5rem);
    position: relative;
    transition: transform 800ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 300ms linear;
}