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

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

.close-nav .close-img::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/close-blue.svg) no-repeat center center/contain
}

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

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

body.auto .wheel::after {
    background: url(../images/wheel-blur.svg) no-repeat center center/contain
}

body.auto .wheel:hover::after {
    background: url(../images/wheel.svg) no-repeat center center/contain
}

.home-product {
    background: url(../images/pattern.jpg) repeat
}

.home-news {
    background: url(../images/pattern.jpg) repeat
}

.home-contact {
    background: url(../images/pattern.jpg) repeat
}

.img-subscribe {
    background: #1c3061 url(../images/subscribe.svg) no-repeat center center/contain
}

.about-history {
    background: url(../images/pattern.jpg) repeat
}

.factory-equipment::before {
    background: url(../images/pattern.jpg) repeat
}

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

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

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

.point-distribute::after {
    background: url(../images/map-pointer.svg) no-repeat 50%/70%
}

.point-distribute.current::after {
    background: #fff url(../images/map-pointer-2.svg) no-repeat 50%/67%
}

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

.wrap-but-submit-contact .input-but button:after {
    background: url(../images/submit.svg) no-repeat center center/contain
}

.wrap-but-submit-contact .input-but button:hover:after {
    background: url(../images/submit-white.svg) no-repeat center center/contain
}

.fullsize::after {
    background: url(../images/video/fullscreen.svg) no-repeat 50%/80%
}

.exit-fullsize.fullsize::after {
    background: url(../images/video/cancel-fullscreen.svg) no-repeat 50%/80%
}

.select-header::after {
    background: url(../images/select.png) no-repeat center center
}

.select-header.onclick::after {
    background: url(../images/select-yellow.png) no-repeat center center
}

.loadx {
    background: url(../images/cycle.png) no-repeat center center/contain
}

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

.input-select select {
    background: url(../images/arrow-down.png) no-repeat right center
}

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

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

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

.link-popup {
    background: #b0b0b0 url(../images/zoom-in.svg) no-repeat 50%/70%
}

.img-subscribe-footer {
    background: url(../images/subscribe-blue.svg) no-repeat center center/contain
}

.slidebox-draggable.true-option .slidebox-item .pic-project-home {
    cursor: url(../images/grab.svg) 6 8, move
}

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

.player-vid {
    background: url(../images/play.svg) no-repeat center center/contain
}

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

button[data-state=play] {
    background-image: url(../images/video/play.svg)
}

button[data-state=pause] {
    background-image: url(../images/video/pause.svg)
}

button[data-state=stop] {
    background-image: url(../images/video/stop.svg);
    display: none
}

button[data-state=mute] {
    background-image: url(../images/video/mute.svg)
}

button[data-state=unmute] {
    background-image: url(../images/video/unmute.svg)
}

button[data-state=go-fullscreen] {
    background-image: url(../images/video/fullscreen.svg)
}

button[data-state=cancel-fullscreen] {
    background-image: url(../images/video/cancel-fullscreen.svg)
}

.drag-cursor {
    cursor: url(../images/grabbing.png) 8 8, move
}

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

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

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

.map-box.show .full-map::after {
    background: url(../images/video/cancel-fullscreen.svg) no-repeat 50%/80%
}

.full-map::after {
    background: url(../images/video/fullscreen.svg) no-repeat 50%/90%
}

.close-box-map::after {
    background: url(../images/close.svg) no-repeat 50%/80%
}

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

.zoom-pic {
    cursor: url(../images/zoom-pic.svg) 6 8, zoom-in
}

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

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

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

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

.view-news span {
    background: url(../images/arrow-2.svg) no-repeat center center/contain
}

.view-details {
    background: url(../images/arrow-next.png) no-repeat center center/contain
}

.captcha::after {
    background: #f9f9f9 url(../images/captcha.png) no-repeat center center/contain
}

button[data-state=play] {
    background-image: url(../images/video/play.svg)
}

button[data-state=pause] {
    background-image: url(../images/video/pause.svg)
}

button[data-state=stop] {
    background-image: url(../images/video/stop.svg);
    display: none
}

button[data-state=mute] {
    background-image: url(../images/video/mute.svg)
}

button[data-state=unmute] {
    background-image: url(../images/video/unmute.svg)
}

button[data-state=go-fullscreen] {
    background-image: url(../images/video/fullscreen.svg)
}

button[data-state=cancel-fullscreen] {
    background-image: url(../images/video/cancel-fullscreen.svg)
}

.add-button .icon {
    background: url(../images/icon-512.png) no-repeat center center/cover
}

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

@media screen and (max-width:1100px) {
    .logo::after,
    body.auto .logo::after {
        background: url(../images/logo-white.svg) no-repeat center center/contain
    }
    .logo-factory-tech {
        background: url(../images/logo-white.svg) no-repeat center center/contain
    }
    .exit-fullsize.fullsize::after {
        background: url(../images/video/cancel-fullscreen.svg) no-repeat 50%/80%
    }
    .view-details {
        background: url(../images/arrow-next.png) no-repeat center center/contain
    }
    .left-footer {
        flex-direction: column-reverse
    }
}

@media screen and (min-width:1100px) {
    .search-but {
        transition: all .3s ease-in-out;
        cursor: pointer
    }
    .header.hide .search-but:hover,
    .search-but.active:hover,
    .search-but:hover {
        color: #c39c56!important
    }
    .search-but.active {
        color: #fff!important;
        margin: 0 7px 0 0
    }
    .nav li a {
        transition: all .6s cubic-bezier(.43, .195, .02, 1)
    }
    .nav li a:hover {
        color: #c39c56
    }
    .sub-nav li a:hover,
    .sub-nav li button:hover {
        background-color: #243b74
    }
    .outer-nav.second .sub-nav li a:hover,
    .outer-nav.second .sub-nav li button:hover {
        background-color: #243b74
    }
    .outer-nav.second.inside.fixed {
        background: inherit;
        top: 18px;
        border-top: 0
    }
    .outer-nav.second.inside.fixed .sub-nav li {
        box-shadow: none;
        margin: 0 -1px
    }
    .outer-nav.second.inside.fixed .sub-nav li a,
    .outer-nav.second.inside.fixed .sub-nav li button {
        background-color: inherit;
        color: #243b74;
        font-size: 13px;
        font-weight: 700;
        padding: 10px 12px
    }
    .outer-nav.second.inside.fixed .sub-nav li a.active,
    .outer-nav.second.inside.fixed .sub-nav li a.current,
    .outer-nav.second.inside.fixed .sub-nav li a:hover,
    .outer-nav.second.inside.fixed .sub-nav li button.active,
    .outer-nav.second.inside.fixed .sub-nav li button.current,
    .outer-nav.second.inside.fixed .sub-nav li button:hover {
        background-color: #c39c56;
        color: #fff
    }
    .outer-nav:not(.second) .wheel-submit {
        width: 41px;
        height: 41px;
        right: -13px
    }
    .outer-nav:not(.second) .wheel-submit.wheel-prev {
        left: -13px
    }
    .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: #c39c56
    }
    .box-nav {
        width: auto;
        height: auto;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        display: flex;
        align-items: center;
        z-index: 20
    }
    .box-nav ul {
        width: auto;
        height: auto;
        position: relative;
        text-align: left;
        list-style: none;
        padding: 0 30px 0 0
    }
    .box-nav li {
        position: relative;
        display: block;
        height: auto;
        cursor: pointer
    }
    .box-nav li button {
        font-weight: 700;
        font-size: 13px;
        color: #fff;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 12px 0;
        width: 33px;
        height: 33px;
        border: none;
        background: 0 0;
        cursor: pointer;
        border-radius: 50%;
        transition: all .3s ease-in-out;
        padding: 0
    }
    .box-nav li button::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        top: 0;
        left: 0;
        transition: all .3s ease-in-out;
        background-color: #243b74;
        opacity: 0;
        z-index: -1
    }
    .box-nav li button:hover::after {
        opacity: 1
    }
    .box-nav li.current button {
        pointer-events: none;
        color: #fff
    }
    .box-nav li.current button::after {
        opacity: 1
    }
    .active-nav::after,
    .active-nav::before {
        transition: all .3s ease-in-out
    }
    .active-nav:hover {
        color: #c39c56!important
    }
    .active-nav:hover::before {
        width: 130%
    }
    .active-nav:hover::after {
        width: 100%;
        background-color: #c39c56
    }
    .line-toggle {
        transition: all .3s ease-in-out
    }
    .header.blue .active-nav:hover .line-toggle:nth-child(even) {
        background-color: #c39c56
    }
    .close-img::after {
        transition: all .5s cubic-bezier(.43, .195, .02, 1)
    }
    .close-nav:hover {
        color: #c39c56
    }
    .close-nav:hover .close-img::after {
        transform: rotate(180deg);
        background: url(../images/close-yellow.svg) no-repeat center center/contain
    }
    .nav-click:hover .line-toggle:nth-child(even) {
        width: calc(100% - 3px);
        background-color: #c39c56
    }
    .nav-click:hover .line-toggle:nth-child(odd) {
        width: 125%;
        background-color: #c39c56
    }
    .social-facilities.option .wrap-social-facilities {
        display: block
    }
    .option .faci-icon {
        width: 70px;
        height: 70px;
        border-radius: 0;
        background-color: #243b74;
        margin: 0 0 1px 0;
        color: #fff;
        display: block;
        box-shadow: -8px 8px 10px 0 rgba(0, 0, 0, .1)
    }
    .option .faci-icon::after {
        content: '';
        position: absolute
    }
    .option .faci-icon svg {
        margin: 15%;
        width: 70%;
        height: 70%;
        pointer-events: none;
        position: absolute
    }
    .option .faci-icon:hover {
        background-color: #c39c56;
        color: #fff
    }
    .option .faci-icon span {
        position: absolute;
        top: 0;
        right: 100%;
        opacity: 0;
        transition: all .3s ease-in-out;
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
        height: 70px;
        width: auto;
        padding: 15px 10px 15px 15px;
        background-color: #c39c56;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        text-align: right;
        line-height: 1.5;
        pointer-events: none;
        box-shadow: -8px 8px 10px 0 rgba(0, 0, 0, .1);
        transform: rotateX(90deg);
        transform-style: preserve-3d
    }
    .option .faci-icon:hover span {
        opacity: 1;
        transform: none
    }
    .faci-icon {
        transition: all .3s ease-in-out
    }
    .faci-icon:hover {
        color: #c39c56
    }
    .hotline,
    .hotline::after {
        transition: all .3s ease-in-out
    }
    .hotline:hover svg {
        animation: Callicon 3s infinite
    }
    .hotline:hover {
        color: #fff
    }
    .language button {
        transition: all .3s ease-in-out
    }
    .language button:hover {
        color: #c39c56!important
    }
    .logo {
        transition: all .3s ease-in-out
    }
    .header.white .search-but {
        color: #fff
    }
    .header.white .language li button {
        color: #fff
    }
    .header.white .language::after,
    .header.white .language::before {
        background-color: #fff
    }
    .header.white .active-nav .line-toggle:nth-child(even) {
        background-color: #c39c56
    }
    .header.white .active-nav {
        color: #fff
    }
    .header.white .logo::after {
        background: url(../images/logo-white.svg) no-repeat center center/contain
    }
    .close-album::after,
    .close-map,
    .close-pics::after,
    .close-popup::after,
    .close-video,
    .close-video::after,
    .close::after,
    .file-mark,
    .full-map,
    .zoom,
    .zoom::after,
    button {
        transition: all .3s ease-in-out
    }
    .close-album:hover::after,
    .close-news:hover::after,
    .close-pics:hover::after,
    .close-popup:hover::after,
    .close-video:hover::after,
    .close:hover::after {
        background-color: #c39c56;
        box-shadow: 0 10px 30px rgba(255, 255, 255, .2);
        transform: rotate(90deg)
    }
    .close-infobox,
    .input-but button span,
    .zoom-control a {
        transition: all .3s ease-in-out
    }
    .full-map:hover,
    .zoom-control a:hover {
        background-color: #202d62
    }
    .close-infobox:hover,
    .close-map:hover {
        background-color: #c39c56!important
    }
    .input-but button:hover {
        background-color: #c39c56;
        box-shadow: 0 20px 40px rgba(255, 255, 255, .3)
    }
    .input-but button:hover span {
        left: 100%;
        opacity: 1;
        transition: all .4s ease-in-out .2s
    }
    .file-up:hover .file-mark {
        background-color: #c39c56
    }
    .zoom:hover {
        transform: scale(.95) rotate(180deg)
    }
    .zoom:hover::after {
        background-color: #c39c56
    }
    .go-next:hover {
        background-color: #c39c56;
        transform: translateX(5px)
    }
    .go-prev:hover {
        background-color: #c39c56;
        transform: translateX(-5px)
    }
    .download-but a,
    .download-but a::after,
    .download-but a::before {
        transition: all .3s ease-in-out
    }
    .download-but a:hover {
        background-color: #999
    }
    .download-but a:hover::before {
        border: 1px solid #999
    }
    .download-but a:hover::after {
        background-color: #c39c56
    }
    .item-search a,
    .item-search::before {
        transition: all .3s ease-in-out
    }
    .item-search:hover a,
    .item-search:hover::before {
        background-color: #c39c56!important;
        color: #fff!important
    }
    .item-search:hover:nth-child(even) .item-date,
    .item-search:hover:nth-child(even) .item-link-name,
    .item-search:hover:nth-child(even) h3,
    .item-search:hover:nth-child(even) p {
        color: #fff!important
    }
    .go-top {
        cursor: pointer
    }
    .go-top {
        transition: all .3s ease-in-out
    }
    .go-top:hover {
        border: 2px solid #c39c56;
        color: #c39c56;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: 0 10px 30px rgba(255, 255, 255, .2)
    }
    body.auto .go-top::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #243b74;
        opacity: 0;
        border-radius: 50%;
        transition: all .3s ease-in-out;
        z-index: -1
    }
    body.auto .go-top::after {
        content: '';
        position: absolute;
        width: 100vw;
        height: 1px;
        top: 50%;
        left: calc(50% - 50vw);
        background-color: #c39c56;
        transform: scaleX(0);
        transition: all .5s cubic-bezier(.43, .195, .02, 1);
        transform-origin: center;
        z-index: -2
    }
    body.auto .go-top:hover::after {
        transform: none;
        transition: all 1s cubic-bezier(.43, .195, .02, 1)
    }
    body.auto .go-top:hover::before {
        opacity: 1
    }
    .button {
        transition: all .3s ease-in-out
    }
    .button:hover {
        background-color: rgba(198, 166, 144, 0);
        color: #c39c56;
        box-shadow: 0 10px 30px rgba(255, 255, 255, .1)
    }
    .button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #c39c56;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
        transform: scale3d(.5, .5, 1);
        transition: transform .3s, opacity .3s;
        transition-timing-function: cubic-bezier(.75, 0, .125, 1)
    }
    .button:hover::before {
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
    .pic-img img {
        transition: all .5s ease-in-out
    }
    .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: #243b74;
        color: #fff
    }
    .table-recruitment tr:hover a,
    .table-recruitment tr:hover td,
    .table-recruitment tr:nth-child(even):hover td {
        background-color: #243b74;
        color: #fff
    }
    .table-recruitment tr {
        cursor: pointer
    }
    .print-box>button,
    .print-box>button::before,
    .share-item a,
    .share-item li {
        transition: all .3s ease-in-out
    }
    .share-item li:hover a {
        color: #c39c56
    }
    .share-item li:hover {
        border-color: #c39c56;
        transition-delay: 0s
    }
    .print-box a:hover {
        color: #fff
    }
    .print-box>button:hover {
        color: #c39c56
    }
    .print-box>button.share-but:hover::before {
        background: url(../images/share-2.svg) no-repeat 50%/80%
    }
    .print-box>button.print-but:hover::before {
        background: url(../images/print-2.svg) no-repeat 50%/80%
    }
    .slide-pagi a {
        transition: all .3s ease-in-out
    }
    .slide-pagi a:hover {
        color: #c39c56
    }
    .slide-pagi .slide-next:hover {
        background-color: #aaa
    }
    .slide-pagi .slide-prev:hover {
        background-color: #aaa
    }
    button.prev-background:hover {
        transform: translateX(-5px)
    }
    button.next-background:hover {
        transform: translateX(5px)
    }
    .view-more {
        transition: all .3s ease-in-out
    }
    .view-more:hover {
        background-color: rgba(198, 166, 144, 0);
        color: #c39c56;
        box-shadow: 0 10px 30px rgba(255, 255, 255, .1)
    }
    .view-more::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #c39c56;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
        transform: scale3d(.5, .5, 1);
        transition: transform .3s, opacity .3s;
        transition-timing-function: cubic-bezier(.75, 0, .125, 1)
    }
    .view-more:hover::before {
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
    .slidebox-arrow-next:hover {
        transform: translateX(3px);
        color: #c39c56
    }
    .slidebox-arrow-prev:hover {
        transform: translateX(-3px);
        color: #c39c56
    }
    .close-box-map::after,
    .full-map,
    .infobox a,
    .zoom-control a {
        transition: all .3s ease-in-out
    }
    .zoom-control a:hover {
        background-color: #c39c56
    }
    .close-box-map:hover::after {
        background-color: #c39c56!important
    }
    .full-map:hover {
        background-color: #c39c56
    }
    .infobox a:hover {
        color: #c39c56
    }
    .box-home-quality,
    .img-home-quality,
    .slide-next,
    .slide-prev {
        transition: all .3s ease-in-out
    }
    .img-home-quality img {
        transition: transform .3s ease-in-out
    }
    .slide-next:hover {
        transform: translateX(5px);
        color: #c39c56
    }
    .slide-prev:hover {
        transform: translateX(-5px);
        color: #c39c56
    }
    .slide-content svg {
        transition: all .3s ease-in-out
    }
    .slide-content .slidebox-arrow-next:hover,
    .slide-content .slidebox-arrow-prev:hover {
        transform: none;
        background-color: #c39d56;
        color: #fff
    }
    .slide-content .slidebox-arrow-prev:hover svg {
        transform: scaleX(-1) translateX(3px)
    }
    .slide-content .slidebox-arrow-next:hover svg {
        transform: translateX(3px)
    }
    .item-certi img,
    .partner-item img {
        transition: all .3s ease-in-out
    }
    .item-certi img:hover {
        transform: scale(1.1)
    }
    .partner-item .pic-img {
        overflow: visible
    }
    .partner-item:hover img {
        transform: scale(1.07)
    }
    .date-thumb,
    .show-details,
    .txt-news-home {
        transition: all .3s ease-in-out
    }
    .show-details::before {
        transition: all .5s cubic-bezier(.43, .195, .02, 1)
    }
    .item-news-home:hover {
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .2)
    }
    .item-news-home:hover .txt-news-home {
        background-color: #c39c56
    }
    .item-news-home:hover .pic-img img {
        transform: scale(1.05)
    }
    .item-news-home:hover .show-details {
        color: #fff
    }
    .item-news-home:hover .show-details::before {
        width: 100%
    }
    .item-news-home:hover .date-thumb {
        background-color: #c39c56
    }
    .news-magazine .item-news-home:hover .txt-news-home {
        padding: 12px
    }
    .home-news .title-main h2,
    .home-news .title-main h3 {
        font-size: 1.8vw
    }
    .home-news .content-center>div {
        margin: 0 3.5vw 0 0
    }
    .home-news .content-center>div:last-child {
        margin: 0
    }
    .box-pic-progress {
        cursor: pointer
    }
    .title-thumb {
        transition: all .3s ease-in-out
    }
    .box-pic-progress::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        border: 5px solid #c39c56;
        opacity: 0;
        transition: opacity .3s ease-in-out
    }
    .box-pic-progress:hover::after {
        opacity: 1
    }
    .box-pic-progress:hover .title-thumb {
        background-color: #c39c56
    }
    .box-pic-progress:hover .zoom {
        background: #c39c56;
        transform: scale(.95) rotate(180deg)
    }
    .box-pic-progress:hover img {
        transform: scale(1.05)
    }
    .company-info li {
        transition: all .3s ease-in-out
    }
    .company-info li:hover {
        color: #c39c56
    }
    .logo-dmca a {
        transition: all .3s ease-in-out
    }
    .logo-dmca a:hover {
        opacity: .5
    }
    .logo-dmca.dmca-home {
        top: -35px;
        left: 0
    }
    .box-product {
        cursor: pointer
    }
    .box-product,
    .title-thumb-product,
    .title-thumb-product h3 {
        transition: all .3s ease-in-out
    }
    .box-product .pic-img::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border: 6px solid #c39c56;
        transition: all .3s ease-in-out;
        pointer-events: none;
        opacity: 0;
        z-index: 1
    }
    .box-product:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
        transform: translateY(5px)
    }
    .box-product:hover .pic-img {
        box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
        border: none!important
    }
    .box-product:hover .pic-img::after {
        opacity: 1
    }
    .box-product:hover img {
        transform: scale(1.08)
    }
    .box-product:hover .title-thumb-product {
        background-color: #c39c56
    }
    .box-product:hover .title-thumb-product h3 {
        color: #fff
    }
    .virtual-button,
    .virtual-button::after,
    .virtual-button::before {
        transition: all .3s ease-in-out
    }
    .virtual-button {
        cursor: pointer
    }
    .virtual-button:hover {
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, .2))
    }
    .virtual-button:hover::before {
        background: url(../images/virtual-yellow.svg) no-repeat center center/contain;
        transform: scale(1.06)
    }
    .virtual-button:hover::after {
        background-color: #c39c56
    }
    .fullsize,
    .fullsize::after {
        transition: all .3s ease-in-out
    }
    .fullsize:hover {
        background-color: #243b74
    }
    .fullsize:hover::after {
        transform: scale(1.1)
    }
    .back-section .button:hover {
        background-color: #fff
    }
    .slide-product-relative .group-product {
        width: 100%;
        padding: 0
    }
    .slide-product-relative .title-thumb-product h3 {
        font-size: 16px
    }
    .project-item {
        cursor: pointer
    }
    .project-item .project-pic,
    .project-item .project-pic::before,
    .title-project {
        transition: all .3s ease-in-out
    }
    .project-item .project-pic::after {
        content: '';
        position: absolute;
        width: 88%;
        height: 80%;
        top: 10%;
        left: 6%;
        background-color: rgba(35, 59, 116, .8);
        opacity: 0;
        transform: scale3d(1.1, 1.1, 1);
        transition: all .3s ease-in-out
    }
    .project-item:hover .title-project {
        bottom: 50%;
        transform: translateY(50%)
    }
    .project-item:hover .project-pic::after {
        transform: scale3d(1, 1, 1);
        opacity: 1;
        transition: all .6s ease-in-out
    }
    .project-item:hover .project-pic::before {
        opacity: 0;
        height: 0
    }
    .project-item:hover .project-pic {
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15)
    }
    .project-item:hover .project-pic img {
        transform: scale(1.03)
    }
    .link-map,
    .link-map::before {
        transition: all .3s ease-in-out
    }
    .link-map:hover {
        color: #c39c56
    }
    .link-map:hover::before {
        transform: translateY(-5px)
    }
    .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: #c39d56
    }
    .item-album:hover .view-pdf {
        animation: trackBallSlide3 3s linear infinite
    }
    .txt-news,
    .view-news {
        transition: all .3s ease-in-out
    }
    .view-details {
        transition: all .3s ease-in-out;
        transform: translateX(-10px);
        opacity: 0
    }
    .frist-three-news .news-item:hover .date-thumb {
        background-color: #c39c56
    }
    .news-item:hover .view-details,
    .news-item:hover .view-news span {
        animation: trackBallSlideX 3s linear infinite
    }
    .news-item:hover .pic-img img {
        transform: scale(1.06)
    }
    .news-item:hover .view-news {
        background-color: #c39c56;
        padding: 15px 0 15px 100px
    }
    .frist-three-news .news-item:nth-child(1)::after {
        border-width: 9px
    }
    .frist-three-news .news-item:nth-child(1):hover .date-thumb {
        transform: translateX(4px)
    }
    .frist-three-news .news-item:nth-child(1):hover .txt-news {
        padding: 13px 80px 17px 80px
    }
    .frist-three-news .news-item:nth-child(2):before,
    .frist-three-news .news-item:nth-child(3):before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #c39c56;
        opacity: 0;
        transition: all .3s ease-in-out;
        top: 0;
        left: 0
    }
    .frist-three-news .news-item:nth-child(2):hover:before,
    .frist-three-news .news-item:nth-child(3):hover:before {
        opacity: 1
    }
    .frist-three-news .news-item:nth-child(2):hover .txt-news h3,
    .frist-three-news .news-item:nth-child(3):hover .txt-news h3 {
        color: #fff
    }
    .frist-three-news .news-item:nth-child(2):hover .date-thumb,
    .frist-three-news .news-item:nth-child(3):hover .date-thumb {
        background-color: #fff;
        color: #c39c56;
        margin: 6px 0 10px 0
    }
    .news-item::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        border: 7px solid #c39c56;
        opacity: 0;
        transition: all .3s ease-in-out;
        z-index: 10
    }
    .news-item:hover::after {
        opacity: 1
    }
    .select-box li,
    .select-box li a {
        transition: all .3s ease-in-out
    }
    .select-box li:hover {
        opacity: .86
    }
    .select-box li:hover a {
        padding: 10px 10px 10px 25px
    }
    .title-pic,
    .view-album,
    .view-video {
        transition: all .3s ease-in-out
    }
    .pic-library::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        border: 8px solid #c39c56;
        opacity: 0;
        transition: all .3s ease-in-out;
        z-index: 99
    }
    .item-album {
        cursor: pointer
    }
    .item-album:hover .pic-library::before {
        opacity: 1
    }
    .item-album:hover .title-pic {
        background-color: #c39d56
    }
    .item-album:hover .view-album {
        transform: rotate(180deg) scale(.9);
        background: #c39c56;
        box-shadow: 0 1px 7px rgba(255, 255, 255, .4)
    }
    .item-album:hover .pic-img img {
        transform: scale(1.07)
    }
    .item-album:hover .view-video {
        background-color: #c39c56;
        transform: scale(1.1) rotate(120deg)
    }
    .pdf {
        transform: translateY(50px);
        transition: all .3s ease-in-out
    }
    .pdf:hover {
        background-color: #c39c56;
        color: #fff
    }
    .pdf:hover svg path {
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        animation-name: DrawStroke3;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-timing-function: linear
    }
    .item-album:hover .pdf {
        opacity: 1;
        transform: none
    }
    .list-form-contact .input-but button:hover {
        box-shadow: 0 10px 20px rgba(255, 255, 255, .2)
    }
}

@keyframes Start {
    from {
        visibility: hidden
    }
    to {
        visibility: visible
    }
}

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

@keyframes Play {
    from {
        background-position: 0
    }
    to {
        background-position: -360px
    }
}

@keyframes Ani {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
        border: 1px solid rgba(255, 255, 255, 0);
        transform: scale(.5)
    }
    70% {
        box-shadow: 0 0 50px #fff;
        border: 1px solid rgba(255, 255, 255, .7);
        transform: scale(1)
    }
    100% {
        box-shadow: 0 0 60px rgba(255, 255, 255, 0);
        border: 0 solid rgba(255, 255, 255, 0);
        transform: scale(2)
    }
}

@keyframes RotateNew {
    0% {
        transform: rotate(0);
        opacity: 1
    }
    25% {
        transform: rotate(90deg);
        opacity: .8
    }
    50% {
        transform: rotate(180deg);
        opacity: .6
    }
    75% {
        transform: rotate(270deg);
        opacity: .8
    }
    100% {
        transform: rotate(360deg);
        opacity: 1
    }
}

@keyframes BorderBox {
    0% {
        background-position: 0 0
    }
    50% {
        background-position: 100% 100%
    }
    100% {
        background-position: 0 0
    }
}

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

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

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

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

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

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

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

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0) scale(1);
        opacity: 1
    }
    100% {
        transform: perspective(400px) rotateX(90deg) scale(.5);
        opacity: 0
    }
}

@keyframes Rotate {
    from {
        transform: rotate(0) translateZ(0)
    }
    to {
        transform: rotate(360deg) translateZ(0)
    }
}

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

@keyframes scaleSmallX {
    0% {
        opacity: 0;
        transform: scaleX(0)
    }
    100% {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes scaleSmallY {
    0% {
        opacity: 0;
        transform: scaleY(0)
    }
    100% {
        opacity: 1;
        transform: scaleY(1)
    }
}

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

@keyframes scaleLargeOut {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    100% {
        opacity: 0;
        transform: scale(2);
        filter: blur(20px)
    }
}

@keyframes scaleLargeX {
    0% {
        opacity: 0;
        transform: scaleX(1.5)
    }
    100% {
        opacity: 1;
        transform: scaleX(1)
    }
}

@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 trackBallSlide3 {
    0% {
        transform: translateY(-6px)
    }
    15% {
        transform: translateY(4px)
    }
    30% {
        transform: translateY(-6px)
    }
    50% {
        transform: translateY(4px)
    }
    60% {
        transform: translateY(-6px)
    }
    100% {
        transform: translateY(-6px)
    }
}

@keyframes trackBallSlideX {
    0% {
        opacity: 1;
        transform: translateX(-7px)
    }
    15% {
        opacity: 0;
        transform: translateX(5px)
    }
    30% {
        opacity: 1;
        transform: translateX(-7px)
    }
    50% {
        opacity: 0;
        transform: translateX(5px)
    }
    60% {
        opacity: 1;
        transform: translateX(-7px)
    }
    100% {
        opacity: 1;
        transform: translateX(-7px)
    }
}

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

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

@keyframes goLeft {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        transform: none
    }
}

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

@keyframes DrawStroke {
    0% {
        stroke-dashoffset: 260
    }
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStroke2 {
    0% {
        stroke-dashoffset: 500
    }
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStroke3 {
    0% {
        stroke-dashoffset: 800
    }
    100% {
        stroke-dashoffset: 0
    }
}

@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 Callicon {
    0% {
        transform: scale(1) rotate(0)
    }
    40% {
        transform: scale(1.1) rotate(40deg)
    }
    45% {
        transform: scale(1.2) rotate(20deg)
    }
    50% {
        transform: scale(1.3) rotate(40deg)
    }
    55% {
        transform: scale(1.2) rotate(20deg)
    }
    60% {
        transform: scale(1.1) rotate(40deg)
    }
    100% {
        transform: scale(1) rotate(0)
    }
}

@keyframes bounceInDown {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        transform: translate3d(0, -10px, 0)
    }
    90% {
        transform: translate3d(0, 5px, 0)
    }
    to {
        transform: none;
        opacity: 1
    }
}

@keyframes WheelArrow {
    0% {
        transform: rotate(-45deg) translate(0, 0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    100% {
        transform: rotate(-45deg) translate(-5px, 5px);
        opacity: 0
    }
}

@keyframes FadeInOut {
    0% {
        opacity: 0
    }
    25% {
        opacity: .6
    }
    50% {
        opacity: 1
    }
    70% {
        opacity: .6
    }
    100% {
        opacity: 0
    }
}

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

@keyframes aniHeight {
    from {
        transform: scale3d(1, 1, 1)
    }
    to {
        transform: scale3d(1, 0, 1)
    }
}

@keyframes GoWidth {
    0% {
        transform: scale3d(0, 1, 1);
        opacity: 0
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
}

@keyframes GoHeight {
    0% {
        transform: scale3d(1, 0, 1);
        opacity: 0
    }
    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1
    }
}

@keyframes effect-1 {
    0% {
        transform: translate3d(0, 0, 0)
    }
    25%,
    75% {
        transform: translate3d(100%, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    100% {
        transform: translate3d(200%, 0, 0)
    }
}

@keyframes effect-2 {
    0%,
    12.5% {
        transform: translate3d(0, 0, 0)
    }
    37.5%,
    62.5% {
        transform: translate3d(-100%, 0, 0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    100%,
    87.5% {
        transform: translate3d(-200%, 0, 0)
    }
}

@keyframes fillhb {
    from {
        height: 0
    }
    to {
        height: 100%
    }
}

@keyframes fillvb {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

@keyframes Show100 {
    from {
        stroke-dashoffset: 114
    }
    to {
        stroke-dashoffset: 0
    }
}

.animated {
    animation-duration: 2s;
    animation-fill-mode: both
}

.fade-In {
    animation-name: fadeIn
}

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

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

.fadeindown {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

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

.fadeoff {
    animation-name: fadeOff;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.fadeon {
    animation-name: fadeOn;
    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
}

.scalelarge {
    animation: scaleLarge;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.scalesmall {
    animation: scaleSmall;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.flipInX {
    animation: flipInX;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.main,
.navigation,
.outer-nav,
.overlay-menu,
.right-header,
.title-header {
    animation: Start .6s steps(1, end) 0s 1 normal both
}

.wordPar {
    position: relative;
    display: inline-block;
    vertical-align: middle
}

.text-ani-item .words {
    opacity: 0
}

.words {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: pre
}

.ani-mask {
    display: none
}

@media screen and (min-width:1100px) {
    .box-nav ul {
        opacity: 0
    }
    .box-nav.show ul {
        animation: goLeft2 1.5s ease forwards
    }
    .group-central .slide-buttons,
    .group-central .slide-pagination {
        opacity: 0;
        transition: opacity .3s ease-in-out
    }
    .show-text .slide-buttons {
        animation: scaleLargeX 1s ease .4s forwards
    }
    .show-text .slide-pagination {
        opacity: 1
    }
    .slide-pics .txt-banner {
        opacity: 0;
        right: 0;
        transition: all 2s cubic-bezier(.23, 1, .38, 1)
    }
    .slide-pics .active .txt-banner {
        opacity: 1;
        right: 10vw;
        animation-delay: 1s
    }
    .underline::after {
        opacity: 0
    }
    .on-show.underline::after,
    .underline.show-line::after {
        animation: scaleSmall 1.2s ease .3s forwards
    }
    .ani-item {
        opacity: 0
    }
    .ani-item.on-show {
        animation: fadeInUp 1s ease .3s forwards
    }
    .section-outernav.on-show {
        animation: fadeIn 2s ease .3s forwards
    }
    .ani-mask {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
        overflow: hidden;
        padding: 0;
        margin: 0;
        background: 0 0;
        border: 0;
        z-index: 100
    }
    .ani-mask::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #fff;
        transition: all 1s ease-in-out
    }
    .ani-mask.mask-left.on-show::before {
        transform: translateX(101%)
    }
    .ani-mask.mask-right.on-show::before {
        transform: translateX(-101%)
    }
    #product-page .ani-mask::before {
        transition-duration: 1s
    }
    .ani-mask.mask-gray::before {
        background-color: #f5f5f5
    }
    .bg-inner {
        opacity: 0
    }
    .slide-mask .slide-item:nth-child(even) .bg-home.move {
        animation-name: Bg-ZoomOut
    }
    .bg-home.move {
        animation-name: Bg-ZoomIn;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate
    }
    .group-central .slide-buttons .group-central .slide-pagination {
        opacity: 0
    }
    .show-text .slide-pagination {
        animation: fadeInUp;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }
    .overlay-bg {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        opacity: 0;
        pointer-events: none;
        z-index: 9
    }
    .overlay-bg:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 120px;
        background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
        mix-blend-mode: multiply;
        top: 0;
        left: 0
    }
    .overlay-bg:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100px;
        background: linear-gradient(0deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
        mix-blend-mode: multiply;
        bottom: 0;
        left: 0
    }
    .show-text .overlay-bg {
        animation: fadeIn 3s forwards
    }
    .group-central .slide-background .slidebox-arrow,
    .group-central .slidebox-pagination {
        opacity: 0
    }
    .show-text .slide-background .slidebox-arrow,
    .show-text .slidebox-pagination {
        animation: fadeInUp 1.2s ease .3s forwards
    }
    .banner-home,
    .home-about .bg-cover,
    .home-about .box-text {
        opacity: 0
    }
    .show-text .banner-home {
        animation: fadeIn 1.5s ease forwards
    }
    .group-central .view-more,
    .wrap-certificate-home {
        opacity: 0
    }
    .show-text .view-more {
        animation: fadeInUp 1s ease .7s forwards
    }
    .show-text .wrap-certificate-home {
        animation: fadeInUp 1s ease 1.1s forwards
    }
    .text-title h2,
    .text-title h3,
    .text-top p {
        overflow: hidden
    }
    .shadow-overlay {
        opacity: 0
    }
    .show-text .box-text {
        animation: fadeInUp 1s ease .5s forwards
    }
    .text-title::after {
        transform-origin: left;
        transform: scale(0);
        transition: all 2s ease-in-out 1s
    }
    .is-active .text-title::after {
        transform: none
    }
    .show-text .shadow-overlay {
        animation: fadeIn 2s ease 1s forwards
    }
    .show-text.home-about .bg-cover {
        animation: fadeIn 2s ease 0s forwards
    }
    .box-home-quality {
        opacity: 0;
        transform-origin: center center
    }
    .show-text .box-home-quality {
        animation: goRight 1.2s ease forwards
    }
    .show-text .box-home-quality:nth-child(4) {
        animation-delay: .2s
    }
    .show-text .box-home-quality:nth-child(3) {
        animation-delay: .4s
    }
    .show-text .box-home-quality:nth-child(2) {
        animation-delay: .6s
    }
    .show-text .box-home-quality:nth-child(1) {
        animation-delay: .8s
    }
    .slide-content .slidebox-arrows {
        opacity: 0
    }
    .show-text .slide-content .slidebox-arrows {
        animation: fadeIn 1s ease forwards
    }
    .text-top .ani-vertical {
        transition: transform 1s cubic-bezier(.77, 0, .175, 1);
        transform: translate3d(0, 150%, 0);
        transition-delay: .6s
    }
    .product-home-pic.pic-img img {
        animation: fadeOut 1.5s ease 0s forwards
    }
    .view-more-producthome {
        opacity: 0
    }
    .pic-des .pic-img {
        opacity: 0;
        transition: all 1s ease-in-out 0s
    }
    .is-active .product-home-pic.pic-img img {
        animation: fadeIn 1.5s ease 0s forwards
    }
    .is-active .pic-des .pic-img {
        opacity: 1;
        transform: none
    }
    .is-active .text-top .ani-vertical {
        transform: none
    }
    .is-active .view-more-producthome {
        animation: scaleSmallY .8s ease 1.5s forwards
    }
    .text-title,
    .text-top p {
        opacity: 0
    }
    .show-text .text-title {
        animation: fadeInUp 1s ease .3s forwards
    }
    .show-text .text-top p {
        animation: fadeInUp 1s ease .5s forwards
    }
    .box-news-home {
        overflow: hidden
    }
    .news-company,
    .news-magazine,
    .news-project {
        overflow: hidden
    }
    .color-vertical,
    .news-company>div,
    .news-magazine>div,
    .news-project>div {
        opacity: 0
    }
    .show-text .news-magazine>div {
        animation: goRight 1s ease forwards
    }
    .show-text .news-project>div {
        animation: goRight 1s ease .3s forwards
    }
    .show-text .news-company>div {
        animation: goRight 1s ease .6s forwards
    }
    .show-text .color-vertical {
        animation: GoWidth 2s ease 1s forwards;
        transform-origin: left
    }
    .home-contact .company-text,
    .home-contact .subscribe-contact,
    .home-contact .title-main {
        opacity: 0
    }
    .home-contact.show-text .title-main {
        animation: fadeInUp 1s ease .3s forwards
    }
    .home-contact.show-text .company-text {
        animation: fadeInUp 1s ease .5s forwards
    }
    .home-contact.show-text .subscribe-contact {
        animation: fadeInUp 1s ease .8s forwards
    }
    .home-contact.show-text .title-main.underline::after {
        animation: GoWidth 1.5s ease 1s forwards
    }
    .group-central:not(.home-banner) .bg-cover {
        opacity: 0
    }
    .show-text:not(.home-banner) .bg-cover {
        animation: fadeIn 2s ease forwards
    }
    .logo-dmca.dmca-home {
        opacity: 0
    }
    .logo-dmca.dmca-home.show {
        animation: goRight2 1s ease 1s forwards
    }
    .underline.on-show::after {
        animation: scaleSmall 1s ease .3s forwards
    }
    body:not(.auto) .left-footer,
    body:not(.auto) .social-facilities {
        opacity: 0
    }
    body:not(.auto) .footer.show .left-footer,
    body:not(.auto) .social-facilities.show {
        animation: fadeInUp 1.5s ease forwards
    }
    body.auto .social-facilities {
        opacity: 0
    }
    body.auto .social-facilities.show {
        animation: goLeft2 1s ease forwards
    }
    .shadow-overlay.on-show {
        animation: fadeIn 3s ease forwards
    }
    .text-intro.on-show {
        animation: fadeIn .5s ease forwards
    }
    .partner-list.on-show {
        animation: fadeIn 1.5s ease 0s forwards
    }
    .has-mask-right .ani-mask.on-show::before {
        transform: translateX(-101%)
    }
    .group-product.on-show {
        animation: fadeInUp 1s ease .1s forwards
    }
    .back-section::after {
        opacity: 0
    }
    .back-section.on-show::after {
        animation: scaleSmallX 1.5s ease .3s forwards
    }
    .contact-content.on-show {
        animation: goLeft2 2s cubic-bezier(.43, .195, .02, 1) forwards
    }
    .contact-content:nth-child(even).on-show {
        animation: goRight2 2s cubic-bezier(.43, .195, .02, 1) forwards
    }
    .point-distribute span.circle {
        animation: Ani 2s infinite
    }
    .news-item.on-show {
        animation: goLeft2 1.5s cubic-bezier(.43, .195, .02, 1) forwards
    }
    .news-item:nth-child(even).on-show {
        animation: goRight2 1.5s cubic-bezier(.43, .195, .02, 1) forwards
    }
    .form-contact-section .company-text.on-show {
        animation: goRight2 1.5s ease 0s forwards
    }
    .list-form-contact.on-show {
        opacity: 1;
        animation: none
    }
    .list-form-contact .input-area,
    .list-form-contact .input-text,
    .list-form-contact .wrap-but-submit-contact {
        opacity: 0
    }
    .list-form-contact.on-show .input-text:nth-child(1) {
        animation: fadeInUp2 .8s ease 0s forwards
    }
    .list-form-contact.on-show .input-text:nth-child(2) {
        animation: fadeInUp2 .8s ease .1s forwards
    }
    .list-form-contact.on-show .input-text:nth-child(3) {
        animation: fadeInUp2 .8s ease .2s forwards
    }
    .list-form-contact.on-show .input-text:nth-child(4) {
        animation: fadeInUp2 .8s ease .3s forwards
    }
    .list-form-contact.on-show .input-area {
        animation: fadeInUp2 .8s ease .4s forwards
    }
    .list-form-contact.on-show .wrap-but-submit-contact {
        animation: fadeInUp2 .8s ease .5s forwards
    }
}

@media screen and (max-width:1100px) {
    .ani-text .go-page {
        animation: none;
        animation-duration: 0s;
        animation-delay: 0s
    }
    .navigation.show .nav li {
        animation-name: goRight;
        animation-duration: .6s;
        animation-fill-mode: forwards
    }
}