.mask .after {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

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

.logo .after {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.close-search {
    background: url(../images/close_search.svg) no-repeat center center/contain
}

.loadx::after {
    background: url(/photos/default/s_re2/logo/logo-07.svg) no-repeat center center/contain;
}

.loadx.loadx2::after {
    background: url(/photos/default/s_re2/logo/logo-07.svg) no-repeat center center/contain
}

.overlay-menu {
    background: url(../images/overlay-menu.jpg) no-repeat center center/cover;
    background-position: 50% 33%
}

.logo-menu .before {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}

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

.wheel {
    background: url(../images/scroll-down.svg) no-repeat center center/contain
}

.mask-content {
    -webkit-mask-image: url(../images/mask3.svg);
    mask-image: url(../images/mask3.svg)
}

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

.slidebox-draggable.slide-project.true-option .slidebox-list {
    cursor: pointer
}

.slidebox-draggable.slide-project.dragging.true-option .slidebox-list {
    cursor: url(../images/grabbing.svg) 6 8, move
}

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

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

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

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

.view-popup {
    background: #f1a20a url(../images/arrow.svg) no-repeat center center/contain
}

.download-pdf::before {
    background: #fff url(../images/pdf.svg) no-repeat center 50%/80%
}

.download-but a::after {
    background: rgba(255, 255, 255, .3) url(../images/arrow-down-white.png) no-repeat 50%/80%
}

.zoom::after {
    background: rgba(0, 0, 0, .1) url(../images/zoom.svg) no-repeat 50%/66%
}

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

.address {
    background: url(../images/contact-icon/add.svg) no-repeat center center/contain
}

.call {
    background: url(../images/contact-icon/call.svg) no-repeat center center/contain
}
.tel {
    background: url(/photos/default/s_re2/icons/telephone.svg) no-repeat center center/contain
}
.fax {
    background: url(/photos/default/s_re2/icons/fax.svg) no-repeat center center/contain
}

.email {
    background: url(../images/contact-icon/email.svg) no-repeat center center/contain
}

.project-contact .address {
    background: url(../images/contact-icon/add3.svg) no-repeat center center/contain
}

.project-contact .call {
    background: url(../images/contact-icon/call3.svg) no-repeat center center/contain
}

.project-contact .email {
    background: url(../images/contact-icon/email3.svg) no-repeat center center/contain
}

.top-stock .percent::before {
    background: url(../images/arrow-up.svg) no-repeat center center/contain
}

.top-stock .percent.arrow-up::before {
    background: url(../images/arrow-up.svg) no-repeat center center/contain
}

.top-stock .percent.arrow-down::before {
    background: url(../images/arrow-down.svg) no-repeat center center/contain
}

.top-stock .percent.arrow-normal::before {
    background: url(../images/arrow-normal.png) no-repeat center center/contain
}

.rotate-circle span {
    background: url(/photos/default/s_re2/items/company-name-circle.svg) no-repeat center center/contain;
    /* background: url(/photos/default/s_re2/logo/logo-07.svg) no-repeat center center/contain; */
    opacity: 0.5;
}

.about-intro .pic-about-intro .rotate-circle span {
    background: url(/photos/default/s_re2/items/company-name-circle.svg) no-repeat center center/contain;
    /* background: url(/photos/default/s_re2/logo/logo-07.svg) no-repeat center center/contain; */
}

.icon-showroom {
    background: url(../images/contact-icon/add2.svg) no-repeat center center/contain
}

.project-introduction .rotate-circle.rotate-circle-02 span {
    background: url(/photos/default/s_re2/items/company-name-circle.svg) no-repeat center center/contain
}

.section-three .rotate-circle span {
    background: url(/photos/default/s_re2/items/company-name-circle.svg) no-repeat center center/contain
}

.svg-home-about svg {
    height: 100px; 
    width: auto
}

.home-about .right-content .post-entry {
    padding-right: 10px;
    padding-top: 30px;
}

@keyframes Start {
    from {
        visibility: hidden
    }

    to {
        visibility: visible
    }
}

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

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

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

    100% {
        opacity: 1;
        transform: none
    }
}
@keyframes fadeIn09 {
    0% {
        opacity: 0
    }

    100% {
        opacity: 0.9
    }
}

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

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

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

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

@keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: translateY(-12px)
    }

    15% {
        opacity: 0;
        transform: translateY(8px)
    }

    30% {
        opacity: 1;
        transform: translateY(-12px)
    }

    50% {
        opacity: 0;
        transform: translateY(8px)
    }

    60% {
        opacity: 1;
        transform: translateY(-12px)
    }

    100% {
        opacity: 1;
        transform: translateY(-12px)
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes scaleLarge2 {
    0% {
        opacity: 0;
        transform: scale(1.3)
    }

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

@keyframes scaleSmall {
    0% {
        opacity: 0;
        transform: scale(.6)
    }

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

@keyframes scaleSmallX {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: none
    }
}

@keyframes scaleToSmallX {
    0% {
        transform: none
    }

    100% {
        transform: scaleX(0)
    }
}

@keyframes scaleToLarge {
    0% {
        transform: none
    }

    100% {
        transform: scale(1.05)
    }
}

@keyframes scaleSmallY {
    0% {
        transform: scaleY(0)
    }

    100% {
        transform: none
    }
}

@keyframes goWidth {
    0% {
        width: 100%
    }

    100% {
        width: 0
    }
}

@keyframes goHeight {
    0% {
        height: 100%
    }

    100% {
        height: 0
    }
}

@keyframes Rotate {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes Move-Arrow {
    25% {
        opacity: 1
    }

    33.3% {
        opacity: 1;
        transform: translateY(7px)
    }

    66.6% {
        opacity: 1;
        transform: translateY(14px)
    }

    100% {
        opacity: 0;
        transform: translateY(21px) scale(.7)
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(30deg) scale(.8);
        opacity: 0
    }

    100% {
        transform: perspective(400px) rotateX(0) scale(1);
        opacity: 1
    }
}

@keyframes GoUp {
    0% {
        transform: none
    }

    100% {
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes DrawStroke5 {
    0% {
        stroke-dashoffset: 500
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStroke {
    0% {
        stroke-dashoffset: -380
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStrokeOption2 {
    0% {
        stroke-dashoffset: 380
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStroke5 {
    0% {
        stroke-dashoffset: 500
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStroke6 {
    0% {
        stroke-dashoffset: 130
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scaleBanner {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.07)
    }
}

@keyframes loopText {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

@keyframes loopText2 {
    0% {
        transform: translateX(-200%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes WheelArrow {
    0% {
        height: 0
    }

    50% {
        height: 100%
    }

    100% {
        height: 0
    }
}

@keyframes WheelArrow2 {
    0% {
        height: 100%
    }

    100% {
        height: 0
    }
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(1)
    }

    100% {
        opacity: 1;
        transform: scale(1.05)
    }
}

@keyframes fadeInBlur {
    0% {
        opacity: 0;
        filter: blur(15px)
    }

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

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: rotate(-180deg)
    }

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

@keyframes danceHeight1 {
    from {
        height: 1px
    }

    to {
        height: 22px
    }
}

@keyframes danceHeight2 {
    from {
        height: 1px
    }

    to {
        height: 15px
    }
}

@keyframes danceHeight4 {
    from {
        height: 1px
    }

    to {
        height: 20px
    }
}

@keyframes danceHeight5 {
    from {
        height: 1px
    }

    to {
        height: 15px
    }
}

@keyframes danceHeight6 {
    from {
        height: 1px
    }

    to {
        height: 15px
    }
}

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

.gotoleft {
    animation-name: gotoLeft;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

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

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

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

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

@media screen and (min-width:1100px) {
    .ani-item.on-show {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .ani-pic {
        overflow: hidden
    }

    .ani-pic::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: var(--coloractive);
        pointer-events: none;
        z-index: 9
    }

    .ani-pic .bg-cover {
        opacity: 0
    }

    .ani-pic.ani-item.on-show {
        animation: none;
        opacity: 1
    }

    .ani-pic.on-show::after {
        animation-name: goHeight;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .ani-pic.on-show .bg-cover {
        animation-name: scaleLarge;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-delay: .3s
    }

    .go-top {
        position: fixed;
        color: #fff;
        right: 22px;
        bottom: 22px;
        width: 50px;
        height: 50px;
        margin: 0;
        border-radius: 50%;
        cursor: pointer;
        background-color: rgba(0, 0, 0, .1);
        pointer-events: none;
        transition: all .3s ease-in-out;
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .1));
        z-index: 20
    }

    .go-top svg {
        width: 80%;
        height: 80%;
        margin: 10%
    }

    .go-top.show {
        opacity: 1;
        pointer-events: auto;
        display: block
    }

    .go-top:hover {
        background-color: var(--coloractive);
        color: #fff;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1)
    }

    .go-top.blue {
        background-color: #aaa;
        box-shadow: none;
        filter: none;
        bottom: 16px
    }

    .go-top.blue:hover {
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, .2));
        color: #fff;
        background-color: var(--coloractive)
    }

    #home-page .footer .bottom,
    #home-page .footer .social {
        opacity: 0
    }

    #home-page .footer.show .bottom {
        animation-name: fadeInUp;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    #home-page .footer.show .social {
        animation-name: fadeInUp;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

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

    .header.show .language {
        animation-name: fadeInUp;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .header.show .second-menu {
        animation-name: fadeInDown;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .header.show .nav-click {
        animation-name: fadeInDown;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .header.show .right-header {
        animation-name: fadeInDown;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .header.auto.show .language {
        animation-name: fadeInDown;
        animation-duration: 1.5s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

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

    .active-nav,
    .language ul,
    .search-top,
    .second-menu ul {
        transition: transform .3s ease-in-out
    }

    .header::after {
        transition: opacity .4s ease-in-out
    }

    .header.hide::after {
        opacity: 1
    }

    .header.auto.hide .logo,
    .header.hide .logo {
        width: 220px;
        height: 53px;
        top: 9px
    }

    .header.hide .active-nav,
    .header.hide .language ul,
    .header.hide .search-top {
        transform: translateY(-17px)
    }

    .header.hide .second-menu ul {
        transform: translateY(-18px)
    }

    .header.dark .active-nav {
        color: var(--coloractive)
    }

    .header.dark .search-but,
    .header.dark .second-menu li a {
        color: var(--bgactive)
    }

    .header.dark .second-menu li::after {
        background-color: rgba(45, 61, 74, .5)
    }

    .header.dark .language li button {
        color: var(--bgactive)
    }

    .header.dark .language li.active button {
        color: var(--coloractive)
    }

    .header.dark .language li:nth-child(1)::after {
        background-color: rgba(45, 61, 74, .5)
    }

    .box-nav.dark button,
    .box-nav.dark span {
        color: var(--bgactive)
    }

    .box-nav.dark::after {
        background-color: rgba(45, 61, 74, .3)
    }

    .box-nav.dark li button::before {
        border-color: rgba(45, 61, 74, .5)
    }

    .box-nav.dark li button::after {
        background-color: rgba(45, 61, 74, .7)
    }

    .box-nav.dark li.current button::after {
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1));
        background-color: #092856
    }

    .wheel.dark {
        background: url(../images/scroll-down-3.svg) no-repeat center center/contain
    }

    .wheel.dark::after {
        color: var(--bgactive)
    }

    .social.move {
        right: calc(100vw - var(--widthdefine) - var(--distance) + 10px)
    }

    .close-nav .text-nav {
        transition: all .3s ease-in-out
    }

    .close-nav:hover .text-nav {
        color: var(--coloractive)
    }

    .close-img::after,
    .close-img::before {
        transition: all .2s ease-in-out
    }

    .close-nav:hover .close-img::after,
    .close-nav:hover .close-img::before {
        transform: rotate(0);
        background-color: var(--coloractive);
        height: 3px
    }

    .player-vid {
        cursor: pointer
    }

    .home-banner .slide-background .bg.is-active::after {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .text-banner,
    .text-banner p {
        opacity: 0
    }

    .show-text .text-banner {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .slide-background .bg.is-active .text-banner p {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 1.4s;
        animation-fill-mode: forwards
    }

    .show-text .slide-background .bg.is-active .bg-cover {
        animation-name: scaleBanner 12s infinite;
        animation-direction: alternate
    }

    .color-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        opacity: 0;
        z-index: 2
    }

    .show-text .color-overlay {
        animation-name: fadeIn;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-delay: .3s
    }

    .home-about .color-overlay {
        background-color: rgba(45, 61, 74, .3);
        mix-blend-mode: multiply
    }

    .home-about .right-content .post-entry {
        padding-right: 30%;
        padding-top: 30px;
    }
    
    .svg-home-about svg {
        height: 250px; 
        width: auto
    }

    .svg-home-about path {
        fill-opacity: 0;
        fill: var(--coloractive);
        stroke: var(--coloractive);
        stroke-miterlimit: 10;
        stroke-width: .8
    }

    .svg-home-about.show path {
        fill-opacity: 1;
        stroke-opacity: 0;
        transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out
    }

    .list-home-about::before {
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        top: calc(50% - 12px);
        left: -10vw;
        border-radius: 50%;
        background-color: var(--coloractive);
        opacity: 0
    }

    .show-text .list-home-about::before {
        animation-name: goRight;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: 1s
    }

    .circle-light,
    .circle-light span,
    .home-about .bg-cover,
    .line-vert,
    .wrap-text-circle-box {
        opacity: 0
    }

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

    .show-text .circle-light span {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-delay: 1.5s
    }

    .show-text .circle-light {
        color: rgba(255, 255, 255, .5)
    }

    .show-text .circle-light::before {
        border-top-color: rgba(255, 255, 255, .5);
        border-right-color: rgba(255, 255, 255, .5);
        border-bottom-color: rgba(255, 255, 255, .5);
        transition: border-top-color .3s linear, border-right-color .3s linear .3s, border-bottom-color .3s linear .6s
    }

    .show-text .circle-light::after {
        border-top: 1px solid rgba(255, 255, 255, .5);
        border-left-width: 1px;
        border-right-width: 1px;
        transform: rotate(270deg);
        transition: transform 1.2s linear 0s, border-left-width 0s linear 1.05s
    }

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

    .show-text .wrap-text-circle-box {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

    .show-text.home-about .bg-cover {
        animation-name: fadeIn;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-delay: .6s
    }

    .group-central .scroll-text-group {
        opacity: 0
    }

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

    .show-text .scroll-text-group>span:nth-child(1) {
        animation: loopText 50s linear -50s infinite
    }

    .show-text .scroll-text-group>span:nth-child(2) {
        animation: loopText2 50s linear -25s infinite
    }

    .group-central .slider-news,
    .home-news .bg-cover,
    .home-news .title-big {
        opacity: 0
    }

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

    .wrap-item-news-home,
    .wrap-item-news-home .ani-view-details {
        opacity: 0
    }

    .show-text .wrap-item-news-home {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-fill-mode: forwards
    }

    .show-text .wrap-item-news-home .ani-view-details {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: .6s
    }

    .show-text.home-news .title-big {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .show-text.home-news .slider-news {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .home-project .bg-cover img,
    .home-project .content-main {
        opacity: 0
    }

    .home-project .bg-cover::after {
        content: '';
        position: absolute;
        width: var(--distance);
        height: 100%;
        top: 0;
        right: calc(100% - var(--distance));
        background-color: var(--bgactive);
        z-index: 9
    }

    .home-project .bg-cover::before {
        content: '';
        position: absolute;
        width: calc(100% - var(--distance));
        height: 100%;
        top: 0;
        right: 0;
        background-color: var(--bgactive);
        z-index: 9
    }

    .show-text.home-project .bg-cover::after {
        animation-name: scaleToSmallX;
        animation-duration: 1.8s;
        animation-fill-mode: forwards;
        animation-delay: .6s;
        transform-origin: inherit
    }

    .show-text.home-project .bg-cover::before {
        animation-name: scaleToSmallX;
        animation-duration: 1.6s;
        animation-fill-mode: forwards;
        animation-delay: .6s;
        transform-origin: inherit
    }

    .show-text.home-project .bg-cover img {
        animation-name: scaleLarge;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-delay: .5s
    }

    .show-text.home-project .content-main {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

    .show-text.home-project .line-color {
        animation-name: fadeOut;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-delay: 0s;
        z-index: 2
    }

    .show-text.home-project .line-color-project {
        animation-name: fadeIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-delay: 0s
    }

    .pic-project-home {
        pointer-events: none
    }

    .text-project-home .ani-view-details,
    .text-project-home .title-post {
        opacity: 0
    }

    .pic-project-home .pic-img img {
        filter: grayscale(100%);
        opacity: .3
    }

    .item-project-home.is-active .pic-project-home {
        pointer-events: auto
    }

    .item-project-home.is-active .num-project {
        transform: translateX(calc(-100% - min(4vw, 60px)));
        color: rgba(255, 255, 255, .1)
    }

    .item-project-home.is-active .title-post {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: .7s
    }

    .item-project-home.is-active .ani-view-details {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: .7s
    }

    .item-project-home.is-active .pic-project-home .pic-img img {
        opacity: 1;
        filter: none
    }

    .item-project-home.is-active .pic-project-home {
        box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
    }

    .home-shareholder.show-text .tagline-banner::after {
        animation-name: goRight;
        animation-duration: 2s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards
    }

    .home-shareholder .col-left,
    .home-shareholder .list-info-shareholders {
        opacity: 0
    }

    .show-text .list-info-shareholders {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-delay: .5s;
        animation-fill-mode: forwards
    }

    .show-text .col-left {
        animation-name: flipInX;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .group-central .box-achievement-home,
    .home-achieve .bg-cover,
    .home-achieve::after {
        opacity: 0
    }

    .box-achievement-home:nth-child(2)::after {
        opacity: 0
    }

    .show-text .box-achievement-home:nth-child(2)::after {
        animation-name: fadeInDown2;
        animation-duration: 1.5s;
        animation-delay: 2s;
        animation-fill-mode: forwards
    }

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

    .show-text .box-achievement-home:nth-child(2) {
        animation-name: goLeft;
        animation-duration: 1.2s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .show-text .box-achievement-home:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1.2s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .show-text.home-achieve::after {
        animation-name: flipInX;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

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

    .home-contact .color-overlay {
        background: linear-gradient(180deg, rgba(45, 61, 74, .4), rgba(45, 61, 74, .1) 130%);
        mix-blend-mode: multiply
    }

    .home-contact .company-info,
    .home-contact .company-text .title-small,
    .home-contact .subscribe {
        opacity: 0
    }

    .home-contact.show-text .company-text .title-small {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

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

    .home-contact.show-text .subscribe {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .home-contact.show-text .bg-cover {
        animation-name: scaleToLarge;
        animation-duration: 4s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-value .right-content.on-show {
        opacity: 1;
        animation: none
    }

    .about-value .right-content .box-value {
        opacity: 0
    }

    .about-value .right-content.on-show .box-value:nth-child(1) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .about-value .right-content.on-show .box-value:nth-child(2) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .about-value .right-content.on-show .box-value:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .circle-stroke.on-show {
        animation-name: fadeInDown;
        animation-duration: 1.2s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .static .modify-item-album .pic-library .pic-img {
        padding-top: 0
    }

    .static .modify-item-album:nth-child(1) .pic-library .pic-img {
        height: 580px
    }

    .static .slidebox-list {
        flex-wrap: wrap
    }

    .load-02 .modify-item-album:nth-child(2) .pic-library .pic-img {
        height: 580px
    }

    .load-03 .modify-item-album:nth-child(2) {
        width: 50%;
        position: absolute;
        left: 50%;
        top: 0
    }

    .load-03 .modify-item-album:nth-child(3) {
        width: 50%;
        position: absolute;
        left: 50%;
        top: calc(50% + 22px)
    }

    .load-03 .modify-item-album:nth-child(2) .pic-library .pic-img,
    .load-03 .modify-item-album:nth-child(3) .pic-library .pic-img {
        height: 250px
    }

    .load-05 .modify-item-album:nth-child(2) {
        width: calc(25% + 15px);
        position: absolute;
        left: 50%;
        top: 0;
        padding-right: 40px
    }

    .load-05 .modify-item-album:nth-child(3) {
        width: calc(25% + 15px);
        position: absolute;
        left: 50%;
        top: calc(50% + 22px);
        padding-right: 40px
    }

    .load-05 .modify-item-album:nth-child(4) {
        width: calc(25% - 15px);
        position: absolute;
        left: calc(75% + 15px);
        top: 0;
        padding: 0
    }

    .load-05 .modify-item-album:nth-child(5) {
        width: calc(25% - 15px);
        position: absolute;
        left: calc(75% + 15px);
        top: calc(50% + 22px);
        padding: 0
    }

    .load-05 .modify-item-album:nth-child(2) .pic-library .pic-img,
    .load-05 .modify-item-album:nth-child(3) .pic-library .pic-img,
    .load-05 .modify-item-album:nth-child(4) .pic-library .pic-img,
    .load-05 .modify-item-album:nth-child(5) .pic-library .pic-img {
        height: 250px
    }

    .load-05 .modify-item-album:not(:first-child) .view-album {
        width: 52px;
        height: 52px;
        left: 15px
    }

    .load-05 .modify-item-album:not(:first-child) .view-video {
        width: 52px;
        height: 52px;
        left: 15px
    }

    .load-05 .modify-item-album:not(:first-child) .pdf {
        width: 52px;
        height: 52px;
        left: 15px
    }

    .load-05 .modify-item-album:not(:first-child) .title-pic {
        padding: 12px 0 0 80px
    }

    .load-05 .modify-item-album:not(:first-child) .title-pic h3 {
        font-size: 14px
    }

    .load-06 .modify-item-album {
        opacity: .3;
        pointer-events: none;
        transition: opacity .6s ease-in-out
    }

    .load-06 .modify-item-album.is-visible {
        opacity: 1;
        pointer-events: auto
    }

    .project-box .ani-pic.on-show::after {
        animation-name: goWidth;
        animation-duration: 2s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .project-box:nth-child(even) .ani-pic.on-show::after {
        left: auto;
        right: 0
    }

    .pic-location.on-show {
        animation-name: scaleLarge;
        animation-duration: 2s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .page-contact .color-overlay {
        background: linear-gradient(180deg, rgba(45, 61, 74, .4), rgba(45, 61, 74, .1) 130%);
        mix-blend-mode: multiply
    }

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

    .show-text.page-contact .bg-cover {
        animation-name: fadeInScale;
        animation-duration: 3s;
        animation-delay: 1s;
        animation-fill-mode: forwards
    }

    .show-text.page-contact .color-overlay {
        animation-name: fadeIn;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        animation-delay: 1.8s
    }

    .table-recruitment td a,
    .table-recruitment td:nth-child(2),
    .table-recruitment tr td {
        transition: all .3s ease-in-out
    }

    .table-recruitment td:nth-child(2):hover {
        background-color: var(--coloractive);
        color: var(--brown)
    }

    .table-recruitment tr:hover a,
    .table-recruitment tr:hover td,
    .table-recruitment tr:nth-child(even):hover td {
        background-color: var(--coloractive);
        color: #fff
    }

    .table-recruitment tr {
        cursor: pointer
    }

    .file-up:hover .file-mark {
        background-color: var(--coloractive);
        color: #fff
    }
}

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

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

    .header.show .language {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .header.show .second-menu {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

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

    .header.show .right-header {
        animation-name: fadeInDown;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }
}

@media (hover:hover) and (pointer:fine) and (min-width:1100px) {
    .language button:hover {
        color: var(--coloractive) !important
    }

    .search-but:not(.active):hover {
        color: var(--coloractive)
    }

    .line-toggle {
        transition: all .3s ease-in-out
    }

    .active-nav::after {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        top: calc(50% - 40px);
        left: -15px;
        border-radius: 50%;
        background-color: unset;
        z-index: -1
    }

    .active-nav:hover .toggle-1 {
        width: 28px;
        color: var(--coloractive)
    }

    .active-nav:hover .toggle-2 {
        width: 35px;
        color: var(--coloractive)
    }

    .active-nav:hover .toggle-3 {
        width: 22px;
        color: var(--coloractive)
    }

    .wheel::after {
        transition: color .3s ease-in-out
    }

    .wheel:hover {
        color: var(--coloractive)
    }

    .wheel:hover {
        background: url(../images/scroll-down-2.svg) no-repeat center center/contain
    }

    .wheel:hover::after {
        color: var(--coloractive)
    }

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

    .nav-item a:hover {
        color: var(--coloractive)
    }

    .wheel-submit {
        transition: all .3s ease-in-out
    }

    .wheel-submit:hover {
        background-color: var(--coloractive)
    }

    .wheel-submit:hover span:after,
    .wheel-submit:hover span:before {
        background-color: #fff !important
    }

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

    .second-menu li a:hover {
        color: var(--coloractive) !important
    }

    .second-menu li a:hover::after {
        transform: none
    }

    .company-text li a {
        transition: all .3s ease-in-out
    }

    .company-text li a:hover {
        color: var(--coloractive)
    }

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

    .copyright a:hover {
        color: var(--bgactive)
    }

    .foreground {
        transition: all .6s ease-in-out
    }

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

    .social li:hover .foreground {
        stroke-dashoffset: 0
    }

    .social li a:hover {
        color: var(--coloractive)
    }

    .slidebox-arrow::after {
        transition: all .4s ease-in-out
    }

    .slidebox-arrow-next:hover::after {
        background-color: var(--coloractive)
    }

    .slidebox-arrow-prev:hover::after {
        background-color: var(--coloractive)
    }

    .close-360::after,
    .close-album::after,
    .close-map,
    .close-pics::after,
    .close-popup::after,
    .close-video,
    .close-video::after,
    .file-mark,
    .full-map,
    .zoom,
    .zoom::after,
    button {
        transition: all .3s ease-in-out
    }

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

    .hover-close::before {
        opacity: 0
    }

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

    .hover-close .close-pics-span::after,
    .hover-close .close-pics-span::before {
        transform: none;
        background-color: #fff;
        height: 2px
    }

    .hover-close {
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, .4));
        transition: filter .3s ease-in-out
    }

    .close-video.hover-close {
        background-color: var(--bgactive);
        transition: background-color .3s ease-in-out
    }

    .close-search:hover {
        background: url(../images/close_search2.svg) no-repeat center center/contain
    }

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

    .view-details::before {
        background: var(--coloractive) url(../images/view-details.svg) no-repeat;
        background-size: cover;
        background-position: right
    }

    .view-details {
        transition: filter .3s ease-in-out, padding .3s ease-in-out
    }

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

    .view-details:hover {
        filter: brightness(1.1);
        padding-right: 22px;
        padding-left: 30px;
        transition: all .3s ease-in-out;
        color: #fff !important
    }

    .view-details:hover span {
        width: 100%;
        border-radius: 30px;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, .2));
        border-color: var(--coloractive);
        background-color: var(--coloractive)
    }

    .view-details:hover::before {
        left: -10px;
        background-position: left;
        transform: scale(1.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
    }

    .txt-news-home h3 {
        transition: color .3s ease-in-out
    }

    .pic-news-home::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        transition: height .4s ease-in-out;
        background-color: rgba(0, 0, 0, .2)
    }

    .item-news-home:hover .pic-news-home::after {
        height: 100%
    }

    .item-news-home:hover .pic-news-home img {
        transform: scale(1.1)
    }

    .item-news-home:hover .view-details {
        filter: brightness(1.1);
        padding-right: 22px;
        padding-left: 30px;
        color: var(--coloractive);
        transition: all .3s ease-in-out
    }

    .item-news-home:hover .view-details span {
        width: 100%;
        border-radius: 30px;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, .2));
        border-color: var(--coloractive)
    }

    .item-news-home:hover .view-details::before {
        left: -10px;
        background-position: left;
        transform: scale(1.3)
    }

    .item-news-home:hover .txt-news-home h3 {
        color: var(--coloractive)
    }

    .pic-project-home {
        cursor: pointer
    }

    .pic-project-home::after {
        content: '';
        position: absolute;
        width: 180%;
        height: 100%;
        top: 0;
        left: -40%;
        mix-blend-mode: overlay;
        transition: transform .5s ease-in-out, opacity .3s ease-in-out;
        transform: skewX(-135deg) scale3d(0, 1, 1);
        transform-origin: center center;
        background-color: rgba(0, 0, 0, .2)
    }

    .pic-project-home:hover::after {
        transform: skewX(-135deg) scale3d(1, 1, 1)
    }

    .pic-project-home:hover img {
        transform: scale(1.07)
    }

    .item-project-home.on-hover .view-details {
        padding-right: 22px;
        padding-left: 30px;
        color: var(--coloractive);
        transition: all .3s ease-in-out
    }

    .item-project-home.on-hover .view-details span {
        width: 100%;
        border-radius: 30px;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, .2));
        border-color: var(--coloractive)
    }

    .item-project-home.on-hover .view-details::before {
        left: -10px;
        background-position: left;
        transform: scale(1.3)
    }

    .item-project-home.on-hover .txt-news-home h3 {
        color: var(--coloractive)
    }

    .home-shareholder .list-box .r-link {
        display: flex;
        opacity: 0;
        left: 100%;
        transition: all .3s ease-in-out
    }

    .home-shareholder .list-box:hover .r-text p {
        color: var(--coloractive)
    }

    .home-shareholder .list-box:hover .r-link {
        opacity: 1;
        left: calc(100% + 20px)
    }

    .circle-stock-wrapper {
        transition: all .5s ease-in-out
    }

    .col-left:hover .circle-stock-wrapper {
        filter: brightness(1.3) drop-shadow(0 0 5px rgba(255, 255, 255, .1));
        transform: scale(1.02)
    }

    .share-link::before {
        transition: all .3s ease-in-out
    }

    .share-link:hover::before {
        border: 30px solid rgba(45, 61, 74, .3);
        transform: scale(1.07)
    }

    .share-link::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        background-color: var(--coloractive);
        border-radius: 50%;
        transition: opacity .3s ease-in-out;
        z-index: 1
    }

    .share-link:hover::after {
        opacity: 1
    }

    .col-left::after,
    .list-box,
    .num-report span,
    .r-pdf,
    .r-text p {
        transition: all .3s ease-in-out
    }

    .list-box:hover .r-pdf {
        color: var(--coloractive)
    }

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

    .pic-achievement-home:hover {
        box-shadow: unset
    }

    .sub-but {
        transition: all .3s ease-in-out
    }

    .sub-but:hover {
        filter: brightness(1.2);
        box-shadow: 5px 5px 20px rgba(0, 0, 0, .3)
    }

    .num-report {
        transition: all .3s ease-in-out
    }

    .num-report:hover {
        filter: brightness(1.4) drop-shadow(0 2px 5px rgba(0, 0, 0, .2))
    }

    .text-showroom a {
        transition: all .3s ease-in-out
    }

    .text-showroom a:hover {
        color: var(--coloractive)
    }

    .load-more-showroom,
    .load-more-showroom::before {
        transition: all .3s ease-in-out
    }

    .load-more-showroom::after {
        transition: all .1s ease-in-out
    }

    .load-more-showroom:hover {
        color: var(--coloractive)
    }

    .load-more-showroom:hover::before {
        background-color: var(--coloractive)
    }

    .load-more-showroom:hover::after {
        border-top: 6px solid #fff
    }

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

    .member-pic:hover img {
        filter: brightness(1.1);
        transform: scale(.97)
    }

    .partner-box .pic-img img {
        transition: all .4s ease-in-out
    }

    .partner-box:hover .pic-img img {
        filter: brightness(1.2) invert(0) drop-shadow(0 0 20px rgba(255, 255, 255, .5));
        transform: scale(1.1)
    }

    .grid-company-list .subscribe .sub-but:hover {
        background-color: unset;
        box-shadow: none;
        color: var(--coloractive);
        filter: brightness(1.3)
    }

    .grid-company-list .subscribe .sub-but::after {
        transition: all .3s ease-in-out .3s
    }

    .grid-company-list .subscribe .sub-but::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: var(--coloractive);
        transform: translateX(-100%);
        transition: all .3s ease-in-out
    }

    .grid-company-list .subscribe .sub-but:hover::after {
        transform: translateX(100%);
        transition: all .3s ease-in-out
    }

    .grid-company-list .subscribe .sub-but:hover::before {
        transform: none;
        transition: all .3s ease-in-out .3s
    }

    .link-map::after {
        content: '';
        width: 66px;
        height: 66px;
        position: absolute;
        left: -3px;
        top: calc(50% - 33px);
        background-color: var(--coloractive);
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: 50%;
        z-index: -1
    }

    .link-map,
    .link-map::before {
        transition: all .3s ease-in-out
    }

    .link-map:hover {
        color: var(--coloractive);
        filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, .1));
        padding-left: 85px
    }

    .link-map:hover::after {
        opacity: 1
    }

    .link-map:hover::before {
        transform: scale(.9)
    }

    .wrap-pro-center .pic-img::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background-color: rgba(0, 0, 0, .2);
        opacity: 0;
        transition: all .5s ease-in-out;
        z-index: 8
    }

    .wrap-pro-center .pic-img::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        border: 8px solid rgba(255, 255, 255, .5);
        opacity: 0;
        transition: all .3s ease-in-out;
        z-index: 8
    }

    .wrap-pro-center:hover .pic-library {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, .1)
    }

    .wrap-pro-center:hover .title-pic {
        transform: translateX(10px)
    }

    .wrap-pro-center:hover .view-album {
        background-color: var(--coloractive);
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, .2)
    }

    .wrap-pro-center:hover .pic-img img {
        transform: scale(1.1)
    }

    .wrap-pro-center:hover .pic-img::after {
        opacity: 1;
        height: 100%
    }

    .wrap-pro-center:hover .pic-img::before {
        opacity: 1
    }

    .box-pro-center .wrap-pro-center:hover .view-album {
        opacity: 1;
        transform: none;
        transition: all .4s ease-in-out
    }

    .date,
    .link-page,
    .link-page a,
    .link-text h3 {
        transition: all .3s ease-in-out
    }

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

    .link-page:hover {
        background-color: var(--coloractive)
    }

    .link-page:hover .view-more {
        color: #fff
    }

    .link-page:hover h3 {
        color: #fff
    }

    .link-page:hover .date {
        background-color: var(--coloractive)
    }

    .link-page:hover .pic-thumb img {
        transform: scale(1.1)
    }

    .link-page:hover a {
        transform: translateX(5px)
    }

    .social-special li a {
        transition: all .3s ease-in-out
    }

    .social-special li a:hover {
        background-color: var(--coloractive);
        border-color: #fff;
        color: #fff
    }

    .orther-pro-but {
        transition: all .3s ease-in-out
    }

    .wheel-orther-pro span:after,
    .wheel-orther-pro span:before {
        transition: background-color .3s ease-in-out
    }

    .orther-pro-but:hover .wheel-orther-pro span:after,
    .orther-pro-but:hover .wheel-orther-pro span:before {
        background-color: var(--bgactive)
    }

    .orther-pro-but:hover {
        color: var(--bgactive)
    }

    .list-outer:hover .r-text p {
        color: var(--coloractive)
    }

    .r-link::after {
        transition: all .3s ease-in-out
    }

    .report-group .list-outer:hover .r-left .date {
        box-shadow: none;
        transform: scale(.95)
    }

    .report-group:nth-child(even) .num-report:hover span {
        color: var(--coloractive)
    }

    .report-group:nth-child(even) .num-report:hover {
        filter: none
    }

    .report-group:nth-child(even) .list-box:hover .r-pdf svg path {
        stroke: var(--coloractive)
    }

    .report-group:nth-child(even) .list-box:hover .r-link::after {
        background-color: var(--coloractive);
        opacity: .5
    }

    .more-project {
        transition: all .3s ease-in-out
    }

    .more-project:hover {
        color: var(--coloractive)
    }

    .item-news {
        cursor: pointer
    }

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

    .pic-news::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        transition: height .4s ease-in-out;
        background-color: rgba(0, 0, 0, .2)
    }

    .pic-news::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .4s ease-in-out;
        border: 7px solid rgba(255, 255, 255, .2);
        z-index: 1
    }

    .item-news:hover .pic-news::after {
        height: 100%
    }

    .item-news:hover .pic-news::before {
        opacity: 1
    }

    .item-news:hover .pic-news img {
        transform: scale(1.1)
    }

    .item-news:hover .view-details {
        filter: brightness(1.1);
        padding-right: 22px;
        padding-left: 30px;
        color: var(--coloractive);
        transition: all .3s ease-in-out
    }

    .item-news:hover .view-details span {
        width: 100%;
        border-radius: 30px;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, .2));
        border-color: var(--coloractive)
    }

    .item-news:hover .view-details::before {
        left: -10px;
        background-position: left;
        transform: scale(1.3)
    }

    .item-news:hover .txt-news h3 {
        color: var(--coloractive)
    }

    .item-news:hover .date {
        background-color: var(--coloractive)
    }

    .join-us .input-but .button {
        transition: all .3s ease-in-out
    }

    .join-us .input-but .button:hover {
        background: #aaa
    }

    .join-us .file-name {
        transition: background-color .3s ease-in-out
    }

    .join-us .file-up:hover .file-name {
        background-color: #fff
    }

    .player-vid {
        transition: background-color .3s ease-in-out
    }

    .player-vid svg,
    .player-vid::after {
        transition: all .3s ease-in-out
    }

    .player-vid:hover svg {
        fill: #fff
    }

    .player-vid:hover {
        background-color: #000
    }

    .player-vid:hover::after {
        border-color: #fff
    }

    .right-button button svg {
        transition: all .3s ease-in-out
    }

    .right-button button:hover svg {
        fill: #fff
    }

    .zoom:hover {
        background-color: var(--coloractive);
        transform: rotate(90deg) scale(.95)
    }

    .zoom-pic {
        cursor: pointer
    }

    .zoom-hover {
        overflow: hidden
    }

    .zoom-hover::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 10px solid var(--coloractive);
        opacity: 0;
        transition: all .3s ease-in-out;
        z-index: 12
    }

    .zoom-hover:hover::after {
        opacity: 1
    }

    .zoom-hover:hover img {
        transform: scale(1.05)
    }

    .zoom-hover::before {
        content: '';
        position: absolute;
        width: 180%;
        height: 100%;
        top: 0;
        left: -40%;
        transition: all .4s ease-in-out;
        transform: skewX(-135deg) scale3d(0, 1, 1);
        opacity: 0;
        pointer-events: none;
        transform-origin: center center;
        background-color: rgba(0, 0, 0, .1);
        mix-blend-mode: multiply;
        z-index: 10
    }

    .zoom-hover:hover::before {
        transform: skewX(-135deg) scale3d(1, 1, 1);
        opacity: 1
    }

    .title-pic {
        transition: all .6s ease-in-out
    }

    .pic-library,
    .view-album,
    .view-album::after,
    .view-degree,
    .view-pdf,
    .view-video {
        transition: all .3s ease-in-out
    }

    .item-album .pic-img::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background-color: rgba(0, 0, 0, .2);
        opacity: 0;
        transition: all .3s ease-in-out;
        z-index: 8
    }

    .item-album .pic-img::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        pointer-events: none;
        border: 8px solid rgba(255, 255, 255, .5);
        opacity: 0;
        transition: all .3s ease-in-out;
        z-index: 8
    }

    .item-album {
        cursor: pointer
    }

    .item-album:hover .pic-library {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, .1)
    }

    .item-album:hover .title-pic {
        transform: translateX(10px)
    }

    .item-album:hover .view-album {
        background-color: var(--bgactive);
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, .2)
    }

    .item-album:hover .view-video {
        background-color: var(--bgactive);
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, .2)
    }

    .item-album:hover .pic-img img {
        transform: scale(1.1)
    }

    .item-album:hover .pic-img::after {
        opacity: 1;
        height: 100%
    }

    .item-album:hover .pic-img::before {
        opacity: 1
    }

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

    .item-album:hover .pdf {
        background-color: var(--bgactive);
        color: #fff;
        transform: scale(1.07)
    }

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

    .item-album:hover .item-deg {
        padding: 0;
        background-color: var(--bgactive);
        color: #fff;
        transform: scale(1.1)
    }

    .item-deg svg path {
        stroke-miterlimit: 10;
        stroke-width: 0;
        stroke-dasharray: 130;
        stroke-dashoffset: 130
    }

    .download-pdf-subscribe {
        transition: all .3s ease-in-out
    }

    .download-pdf-subscribe:hover {
        color: var(--yellow)
    }

    .print-box>a,
    .share-item a {
        transition: all .3s ease-in-out
    }

    .share-item li a svg {
        transition: transform .5s ease-in-out
    }

    .share-but.active,
    .share-but:hover {
        background-color: rgba(0, 0, 0, .2)
    }

    .share-item a:hover {
        color: #fff;
        border-color: #fff;
        background-color: var(--coloractive)
    }

    .share-item li:hover a svg {
        transform: scale(.9)
    }

    .share-item li {
        transition: all .3s cubic-bezier(.44, .39, .34, 1.03)
    }

    .print-box>a.active,
    .print-box>a:hover {
        background-color: var(--coloractive);
        color: #fff
    }

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

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

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

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

    .input-but button {
        transition: all .3s ease-in-out
    }

    .input-but button:hover {
        background-color: #aaa;
        color: #fff
    }

    .item-search {
        transition: background-color .3s ease-in-out, box-shadow .3s ease-in-out, border-color .3s ease-in-out;
        cursor: pointer
    }

    .item-search img {
        transition: all .6s ease-in-out
    }

    .item-search:hover {
        background-color: var(--bgactive);
        box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .08);
        border-color: var(--color-light)
    }

    .item-search:hover img {
        transform: scale(1.05);
        filter: grayscale(1)
    }

    .item-search:hover h3 {
        color: #fff
    }

    .item-search:hover a {
        color: var(--coloractive)
    }

    .report-group:nth-child(2n) .slidebox-arrow:hover::after {
        background-color: var(--coloractive)
    }

    .download,
    .pin,
    .play-pause-btn,
    .volume-button,
    .volume-controls {
        transition: all .3s ease-in-out
    }

    .audio-player .download:hover,
    .audio-player .volume .volume-button:hover {
        color: var(--coloractive)
    }

    .audio-player .slider .gap-progress .pin:hover {
        background-color: var(--coloractive)
    }

    .audio-player .play-pause-btn:hover {
        background-color: var(--bgactive)
    }
}

.title-page.on-show {
    opacity: 1;
    animation: none
}

.title-page h1::after {
    transform: scaleX(0)
}

.title-page.show h1::after {
    animation-name: scaleSmallX;
    animation-duration: 2s;
    animation-delay: .8s;
    animation-fill-mode: forwards
}