.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

.notice {
    background-color: #273E47;
    position: absolute;
    align-items: center;
    width: 1020px;
    margin-top: -18px;
    z-index: 9999;
    border-radius: 5px;
    margin-left: 6rem;

}

.notice p {
    color: #ffff;
    font-size: 14px;
    font-weight: 400;
    margin-top: -6px;
}

.marquee1 ul li a .note_date{
    background-color: #F1DAC4;
    color:#273E47;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.mar-text {
    color: #fff;
    position: absolute;
    width: 103px;
    height: 40px;
    background-color: #A4243B;
    padding: 6px;
    z-index: 99999;
    top: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.mar-text::after {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #A4243B;
    position: absolute;
    left: 100%;
    top: 0;
    content: "";
}

.team-box {
    animation-name: roll-in-blurred-right;
    animation-duration: 2s;
}

.courses-bx-2 {
    animation-name: tilt-in-fwd-tr;
    animation-duration: 1s;
}

.section-head {
    animation-name: tracking-in-contract;
    animation-duration: 3s;
}

@media (max-width: 768px) {
    .notice {
        margin-left: 0;
        width: 380px;
    }
    
    .sp20{
        display: flex;
        flex-wrap: nowrap;
    }
    
    .fet-video{
        width: 100%;
    }
    
    .about-title{
        margin-top: 30px;
        font-size: 20px;
    }
}

@media (max-width: 400px) {
    .notice {
        width: 340px;
    }
}

@-webkit-keyframes tilt-in-fwd-tr {
    0% {
        -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}

@keyframes tilt-in-fwd-tr {
    0% {
        -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}


@-webkit-keyframes roll-in-blurred-right {
    0% {
        -webkit-transform: translateX(1000px) rotate(720deg);
        transform: translateX(1000px) rotate(720deg);
        -webkit-filter: blur(50px);
        filter: blur(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes roll-in-blurred-right {
    0% {
        -webkit-transform: translateX(1000px) rotate(720deg);
        transform: translateX(1000px) rotate(720deg);
        -webkit-filter: blur(50px);
        filter: blur(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0) rotate(0deg);
        transform: translateX(0) rotate(0deg);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}



@-webkit-keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        letter-spacing: normal;
        opacity: 1
    }
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        letter-spacing: normal;
        opacity: 1
    }
}