.fadein,
.fadeindown,
.fadeinup,
.fadeoff,
.fadeout {
    animation-fill-mode: forwards;
    animation-duration: 0.9s;
}
.fadein,
.fadeindown,
.fadeinup,
.fadeoff,
.fadeon,
.fadeout {
    animation-duration: 0.9s;
}
@keyframes Start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}
@keyframes Preloader {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes Play {
    from {
        background-position: 0;
    }
    to {
        background-position: -360px;
    }
}
@keyframes Rotate {
    from {
        transform: rotate(0) translateZ(0);
    }
    to {
        transform: rotate(360deg) translateZ(0);
    }
}
@keyframes scaleRotate {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(360deg) translateZ(0);
    }
}
@keyframes RotateLarge {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: scale(1.2) rotate(360deg) translateZ(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 200px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -200px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes goLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes goRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes toRight {
    0% {
        opacity: 0;
        right: -100px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes scaleSmall {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes scaleLarge {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes bounceInDown {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes DrawStroke {
    0% {
        stroke-dashoffset: 300;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes DrawStroke2 {
    0% {
        stroke-dashoffset: 5000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes DrawStroke3 {
    0% {
        stroke-dashoffset: 300;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes trackBallSlide {
    0%,
    100%,
    30%,
    60% {
        opacity: 1;
        transform: translateY(-12px);
    }
    15%,
    50% {
        opacity: 0;
        transform: translateY(8px);
    }
}
@keyframes StrokeLine {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 200;
    }
}
@keyframes FillCorlor {
    0% {
        stop-color: #af6b00;
    }
    100% {
        stop-color: #2f4051;
    }
}
@keyframes goHeight {
    0% {
        opacity: 0;
        transform: scale3d(1, 0, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
@keyframes ScaleSmX {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}
@keyframes BorderBox {
    0%,
    100% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}
.fadein {
    animation-name: fadeIn;
}
.fadeout {
    animation-name: fadeOut;
}
.fadeindown {
    animation-name: fadeInDown;
}
.fadeinup {
    animation-name: fadeInUp;
}
.fadeoff {
    animation-name: fadeOff;
}
.fadeon {
    animation-name: fadeOn;
    animation-fill-mode: forwards;
}
.goleft,
.goright {
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.goleft {
    animation-name: goLeft;
}
.goright {
    animation-name: goRight;
}
.scalelarge {
    animation: scaleLarge;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}
.scalesmall {
    animation: scaleSmall;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}
.slide-fade-out {
    animation: fadeOut;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}
.slide-fade-in {
    animation: fadeIn;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
    z-index: 10;
}
.slide-pics {
    transform: translateZ(0);
    will-change: transform;
}
@media screen and (min-width: 1100px) {
    .box-ani span,
    .box-nav,
    .description,
    .text-banner,
    .wheel {
        opacity: 0;
    }
    .wheel.show {
        animation: fadeIn;
        animation-duration: 0.6s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .box-nav.show {
        animation: toRight;
        animation-duration: 0.4s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .select-banner .description,
    .show-text .text-banner {
        animation-name: fadeInUp;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
    }
    .play-button.show::after,
    .player-vid.show::after {
        animation: BorderBox 5s infinite;
    }
    .ani-02 {
        transition: opacity 0.9s ease-in-out 0.3s;
    }
    .show-text .blur-bg {
        filter: blur(5px);
        transition: all 0.8s ease 2s;
    }
    .show-text .ani-01 {
        animation: scaleRotate;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .ani-02 {
        opacity: 1;
        animation: Preloader 18s linear infinite;
    }
    #contact-page .box-cover::after,
    #contact-page .box-intro,
    #member-page .box-cover::after,
    #partner-page .box-cover::after,
    #project-page .box-cover::after,
    .ani-item:not(.pic-faci-full),
    .box-bg::after,
    .box-bg::before,
    .box-business-home,
    .box-intro h2,
    .box-intro > p,
    .box-news-home,
    .business-home .slide-controls,
    .col-left,
    .col-right,
    .contact-form,
    .cycle-value,
    .cycle-value-bg,
    .go-inner,
    .google-map,
    .history,
    .img-chart,
    .left-pic,
    .line-cross > h2::after,
    .logo-member,
    .manager-slide,
    .member-item,
    .partner-item,
    .pic-chairman,
    .pic-logo,
    .right-text,
    .right-text::after,
    .right-text::before,
    .sub-inner,
    .text-inner,
    .value::after {
        opacity: 0;
    }
    .show-text .ani-03 {
        animation: scaleRotate;
        animation-duration: 1s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .show-text .ani-04 {
        animation: scaleRotate;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
    }
    .show-text .box-ani.align-right .ani-04 {
        animation: RotateLarge;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
    }
    .group-central[data-name="culture-home"] .box-intro {
        clip-path: polygon(0 0, 100% 50%, 50% 100%, 0 50%);
        transition: all 0.6s ease-in-out;
    }
    .box-intro h2::after {
        transform: scale3d(0, 1, 1);
        transition: transform 0.6s ease-in-out;
    }
    .show-text .box-intro h2::after {
        transform: scale3d(1, 1, 1);
        transition-delay: 0.5s;
    }
    .show-text .pic-logo {
        animation: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .col-left {
        animation: goLeft;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .col-right {
        animation: goRight;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .box-business-home,
    .show-text .box-news-home {
        animation: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .box-intro > p {
        animation: scaleLarge;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .go-inner {
        animation: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0.9s;
        animation-fill-mode: forwards;
    }
    .group-central[data-name="culture-home"].show-text .box-intro {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .show-text .business-home .slide-controls {
        animation: fadeIn;
        animation-duration: 0.9s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .show-text .box-bg::before {
        animation-name: goLeft;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }
    .show-text .box-bg::after {
        animation-name: goRight;
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .controls {
        animation: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
    }
    .show-text .left-pic {
        animation: scaleSmall;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .right-text,
    .show-text .right-text::after,
    .show-text .right-text::before {
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
    }
    .show-text .right-text {
        animation-name: fadeInUp;
        animation-delay: 0s;
    }
    .show-text .right-text::after {
        animation-name: fadeIn;
        animation-delay: 1s;
    }
    .show-text .right-text::before {
        animation-name: scaleLarge;
        animation-delay: 0.9s;
    }
    .group-central[data-name="overview"].show-text .text-inner {
        animation: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0.9s;
        animation-fill-mode: forwards;
    }
    .show-text .text-inner {
        animation: goRight;
        animation-duration: 0.9s;
        animation-delay: 0.9s;
        animation-fill-mode: forwards;
    }
    .show-text .pic-chairman {
        animation: goLeft;
        animation-duration: 0.9s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }
    .show-text .history {
        animation: goLeft;
        animation-duration: 0.9s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
    }
    .show-text .cycle-value,
    .show-text .value::after {
        animation-name: scaleSmall;
        animation-fill-mode: forwards;
    }
    .show-text .value::after {
        animation-duration: 0.9s;
        animation-delay: 0s;
    }
    .show-text .cycle-value {
        animation-duration: 1.5s;
        animation-delay: 0.5s;
    }
    .show-text .cycle-value-bg {
        animation-name: scaleLarge;
        animation-duration: 0.9s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .show-text .img-chart,
    .show-text .manager-slide {
        animation-name: fadeInUp;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
    }
    .show-text .img-chart {
        animation-delay: 0.5s;
    }
    .show-text .manager-slide {
        animation-delay: 0s;
    }
    .show-text .sub-inner {
        animation: goLeft;
        animation-duration: 0.9s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }
    .outer-nav.second.fixed.on-show,
    .outer-nav.second.on-show {
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
    }
    .ani-item:not(.pic-faci-full).on-show {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .project-business,
    .text-business {
        opacity: 0;
    }
    .show-text .text-business {
        animation-name: goLeft;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
    }
    .show-text .project-business {
        animation-name: goRight;
        animation-duration: 0.9s;
        animation-delay: 0.6s;
        animation-fill-mode: forwards;
    }
    .show-text .box-cover::after {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
    }
    .pic-faci-full::after,
    .pic-faci-full::before {
        content: "";
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: #ececec;
        transition: width 0.9s linear 1s;
    }
    .pic-faci-full::before {
        left: 0;
    }
    .pic-faci-full::after {
        right: 0;
    }
    .pic-faci-full.on-show::after,
    .pic-faci-full.on-show::before {
        width: 0;
    }
    .show-text .member-item {
        animation-name: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .logo-member {
        animation-name: scaleLarge;
        animation-duration: 1s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .partner-item:nth-child(odd) {
        animation-delay: 0.5s;
    }
    .show-text .partner-item {
        animation-name: fadeInUp;
        animation-duration: 0.9s;
        animation-fill-mode: forwards;
    }
    #contact-page .show-text .box-intro,
    .show-text .contact-form {
        animation: fadeInUp;
        animation-duration: 0.9s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .show-text .google-map {
        animation-name: bounceInDown;
        animation-duration: 0.9s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
    }
    .line-cross > h2.on-show::after {
        animation-name: ScaleSmX;
        animation-duration: 1.5s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
    }
}
@media screen and (max-width: 1100px) {
    .description {
        opacity: 0;
    }
    .select-banner .description {
        animation-name: fadeInUp;
        animation-duration: 0.6s;
        animation-fill-mode: forwards;
    }
    .box-business-home,
    .box-center,
    .box-news-home {
        animation-delay: 0s !important;
    }
}