@keyframes Bg-ZoomIn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}
@keyframes Bg-ZoomOut {
    0% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}



@keyframes Start {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}
@keyframes Reveal {
    from {
        transform: scale(0.001);
    }
    to {
        transform: scale(1);
    }
}
@keyframes Slide {
    to {
        transform: translateX(20px);
    }
}
@keyframes Preloader {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes DrawStroke {
    0% {
        stroke-dashoffset: 800;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes DrawStroke2 {
    0% {
        stroke-dashoffset: 800;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes Play {
    from {
        background-position: 0;
    }
    to {
        background-position: -360px;
    }
}
@keyframes Ani {
    0% {
        box-shadow: 0 0 0 rgba(220, 220, 220, 0);
        border: 1px solid rgba(220, 220, 220, 0);
        transform: scale(0);
    }
    70% {
        box-shadow: 0 0 50px rgba(220, 220, 220, 1);
        border: 1px solid rgba(220, 220, 220, 1);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 60px rgba(220, 220, 220, 0);
        border: 0 solid rgba(220, 220, 220, 0);
        transform: scale(2);
    }
}
@keyframes Bg-Animation {
    0%,
    100% {
        transform: translate3d(-50%, -50%, 0) scale(0.8);
        opacity: 0;
    }
    70% {
        transform: translate3d(-50%, -50%, 0) scale(1.2);
        opacity: 1;
    }
}
@keyframes BgColor {
    from {
        background-color: rgba(0, 72, 53, 1);
    }
    to {
        background-color: rgba(176, 92, 30, 1);
    }
}
@keyframes BorderColor {
    0%,
    100% {
        border-color: #db9614;
    }
    50% {
        border-color: #b3bcc1;
    }
}
@keyframes Leftpage {
    from {
        left: -100%;
    }
    to {
        left: 100%;
    }
}
@keyframes Rotate {
    from {
        transform: rotate(0) translateZ(0);
    }
    to {
        transform: rotate(360deg) translateZ(0);
    }
}
@keyframes empty {
    0% {
        opacity: 1;
    }
}
@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, -100px, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateX(0) scale(1);
        opacity: 1;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg) scale(0.5);
        opacity: 0;
    }
}
@keyframes scaleSmall {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes scaleLarge {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes trackBallSlide {
    0%,
    100%,
    30%,
    60% {
        opacity: 1;
        transform: translateY(-12px);
    }
    15%,
    50% {
        opacity: 0;
        transform: translateY(8px);
    }
}
@keyframes goHeight {
    from {
        transform: scale3d(1, 0, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes goHeight1 {
    from {
        transform: scale3d(1, 0, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes aniHeight {
    from {
        transform: scale3d(1, 1, 1);
    }
    to {
        transform: scale3d(1, 0, 1);
    }
}
@keyframes aniWidth {
    from {
        transform: scale3d(1, 1, 1);
    }
    to {
        transform: scale3d(0, 1, 1);
    }
}
@keyframes moveLeft {
    100% {
        transform: translateX(-100%);
    }
}
@keyframes moveRight {
    100% {
        transform: translateX(100%);
    }
}
@keyframes MaskPlay {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}
@keyframes MaskPlayt {
    to {
        -webkit-mask-position: -100% 0;
        mask-position: -100% 0;
    }
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}
@keyframes Show100 {
    from {
        stroke-dashoffset: 537;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes heightgo {
    from {
        height: 0;
    }
    to {
        height: 100%;
        opacity: 1;
    }
}
@keyframes goRight {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes goLeft {
    0% {
        opacity: 0;
        transform: translate3d(50%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

    .ani-item:not(.pic-length).on-show,
    .map-box.ani-item.on-show {
        animation-duration: 1.5s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .details-outer h2.ani-item {
        opacity: 1;
    }
    .ani-item:not(.pic-length).on-show {
        animation-name: fadeInUp;
    }







.fadein {
    animation-name: fadeIn;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.fadeout {
    animation-name: fadeOut;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.flipinx,
.flipoutx {
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.flipoutx {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipOutX;
}
.flipinx {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInX;
}
.fadeindown,
.fadeinup,
.fadeoff,
.fadeon {
    animation-duration: 1s;
}
.fadeindown {
    animation-name: fadeInDown;
    animation-fill-mode: forwards;
}
.fadeinup {
    animation-name: fadeInUp;
    animation-fill-mode: forwards;
}
.fadeoff {
    animation-name: fadeOff;
    animation-fill-mode: forwards;
}
.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: 1s;
    animation-fill-mode: forwards;
}
.moveleft,
.moveright {
    pointer-events: none;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.moveleft {
    animation-name: moveLeft;
}
.moveright {
    animation-name: moveRight;
}
.container,
.footer,
.go-top,
.mobile-call,
.phone-desktop {
    animation: Start 0.3s steps(1, end) 0s 1 normal both;
}
.login-down {
    animation: Start 2s steps(1, end) 0s 1 normal both;
}
.txt-banner h2,
.txt-banner p {
    opacity: 0;
    transition: all 1s cubic-bezier(0.23, 1, 0.38, 1);
}
.ani-text .txt-banner h2 {
    transform: scale(1);
    transition-delay: 0.5s;
    opacity: 1;
}
.ani-text .txt-banner p {
    transform: scale(1);
    transition-delay: 1s;
    opacity: 1;
}
.title-detial {
    opacity: 0;
}
.on-show.title-detial {
    animation-name: scaleSmall;
    animation-duration: 0.8s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
.bg-overlay-banner {
    will-change: opacity;
}
@media screen and (min-width: 1100px) {
    .footer::after,
    .google-map::after,
    .google-map::before {
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
        background-color: #fff;
    }
    .a-col-4,
    .a-col-8,
    .about-detial,
    .back-event,
    .bottom-intro,
    .bottom-video,
    .box-member .bg-cover,
    .box-member::after,
    .box-news-home,
    .box-s-4,
    .chart-about,
    .circle-about,
    .circle-big,
    .col-txt,
    .content-s-2,
    .content-s-4 .bg-cover,
    .img-value,
    .input-but,
    .item-achievement,
    .item-project,
    .left-event,
    .list-m,
    .list-service-home li,
    .load-text,
    .load-title,
    .location-pic,
    .location-txt,
    .logo-member,
    .map-box,
    .market-news-home .col-m,
    .member-list li,
    .news-item,
    .news-new,
    .news-top,
    .outer-nav,
    .page-pagination,
    .pic-s-1,
    .pic-service-home,
    .pic-slider,
    .pic-top-intro,
    .right-event,
    .section-first,
    .select-list,
    .slide-ach,
    .slide-detail,
    .slide-done-pic,
    .slide-partner,
    .slide-s,
    .slider-history,
    .text-done-news,
    .time-intro,
    .title-1,
    .title-2,
    .title-b,
    .title-border,
    .title-pro,
    .title-sm,
    .two-column,
    .txt-facilities,
    .txt-member,
    .txt-s-1,
    .txt-vision ,
    .value-about,
    .video-center,
    .view-events,
    .wrap-event-home,.list-item {
        opacity: 0;
    }
    .on-show.outer-nav:not(.second) {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show.footer::after,
    .on-show.list-service-home li,
    .on-show.pic-service-home,
    .on-show.section-first {
        animation-duration: 0.8s;
        animation-delay: 0s;
    }
    .on-show.section-first {
        animation-name: fadeInUp;
        animation-fill-mode: forwards;
    }
    .footer::after {
        width: 100%;
        z-index: 1;
    }
    .on-show.footer::after {
        animation-name: aniWidth;
        animation-fill-mode: forwards;
    }
    .on-show.pic-service-home {
        animation-name: scaleSmall;
        animation-fill-mode: forwards;
    }
    .on-show.list-service-home li {
        animation-name: fadeInUp;
        animation-fill-mode: forwards;
    }
    .on-show.news-new,
    .on-show.news-top {
        animation-duration: 0.8s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .on-show.news-top {
        animation-name: goRight;
    }
    .on-show.news-new {
        animation-name: goLeft;
    }
    .market-news-home .on-show .col-m {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .market-news-home .on-show .col-m:nth-child(even) {
        animation-delay: 0.5s;
    }
    .on-show.list-news-home .box-news-home {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
    }
	
.on-show.box-service-home .list-item:nth-child(1) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}
.on-show.box-service-home .list-item:nth-child(2) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}
.on-show.box-service-home .list-item:nth-child(3) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}
.on-show.box-service-home .list-item:nth-child(4) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}
.on-show.box-service-home .list-item:nth-child(5) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
}
	
	
	
    .on-show.slide-ach,
    .on-show.slide-partner {
        animation-name: scaleSmall;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show.slide-ach {
        animation-duration: 1s;
    }
    .on-show.slide-partner {
        animation-duration: 0.8s;
    }
    .google-map::after,
    .google-map::before {
        content: " ";
        width: 50%;
        transition: all 0.8s ease-in-out;
        z-index: 10;
    }
    .google-map::after {
        left: auto;
        right: 0;
    }
    .on-show.google-map::after,
    .on-show.google-map::before {
        width: 0;
    }
    .on-show.title-border {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show.title-2 {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0.8s;
        animation-fill-mode: forwards;
    }
    .on-show.title-1 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show .circle-about,
    .on-show .circle-big,
    .on-show.value-about {
        animation-name: scaleSmall;
    }
    .member-list li.on-show,
    .on-show .circle-about,
    .on-show .circle-big,
    .on-show.achievement-about .two-column,
    .on-show.chart-about,
    .on-show.value-about,
    .row-1 .on-show.col-txt,
    .row-2 .on-show.col-txt {
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }
    .on-show .circle-big,
    .on-show.value-about {
        animation-delay: 0.3s;
    }
    .on-show .head-circle {
        animation-delay: 0.5s;
    }
    .on-show .circle-about:nth-child(1) {
        animation-delay: 0.7s;
    }
    .on-show .circle-about:nth-child(2) {
        animation-delay: 0.9s;
    }
    .on-show .circle-about:nth-child(3) {
        animation-delay: 1.1s;
    }
    .row-1 .on-show.col-txt,
    .row-2 .on-show.col-txt {
        animation-name: fadeInUp;
        animation-delay: 0s;
    }
    .on-show.slider-history,
    .on-show.title-sm,
    .on-show.txt-vision {
        animation-name: scaleSmall;
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .member-list li.on-show,
    .on-show.chart-about {
        animation-name: fadeInUp;
        animation-delay: 0s;
    }
    .on-show.achievement-about .two-column {
        animation-name: scaleSmall;
        animation-delay: 0s;
    }
    .on-show.slider-achievement .item-achievement {
        animation-name: flipInX;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show.img-value,
    .on-show.pic-slider {
        animation-name: scaleSmall;
        animation-fill-mode: forwards;
    }
    .on-show.pic-slider {
        animation-duration: 0.8s;
        animation-delay: 0s;
    }
    .on-show.img-value {
        animation-duration: 0.8s;
        animation-delay: 0.8s;
    }
    .on-show.a-col-8 {
        animation-name: goRight;
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show.a-col-4 {
        animation-name: goLeft;
        animation-duration: 0.8s;
        animation-delay: 0.8s;
        animation-fill-mode: forwards;
    }
    .on-show .logo-member,
    .on-show .pic-s-1,
    .on-show .txt-member,
    .on-show .txt-s-1,
    .on-show.content-s-2 {
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show .logo-member {
        animation-name: scaleSmall;
        animation-duration: 0.8s;
    }
    .on-show .txt-member {
        animation-name: fadeInUp;
        animation-duration: 1s;
    }
    .box-member.on-show .bg-cover,
    .box-member.on-show::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show .pic-s-1 {
        animation-name: fadeInUp;
        animation-duration: 1s;
    }
    .on-show .txt-s-1 {
        animation-name: scaleSmall;
        animation-duration: 0.8s;
    }
    .on-show.content-s-2 {
        animation-name: fadeInUp;
        animation-duration: 1s;
    }
    .on-show.content-s-4 .bg-cover {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show .item-project,
    .on-show.about-detial,
    .on-show.box-s-4,
    .on-show.select-list,
    .on-show.title-b,
    .on-show.title-pro {
        animation-name: scaleSmall;
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .num-detial .col-num:nth-child(1) svg path {
        animation-delay: 0.3s;
    }
    .num-detial .col-num:nth-child(2) svg path {
        animation-delay: 0.5s;
    }
    .num-detial .col-num:nth-child(3) svg path {
        animation-delay: 0.7s;
    }
    .num-detial .col-num svg path {
        fill: #f1662f;
        stroke: none;
        stroke-miterlimit: 10;
        stroke-width: 0;
        stroke-dasharray: 800;
        stroke-dashoffset: 800;
    }
    .on-show.num-detial .col-num svg path {
        fill: none;
        stroke: #a1a1a1;
        stroke-width: 1;
        animation-name: DrawStroke;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-timing-function: linear;
    }
    .on-show .location-pic,
    .on-show .location-txt,
    .on-show.slide-s,
    .on-show.txt-facilities {
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .on-show .location-pic {
        animation-name: goRight;
    }
    .on-show .location-txt {
        animation-name: goLeft;
    }
    .on-show.slide-s,
    .on-show.txt-facilities {
        animation-name: scaleSmall;
    }
    .slide-detail.on-show {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .career-box,
    .career-form,
    .left-conpen,
    .right-conpen .txt-member {
        opacity: 0;
    }
    .on-show .left-conpen,
    .on-show .right-conpen .txt-member {
        animation-name: scaleSmall;
        animation-duration: 0.8s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .career-box.on-show,
    .on-show.career-form {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .load-content.show .load-title,
    .news-item.on-show,
    .page-pagination.on-show {
        animation-duration: 0.8s;
    }
    .news-item.on-show {
        animation-name: fadeIn;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
    }
    .load-content.show .load-title,
    .load-text.on-show,
    .on-show.video-center,
    .page-pagination.on-show {
        animation-delay: 0s;
        animation-name: fadeInUp;
        animation-fill-mode: forwards;
    }
    .load-text.on-show {
        animation-duration: 1.2s;
    }
    .on-show.video-center {
        animation-duration: 1s;
    }
    .on-show.bottom-video {
        animation-name: fadeInUp;
        animation-duration: 0.8s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
    }
    .contact-info,
    
    .input-text .col {
        transform: scale3d(0, 1, 1);
    }
    .input-text .col.on-show {
        animation: scaleSmall;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .input-but.on-show {
        animation-name: scaleSmall;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .contact-info.on-show,
    .map-box.on-show {
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }
    .contact-info.on-show {
        animation-name: scaleSmall;
        animation-delay: 1.3s;
    }
    .map-box.on-show {
        animation-name: fadeIn;
        animation-delay: 0s;
    }
    .view-events.on-show,
    .wrap-event-home.on-show {
        animation: scaleSmall 1.2s ease 0s forwards;
    }
    .right-event.on-show {
        animation: goLeft 1.2s ease forwards;
    }
    .left-event.on-show {
        animation: goRight 1.2s ease forwards;
    }
    .back-event.on-show {
        animation: fadeInUp 1s ease forwards;
    }
    .pic-top-intro.on-show {
        animation-name: flipInX;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .time-intro.on-show {
        animation: goLeft 1s ease forwards;
    }
    .bottom-intro.on-show {
        animation: scaleSmall 1s ease forwards;
    }
    .text-done-news.on-show {
        animation: fadeInUp 1s ease forwards;
    }
    .list-m.on-show,
    .slide-done-pic.on-show {
        animation: scaleSmall 1s ease forwards;
    }
}
@media screen and (max-width: 1100px) {
    .ani-text .go-page {
        animation: none;
        animation-duration: 0s;
        animation-delay: 0s;
    }
}
.on-show.list-news-home .box-news-home