@font-face {
    font-family: SVN-Gilroy-Bold;
    src: url(../fonts/SVN-GilroyBold.otf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SVN-Gilroy-Light;
    src: url(../fonts/SVN-GilroyLight.otf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SVN-Gilroy-Regular;
    src: url(../fonts/SVN-GilroyRegular.otf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

.load-img {
    background: url(../images/logo.svg) no-repeat center center/contain
}

.address {
    background: url(../images/icon-add.svg) no-repeat 50%/100%
}

.phone {
    background: url(../images/icon-call.svg) no-repeat 50%/100%
}

.email {
    background: url(../images/icon-email.svg) no-repeat 50%/100%
}

.compass {
    background: url(../images/compass.svg) no-repeat 50%/80%
}

.compass-2 {
    background: url(../images/compass2.svg) no-repeat 50%/80%
}

html[lang=en] .compass {
    background: url(../images/compass-en.svg) no-repeat 50%/80%
}

html[lang=en] .compass-2 {
    background: url(../images/compass2-en.svg) no-repeat 50%/80%
}

.pointer-map {
    background: url(../images/pointer.svg) no-repeat center center/contain
}

.zoom::after {
    background: url(../images/zoom.svg) no-repeat 50%/60%
}

.pic-zoom-in::after {
    background: url(../images/zoom-in.svg) no-repeat 50%/100%
}

.pic-zoom-out::after {
    background: url(../images/zoom-out.svg) no-repeat 50%/100%
}

.close-album::after,
.close-pics::after,
.close-popup::after,
.close-video::after,
.close::after {
    background: url(../images/close.svg) no-repeat 50%/50%
}

.pic-content.zoom-pic::after {
    background: var(--color-black-alpha-03) url(../images/zoom.svg) no-repeat 50%/60%
}

.full-screen::before {
    background: url(../images/full-screen.svg) no-repeat 50%/30%
}

.full-screen.active::before {
    background: url(../images/cancel-screen.svg) no-repeat 50%/30%
}

.view-album::after {
    background: url(../images/album.svg) no-repeat 50%/100%
}

.view-video::after {
    background: url(../images/player.svg) no-repeat 50%/100%
}

.download-pdf::after {
    background: url(../images/pdf.svg) no-repeat 50%/100%
}

.view-360deg::after {
    background: url(../images/360deg.svg) no-repeat 50%/100%
}

.logo-nho {
    background: url(../images/logo-nho.svg) no-repeat 50%/50%
}

.logo-a>span {
    background: url(../images/logo-a.svg) no-repeat 50%/50%
}

.input-but button span {
    background: url(../images/subscribe.svg) no-repeat center center/contain
}

.subscribe span {
    background: url(../images/subscribe-but-des.svg) no-repeat center center/contain
}

.hotline .icon-ani {
    background: url(../images/phone-ani.svg) no-repeat center center/contain
}

.wrap-form .input-but button span {
    background: url(../images/subscribe-blue.svg) no-repeat center center/contain
}

.contact .wrap-form .input-but button span {
    background: url(../images/subscribe-pink.svg) no-repeat center center/contain
}

.save-but::before {
    background: url(../../en/404.html) no-repeat 50%/80%
}

.print-but::before {
    background: url(../images/print-share/print.svg) no-repeat 50%/80%
}

.share-but::before {
    background: url(../images/print-share/share.svg) no-repeat 50%/80%
}

.text-quote::before {
    background: url(../images/quote.svg) no-repeat center center/contain
}

.home-masterplan .text-quote::before {
    background: url(../images/quote-pink.svg) no-repeat center center/contain
}

.mask-left {
    mask-image: url(../images/mask-left.png);
    mask-repeat: repeat-y;
    mask-position: left top;
    mask-size: cover
}

@media screen and (max-width:1100px) {
    .logo-nho {
        background: url(../images/logo-nho.svg) no-repeat center center/contain
    }

    .address {
        background: url(../images/icon-add-white.svg) no-repeat 50%/100%
    }

    .phone {
        background: url(../images/icon-call-white.svg) no-repeat 50%/100%
    }

    .email {
        background: url(../../en/404.html) no-repeat 50%/100%
    }

    .contact .wrap-form .input-but button span {
        background: url(../images/subscribe-blue.svg) no-repeat center center/contain
    }

    .mask-left {
        mask-image: unset;
        mask-repeat: unset;
        mask-position: unset
    }
}

@media screen and (max-width:1100px) {
    .subscribe span {
        background: url(../images/subscribe-but.svg) no-repeat center center/contain
    }
}

@keyframes Start {
    from {
        visibility: hidden
    }

    to {
        visibility: visible
    }
}

@keyframes Preloader {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes trackBall {
    90% {
        transform: none;
        color: var(--color-highlight)
    }

    95% {
        transform: translateY(10px);
        color: var(--color-white)
    }

    100% {
        transform: none;
        color: var(--color-highlight)
    }
}

@keyframes trackBallWhite {
    90% {
        transform: none;
        color: var(--color-white)
    }

    95% {
        transform: translateY(10px);
        color: var(--color-highlight)
    }

    100% {
        transform: none;
        color: var(--color-white)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeTrans {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes goLeft {
    0% {
        opacity: 0;
        transform: translate3d(200px, 0, 0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes goRight {
    0% {
        opacity: 0;
        transform: translate3d(-200px, 0, 0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes toLeft {
    0% {
        opacity: 0;
        left: -100%
    }

    100% {
        opacity: 1;
        left: 0
    }
}

@keyframes toRight {
    0% {
        opacity: 0;
        right: -100%
    }

    100% {
        opacity: 1;
        right: 0
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100px, 0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes Blur {
    0% {
        filter: blur(0);
        transform: none
    }

    100% {
        filter: blur(10px);
        transform: scale(1.05)
    }
}

@keyframes outBlur {
    0% {
        filter: blur(0);
        transform: none;
        opacity: 1
    }

    100% {
        filter: blur(10px);
        transform: scale(1.05);
        opacity: 0
    }
}

@keyframes Scale {
    0% {
        transform: none
    }

    100% {
        transform: scale(100)
    }
}

@keyframes scaleLarge {
    0% {
        opacity: 0;
        transform: scale(1.1)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes Ani {
    0% {
        opacity: 0;
        transform: none;
        filter: none
    }

    70% {
        opacity: 1;
        transform: scale(2);
        filter: blur(3px)
    }

    100% {
        opacity: 0;
        transform: none;
        filter: none
    }
}

@keyframes Show100 {
    from {
        stroke-dashoffset: 570
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes StrokeLine {
    0% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: 100
    }
}

@keyframes StrokeBlock {
    0% {
        stroke-dashoffset: 0
    }

    100% {
        stroke-dashoffset: 200
    }
}

@keyframes aniWidth {
    0% {
        transform: scale3d(0, 1, 1)
    }

    100% {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0 50%
    }
}

@keyframes Bg {
    0% {
        background-color: var(--color-white-zero)
    }

    100% {
        background-color: var(--color-white)
    }
}

@keyframes Bg2 {
    0% {
        background-color: var(--color-white-zero)
    }

    100% {
        background-color: var(--color-white-grey)
    }
}

@keyframes Bg3 {
    0% {
        background-color: var(--color-white-zero)
    }

    100% {
        background-color: var(--color-highlight)
    }
}

@keyframes aniText {
    0% {
        color: var(--color-white)
    }

    50% {
        color: var(--color-highlight)
    }

    100% {
        color: var(--color-white)
    }
}

@keyframes clipPath {
    0% {
        clip-path: circle(0 at 50% 50%)
    }

    100% {
        clip-path: circle(150% at 50% 50%)
    }
}

.container,
.header,
.project-register {
    animation: Start 1s steps(1, end) 0s 1 normal both
}

.fadein {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.fadeout {
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.fadeinup {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.goright {
    animation-name: goRight;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.goleft {
    animation-name: goLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.toleft {
    animation-name: toLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.toright {
    animation-name: toRight;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.text-inner.show .char {
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-delay: calc(50ms * var(--char-index));
    animation-fill-mode: forwards
}

.text-break.show .char {
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-delay: calc(50ms * var(--char-index));
    animation-fill-mode: forwards
}

.text-quote::before {
    opacity: 0
}

.text-quote.show::before {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: .3s;
    animation-fill-mode: forwards
}

.logo,
.nav-click,
.right-header {
    opacity: 0
}

.box-nav,
.text-ani .word {
    opacity: 0
}

.ani-item {
    opacity: 0
}

.home-intro .box-txt,
.home-intro .input-but,
.home-intro .text-inner.show .char,
.home-intro .text-top {
    opacity: 0;
    animation: none
}

.ani-item.on-show {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards
}

@media screen and (min-width:1100px) {
    .text-ani.show .word {
        animation-name: fadeIn;
        animation-duration: 1.5s;
        animation-delay: calc(25ms * var(--word-index));
        animation-fill-mode: forwards
    }

    .copyright,
    .footer,
    .social {
        opacity: 0
    }

    .copyright {
        display: none
    }

    .showed .logo {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .showed .right-header {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .showed .nav-click {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .showed .box-nav {
        animation-name: toRight;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .showed .footer {
        visibility: visible;
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .showed .social {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .copyright.show {
        display: flex;
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-investor::before,
    .about-partner::before,
    .block-floor::before,
    .block-house::before,
    .block-intro::before,
    .faci-intro-2::before,
    .faci-intro::before,
    .floor-twenty::before,
    .floor-two::before,
    .hilife-map::before,
    .hilife-prosper::before,
    .home-contact::before,
    .home-hilife::before,
    .home-library::before,
    .home-partner::before,
    .home-promotion::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity .6s ease-in-out;
        overflow: hidden;
        background-color: var(--color-white)
    }

    .show-text::before {
        opacity: 1
    }

    .content-main::after,
    .content-main::before,
    .text-content::after,
    .text-content::before {
        opacity: 0
    }

    .show-text .content-main::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .show-text .content-main::before {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .show-text .text-content::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .show-text .text-content::before {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .first-banner .bg-cover::after {
        opacity: 0;
        display: block;
        background: var(--color-black-multi);
        mix-blend-mode: multiply
    }

    .first-banner.show-text .bg-cover::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards
    }

    .tagline .char {
        transition: opacity .8s ease, transform .8s ease;
        transform-origin: center center
    }

    .tagline.move .text-pink .char {
        opacity: 1;
        transform: none;
        transition-delay: calc(100ms * var(--char-index))
    }

    .tagline.move .text-spec .char {
        opacity: 1;
        transition-delay: calc(100ms * var(--char-index))
    }

    .title-main h2 span {
        opacity: 0;
        transition: opacity 1s ease-in-out, transform 1s cubic-bezier(.57, .21, .69, .95)
    }

    .title-main h2 span:nth-child(odd) {
        transform: translateX(-100%)
    }

    .title-main h2 span:nth-child(even) {
        transform: translateX(100%)
    }

    .tilte-slide.is-active strong {
        opacity: 1;
        transform: none
    }

    .title-main h2 span:nth-child(1) {
        transition-delay: .1s
    }

    .title-main h2 span:nth-child(2) {
        transition-delay: .2s
    }

    .title-main h2 span:nth-child(3) {
        transition-delay: .3s
    }

    .title-main h2 span:nth-child(4) {
        transition-delay: .4s
    }

    .title-main h2 span:nth-child(5) {
        transition-delay: .5s
    }

    .title-main h2 span:nth-child(6) {
        transition-delay: .6s
    }

    .title-main h2 span:nth-child(7) {
        transition-delay: .7s
    }

    .title-main h2 span:nth-child(8) {
        transition-delay: .8s
    }

    .title-main h2 span:nth-child(9) {
        transition-delay: .9s
    }

    .show-text .title-main h2 span {
        opacity: 1;
        transform: none
    }

    .box-text p,
    .box-txt p,
    .text-content li {
        opacity: 0
    }

    .box-text p:nth-child(1),
    .box-txt p:nth-child(1),
    .note-list li:nth-child(1),
    .text-content li:nth-child(1) {
        animation-delay: .5s
    }

    .box-text p:nth-child(2),
    .box-txt p:nth-child(2),
    .note-list li:nth-child(2),
    .text-content li:nth-child(2) {
        animation-delay: .6s
    }

    .box-text p:nth-child(3),
    .box-txt p:nth-child(3),
    .note-list li:nth-child(3),
    .text-content li:nth-child(3) {
        animation-delay: .7s
    }

    .box-text p:nth-child(4),
    .box-txt p:nth-child(4),
    .note-list li:nth-child(4),
    .text-content li:nth-child(4) {
        animation-delay: .8s
    }

    .box-text p:nth-child(5),
    .box-txt p:nth-child(5),
    .note-list li:nth-child(5),
    .text-content li:nth-child(5) {
        animation-delay: .9s
    }

    .box-text p:nth-child(6),
    .box-txt p:nth-child(6),
    .note-list li:nth-child(6),
    .text-content li:nth-child(6) {
        animation-delay: 1s
    }

    .box-text p:nth-child(7),
    .box-txt p:nth-child(7),
    .note-list li:nth-child(7),
    .text-content li:nth-child(7) {
        animation-delay: 1.1s
    }

    .box-text p:nth-child(8),
    .box-txt p:nth-child(8),
    .note-list li:nth-child(8),
    .text-content li:nth-child(8) {
        animation-delay: 1.2s
    }

    .box-text p:nth-child(9),
    .box-txt p:nth-child(5),
    .note-list li:nth-child(5),
    .text-content li:nth-child(9) {
        animation-delay: 1.3s
    }

    .box-text p:nth-child(10),
    .box-txt p:nth-child(6),
    .note-list li:nth-child(6),
    .text-content li:nth-child(10) {
        animation-delay: 1.4s
    }

    .box-text p:nth-child(11),
    .box-txt p:nth-child(7),
    .note-list li:nth-child(7),
    .text-content li:nth-child(11) {
        animation-delay: 1.5s
    }

    .box-text p:nth-child(12),
    .box-txt p:nth-child(8),
    .note-list li:nth-child(8),
    .text-content li:nth-child(12) {
        animation-delay: 1.6s
    }

    .show-text .box-text p,
    .show-text .box-txt p,
    .show-text .text-content li {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .pic-content {
        opacity: 0
    }

    .wrap-view-more {
        opacity: 0
    }

    .show-text .wrap-view-more {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .home-info .bg-cover,
    .home-info .content-main::after,
    .home-info .content-main::before {
        opacity: 0
    }

    .home-info.show-text .bg-cover {
        width: 65vw;
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-info.show-text .content-main::after {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-info.show-text .content-main::before {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .compass,
    .home-location .alldot,
    .home-location .content-main::before,
    .info-box,
    .note-list li,
    .pic-zoom-in,
    .pic-zoom-out,
    .pointer-map,
    .viewer {
        opacity: 0
    }

    .home-location.show-text .content-main::before {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .viewer {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .compass {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .note-list li {
        animation-name: goRight;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .pic-zoom-in {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .9s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .pic-zoom-out {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .pointer-map {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .alldot {
        animation-name: scaleLarge;
        animation-duration: 1.5s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .home-location.show-text .info-box {
        animation-name: fadeInUp;
        animation-duration: 1.5s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .zoom-object .title-main {
        opacity: 0;
        pointer-events: none
    }

    .box-align p,
    .home-hilife .pic-cover {
        opacity: 0
    }

    .home-hilife.show-text .box-align p {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .home-hilife.show-text .wrap-view-more {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .home-hilife.show-text .pic-cover:nth-child(1) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-hilife.show-text .pic-cover:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-hilife.show-text .pic-cover:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .bg-slide,
    .text-slide,
    .wrap-slide .usp-slide {
        opacity: 0
    }

    .home-usp.show-text .bg-slide {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-usp.show-text .text-slide {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .home-usp.show-text .wrap-slide .usp-slide {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-masterplan .master-map {
        opacity: 0
    }

    .home-masterplan.show-text .master-map {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-promotion .title-main h2 span {
        opacity: 1;
        transform: none
    }

    .home-promotion .title-main h2,
    .slide-offer .slidebox-arrow,
    .slide-offer .slidebox-track {
        opacity: 0
    }

    .home-promotion.show-text .title-main h2 {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-promotion.show-text .slidebox-track {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-promotion.show-text .slidebox-arrow-prev {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .home-promotion.show-text .slidebox-arrow-next {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .home-library .title-main h2 span {
        opacity: 1;
        transform: none
    }

    .home-library .title-main h2,
    .library-item {
        opacity: 0
    }

    .home-library .title-main::after,
    .home-library .title-main::before {
        transform: scale3d(0, 1, 1);
        transform-origin: center center
    }

    .home-library.show-text .title-main h2 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-library.show-text .title-main::after,
    .home-library.show-text .title-main::before {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .home-library.show-text .library-item:nth-child(1) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-library.show-text .library-item:nth-child(2) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-library.show-text .library-item:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .library .library-item,
    .slide-bro,
    .slide-vid {
        opacity: 0
    }

    .library .title-main::after,
    .library .title-main::before {
        transform: scale3d(0, 1, 1);
        transform-origin: center center
    }

    .library.show .title-main::after,
    .library.show .title-main::before {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .library.show .slide-bro {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .library.show .library-item {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .library.show .library-item:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .library.show .slide-vid {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .9s;
        animation-fill-mode: forwards
    }

    .item-news-home::after {
        background-color: var(--color-white-zero)
    }

    .home-news .item-news-home,
    .home-news .item-news-home .box-txt h3 {
        opacity: 0
    }

    .home-news.show-text .item-news-home .box-txt h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .home-news.show-text .item-news-home:nth-child(1) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .home-news.show-text .item-news-home:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-news.show-text .item-news-home:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .show-text .item-news-home::after {
        animation-name: Bg;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .progress.show-text .item-news-home::after {
        animation-name: Bg2;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .progress .bg-cover,
    .slide-news,
    .slide-progress {
        opacity: 0
    }

    .show-text .slide-news,
    .show-text .slide-progress {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .news.show-text .item-news::after {
        animation-name: Bg;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .progress.show-text .bg-cover {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .progress.show-text .bg-cover::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .home-partner .title-main h2,
    .logo-partner img {
        opacity: 0
    }

    .group-logo::after,
    .group-logo::before {
        transform: scale3d(0, 1, 1);
        transform-origin: center center
    }

    .home-partner .title-main h2 span {
        opacity: 1;
        transform: none
    }

    .home-partner.show-text .title-main h2 {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .show-text .logo-partner img {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .show-text .group-logo::after,
    .show-text .group-logo::before {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .contact .box-txt h3,
    .home-contact .box-txt h3,
    .logo-item,
    .wrap-form .input-but,
    .wrap-form .input-text {
        opacity: 0
    }

    .home-contact .text-content .title-main::after,
    .home-contact .text-content li::after {
        transform: scale3d(0, 1, 1);
        transform-origin: left center
    }

    .home-contact.show-text .text-content .title-main::after {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .text-content li::after {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .box-txt h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .wrap-form .input-text {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .wrap-form .input-text:nth-child(even) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .wrap-form .input-but {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .wrap-form .title-main h2 span {
        opacity: 0;
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .logo-item {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .contact .text-content .title-main::after,
    .contact .text-content li::after {
        transform: scale3d(0, 1, 1);
        transform-origin: left center
    }

    .contact.show-text .text-content .title-main::after {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .contact.show-text .text-content li::after {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .contact.show-text .box-txt h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .contact.show-text .wrap-form .input-text {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .contact.show-text .wrap-form .input-text:nth-child(even) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .contact.show-text .wrap-form .input-but {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .contact.show-text .wrap-form .title-main h2 span {
        opacity: 0;
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .contact.show-text .logo-item {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .contact.show-text .bg-cover::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .logo-item:nth-child(1) {
        animation-delay: .5s
    }

    .logo-item:nth-child(2) {
        animation-delay: .6s
    }

    .logo-item:nth-child(3) {
        animation-delay: .7s
    }

    .logo-item:nth-child(4) {
        animation-delay: .8s
    }

    .logo-item:nth-child(5) {
        animation-delay: .9s
    }

    .logo-item:nth-child(6) {
        animation-delay: 1s
    }

    .about-intro .bg-cover,
    .about-intro .pic-cover,
    .about-intro .text-content::after {
        opacity: 0
    }

    .about-intro.show-text .pic-cover:nth-child(1) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-intro.show-text .pic-cover:nth-child(2) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .about-intro.show-text .pic-cover:nth-child(3) {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .about-intro.show-text .pic-cover:nth-child(4) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .9s;
        animation-fill-mode: forwards
    }

    .about-intro.show-text .text-content::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .about-intro.show-text::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-intro.show-text .bg-cover {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-project .bg-cover {
        opacity: 0
    }

    .about-project.show-text .bg-cover {
        width: 70vw;
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-investor .title-main h3 {
        opacity: 0
    }

    .about-investor .pic-content {
        clip-path: circle(0 at 50% 50%);
        opacity: 1
    }

    .about-investor.show-text .pic-content {
        animation-name: clipPath;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .about-investor.show-text .title-main h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .about-partner .box-txt h3,
    .about-partner .title-main h2,
    .group-agent {
        opacity: 0
    }

    .about-partner .title-main h2 span {
        opacity: 1;
        transform: none
    }

    .about-partner.show-text .title-main h2 {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-partner.show-text .box-txt h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .about-partner.show-text .logo-item {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .about-partner.show-text .group-agent {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .hilife-intro .pic-cover {
        opacity: 0
    }

    .hilife-intro.show-text .pic-cover:nth-child(1) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .hilife-intro.show-text .pic-cover:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .hilife-intro.show-text .pic-cover:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .hilife-intro.show-text .logo-item {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .hilife-prosper .pic-cover {
        opacity: 0
    }

    .hilife-prosper.show-text .pic-cover:nth-child(1) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .2s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(4) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(5) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(6) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(7) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .7s;
        animation-fill-mode: forwards
    }

    .hilife-prosper.show-text .pic-cover:nth-child(8) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .hilife-investment .text-content::after,
    .hilife-investment .title-main h2,
    .hilife-investment::after {
        opacity: 0
    }

    .hilife-investment .title-main h2 span {
        opacity: 1;
        transform: none
    }

    .hilife-investment.show-text .title-main h2 {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .hilife-investment.show-text .text-content::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .hilife-investment.show-text::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .hilife-map.show-text .pic-content {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .faci-intro .pic-cover,
    .faci-intro-2 .pic-cover {
        opacity: 0
    }

    .faci-intro.show-text .pic-cover:nth-child(1) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .faci-intro.show-text .pic-cover:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .faci-intro.show-text .pic-cover:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .faci-intro.show-text .pic-cover:nth-child(4) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .faci-intro-2.show-text .pic-cover:nth-child(1) {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .faci-intro-2.show-text .pic-cover:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .faci-intro-2.show-text .pic-cover:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .faci-intro-2.show-text .pic-cover:nth-child(4) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .dot-num,
    .floor-ground .master-map,
    .floor-top .list-inner h3,
    .floor-top .master-map,
    .floor-twenty .list-inner h3,
    .floor-twenty .master-map,
    .floor-two .list-inner h3,
    .floor-two .master-map,
    .hover-text {
        opacity: 0
    }

    .facilities.show-text .dot-num {
        animation-name: scaleLarge;
        animation-duration: 1.5s;
        animation-delay: calc(50ms * var(--data-index));
        animation-fill-mode: forwards
    }

    .facilities.show-text .hover-text {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: calc(50ms * var(--data-index));
        animation-fill-mode: forwards
    }

    .floor-top.show-text .list-inner h3,
    .floor-twenty.show-text .list-inner h3,
    .floor-two.show-text .list-inner h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .floor-top.show-text .master-map {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .floor-ground.show-text .master-map {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .floor-two.show-text .pic-content {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .floor-twenty.show-text .pic-content {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .block-intro .pic-content {
        clip-path: circle(0 at 50% 50%);
        opacity: 1
    }

    .block-intro.show-text .pic-content {
        animation-name: clipPath;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .block-floor .title-main h3::before {
        transform: scale3d(0, 1, 1);
        transform-origin: left center
    }

    .block-svg .block-area {
        opacity: 0;
        transform-origin: center center
    }

    .block-floor .title-main h3,
    .block-typical,
    .compass-2 {
        opacity: 0
    }

    .block-floor.show-text .title-main h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .block-floor.show-text .block-typical {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .block-floor.show-text .pic-content {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .block-floor.show-text .block-area {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: calc(80ms * var(--data-index));
        animation-fill-mode: forwards
    }

    .block-floor.show-text .title-main h3::before {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: 1.3s;
        animation-fill-mode: forwards
    }

    .show-text .compass-2 {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .block-house .title-main h3::before {
        transform: scale3d(0, 1, 1);
        transform-origin: left center
    }

    .block-house .title-main h3,
    .house-typical,
    .keyplan,
    .keyplan .print-box,
    .notice,
    .text-content .print-box {
        opacity: 0
    }

    .block-house.show-text .title-main h3 {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .block-house.show-text .title-main h3::before {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards
    }

    .block-house.show-text .house-typical {
        animation-name: fadeIn;
        animation-duration: 3s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .block-house.show-text .keyplan {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .block-house.show-text .keyplan .print-box {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .7s;
        animation-fill-mode: forwards
    }

    .block-house.show-text .text-content .print-box {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .7s;
        animation-fill-mode: forwards
    }

    .block-house.show-text .pic-content {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: .7s;
        animation-fill-mode: forwards
    }

    .notice.show {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .error-info .bg-cover,
    .error-info .content-main::after,
    .error-info .content-main::before,
    .thank-you .bg-cover,
    .thank-you .content-main::after,
    .thank-you .content-main::before {
        opacity: 0
    }

    .error-info .box-txt,
    .error-info .title-main,
    .error-info .wrap-view-more,
    .thank-you .box-txt,
    .thank-you .title-main,
    .thank-you .wrap-view-more {
        opacity: 0
    }

    .thank-you.show-text .bg-cover {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .thank-you.show-text .content-main::after {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .thank-you.show-text .content-main::before {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .thank-you.show-text .title-main {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards
    }

    .thank-you.show-text .box-txt {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.6s;
        animation-fill-mode: forwards
    }

    .thank-you.show-text .wrap-view-more {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.7s;
        animation-fill-mode: forwards
    }

    .error-info.show-text .bg-cover {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .error-info.show-text .content-main::after {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .error-info.show-text .content-main::before {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .error-info.show-text .title-main {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards
    }

    .error-info.show-text .box-txt {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.6s;
        animation-fill-mode: forwards
    }

    .error-info.show-text .wrap-view-more {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.7s;
        animation-fill-mode: forwards
    }
}

@media screen and (max-width:1100px) {
    .text-ani.show .word {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: calc(10ms * var(--word-index));
        animation-fill-mode: forwards
    }

    .footer {
        animation: Start 1s steps(1, end) 0s 1 normal both
    }

    .aniobj {
        opacity: 0
    }

    .aniobj.on-view {
        animation-name: fadeInUp;
        animation-duration: .6s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .project-register .aniobj.on-view {
        opacity: 1;
        animation: none
    }

    .first-banner .bg-cover::after {
        height: 50%;
        top: auto;
        bottom: 0;
        display: block;
        background: var(--color-black-gradient);
        mix-blend-mode: multiply
    }

    .tagline.move .text-pink .char {
        animation-name: fadeTrans;
        animation-duration: 1s;
        animation-delay: calc(100ms * var(--char-index));
        animation-fill-mode: forwards
    }

    .tagline.move .text-spec .char {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: calc(100ms * var(--char-index));
        animation-fill-mode: forwards
    }

    .usp-item.is-active h3 {
        animation-name: aniText;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .showed .logo {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .showed .right-header {
        animation-name: goLeft;
        animation-duration: 1s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .showed .nav-click {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }
}

@media (hover:hover) and (pointer:fine) and (min-width:1100px) {

    .hotline,
    .language li,
    .link-home,
    .subscribe {
        transition: all .3s ease-in-out
    }

    .hotline:hover,
    .language li:hover,
    .link-home:hover,
    .subscribe:hover {
        color: var(--color-highlight) !important;
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-01)) !important
    }

    .language li:hover {
        border-color: currentColor !important
    }

    .subscribe:hover .tooltip {
        opacity: 1;
        transform: translateX(-50%) scale(1)
    }

    .nav a {
        transition: color .3s ease-in-out
    }

    .nav a:hover {
        color: var(--color-normal);
        text-shadow: none
    }

    .link-hoz .text-nav,
    .link-hoz .text-nav::after {
        transition: transform .5s cubic-bezier(.5, .5, .3, 1)
    }

    .link-hoz:hover .text-nav::after {
        transform: translate3d(0, -100%, 0)
    }

    .link-hoz:hover .text-nav {
        transform: translate3d(0, 100%, 0)
    }

    .box-nav li .click:hover span {
        transform: none;
        opacity: 1
    }

    .box-nav li .click:hover::after {
        transform: scale3d(1, 1, 1)
    }

    .nav-click:hover {
        background-color: var(--color-normal);
        color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01);
        border: none
    }

    .nav-click:not(.active):hover .one {
        width: 0
    }

    .nav-click:not(.active):hover .four {
        width: 0
    }

    .nav-click:not(.active):hover .two {
        transform: translate3d(-5px, -15px, 0);
        width: 90px
    }

    .nav-click:not(.active):hover .three {
        transform: translate3d(-30px, 15px, 0);
        width: 90px
    }

    .spec .nav-click {
        background-color: var(--color-normal);
        color: var(--color-white)
    }

    .spec .nav-click:hover {
        background-color: var(--color-normal-light)
    }

    .spec .language li:hover {
        border-color: var(--color-white) !important
    }

    .spec .hotline:hover,
    .spec .language li:hover,
    .spec .link-home:hover,
    .spec .subscribe:hover {
        color: var(--color-white) !important;
        filter: none !important
    }

    .close,
    .close-album,
    .close-pics,
    .close-popup,
    .close-video {
        transition: border .3s ease-in-out
    }

    .close-album::after,
    .close-album::before,
    .close-pics::after,
    .close-pics::before,
    .close-popup::after,
    .close-popup::before,
    .close-video::after,
    .close-video::before,
    .close::after,
    .close::before {
        transition: all .3s ease-in-out
    }

    .close-album:hover::after,
    .close-pics:hover::after,
    .close-popup:hover::after,
    .close-video:hover::after,
    .close:hover::after {
        transform: rotate(90deg)
    }

    .close-album:hover,
    .close-pics:hover,
    .close-popup:hover,
    .close-video:hover,
    .close:hover {
        border-color: var(--color-white-zero)
    }

    .close-album:hover::before,
    .close-pics:hover::before,
    .close-popup:hover::before,
    .close-video:hover::before,
    .close:hover::before {
        background-color: var(--color-normal)
    }

    .close-album:hover .c-rotate,
    .close-pics:hover .c-rotate,
    .close-popup:hover .c-rotate,
    .close-video:hover .c-rotate,
    .close:hover .c-rotate {
        animation-name: Show100;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.57, .21, .69, .95);
        stroke: var(--color-highlight-alpha)
    }

    .close-video.degree:hover::before {
        background-color: var(--color-normal)
    }

    .close-video.degree:hover .c-rotate {
        stroke: var(--color-normal)
    }

    .full-screen::before {
        transition: all .3s ease-in-out
    }

    .full-screen:hover::before {
        background-color: var(--color-highlight)
    }

    .social li a,
    .social-second li a {
        transition: all .3s ease-in-out;
        border-radius: 50%
    }

    .social li a span,
    .social-second li a span {
        transition: all .3s ease-in-out
    }

    .social li a:hover {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01)
    }

    .social-second li a:hover {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01)
    }

    .social li a:hover span,
    .social-second li a:hover span {
        transform: scale(.8);
        color: var(--color-white)
    }

    .print-but,
    .share-item a {
        transition: color .3s ease-in-out
    }

    .print-but:hover,
    .share-item a:hover {
        color: var(--color-highlight)
    }

    .go-top,
    .go-top::before,
    .srcoll-down::before {
        transition: all .3s ease-in-out
    }

    .srcoll-down {
        transition: color .3s ease-in-out, bottom .3s ease-in-out
    }

    .srcoll-down:hover {
        color: var(--color-white)
    }

    .srcoll-down:hover svg {
        animation-play-state: paused;
        transform: none !important;
        color: var(--color-white) !important
    }

    .go-top:hover {
        color: var(--color-white)
    }

    .srcoll-down:hover::before {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01)
    }

    .go-top:hover::before {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01)
    }

    .icon-svg,
    .icon-svg::before,
    .view-more,
    .view-more svg {
        transition: all .3s ease-in-out
    }

    .view-more span {
        transition: color .3s ease-in-out
    }

    .view-more:hover span {
        color: var(--color-highlight)
    }

    .view-more:hover svg {
        color: var(--color-white)
    }

    .view-more:hover .after {
        animation-name: Show100;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        stroke: var(--color-highlight)
    }

    .view-more:hover .before {
        stroke-width: 0
    }

    .view-more:hover .icon-svg::before {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01)
    }

    .view-more:hover .icon-svg {
        margin-left: 1vw
    }

    .view-more:hover {
        margin-right: -1vw
    }

    .home-info .view-more:hover span {
        color: var(--color-white)
    }

    .home-info .view-more:hover .after {
        stroke: var(--color-white)
    }

    .note-block .view-more:hover span {
        color: var(--color-white)
    }

    .note-block .view-more:hover .after {
        stroke: var(--color-white)
    }

    .note-block .view-more:hover svg {
        color: var(--color-highlight)
    }

    .note-block .view-more:hover .icon-svg::before {
        background-color: var(--color-white)
    }

    .note-block .view-more:hover .icon-svg {
        margin-left: .5rem
    }

    .note-block .view-more:hover {
        margin-right: -.5rem
    }

    .load-text a,
    .text-content li a {
        transition: all .3s ease-in-out
    }

    .load-text a:hover,
    .text-content li a:hover {
        color: var(--color-highlight)
    }

    .input-but button,
    .input-but button span,
    .logo-item img {
        transition: all .3s ease-in-out
    }

    .input-but button:hover {
        background-color: var(--color-highlight);
        color: var(--color-normal) !important;
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01);
        border-color: var(--color-white-zero)
    }

    .input-but button:hover span {
        filter: invert(25%) sepia(100%) saturate(400%) hue-rotate(145deg) brightness(45%) contrast(80%)
    }

    .logo-item a:hover img {
        transform: scale(.9);
        filter: grayscale(1)
    }

    .pic-zoom-in,
    .pic-zoom-in::after,
    .pic-zoom-out,
    .pic-zoom-out::after {
        transition: all .3s ease-in-out
    }

    .pic-zoom-in:hover,
    .pic-zoom-out:hover {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 2rem 0 var(--color-black-alpha-01)
    }

    .pic-zoom-in:hover::after,
    .pic-zoom-out:hover::after {
        filter: brightness(400%)
    }

    .share-item a {
        transition: all .3s ease-in-out
    }

    .share-item a:hover {
        color: var(--color-white) !important;
        border-color: var(--color-white-zero);
        background-color: var(--color-highlight)
    }

    .download-pdf,
    .item-brochure .pic-cover,
    .item-brochure::before,
    .item-video .pic-cover,
    .item-video::before,
    .library-item .pic-cover,
    .library-item::before,
    .show-detail,
    .title-pic,
    .view-360deg,
    .view-album,
    .view-video {
        transition: all .3s ease-in-out
    }

    .home-library .library-item:hover::before {
        box-shadow: 10px 30px 50px 0 var(--color-black-alpha-01);
        border-color: var(--color-highlight)
    }

    .home-library .library-item:hover .view-album {
        transform: rotate(90deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .home-library .library-item:hover .view-360deg {
        transform: rotate(30deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .home-library .library-item:hover .pic-cover {
        filter: brightness(120%)
    }

    .home-library .library-item:hover .view-video {
        transform: rotate(120deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .home-library .library-item:hover .download-pdf {
        transform: rotate(30deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .library .item-album:hover::before,
    .library .item-brochure:hover::before,
    .library .item-degree:hover::before,
    .library .item-video:hover::before {
        border-color: var(--color-highlight)
    }

    .library .item-album:hover .pic-cover,
    .library .item-degree:hover .pic-cover {
        filter: brightness(120%)
    }

    .library .item-album:hover .view-album {
        transform: rotate(90deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .library .item-degree:hover .view-360deg {
        transform: rotate(30deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .library .item-brochure:hover .pic-cover,
    .library .item-video:hover .pic-cover {
        filter: brightness(120%)
    }

    .library .item-brochure:hover .download-pdf {
        transform: rotate(30deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .library .item-video:hover .view-video {
        transform: rotate(120deg);
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-02))
    }

    .usp-item {
        border: 2px solid var(--color-white-zero);
        border-radius: 1vw
    }

    .usp-item.is-active:hover {
        border-color: var(--color-highlight);
        filter: brightness(110%) contrast(130%)
    }

    .tilte-slide.active h3 {
        animation-name: aniText;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .block .polygon {
        transition: fill-opacity .3s ease-in-out, stroke-opacity .3s ease-in-out
    }

    .block .text {
        transition: opacity .3s ease-in-out
    }

    .block .polygon:hover {
        fill-opacity: 1;
        animation-play-state: paused;
        stroke-opacity: 0
    }

    .block .text:hover {
        opacity: 1
    }

    .block-area {
        transition: filter .5s ease-in-out
    }

    .block-area:hover {
        filter: drop-shadow(5px 15px 20px var(--color-black-alpha-03)) brightness(110%)
    }

    .go-news::after {
        transform: scale3d(0, 1, 1);
        transform-origin: left center;
        transition: all .3s ease-in-out
    }

    .item-news-home {
        border: 1px solid var(--color-white-zero);
        transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out
    }

    .item-news-home:hover {
        box-shadow: 10px 30px 50px 0 var(--color-black-alpha-01);
        border-color: var(--color-highlight)
    }

    .item-news {
        border: 1px solid var(--color-white-zero);
        transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out
    }

    .item-news:hover {
        box-shadow: 10px 30px 50px 0 var(--color-black-alpha-01);
        border-color: var(--color-highlight)
    }

    .item-news:hover .go-news::after {
        transform: scale3d(1, 1, 1)
    }

    [data-color=color-load-gradient] .item-news-home:hover {
        box-shadow: 10px 30px 50px 0 var(--color-black-alpha-01)
    }

    .dot-num circle,
    .dot-num text {
        transition: all .3s ease-in-out
    }

    .dot-num:hover circle {
        fill: var(--color-highlight);
        filter: drop-shadow(.3rem 1rem 1.5rem var(--color-black-alpha-03));
        animation-play-state: paused;
        stroke-dasharray: 0;
        stroke: var(--color-highlight)
    }

    .dot-num:hover text {
        fill: var(--color-black)
    }
}

@media(pointer:coarse) {
    .box-nav li.hover::before {
        display: none
    }

    .box-nav li.hover .click::before {
        content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        top: calc(50% - 4px);
        right: -3px;
        border-radius: 50%;
        background-color: var(--color-normal);
        transition: opacity .3s ease-in-out
    }

    .box-nav.light li.hover .click::before {
        background-color: var(--color-white)
    }

    .tilte-slide.is-active h3 {
        animation-name: aniText;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }
}