:root {
    --color-normal: #7e8387;
    --color-normal-dark: #5f676c;
    --color-normal-light: #979ca0;
    --color-highlight: #ff7b47;
    --color-highlight-dark: #c47604;
    --color-white: #fff;
    --color-red: #c42b31;
    --color-yellow: #ffcb00;
    --color-pink: #ffc8bb;
    --color-green: #779d56;
    --color-blue: #0b82c2;
    --color-blue-dark: #042750;
    --color-blue-grey: #4b626f;
    --color-brown: #795548;
    --color-black: #444;
    --color-grey: #58595b;
    --color-grey-light: #aaa;
    --color-light: #ccc;
    --color-white-grey: #eee;
    --color-drop-grey: #e3e3e3;
    --color-bg: #ececec;
    --color-bg-grey: #999;
    --color-bg-dark: #666;
    --color-bg-black: #000;
    --color-normal-alpha-08: rgba(126, 131, 135, 0.8);
    --color-highlight-08: rgba(255, 124, 70, 0.8);
    --color-white-zero: rgba(255, 255, 255, 0);
    --color-white-alpha-01: rgba(255, 255, 255, 0.1);
    --color-white-alpha-02: rgba(255, 255, 255, 0.2);
    --color-white-alpha-03: rgba(255, 255, 255, 0.3);
    --color-white-alpha-04: rgba(255, 255, 255, 0.4);
    --color-white-alpha-05: rgba(255, 255, 255, 0.5);
    --color-white-alpha-06: rgba(255, 255, 255, 0.6);
    --color-white-alpha-07: rgba(255, 255, 255, 0.7);
    --color-white-alpha-08: rgba(255, 255, 255, 0.8);
    --color-white-alpha-09: rgba(255, 255, 255, 0.9);
    --color-black-zero: rgba(0, 0, 0, 0);
    --color-black-alpha-01: rgba(0, 0, 0, 0.1);
    --color-black-alpha-02: rgba(0, 0, 0, 0.2);
    --color-black-alpha-03: rgba(0, 0, 0, 0.3);
    --color-black-alpha-04: rgba(0, 0, 0, 0.4);
    --color-black-alpha-05: rgba(0, 0, 0, 0.5);
    --color-black-alpha-06: rgba(0, 0, 0, 0.6);
    --color-black-alpha-07: rgba(0, 0, 0, 0.7);
    --color-black-alpha-08: rgba(0, 0, 0, 0.8);
    --color-black-alpha-09: rgba(0, 0, 0, 0.9);
    --color-text-gradient: linear-gradient(90deg, var(--color-normal-dark) 0%, var(--color-highlight) 50%, var(--color-normal-dark) 100%);
    --black-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    --wrapdef: 1100px;
    --titlePresent: 10vw;
    --titleHead: 6.5vw;
    --titleBig: 5vw;
    --titleFont: 3.5vw;
    --titleMedium: 2.5vw;
    --titleSmall: 2vw;
    --titleMin: 1.8vw;
}

.load-title {
    text-align: center;
    margin: 30px 0;
}

.load-title h3 {
    font-weight: 700;
    font-size: 30px;
    color: #5f676c;
    text-transform: uppercase;
    line-height: 1.4;
}

.note-product-img {
    text-align: center;
    font-size: 14px;
}

.fav-product {
    background: url(../images/fav-product.svg) no-repeat center center / contain;
}

.fav-product {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 20px;
    right: 20px;
}

.zoom-details {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 20;
}

.go-top, .zoom-details, .zoom-large {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.zoom-details::after, .zoom-large::after, .zoom::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-black-alpha-02) url(../images/zoom.svg) no-repeat 50% / 80%;
    transition: all .3s ease-in-out;
}

.zoom-large {
    top: 20px;
    right: auto;
    vertical-align: middle;
    position: absolute;
    left: 20px;
    display: inline-block;
    z-index: 99999;
}

.thumb-pic {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.thumb-pic h3 {
    font-size: 16px;
    color: var(--color-white);
    font-weight: 400;
    padding: 8px 18px;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--color-black-alpha-03);
    z-index: 2;
    margin-bottom: 0;
    width: max-content;
}
.thumb-pic img {
    width: auto;
    min-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    pointer-events: none;
    height: 100%;
}
.product-pic {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.product-pic+.product-pic {
    margin-top: 5px;
}
.product-pic .thumb-row .thumb-pic {
    width: 43%;
}
.product-pic .thumb-row .thumb-pic:nth-child(2) {
    flex: 1;
}
.product-pic .thumb-row:nth-child(3) .thumb-pic {
    flex: 1;
}
.product-pic:nth-child(even) .thumb-row:not(:nth-child(3)) {
    flex-direction: row-reverse;
}
.thumb-row {
    width: 100%;
    display: flex;
    gap: 5px;
}
.product-details, .product-full {
    height: auto;
    position: relative;
    text-align: center;
}
.product-full {
    width: 85%;
    max-width: 1100px;
    display: block;
    margin: 0 auto;
    z-index: 20;
}
.thumb-description {
    display: none;
}
.material-slide {
    opacity: 0;
}
.material-slide.showup {
    opacity: 1;
}
.pro-full, .pro-full .magnify-image, .tilte-pic-product {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}
.pro-full .magnify-image {
    pointer-events: none;
    object-fit: cover;
    object-position: center center;
}
.pro-full {
    max-height: 500px;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 20px 30px 0 var(--color-black-alpha-01);
}
.material-slide .pro-full {
    max-height: 60vh;
}
.magnify {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: none;
    display: block;
    z-index: inherit;
}
.magnify>.magnify-lens {
    position: absolute;
    width: 450px;
    height: 450px;
    transform: scale(0.64, 0.64);
    border-radius: 0;
    box-shadow: 0 0 0 5px var(--color-white-alpha-01), 0 0 8px 8px var(--color-black-alpha-01), inset 0 0 30px 2px var(--color-black-alpha-01);
    cursor: none;
    display: none;
    z-index: 20;
}
.slide-product .fav-product {
    top: 20px;
    right: 20px;
}
.pro-full .magnify-image {
    pointer-events: none;
    object-fit: cover;
    object-position: center center;
}
.close-album, .close-details, .close-pics, .close-popup, .close-video, .close-view {
    display: block;
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: fixed;
    border-radius: 50%;
    z-index: 999999;
}
.close {
    width: 60px;
    height: 60px;
    position: absolute;
    top: -35px;
    right: -30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
    background: var(--color-normal-dark) url(../images/close.svg) no-repeat 50% / 80%;
}
.close-video, .close-view {
    right: 10px;
    top: 10px;
}
.close-album, .close-details, .close-pics, .close-popup, .close-video, .close-view {
    background: var(--color-black-alpha-01) url(../images/close.svg) no-repeat 50% / 80%;
}
.close-view {
    visibility: hidden;
}
.close-view.show {
    visibility: visible;
}
.product-details.showpic .close {
    animation-name: goLeft;
    animation-duration: .8s;
    animation-fill-mode: forwards;
}
.all-pics.show {
    display: block;
}
.all-pics {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 9999;
}
.size-large.dragscroll {
    overflow: hidden;
}
.full {
    width: 100vw;
    height: 100vh;
}
.full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
    z-index: 5;
    cursor: url(../images/openhand.png) 6 8, move;
}
.full, .full img {
    display: block;
    position: relative;
    
}
.news-item .date::after, .service-two .contact-box::after, .show-info-mobile {
    display: none;
}

.info-need {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}
.descript-product-detail {
    background-color: var(--color-bg);
    color: var(--color-black);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: 0 20px 30px 0 var(--color-black-alpha-01);
    display: block;
    padding: 10px;
    margin: 0;
}

.descript-product-detail, .go-app {
    position: relative;
    text-align: center;
    z-index: 5;
}
.pro-full, .pro-full .magnify-image, .tilte-pic-product {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}
.tilte-pic-product {
    padding: 0;
    text-align: left;
    margin: 30px 0;
    z-index: 30;
}
.slide-product h3, .slide-product p {
    color: var(--color-white);
    margin: 0 0 10px;
    display: block;
    max-width: 60%;
}
.slide-product h3 {
    font-weight: 700;
    font-size: 22px;
}
.slide-product p {
    font-size: 16px;
    line-height: 1.6;
}
.list-option {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
    text-align: left;
}
.but-option, .click-fullsize {
    position: relative;
    width: auto;
    height: auto;
    display: block;
    z-index: 10;
}
.download-image, .download-technical, .fullsize {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-white);
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    cursor: pointer;
    margin: 1px;
    background-color: var(--color-normal);
    text-align: center;
}
.download-image span, .download-technical span, .fullsize span {
    position: relative;
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 5px;
}
.download-image .img-src {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
}
.download-image span {
    background: url(../images/direct-download.svg) no-repeat 50% / 80%;
}
.fullsize span {
    background: url(../images/fullscreen.svg) no-repeat 50% / 80%;
}
.first-text {
    display: inline-block;
}
.fullsize i {
    font-style: inherit;
    font-weight: 700;
    line-height: 30px;
    vertical-align: middle;
}
.fullsize.active .first-text, .last-text, .product-details.full-screen .close {
    display: none;
}
.product-details::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    transition: height 1s ease .5s;
    background-color: var(--color-normal-dark);
}
.product-details.showpic::after {
    height: 60%;
}
.product-details.full-screen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    max-height: inherit;
    overflow: hidden;
    z-index: 999;
}
.product-details.full-screen .info-need {
    position: absolute;
    left: 0;
    top: 0;
}
.product-details.full-screen .descript-product-detail {
    display: none;
}
.product-details.full-screen .tilte-pic-product {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.product-details.full-screen .go-app, .product-details.full-screen .slide-product h3, .product-details.full-screen .slide-product p {
    display: none;
}
.product-details.full-screen .product-full {
    width: 100%;
    max-width: inherit;
    margin: 0;
}
.product-details.full-screen .magnify>.magnify-lens {
    width: calc(100vw / 3.5);
    height: calc(100vw / 3.5);
    min-width: 550px;
    min-height: 550px;
    max-width: 650px;
    max-height: 650px;
}
.product-details.full-screen .pro-full {
    max-height: inherit;
    height: 100%;
    box-shadow: none;
}
.product-details.full-screen .list-option {
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
}
.product-details.full-screen .list-option div, .slide-mask .slide-page {
    margin: 0 1px;
}
.fullsize.active span {
    background: url(../images/cancel-fullscreen.svg) no-repeat 50% / 80%;
}
.product-details.full-screen .fullsize span {
    margin-right: 0;
}
.fullsize.active .first-text, .last-text, .product-details.full-screen .close {
    display: none;
}
.product-details.full-screen .but-option {
    display: flex;
    align-items: center;
}
.product-details.full-screen .list-option div, .slide-mask .slide-page {
    margin: 0 1px;
}
.product-details.full-screen::after {
    position: fixed;
    height: 100%;
}
.product-details.full-screen .pro-full .magnify-image {
    min-height: 100vh;
}
.go-app {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 50px 0 20px;
    padding: 0;
}
.go-app p {
    font-size: 12px;
    color: var(--color-light);
    display: block;
    font-style: italic;
    max-width: inherit;
    margin: 0;
}
.overlay-dark {
    background: linear-gradient(180deg, var(--color-black-alpha-06) 0, var(--color-black-alpha-03) 100%);
    height: 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    transition: height .8s ease-in-out;
    z-index: 1500;
}
.overlay-dark.show {
    height: 100%;
}

.loadx {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -10;
    visibility: hidden;
    opacity: 0;
    background: url(../images/cycle.png) no-repeat center center;
    border-radius: 50%;
    animation: Rotate 1.5s linear infinite;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
}
.loadx.show {
    opacity: 1;
    visibility: visible;
    z-index: 100000;
}
.container-in, .investment {
    position: relative;
    display: block;
    width: 100%;
}
.contact-in, .video-center {
    position: relative;
    display: block;
    width: 90%;
}
.investment {
    height: auto;
    backface-visibility: hidden;
}
.investment {
    background: url(../images/pattern.png) repeat left top;
}
.investment::after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: var(--color-black-alpha-03);
    mix-blend-mode: multiply;
}
.all-content-load, .load-product {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
}
.all-content-load::after {
    content: '';
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, var(--color-white-grey) 0, var(--color-light) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.container-in {
    margin: 0;
    text-align: center;
    padding: 50px 0;
    overflow: hidden;
    background-position: center center;
    background-repeat: repeat;
    background-size: cover;
    z-index: 1;
}
.video-center {
    height: calc(1125 / 2000 * 980px);
    max-width: 980px;
    margin: auto;
}
.bottom-video, .item-video {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
}
.item-video {
    height: calc(1125 / 2000 * 980px);
}
.title-video {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}
.title-video h3 {
    display: block;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--color-black-alpha-06);
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0;
}
.slide-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-black);
}
.slide-video-play-icon {
    width: 100px;
    height: 100px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    z-index: 99999;
}
.preloader, .slide-video-play-icon::after, .slide-video-play-icon::before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.slide-video-play-icon::before {
    content: "";
    border-radius: 50%;
    z-index: 1;
    background: url(../images/play.svg) no-repeat 50% / 80%;
}
.slide-video-play-icon::after {
    content: "";
    border-radius: 50%;
    background: linear-gradient(180deg, var(--color-normal-alpha-08) 0, var(--color-black-alpha-08) 100%);
    transition: opacity .5s ease-in-out;
    opacity: .5;
    z-index: -1;
}
.slide-video-play-icon:hover::after {
    opacity: 1;
}
.slide-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity .4s ease;
}
.slide-video-frame {
    position: relative;
}
.nav-home span svg, .slide-buttons svg, .slide-pagination svg, .slide-video-frame, .slide-video-frame iframe {
    width: 100%;
    height: 100%;
}

.block {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    background-color: var(--color-white);
    padding: 4px 0;
}

.block:nth-child(even) {
    background-color: var(--color-bg);
    padding: 0;
}
.slide-project {
    max-width: 1400px;
    height: 60vh;
    position: relative;
    display: block;
    margin: 0 auto;
}
.item-pic-project {
    display: block;
    position: absolute;
    background-color: var(--color-normal-dark);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.block:nth-child(even) .item-pic-project:nth-child(1) {
    width: calc(54% - 4px);
    height: 60vh;
    left: 0;
    top: 0;
}
.over-pic-project {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
}
.view-album {
    background-color: var(--color-normal-light);
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    z-index: 10;
}
.view-album::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border: 5px solid var(--color-white-alpha-08);
    left: -5px;
    top: -5px;
}
.view-album::after {
    background: url(../images/album.svg) no-repeat 50% / 80%;
}
.bg-fixed::after, .view-album::after {
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.player-vid, .view-album, .view-album::after, .view-album::before {
    position: absolute;
    border-radius: 50%;
}
.load-product .item-pic-project .view-album {
    background: 0 0;
    pointer-events: none;
}
.load-product .item-pic-project .view-album::before {
    opacity: 0;
    border-color: var(--color-white-alpha-01);
}
.load-product .item-pic-project .view-album::after {
    background: var(--color-black-alpha-02) url(../images/zoom.svg) no-repeat 50% / 90%;
}
.over-pic-product img, .over-pic-project img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}
.item-pic-project {
    display: block;
    position: absolute;
    background-color: var(--color-normal-dark);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.block:nth-child(even) .item-pic-project:nth-child(1) {
    width: calc(54% - 4px);
    height: 60vh;
    left: 0;
    top: 0;
}
.block:nth-child(even) .item-pic-project:nth-child(2) {
    width: calc(46% - 4px);
    height: calc(30vh - 4px);
    left: 54%;
    top: 0;
}
.block:nth-child(even) .item-pic-project:nth-child(3) {
    width: calc(46% - 4px);
    height: 30vh;
    left: 54%;
    top: 30vh;
}
.block:nth-child(odd) .item-pic-project:nth-child(1) {
    width: calc(46% - 4px);
    height: calc(30vh - 4px);
    left: 0;
    top: 0;
}
.block:nth-child(odd) .item-pic-project:nth-child(2) {
    width: 54%;
    height: 60vh;
    left: 46%;
    top: 0;
}
.block:nth-child(odd) .item-pic-project:nth-child(3) {
    width: calc(46% - 4px);
    height: 30vh;
    left: 0;
    top: 30vh;
}
.all-album {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    z-index: 3600;
}
.album-center, .album-load {
    position: relative;
    display: block;
}
.album-load {
    width: 100%;
    height: 100%;
    text-align: center;
}
.album-center {
    width: 100vw;
    height: 100vh;
}
.album-pic-center {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    display: block;
}
.pinch-zoom-container {
    width: 100vw !important;
    height: 100vh !important;
    position: relative;
    display: block;
    margin: 0;
}
.container-zoom {
    width: 100vw;
    height: 100vh;
    transform-origin: 0% 0%;
    position: absolute;
    transform: scale(1, 1) translate(0px, 0px);
    display: block;
}
.container-zoom::after, .container-zoom::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.container-zoom>img, .stock-but span {
    display: inline-block;
    vertical-align: middle;
}
.container-zoom>img {
    width: auto;
    height: auto;
    max-height: 80vh;
    max-width: 100%;
    position: relative;
    margin: 0 -3px;
}
.container-zoom::after, .container-zoom::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.close-album, .close-details, .close-pics {
    right: 10px;
    top: 10px;
}
.slide-next, .slide-page span, .slide-prev {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: all .3s ease-in-out;
}
.slide-next::after, 
.slide-prev::after {
    content: none;
}
.slide-next, .slide-prev {
    width: 80px;
    height: 80px;
}
.slide-prev {
    left: -80px;
}
.slide-next {
    right: -80px;
}
.slide-prev {
    background: url(../images/previous.svg) no-repeat center center / contain;
}
.slide-next {
    background: url(../images/next.svg) no-repeat center center / contain;
}
.slide-next.disabled, .slide-prev.disabled {
    pointer-events: none;
    opacity: .2;
}
.album-center .slide-prev {
    left: 10px;
}
.album-center .slide-next {
    right: 10px;
}
.thumbs, .thumbs-video {
    width: 90%;
    max-width: 600px;
    margin: auto;
    position: relative;
    display: block;
}
.thumbs {
    height: auto;
    left: 50%;
    bottom: 2.5vh;
    position: absolute;
    display: inline-block;
    margin: 0;
    transform: translate(-50%, 0);
    z-index: 5;
}

.thumbs .swiper-slide {
    width: 100%;
    max-width: 90px;
}

.thumb-item {
    width: 90px;
    height: 50px;
    display: block;
    position: relative;
    opacity: .5;
    border: 5px solid var(--color-white);
    overflow: hidden;
    transition: opacity .3s ease-in-out;
}
.thumb-item button {
    display: block;
    padding: 0;
    width: 100%;
    height: 100%;
}
.thumb-item img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}
.slide-item.swiper-slide-thumb-active .thumb-item {
    pointer-events: none;
    opacity: 1;
}
@media screen and (min-width: 1100px) {
    .item-pic-product::after, .thumb-pic::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .item-pic-project:hover .zoom::after, .thumb-pic:hover .zoom-details::after, .thumb-pic:hover h3 {
        background-color: var(--color-normal);
    }
    .thumb-pic:hover .fav-product {
        animation: StarFavorite 1.5s linear infinite
    }
    .thumb-pic h3, .thumb-pic::after {
        transition: background-color .3s ease-in-out;
    }
    .thumb-pic:hover::after {
        background-color: var(--color-black-alpha-02);
    }
    .thumb-pic::after {
        mix-blend-mode: overlay;
    }
    .load-product.show .item-pic-product.on-show::after, 
    .load-product.show .material-slide.showup, 
    .load-product.show .thumb-pic.on-show::before {
        animation-name: aniWidth;
        animation-duration: 1.6s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .thumb-pic:nth-child(1)::before, .thumb-pic:nth-child(3)::before {
        transform-origin: top right;
    }
    .thumb-pic:nth-child(2)::before {
        transform-origin: top left;
    }
    .thumb-pic::before {
        background-color: var(--color-white-grey);
        z-index: 30;
    }
    .catalogue-bottom::before, .catalogue-top::before, .thumb-pic::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    .material-slide.showup {
        animation-name: fadeIn;
        animation-duration: 1.5s;
        animation-delay: .5s;
        animation-fill-mode: forwards;
    }
    .download-but a:hover::after, .input-but button:hover, .zoom-details:hover::after, .zoom-large:hover::after, .zoom:hover::after {
        background-color: var(--color-normal);
    }
    .bg-degree .close-popup:hover, .close:hover, .download-image:hover, .download-technical:hover, .fullsize:hover {
        background-color: var(--color-highlight);
    }
    .box-youtube-home, .box-youtube-home .pic-img::after, .box-youtube-home a::before, .button-video, .close, .close-album, .close-box-map::after, .close-details, .close-pics, .close-popup, .close-video, .close-view, .list-option div, .print-box button, .service-box a, .share-item li a::after, .share-item li a::before, .title-pic h3, .view-album::after, .zoom-control a, .zoom-details::after, .zoom-large::after, .zoom::after {
        transition: all .3s ease-in-out;
    }
    .close-album:hover, .close-details:hover, .close-pics:hover, .close-popup:hover, .close-video:hover, .close-view:hover, .close:hover {
        transform: rotate(90deg);
    }
    .item-pic-project {
        transition: padding .3s ease-in-out;
    }
    .over-pic-project {
        transition: background-position 3s cubic-bezier(.44, .39, .34, 1.03);
    }
    .item-pic-product:hover, .item-pic-project:hover {
        padding: 10px;
    }
    .item-pic-project:hover .over-pic-project {
        background-position: 100% 100%;
    }
    .item-pic-project::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: var(--color-white);
        transform-origin: top left;
        z-index: 30;
    }
    .box-youtube:hover .pic-img::after, .load-product .item-pic-project:hover .view-album::before {
        opacity: 1;
    }
    .item-pic-product:hover .text-des, .item-pic.on-show:hover, .load-product .item-pic-project:hover .view-album::after {
        background-color: var(--color-normal-dark);
    }
    .load-product.show .contact-info.on-show .contact-box::after, 
    .load-product.show .item-pic-project.on-show::after {
        animation-name: aniWidth;
        animation-duration: 1s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }
    .block:nth-child(even) .item-pic-project::after {
        background-color: var(--color-light);
        transform-origin: top right;
    }
}

@media screen and (max-width: 850px) {
    .product-details, .product-details.full-screen {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
        z-index: 9999;
    }
    .product-details.full-screen .product-full, .product-full {
        width: 100%;
        height: 100%;
        margin: 0;
        max-width: inherit;
    }
    .product-details.full-screen .material-slide, .product-details.full-screen .pro-full, .product-details.full-screen .pro-full .magnify-image, .product-details.full-screen .slide-product {
        height: 100%;
        min-height: 100vh;
    }
    .pro-full, .product-details.full-screen .pro-full {
        max-height: inherit;
    }
    .magnify {
        height: 100vh;
    }
    .magnify>.magnify-lens, .product-details.full-screen .magnify>.magnify-lens {
        width: 450px;
        height: 450px;
        min-width: inherit;
        min-height: inherit;
        max-width: inherit;
        max-height: inherit;
    }
    .pro-full .magnify-image {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }
    .product-pic .thumb-row .thumb-pic {
        width: 50%;
    }
    .product-pic .thumb-row:nth-child(3) {
        flex-wrap: wrap;
    }
    .product-pic .thumb-row:nth-child(3) .thumb-pic {
        flex: unset;
    }
    .product-pic .thumb-row:nth-child(3) .thumb-pic:nth-child(1) {
        width: 100%;
    }
    .product-pic .thumb-row:nth-child(3) .thumb-pic:nth-child(2),
    .product-pic .thumb-row:nth-child(3) .thumb-pic:nth-child(3) {
        width: calc(50% - 2.5px);
    }
    .load-product .block:nth-child(even), .load-product .block:nth-child(odd), .load-product .item-pic-project {
        background-color: transparent;
    }
    .load-product .slide-project {
        width: 100%;
        height: 60vh;
    }
    .block {
        padding: 0;
    }
    .block:nth-child(even) .item-pic-project:nth-child(1) {
        width: 50%;
        height: 60vh;
        left: 0;
        top: 0;
    }
    .block:nth-child(even) .item-pic-project:nth-child(2) {
        width: 50%;
        height: 30vh;
        left: 50%;
        top: 0;
    }
    .block:nth-child(even) .item-pic-project:nth-child(3) {
        width: 50%;
        height: 30vh;
        left: 50%;
        top: 30vh;
    }
    .block:nth-child(odd) .item-pic-project:nth-child(1) {
        width: 50%;
        height: 30vh;
        left: 0;
        top: 0;
    }
    .block:nth-child(odd) .item-pic-project:nth-child(2) {
        width: 50%;
        height: 60vh;
        left: 50%;
        top: 0;
    }
    .block:nth-child(odd) .item-pic-project:nth-child(3) {
        width: 50%;
        height: 30vh;
        left: 0;
        top: 30vh;
    }
    .item-pic-project {
        padding: 2px;
    }
    .view-album {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
    }
    .close-album, .close-popup, .close-video, .close-view {
        width: 50px;
        height: 50px;
        right: 0;
        top: 0;
        background-color: var(--color-black-alpha-02);
        border-radius: 0;
    }
    .next-pic, .prev-pic, .slide-mask .slide-next, .slide-mask .slide-prev, .slide-next, .slide-prev {
        width: 50px;
        height: 50px;
    }
    .album-pic-center img {
        max-width: 98%;
    }
    .album-pic-center img, .full img {
        max-height: inherit;
    }
    .container-in {
        padding: 30px 0;
    }
    .video-center {
        width: 96%;
        max-width: inherit;
    }
    .item-video, .video-center {
        height: calc(1125 / 2000 * 96vw);
    }
    .slide-video-play-icon {
        height: 60px;
        width: 60px;
        left: 50%;
        top: 50%;
        margin: -30px 0 0 -30px;
        transform: none;
    }
    .fav-product {
        width: 25px;
        height: 25px;
    }
    .zoom, .zoom-details, .zoom-large {
        width: 40px;
        height: 40px;
    }
    .fav-product, .slide-product .fav-product {
        top: 10px;
        right: 10px;
    }
    .note-product-img {
        font-size: 13px;
    }
    .info-need, .product-details.full-screen .info-need {
        top: auto;
        bottom: 0;
        text-align: left;
    }
    .append-mobile, .show-info-mobile {
        position: fixed;
        height: auto;
        display: block;
    }
    .show-info-mobile {
        width: 120px;
        left: -30px;
        bottom: 60px;
        transform: rotate(-90deg);
        z-index: 21;
        padding: 0;
        margin: 0;
    }
    .show-info-mobile span {
        position: relative;
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        color: var(--color-normal);
        white-space: nowrap;
        text-align: center;
        transition: color .2s ease-in-out;
        z-index: 5;
    }
    .show-info-mobile.show span {
        display: none;
        color: var(--color-white);
    }
    .show-info-mobile::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: var(--color-white);
        border-radius: 5px;
        transition: background .2s ease-in-out;
    }
    .append-mobile {
        max-width: 600px;
        padding: 20px 20px 80px;
        transform: translateX(-100%);
        transition: transform .3s ease-in-out;
        background-color: var(--color-black-alpha-05);
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 6;
    }
    .product-details.full-screen .descript-product-detail {
        display: block;
        font-size: 13px;
        text-align: left;
        border-radius: 5px;
    }
    .product-details.full-screen .tilte-pic-product, .tilte-pic-product {
        position: relative;
        padding: 10px;
        margin: 0;
        text-align: left;
    }
    .product-details.full-screen .go-app, .product-details.full-screen .slide-product h3, .product-details.full-screen .slide-product p {
        display: block;
        text-align: left;
    }
    .product-details.full-screen .close, .product-details.showpic .close {
        display: block;
        width: 40px;
        height: 40px;
        right: calc(50% - 20px);
        top: 10px;
    }
    .product-details.full-screen .close, .product-details.showpic .close, .zoom-details, .zoom-large {
        width: 35px;
        height: 35px;
    }
    .product-details.full-screen .close, .product-details.showpic .close {
        background: var(--color-black-alpha-05) url(../images/close.svg) no-repeat 50% / 80%;
    }
    .list-option, .product-details.full-screen .list-option {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        text-align: center;
    }
    .click-fullsize, .fullsize, .list-option {
        display: none !important;
    }
    .show-info-mobile.show::after, .show-info-mobile.show::before {
        display: none;
        background-color: var(--color-highlight);
    }
    .show-info-mobile.show::before {
        content: 'X';
        position: relative;
        width: 30px;
        height: 30px;
        display: block;
        color: var(--color-white);
        font-weight: 700;
        font-size: 14px;
        border-radius: 5px;
        line-height: 30px;
    }
    .info-need.show .append-mobile {
        transform: none;
    }
}

@media screen and (max-width: 550px) {
    .slide-product h3, .title-investment h3 {
        font-size: 18px;
    }
    .slide-product p, .title-video h3 {
        font-size: 13px;
    }
    .product-details.full-screen .close, .product-details.showpic .close, .zoom-details, .zoom-large {
        width: 35px;
        height: 35px;
    }
    .zoom-large {
        top: 10px;
        left: 10px;
    }
    .magnify>.magnify-lens, .product-details.full-screen .magnify>.magnify-lens {
        width: 280px;
        height: 280px;
    }
    .thumb-pic {
        height: 250px;
    }
    .fav-product {
        width: 25px;
        height: 25px;
    }
    .product-details.full-screen .close, .product-details.showpic .close, .zoom-details, .zoom-large {
        width: 35px;
        height: 35px;
    }
    .zoom-details {
        right: auto;
        left: 10px;
        bottom: 50px;
    }
    .thumb-pic h3 {
        font-size: 13px;
        font-weight: 400;
        padding: 10px;
    }
    .item-pic-project {
        position: relative;
        padding: 5px;
    }
    .details-center h2, .load-title h3, .scroll-slide h2 {
        font-size: 18px;
    }
    .logo-item img, .load-product .slide-project, .slide-project.middle {
        height: auto;
    }
    .block .item-pic-project.middle:nth-child(1), .block .item-pic-project.middle:nth-child(2), .block:nth-child(even) .item-pic-product:nth-child(1), .block:nth-child(even) .item-pic-product:nth-child(2), .block:nth-child(even) .item-pic-product:nth-child(3), .block:nth-child(even) .item-pic-project:nth-child(1), .block:nth-child(even) .item-pic-project:nth-child(2), .block:nth-child(even) .item-pic-project:nth-child(3), .block:nth-child(odd) .item-pic-product:nth-child(1), .block:nth-child(odd) .item-pic-product:nth-child(2), .block:nth-child(odd) .item-pic-product:nth-child(3), .block:nth-child(odd) .item-pic-project:nth-child(1), .block:nth-child(odd) .item-pic-project:nth-child(2), .block:nth-child(odd) .item-pic-project:nth-child(3) {
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
    }
    .block .item-pic-product .over-pic-project, .block .item-pic-project .over-pic-project {
        height: calc(1125 / 2000 * 96vw);
    }
    .thumbs, .thumbs-video {
        max-width: 300px;
    }
}

.fadein, .fadeout {
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

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

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

@keyframes StarFavorite {
    0% {
        transform: none
    }

    20% {
        transform: translate3d(0,5px,0) scaleY(.8)
    }

    40% {
        transform: translate3d(0,-5px,0) scaleY(1) rotateY(180deg)
    }

    60% {
        transform: translate3d(0,0,0) scale(1) rotateY(360deg)
    }
}

@keyframes Play {
    0% {
        background-position: 0
    }

    to {
        background-position: -360px
    }
}

@keyframes Ani {
    0% {
        box-shadow: 0 0 0 transparent;
        border: 1px solid transparent;
        transform: scale(0)
    }

    70% {
        box-shadow: 0 0 50px #dcdcdc;
        border: 1px solid #dcdcdc;
        transform: scale(1)
    }

    to {
        box-shadow: 0 0 60px transparent;
        border: 0 solid transparent;
        transform: scale(2)
    }
}

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

    to {
        transform: scale3d(0,1,1)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

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

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

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

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

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

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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