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

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

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

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

.loadx::after {
    background: url(../images/circle.svg) no-repeat center center/contain
}

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

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

.show-box-info .pic-img::after {
    background: var(--color-normal) 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%
}

.download-pdf::before,.view-album::before,.view-video::before,.view-virtual::before {
    background: url(../images/bg-button.svg) no-repeat center center/cover
}

.save-but::before {
    background: url(../images/print-share/favorite.svg) 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%
}

.time span {
    background: url(../images/clock.svg) no-repeat center center/contain
}

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

.select-header .but {
    background: url(../images/select.svg) no-repeat center center/80% 80%
}

.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%
}

.lifestyle-item-text .text-break::before {
    background: url(../images/and.svg) no-repeat center center/contain
}

.facebook>div {
    background: url(../images/social/facebook.svg) no-repeat center center/contain
}

.youtube>div {
    background: url(../images/social/youtube.svg) no-repeat center center/contain
}

.zalo>div {
    background: url(../images/social/zalo.svg) no-repeat center center/contain
}

.block,.details-center.partner,.facilities,.home-facilities,.home-location,.mask-inner,.mask::before {
    background: url(../images/jpg/bg1.jpg) no-repeat center center/cover
}

.overlay-menu::before {
    background: url(../images/jpg/bg3.jpg) no-repeat center center/cover
}

.home-about,.home-contact,.location-extra,.video-library {
    background: url(../images/jpg/bg2.jpg) no-repeat center center/cover
}

.about-intro,.contact-page,.home-lifestyle,.picture-library,.virtual-library {
    background: url(../images/jpg/bg4.jpg) no-repeat center center/cover
}

.home-partner {
    background: url(../images/jpg/bg5.jpg) no-repeat center center/cover
}

.project-scale {
    background: url(../images/jpg/bg1-1.jpg) no-repeat center center/cover
}

.register {
    background: url(../images/jpg/bg6.jpg) no-repeat center center/cover
}

.location-intro {
    background: url(../images/jpg/bg-content.jpg) no-repeat center center/cover
}

#about-page .home-partner {
    background: url(../images/jpg/bg2.jpg) no-repeat center center/cover
}

.bg-01 {
    background: url(../images/jpg/bg1-1.jpg) no-repeat center center/cover
}

.bg-02 {
    background: url(../images/jpg/bg2-1.jpg) no-repeat center center/cover
}

.bg-03 {
    background: url(../images/jpg/bg3-1.jpg) no-repeat center center/cover
}

.bg-04 {
    background: url(../images/jpg/bg4-1.jpg) no-repeat center center/cover
}

.pic-mask {
    mask-image: url(../images/mask.svg);
    mask-repeat: no-repeat;
    mask-position: left bottom;
    mask-size: cover
}

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

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

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

@media only screen and (max-width: 1100px) and (orientation:portrait) {
    .home-intro .tagline {
        background:url(../images/jpg/bg6.jpg) no-repeat center center/cover
    }

    .overlay-menu::before {
        background: url(../images/jpg/bg3-rotate.jpg) no-repeat center center/cover
    }

    .mask-inner,.mask::before {
        background: url(../images/jpg/bg1-rotate.jpg) no-repeat center center/cover
    }

    .pic-mask {
        mask-image: url(../images/mask-rotate.svg);
        mask-repeat: no-repeat;
        mask-position: center bottom;
        mask-size: contain
    }

    .bg-01 {
        background: url(../images/jpg/bg1-1-rotate.jpg) no-repeat center center/cover
    }

    .bg-02 {
        background: url(../images/jpg/bg2-1-rotate.jpg) no-repeat center center/cover
    }

    .bg-03 {
        background: url(../images/jpg/bg3-1-rotate.jpg) no-repeat center center/cover
    }

    .bg-04 {
        background: url(../images/jpg/bg4-1-rotate.jpg) no-repeat center center/cover
    }
}

@media only screen and (max-width: 1100px) and (orientation:landscape) {
    .pic-mask {
        mask-image:url(../images/mask.svg);
        mask-repeat: no-repeat;
        mask-position: left bottom;
        mask-size: cover
    }
}

@media screen and (max-width: 1100px) {
    .mask-left {
        mask-image:unset;
        mask-repeat: unset;
        mask-position: unset
    }

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

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

    .home-about {
        background: url(../images/jpg/bg-content.jpg) no-repeat center center/cover
    }

    .home-location {
        background: var(--color-normal-dark)
    }

    .location-extra {
        background: var(--color-normal)
    }

    .register {
        background: 0 0
    }

    .footer,.video-library {
        background: url(../images/jpg/bg1.jpg) no-repeat center center/cover
    }

    .picture-library,.virtual-library {
        background: var(--color-bg-gradient)
    }

    .block,.facilities {
        background-image: unset
    }

    .block {
        background-color: var(--color-normal-dark)
    }

    .block:nth-child(odd) {
        background-color: var(--color-normal-light)
    }
}

@keyframes Start {
    from {
        visibility: hidden
    }

    to {
        visibility: visible
    }
}

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

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

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

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

@keyframes Trans {
    0% {
        opacity: 0;
        transform: translate(1000px,0)
    }

    100% {
        opacity: 1;
        transform: translate(1000px,455px)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOutBlur {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        filter: blur(2rem)
    }
}

@keyframes scaleBright {
    0% {
        filter: brightness(250%);
        transform: scale(1.1)
    }

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

@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 moveLeft {
    100% {
        transform: translateX(-100%)
    }
}

@keyframes moveRight {
    100% {
        transform: translateX(100%)
    }
}

@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 aniWidth {
    0% {
        transform: scale3d(0,1,1)
    }

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

@keyframes aniHeight {
    0% {
        transform: scale3d(1,0,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 grayScale {
    0% {
        filter: none
    }

    100% {
        filter: grayscale(1)
    }
}

@keyframes aniText {
    0% {
        background-position: 200% 50%
    }

    90% {
        background-position: 0 50%
    }

    100% {
        -webkit-text-fill-color: var(--color-white)
    }
}

@keyframes scrollText {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes ClipPath {
    0% {
        clip-path: circle(0 at 50% 50%);
        opacity: 1
    }

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

@keyframes strokeArea {
    0% {
        stroke-dashoffset: 3000
    }

    80% {
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: .5
    }
}

.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
}

.fadeindown {
    animation-name: fadeInDown;
    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
}

.moveleft {
    pointer-events: none;
    animation-name: moveLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.moveright {
    pointer-events: none;
    animation-name: moveRight;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.left-header,.right-header {
    opacity: 0
}

.box-nav.not-need {
    display: none
}

.apartment-des,.apartment-pic,.bg-house::after,.des-house,.keyplan,.share,.top-title,.virtual-item,.wrap-another-link {
    opacity: 0
}

.show-house .top-title {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-fill-mode: forwards
}

.show-house .apartment-pic {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards
}

.show-house .apartment-des {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: .3s;
    animation-fill-mode: forwards
}

.show-house .share {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: .5s;
    animation-fill-mode: forwards
}

.show-house .keyplan {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: .6s;
    animation-fill-mode: forwards
}

.bg-house.show::after {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: .8s;
    animation-fill-mode: forwards
}

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

.show-house .wrap-another-link {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards
}

.show-house .virtual-item {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards
}

.clip-path {
    opacity: 0
}

.clip-path.show {
    animation-name: ClipPath;
    animation-duration: 2s;
    animation-delay: .5s;
    animation-fill-mode: forwards
}

.slidebox-arrows {
    opacity: 0
}

.slidebox-arrows.show {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards
}

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

.tagline.show .tagline-big {
    animation-name: scaleLarge;
    animation-duration: 1s;
    animation-delay: .8s;
    animation-fill-mode: forwards
}

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

.text-quote.show::before {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: calc(5ms * var(--word-total));
    animation-fill-mode: forwards
}

.ani-item {
    opacity: 0
}

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

.text-ani.show .word {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: calc(15ms * var(--word-index));
    animation-fill-mode: forwards
}

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

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

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

.footer .data-index .ani-item.on-show {
    animation-name: fadeInUp;
    animation-duration: 1.5s;
    animation-delay: calc(150ms * var(--data-index));
    animation-fill-mode: forwards
}

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

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

@media screen and (min-width: 1100px) {
    .box-nav {
        opacity:0;
        transform: translate3d(-15rem,0,0);
        transition: all .8s cubic-bezier(.57,.21,.69,.95)
    }

    .showed .box-nav.show {
        pointer-events: auto;
        opacity: 1;
        transform: none
    }

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

    .details-center .ani-item.on-show {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .show-text .data-index .ani-item.on-show {
        animation-name: fadeInUp;
        animation-duration: 1.5s;
        animation-delay: calc(150ms * var(--data-index));
        animation-fill-mode: forwards
    }

    .bg-slide {
        opacity: 0
    }

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

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

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

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

    .input-area,.input-but,.input-text,.wrap-form {
        opacity: 0
    }

    .input-text:nth-child(1) {
        animation-delay: .5s
    }

    .input-text:nth-child(2) {
        animation-delay: .6s
    }

    .input-text:nth-child(3) {
        animation-delay: .7s
    }

    .input-text:nth-child(4) {
        animation-delay: .8s
    }

    .input-area {
        animation-delay: .9s
    }

    .input-but {
        animation-delay: 1s
    }

    .show-text .input-area,.show-text .input-but,.show-text .input-text {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .show-text .wrap-form {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards
    }

    .view-more span,.wrap-view-more {
        opacity: 0
    }

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

    .show-text .view-more span {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards
    }

    .sub-menu {
        opacity: 0
    }

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

    .arrows,.slide-main,.slide-second {
        opacity: 0
    }

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

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

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

    .lifestyle-slide {
        opacity: 0
    }

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

    .contact-page .bg-cover {
        opacity: 0
    }

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

    .register .text-content {
        opacity: 0
    }

    .register.show-text .text-content {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .about-intro .bg-cover,.project-scale .bg-cover {
        opacity: 0
    }

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

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

    .dot-p,.pointer-map,.text-map,.viewer {
        opacity: 0
    }

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

    .home-location.show-text .pointer-map {
        animation-name: Trans;
        animation-duration: .6s;
        animation-delay: .8s;
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-fill-mode: forwards
    }

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

    .home-location.show-text .dot-p {
        animation-name: scaleLarge;
        animation-duration: 1.5s;
        animation-delay: calc(100ms * var(--data-index));
        animation-fill-mode: forwards
    }

    .home-location .bg-cover,.location-intro .bg-cover {
        opacity: 0
    }

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

    .location-intro.show-text .srcoll-down {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: calc(20ms * var(--word-total));
        animation-fill-mode: forwards
    }

    .location-intro.show-text .srcoll-down span {
        animation: Preloader 3s alternate infinite
    }

    .box-time,.location-extra .pic-img {
        opacity: 0
    }

    .location-extra.show-text .pic-img {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .location-extra.show-text .box-time {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .brochure-library .bg-cover,.gallery-slide {
        opacity: 0
    }

    .brochure-library .bg-cover::after {
        display: block;
        background: var(--color-black-gradient);
        mix-blend-mode: multiply
    }

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

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

    .show-text .brochure-content {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

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

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

    .box-progress.on-show {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .master-map {
        opacity: 0
    }

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

    .block .block-note,.block .note-faci,.key-block>*,.masterplan .block-note,.masterplan .note-faci,.text-house,.title-block {
        opacity: 0
    }

    .block.show-text .block-note,.masterplan.show-text .block-note {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .block.show-text .note-faci,.masterplan.show-text .note-faci {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .block.show-text .key-block>* {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .block.show-text .text-house {
        animation-name: scaleLarge;
        animation-duration: 1.5s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

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

    .ratio-4-3 .block.show-text .title-block {
        animation-name: goRight;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .box-list-inner,.dot-num,.name-block {
        opacity: 0
    }

    .show-text .name-block:nth-child(1) {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

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

    .show-text .block-stroke {
        animation-name: strokeArea;
        animation-duration: 3s;
        animation-delay: 2s;
        animation-fill-mode: forwards
    }

    .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 .box-list-inner {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: calc(50ms * var(--data-index));
        animation-fill-mode: forwards
    }

    .item-news-home {
        opacity: 0
    }

    .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: goLeft;
        animation-duration: 1s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

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

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

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

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

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

@media screen and (max-width: 1100px) {
    .ani-item.on-show {
        animation-name:fadeIn;
        animation-duration: 1.5s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .box-progress.on-show {
        animation-name: fadeIn;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }
}

@media (hover: hover) and (pointer:fine) and (min-width:1100px) {
    .language li a,.language li button,.language li::after {
        transition:all .3s ease-in-out
    }

    .language li:hover .hover {
        color: var(--color-white)
    }

    .language li:hover::after {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 1rem 0 var(--color-black-alpha-01);
        opacity: 1;
        border-color: transparent
    }

    .link-home path {
        transition: all .3s ease-in-out
    }

    .link-home:hover .normal {
        transform: translateY(-100%)
    }

    .link-home:hover .hover {
        transform: translateY(0)
    }

    .hotline .icon::after,.hotline path,.subscribe .icon::after,.subscribe path,.v360 .icon::after,.v360 path {
        transition: all .3s ease-in-out
    }

    .hotline:hover span.normal,.subscribe:hover span.normal,.v360:hover span.normal {
        transform: translateY(-100%)
    }

    .hotline:hover span.hover,.subscribe:hover span.hover,.v360:hover span.hover {
        transform: translateY(0);
        color: var(--color-highlight)
    }

    .hotline:hover .icon,.subscribe:hover .icon,.v360:hover .icon {
        color: var(--color-white)
    }

    .hotline:hover .icon::after,.subscribe:hover .icon::after,.v360:hover .icon::after {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 1rem 0 var(--color-black-alpha-01);
        border-color: transparent;
        opacity: 1
    }

    .hotline:hover path.normal,.subscribe:hover path.normal,.v360:hover path.normal {
        transform: translateY(-100%)
    }

    .hotline:hover path.hover,.subscribe:hover path.hover,.v360:hover path.hover {
        transform: translateY(0)
    }

    .main-menu li .nav-item:hover .normal {
        transform: translateY(-100%)
    }

    .main-menu li .nav-item:hover .hover {
        transform: translateY(0)
    }

    .box-nav>ul li::before {
        transition: all .3s ease-in-out
    }

    .box-nav>ul li:hover::before {
        background-color: var(--color-highlight);
        transform: none;
        opacity: 1;
        border-color: transparent
    }

    .effect-text span.normal {
        transition: transform .3s ease-in-out
    }

    .effect-text:hover span.normal {
        transform: translateY(-100%)
    }

    .effect-text:hover span.hover {
        transform: translateY(0)
    }

    .nav-click .line-svg {
        transition: all .3s ease-in-out;
        transform-origin: center
    }

    .nav-click:hover {
        color: var(--color-highlight)
    }

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

    .nav-click:not(.active):hover .two {
        width: 50px
    }

    .nav-click.active:hover .line-svg {
        transform: rotate(90deg) scale(.8)
    }

    .select-box li,.select-header .but {
        transition: all .3s ease-in-out
    }

    .select-box li:hover {
        background-color: var(--color-highlight)
    }

    .select-header .but:hover {
        background-color: var(--color-normal);
        border: none
    }

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

    .close .c-x,.close-album .c-x,.close-album::before,.close-apartment .c-x,.close-apartment::before,.close-pics .c-x,.close-pics::before,.close-popup .c-x,.close-popup::before,.close-video .c-x,.close-video::before,.close-virtual .c-x,.close-virtual::before,.close::before {
        transition: all .3s ease-in-out
    }

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

    .close-album:hover::before,.close-apartment:hover::before,.close-pics:hover::before,.close-popup:hover::before,.close-video:hover::before,.close-virtual:hover::before,.close:hover::before {
        transform: scale(.8);
        background-color: var(--color-highlight);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .close-album:hover .c-rotate,.close-apartment:hover .c-rotate,.close-pics:hover .c-rotate,.close-popup:hover .c-rotate,.close-video:hover .c-rotate,.close-virtual: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-album:hover .c-x,.close-apartment:hover .c-x,.close-pics:hover .c-x,.close-popup:hover .c-x,.close-video:hover .c-x,.close-virtual:hover .c-x,.close:hover .c-x {
        transform: scale(.8) rotate(90deg)
    }

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

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

    .full-screen:hover::before {
        transform: scale(.8);
        background-color: var(--color-highlight);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .full-screen:hover::after {
        border-color: var(--color-highlight)
    }

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

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

    .social li a:hover .normal {
        transform: translateY(-100%)
    }

    .social li a:hover .hover {
        transform: translateY(-100%)
    }

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

    .item-policy a:hover {
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 1rem 0 var(--color-black-alpha-01);
        border-color: transparent
    }

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

    .share a:hover,.share-item a:hover {
        color: var(--color-white);
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 1rem 0 var(--color-black-alpha-01);
        border-color: transparent
    }

    .share a:hover .normal {
        transform: translateY(-100%)
    }

    .share a:hover .hover {
        transform: translateY(-100%)
    }

    .share-item a:hover .normal {
        transform: translateY(-100%)
    }

    .share-item a:hover .hover {
        transform: translateY(-100%)
    }

    .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::after,.srcoll-down::after {
        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::after {
        background-color: var(--color-highlight);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .go-top:hover::after {
        background-color: var(--color-highlight);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .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 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

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

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

    .arrow-more,.arrow-more::after,.arrow-more::before,.view-more span {
        transition: all .3s ease-in-out
    }

    .click-more .view-more:hover {
        margin: 0
    }

    .click-more .view-more:hover .arrow-more::before {
        transform: scale(.6);
        background-color: var(--color-highlight);
        box-shadow: 0 1rem 1rem 0 var(--color-black-alpha-01);
        border-color: transparent
    }

    .click-more .view-more:hover .arrow-more::after {
        border-color: var(--color-highlight)
    }

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

    .click-more .view-more:hover .arrow-more svg {
        transform: scale(.8)
    }

    .click-more .view-more:hover span {
        color: var(--color-highlight);
        margin: 1rem 0 .5rem 0
    }

    .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);
        text-shadow: none
    }

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

    .button:hover::after {
        clip-path: circle(100% at 50% 0)
    }

    .button:hover {
        color: var(--color-white)!important;
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        border-color: transparent
    }

    .arrows .arrow::after,.slide-pic-nav .arrow::after {
        transition: all .3s ease-in-out
    }

    .arrows .arrow:hover::after,.slide-pic-nav .arrow:hover::after {
        background-color: var(--color-normal-dark);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .arrows .arrow:hover::before,.slide-pic-nav .arrow:hover::before {
        animation-play-state: paused
    }

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

    .pic-zoom-in:hover::after,.pic-zoom-out:hover::after {
        background-color: var(--color-normal-dark);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .pic-zoom-in:hover::before,.pic-zoom-out:hover::before {
        animation-play-state: paused
    }

    .download-pdf svg,.download-pdf::after,.download-pdf::before,.view-album svg,.view-album::after,.view-album::before,.view-video svg,.view-video::after,.view-video::before,.view-virtual svg,.view-virtual::after,.view-virtual::before {
        transition: all .3s ease-in-out
    }

    .download-pdf:hover::before,.view-album:hover::before,.view-video:hover::before,.view-virtual:hover::before {
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        transform: scale(.6) rotate(-45deg)
    }

    .download-pdf:hover::after,.view-album:hover::after,.view-video:hover::after,.view-virtual:hover::after {
        border-color: var(--color-highlight)
    }

    .download-pdf:hover svg,.view-album:hover svg,.view-video:hover svg,.view-virtual:hover svg {
        transform: scale(.9)
    }

    .sub-menu-inner a {
        transition: all .3s ease-in-out
    }

    .sub-menu-inner a:hover {
        background-color: var(--color-highlight);
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02)
    }

    .pic-img img {
        transition: all .3s ease-in-out
    }

    .title-pic h3 {
        transition: color .3s ease-in-out
    }

    .item-library.hover .big-thumb {
        filter: drop-shadow(.5rem 1rem 1.5rem var(--color-black-alpha-02))
    }

    .item-library.hover .pic-img img {
        filter: brightness(110%);
        transform: scale(1.02)
    }

    .item-library.hover .title-pic h3 {
        color: var(--color-highlight)
    }

    .item-library.hover .view-album::before {
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        transform: scale(.6) rotate(-45deg)
    }

    .item-library.hover .view-album::after {
        border-color: var(--color-highlight)
    }

    .item-library.hover .view-album svg {
        transform: scale(.9)
    }

    .item-library.hover .download-pdf::before {
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        transform: scale(.6) rotate(-45deg)
    }

    .item-library.hover .download-pdf::after {
        border-color: var(--color-highlight)
    }

    .item-library.hover .download-pdf svg {
        transform: scale(.9)
    }

    .item-library.hover .view-virtual::before {
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        transform: scale(.6) rotate(-45deg)
    }

    .item-library.hover .view-virtual::after {
        border-color: var(--color-highlight)
    }

    .item-library.hover .view-virtual svg {
        transform: scale(.9)
    }

    .item-library.hover .view-video::before {
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        transform: scale(.6) rotate(-45deg)
    }

    .item-library.hover .view-video::after {
        border-color: var(--color-highlight)
    }

    .item-library.hover .view-video svg {
        transform: scale(.9)
    }

    .go-news {
        transition: color .3s ease-in-out
    }

    .item-news-home::after,.item-news::after {
        transition: border-color .3s ease-in-out,box-shadow .3s ease-in-out
    }

    .item-news-home:hover::after,.item-news:hover::after {
        box-shadow: 0 1.5rem 2rem 0 var(--color-black-alpha-02);
        border-color: var(--color-highlight)
    }

    .item-news-home:hover .go-news,.item-news:hover .go-news {
        color: var(--color-highlight)
    }

    .item-news-home:hover .go-news::after,.item-news:hover .go-news::after {
        opacity: 1
    }

    .masterplan .hover-block:hover .fill-block {
        fill-opacity: .9
    }

    .masterplan .hover-block:hover text {
        fill: var(--color-white)
    }
}