:root {
    --color-normal: #7e8387;
    --color-normal-dark: #5f676c;
    --color-normal-light: #979ca0;
    --color-highlight: #db9614;
    --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: #efefef;
    --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%);
    --wrapdef: 1100px;
    --titlePresent: 10vw;
    --titleHead: 6.5vw;
    --titleBig: 5vw;
    --titleFont: 3.5vw;
    --titleMedium: 2.5vw;
    --titleSmall: 2vw;
    --titleMin: 1.8vw;
}

.scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background-color: rgba(0,0,0,.1)
}

.slide-container-horizontal>.scrollbar {
    height: 5px;
    width: 100%;
    z-index: 50;
    margin: 5px 0 0 0
}

.slide-container-vertical>.scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%
}

.scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: rgba(255,255,255,.5);
    border-radius: 10px;
    left: 0;
    top: 0
}

.scrollbar-cursor-drag {
    cursor: move
}

.lazy-preloader {
    width: 100%;
    min-height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    background-color: transparent;
    z-index: 1
}

.lazy-preloader::before {
    content: "";
    width: 82px;
    height: 82px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -41px 0 0 -41px;
    background-image: url(../images/cycle.png);
    background-position: center center;
    background-repeat: no-repeat;
    animation: Preloader 1s steps(12,end) infinite
}

.lazy-preloader::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

@media screen and (max-width: 1100px) {
    .slide-page {
        margin:0 5px
    }

    .slide-page span:not(.slide-numbers) {
        width: 8px;
        height: 8px
    }

    .slide-page span:not(.slide-numbers)::before {
        width: 16px;
        height: 16px
    }

    .pic-slider .slide-pagination {
        display: block
    }

    .slide-inner .pagination {
        bottom: 0
    }
}

@media screen and (max-width: 740px) {
    .slide-page span:not(.slide-numbers) {
        width:6px;
        height: 6px
    }

    .slide-page span:not(.slide-numbers)::before {
        width: 12px;
        height: 12px;
        left: -3px;
        top: -3px
    }
}

@media screen and (min-width: 1100px) {

    .bookshelf-link a {
        transition: box-shadow .3s linear
    }

    .bookshelf-link img {
        transition: all .45s ease-in-out
    }

    .bookshelf-link h3 {
        transition: all .3s ease-in-out
    }

    .bookshelf-link:hover a {
        box-shadow: 0 2px 4px 0 var(--color-black-alpha-01),0 9px 20px 0 var(--color-white-alpha-01)
    }

    .bookshelf-link:hover img {
        transform: rotateY(25deg);
        box-shadow: 1px 1px 5px 5px var(--color-white-alpha-02)
    }

    .bookshelf-link:hover h3 {
        transform: scale3d(1,1,1);
        opacity: 1
    }

    .sub-nav-2 li a {
        transition: all .3s ease-in-out
    }

    .outer-nav.second .sub-nav-2 li a:hover,.sub-nav-2 li:hover a {
        background-color: var(--color-highlight);
        color: var(--color-white)
    }
}

@media screen and (max-width: 1300px) {
    .header.hide .navigation {
        padding-right:100px
    }

    .header.hide .cart-login {
        top: 18px;
        right: 85px
    }

    .header.hide .search-but {
        top: 18px
    }

    .header.hide .language {
        top: 18px
    }
}

@media screen and (max-width: 1100px) {

    .header.hide .cart-login {
        top: 10px;
        right: 140px
    }

    .header.hide .search-but {
        top: 13px
    }

    .header.hide .language {
        top: 10px
    }
}

.col-1,.col-2,.col-3,.col-6 {
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 0 10px;
    text-align: left;
    float: left
}

.col-1 {
    width: calc(16% - 10px)
}

.col-2 {
    width: calc(16% - 10px)
}

.col-3 {
    width: calc(32% - 10px)
}

.col-6 {
    width: calc(50%);
    padding: 0
}

.slide-range {
    display: none;
    outline: 0;
    border: none;
    width: 100%;
    height: 20px;
    background-color: transparent;
    color: transparent;
    position: relative;
    margin: 0 0 10px 0;
    transition: opacity .3s ease-in-out;
    opacity: .5;
    cursor: pointer
}

.slide-range::after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    background-color: #fff;
    z-index: -1
}

.slide-range:hover {
    opacity: 1
}

.slide-range::-webkit-slider-thumb {
    border: none;
    width: 20px;
    height: 20px;
    margin: -10px 0;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%
}

.slide-range::-moz-range-thumb {
    border: none;
    width: 20px;
    height: 20px;
    margin: -10px 0;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%
}

.slide-range::-webkit-slider-runnable-track {
    width: 0;
    height: 0;
    border: none
}

.slide-range:focus {
    outline: 0
}

.slide-range:focus::-webkit-slider-runnable-track {
    width: 0;
    height: 0;
    border: none
}

.is-IE .control::after,.is-IE .slide-range {
    display: none
}

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);
    width: 0;
    height: 0;
    opacity: 0
}

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

.box-nav {
    width: 20px;
    height: auto;
    position: absolute;
    left: 10px;
    top: 50%;
    padding: 0;
    transform: translate(0,-50%);
    z-index: 15
}

.box-nav ul {
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    list-style: none
}

.box-nav li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: auto;
    margin: 5px 0
}

.box-nav li button {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    line-height: 15px;
    text-align: center;
    transition: all .3s ease-in-out;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    width: 15px;
    height: 15px;
    text-align: center
}

.box-nav li.current button {
    color: #db9615;
    border: 3px solid #db9615;
    pointer-events: none
}

.box-nav li:not(.current):hover button {
    color: #db9615;
    border: 3px solid #db9615
}

.slider-home {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #fff;
    text-align: center
}

.slide-bg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0
}

.bg-home {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.slider-inner {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto;
    background-color: #fff
}

.slider-inner::before {
    content: '';
    background: linear-gradient(to bottom,#1a3866 0,rgba(26,56,102,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    z-index: 10
}

.bg-inner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.bg-inner img {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.slider-detail {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto;
    background-color: #fff
}

.bg-detail {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.bg-detail img {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.box-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1
}

.one {
    width: 50vw;
    height: 50vw;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(119,109,91,.3);
    transform: translate3d(-50%,-50%,0) scale(.8);
    border-radius: 50%
}

.two {
    width: 60vw;
    height: 60vw;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(86,77,80,.3);
    transform: translate3d(-50%,-50%,0) scale(.8);
    border-radius: 50%
}

.three {
    width: 75vw;
    height: 75vw;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(0,0,0,.1);
    transform: translate3d(-50%,-50%,0) scale(1);
    border-radius: 50%
}

.box-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: block;
    float: left;
    opacity: 0;
    z-index: 1
}

.group-central {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    transform: translate(0,100%);
    overflow: hidden
}

.group-central.show-text {
    z-index: 1
}

.group-central:first-child {
    transform: translateY(0)
}

.content-main {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    z-index: 10
}

.content-main::after,.content-main::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.group-central .bg-screen {
    z-index: 1
}

.group-central .bg-screen::after {
    content: "";
    background-color: rgba(57,57,57,.2);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity .6s ease-in-out
}

.video-home-full .controls {
    bottom: 70px
}

.group-central[data-name=product-home]::after {
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: #434d4f;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out;
    opacity: .7;
    z-index: -2
}

.group-central[data-name=news-home]::after {
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: #3e4855;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out;
    opacity: .7;
    z-index: -2
}

.group-central[data-name=footer-home]::after {
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: #182028;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out;
    opacity: .7;
    z-index: -2
}

.group-central[data-name=product-home].show-text::after {
    opacity: 1
}

.group-central[data-name=news-home].show-text::after {
    opacity: 1
}

.group-central[data-name=footer-home].show-text:after {
    opacity: 1
}

.show-header .box-slider {
    animation-name: fadeIn;
    animation-duration: .8s;
    animation-fill-mode: forwards
}

.slogan {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: auto;
    text-align: center;
    color: #fff;
    pointer-events: none;
    z-index: 30
}

.slogan h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 15px;
    position: relative;
    text-transform: uppercase
}

.slogan h2:before {
    content: ' ';
    width: 0;
    opacity: 0;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    transition: all .3s ease-in-out
}

.slogan p {
    font-size: 24px;
    font-weight: 400;
    font-style: italic
}

.slogan h2>span>span,.slogan p>span>span {
    opacity: 0;
    transition: all .3s ease-in-out
}

.slogan h2>span>span.move,.slogan p>span>span.move {
    opacity: 1
}

.slogan.show h2:before {
    width: 100px;
    opacity: 1
}

.slogan.hide {
    opacity: 0;
    z-index: -1
}

#home-page .slogan {
    bottom: 30px;
    top: auto
}

#home-page .slogan h2 {
    font-size: calc(100vw/40)
}

#home-page .slogan p {
    font-size: calc(100vw/50)
}

#home-page .wrap-footer {
    display: inline-block
}

#home-page .social {
    position: absolute;
    display: block;
    bottom: 55px;
    left: 0;
    width: 100%
}

#home-page .copyright {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%
}

#home-page .text-right {
    text-align: right
}

.title-main-home {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    margin-bottom: 20px
}

.title-main-home h2 {
    font-size: 45px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase
}

.slide-pics {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background-color: #03314d
}

.banner-home {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    display: block
}

.banner-home .pic-home,.pic-img {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

.pic-home::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,rgba(0,0,0,0) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,.8) 100%)
}

.pic-home:after {
    display: none
}

.banner-home img,.pic-img img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    object-fit: cover;
    object-position: center
}

.slider-inner {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0
}

.banner-inner {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
    position: relative;
    display: block;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    backface-visibility: hidden
}

.banner-inner img {
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    pointer-events: none;
    display: block;
    opacity: 0;
    z-index: -9999
}

.wrap-cate {
    text-align: center;
    width: 90%;
    max-width: 1100px;
    height: auto;
    position: relative;
    margin: auto;
    display: inline-block;
    vertical-align: middle
}

.slide-cate {
    max-width: 40vw;
    margin: auto
}

.item-cate-home {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    color: #fff;
    text-align: center
}

.item-cate-home a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.pic-cate-home img {
    height: calc(100vh - 330px)
}

.pic-cate-home {
    position: relative;
    height: auto;
    display: inline-block
}

.txt-cate-home {
    position: relative;
    height: auto;
    width: 100%;
    display: block;
    margin: 15px 0
}

.txt-cate-home h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px
}

.txt-cate-home p {
    display: none
}

.slide-cate .slide-prev {
    left: -50px
}

.slide-cate .slide-next {
    right: -50px
}

.slide-cate .slide-next,.slide-cate .slide-prev {
    margin: -50px 0 0 0
}

.slide-cate .slide-pagination {
    display: none
}

.txt-info {
    position: absolute;
    bottom: 120px;
    left: 10%;
    color: #fff;
    display: block;
    height: auto;
    max-width: 700px;
    text-align: left
}

.txt-info h2 {
    font-size: 60px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 10px;
    text-transform: uppercase
}

.txt-info h2 strong {
    font-weight: 500;
    display: inline-block;
    position: relative
}

.txt-info p {
    line-height: 1.6;
    color: #eee;
    font-size: 16px;
    font-weight: 500
}

.group-central[data-name=showroom-home] .txt-info {
    max-width: 800px
}

.view-a {
    display: inline-block;
    color: #fff;
    font-style: italic;
    font-size: 16px;
    margin-top: 20px
}

.view-a:after {
    content: '';
    display: inline-block;
    margin-top: -5px;
    vertical-align: middle;
    background: url(../images/next1.svg) no-repeat center center/contain;
    height: 30px;
    width: 30px;
    margin-left: 10px
}

.wrap-news {
    width: 94%;
    max-width: 1200px;
    position: relative;
    height: auto;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    z-index: 5
}

.box {
    width: auto;
    height: auto;
    display: inline-block;
    position: relative;
    margin: 0;
    vertical-align: top;
    overflow: hidden;
    padding: 10px;
    cursor: pointer
}

.colum-text {
    width: 100%;
    height: auto;
    color: #d0d0d0;
    position: relative;
    display: block;
    padding: 15px;
    text-align: left
}

.colum-text h3 {
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.6;
    display: block;
    height: 66px;
    overflow: hidden
}

.colum-text p {
    font-weight: 400;
    max-height: 35px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    display: block
}

.list-new-home {
    position: relative;
    height: auto;
    display: block;
    width: 100%
}

.box-news {
    width: 25%;
    background-color: #666c74
}

.box-news .colum-pic {
    height: 200px;
    overflow: hidden
}

.box-news .pic-img {
    height: 100%
}

.box-catalogue {
    width: 48%
}

.pic-catalogue {
    height: 315px;
    overflow: hidden
}

.pic-catalogue .pic-img {
    height: 317px
}

.box-catalogue {
    padding: 0
}

.box-catalogue h3 {
    font-size: 35px;
    font-weight: 200;
    text-transform: uppercase;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff
}

.box-catalogue h3 mark {
    background-color: transparent;
    display: inline-block;
    color: #fff;
    font-weight: 700
}

.box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.list-new-home .box:nth-child(2) {
    background-color: #5e6b7d
}

.slide-popup-mod {
    position: fixed;
    width: min(1000px,90vw);
    height: min(625px,90vh);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    pointer-events: auto;
    z-index: 2
}

.slide-popup-mod.show {
    animation-name: fadeIn;
    animation-duration: 1.4s;
    animation-delay: .3s;
    animation-fill-mode: forwards
}

.bg-slider {
    position: relative;
    width: min(1000px,90vw);
    height: min(625px,90vh)
}

.bg-slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center
}

.bg-slider a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

.popup-home .details-center {
    width: 98%;
    max-width: 800px;
    height: auto;
    position: relative;
    display: inline-block;
    margin: 0 -3px;
    vertical-align: middle;
    background-color: transparent;
    opacity: 1;
    min-height: unset;
    animation: none
}

.logo-popup {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    margin: 0 auto 50px auto;
    pointer-events: none
}

.logo-popup svg {
    position: relative;
    display: block;
    width: min(22vw,270px);
    height: auto;
    object-fit: contain;
    object-position: center center
}

.list-object {
    position: relative;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center
}

.object-box {
    position: relative;
    display: block;
    width: calc(33% - 20px);
    margin: 0 12px;
    padding: 30px 20px 70px 20px;
    box-shadow: 0 0 20px 10px rgba(0,0,0,.1);
    z-index: 1
}

.object-box a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9
}

.object-box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);
    background-color: rgba(255,255,255,.2);
    z-index: -1
}

.icon-box {
    position: relative;
    display: block;
    margin: 0 auto 25px auto;
    width: 100px;
    height: auto;
    color: #fff;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .1))
}

.icon-box svg {
    position: relative;
    display: block;
    margin: auto;
    width: 100%;
    height: auto
}

.text-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    line-height: 1.4
}

.text-box::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: url(../images/arrow-popup.svg) no-repeat right bottom;
    bottom: -60px;
    left: calc(50% - 30px)
}

.is-Firefox .object-box::after {
    background-color: rgba(0,0,0,.5)
}

.popup-home.details-content::after,.popup-home.details-content::before {
    display: inline-block
}

.login-overlay {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    z-index: 7
}

.login-overlay.active {
    height: 100vh
}

.login-box {
    position: fixed;
    right: 30px;
    top: 100px;
    display: inline-block;
    width: 90%;
    height: auto;
    max-width: 620px;
    padding: 30px;
    background-color: #fff;
    border-radius: 15px;
    transform: translate3d(0,-500px,0);
    transition: all .7s ease-in-out;
    z-index: 100
}

.login-box::before {
    content: '';
    position: absolute;
    right: 160px;
    bottom: 100%;
    border: 18px solid #fff;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 0
}

.login-box.active {
    transform: translate3d(0,0,0)
}

.login-block {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.btnLogin {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto
}

.btnLogin button {
    padding: 0 50px 0 20px;
    background-color: #db9614;
    line-height: 60px;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer
}

.btnLogin::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: url(../images/login-btn.png) no-repeat center center/cover
}

.login-box input[type=password],.login-box input[type=text] {
    height: 54px;
    line-height: 54px
}

.login-box .pass-mask {
    line-height: 54px
}

.slider-inner-main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #fff;
    overflow: hidden
}

.slide-bg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0
}

.bg-home {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    margin: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    backface-visibility: hidden
}

.slide-inner-main {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto;
    background-color: #fff
}

.bg-inner {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    backface-visibility: hidden
}

.bg-inner img {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.slider-inner-main::before {
    content: '';
    background: linear-gradient(to bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    opacity: 0;
    z-index: 10
}

.license-home .box-footer {
    max-width: 910px;
    display: inline-block;
    vertical-align: middle
}

.license-home::after {
    content: ' ';
    width: 100%;
    height: 100%;
    background: #182028;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease-in-out;
    opacity: .9;
    z-index: -2
}

.license-home.show-text::after {
    opacity: 1
}

.license-home .title-footer h2 {
    font-size: 26px
}

.license-home .box-footer .company-info a,.license-home .box-footer .company-info p {
    font-size: 16px
}

.box-footer.no-license {
    max-width: 900px
}

.box-footer.no-license .company-info {
    padding: 0
}

#about-page .bg-cover,#contact-page .bg-cover,#service-page .bg-cover,#support-page .bg-cover {
    background-attachment: fixed
}

.about-info {
    background-color: #697a86;
    color: #fff
}

.padding-main {
    padding: 60px 0;
    position: relative;
    display: block;
    height: auto
}

.title-inner {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    height: auto;
    margin-bottom: 40px;
    color: #003f62;
    text-transform: uppercase
}

.title-inner h2 {
    font-weight: 100;
    font-size: clamp(42px,10vw,3vw)
}

.title-white {
    color: #fff
}

.content-wrap {
    position: relative;
    display: block;
    height: auto;
    width: 90%;
    max-width: 1200px;
    margin: auto
}

.txt-box {
    padding: 40px;
    border: 1px solid rgba(255,255,255,.6);
    position: relative;
    display: block;
    height: auto;
    width: 90%;
    max-width: 900px;
    margin: auto
}

.txt-box p {
    line-height: 1.6;
    font-size: 16px
}

.item-history {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 130px 40px 40px 40px;
    min-height: 400px
}

.slide-history:before {
    content: ' ';
    position: absolute;
    top: 40px;
    left: 50%;
    width: 1px;
    height: 50px;
    background-color: #db9614;
    z-index: 1
}

.item-history h3 {
    font-size: 35px;
    font-weight: 700;
    color: #db9614;
    margin-bottom: 20px
}

.item-history p {
    font-size: 18px;
    line-height: 1.6
}

.slide-history {
    position: relative;
    display: block;
    height: auto;
    width: 90%;
    max-width: 800px;
    margin: auto;
    border-radius: 40px;
    background-color: #003f62
}

.bg-parallax {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top
}

.but-nav {
    position: absolute;
    display: block;
    height: auto;
    width: 90%;
    max-width: 920px;
    left: 50%;
    top: 55%;
    transform: translate3d(-50%,-50%,0)
}

.about-info1 {
    color: #fff
}

.txt-info2 {
    color: #003f62
}

.txt-info2 p {
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 16px
}

.txt-info2 h3 {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 15px 0
}

.about-info3 {
    padding: 200px 0
}

.about-info3 .bg-cover::after {
    opacity: .5
}

.about-showroom {
    width: 88%;
    max-width: 500px;
    color: #fff;
    position: relative;
    display: block;
    margin: auto;
    text-align: center
}

.about-showroom h2 {
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 30px
}

.txt-aboutshowroom {
    background-color: rgba(0,26,40,.6);
    padding: 30px;
    position: relative;
    display: block;
    width: 100%
}

.txt-aboutshowroom::before {
    content: ' ';
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border: 1px solid rgba(255,255,255,.6);
    position: absolute;
    top: -10px;
    left: -10px;
    pointer-events: none
}

.txt-aboutshowroom p {
    line-height: 1.6;
    font-size: 16px
}

.about-info2 .content-wrap {
    max-width: 1000px
}

.about-info4 {
    padding-bottom: 60px
}

.about-info4 .content-wrap {
    width: 96vw;
    max-width: inherit
}

.list-conpany-info {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto
}

.box-companyinfo {
    width: 100%;
    display: block;
    position: relative;
    color: #003f62;
    margin-top: 60px;
    padding: 0 30px
}

.box-companyinfo h3 {
    font-size: clamp(24px,5%,1.5vw);
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase
}

.txt-box img {
    display: block;
    margin: auto;
    max-width: 100%
}

#products-page .content-wrap {
    max-width: 1400px
}

.content-wrap {
    font-family: Montserrat,sans-serif
}

.row-cate {
    position: relative;
    display: block;
    padding-top: 40px;
    margin-top: 40px;
    height: auto;
    text-align: center
}

.row-cate:after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 50%;
    width: 200px;
    border-top: 1px dashed #003f62;
    margin-left: -100px
}

.row-cate .item-cate {
    position: relative;
    display: inline-block;
    height: auto;
    vertical-align: top
}

.row-cate .item-cate:nth-child(1) {
    width: 60%
}

.row-cate .item-cate:nth-child(2) {
    width: 37%;
    margin-left: 2%
}

.row-cate .pic-cate {
    overflow: hidden;
    display: block;
    width: 100%;
    height: auto;
    position: relative
}

.row-cate .pic-img {
    height: 420px;
    position: relative;
    width: 100%
}

.title-cate {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,.5);
    padding: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    font-size: 25px
}

.item-cate a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.product-main .content-wrap .row-cate:nth-child(even) .item-cate:nth-child(1) {
    width: 37%
}

.product-main .content-wrap .row-cate:nth-child(even) .item-cate:nth-child(2) {
    width: 60%
}

.list-product {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    padding: 0
}

.title-inner-list {
    margin-bottom: 0!important;
    padding: 30px 0;
    background-color: #eee
}

.item-product {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center
}

.pic-product {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.pic-product img {
    width: 100%;
    height: auto;
    display: block
}

.item-product h3 {
    font-size: 14px;
    text-transform: uppercase;
    color: #6a6a6a;
    margin-top: 10px;
    font-weight: 700;
    margin-bottom: 5px;
    height: 19px;
    overflow: hidden
}

.price {
    color: #db9614;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4
}

.slide-products-hot {
    position: relative;
    width: 100%;
    height: auto;
    display: block
}

.slide-products-hot .slide-pagination {
    display: none
}

.slide-products-hot .slide-item {
    padding: 0 20px
}

.item-product a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10
}

.top-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: url(../images/hot.svg) no-repeat center center/contain;
    width: 80px;
    height: 60px
}

.main-list-product>.bg-cover {
    height: 700px
}

.main-list-product>.bg-cover::after {
    display: none
}

.item-product-list {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #efefef;
    overflow: hidden;
    margin-bottom: -3px
}

.item-product-list:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: calc(100% - 3px);
    background-color: #cbcbcb;
    opacity: 0
}

.item-product-list:nth-child(even) {
    background-color: #fff
}

.item-product-list:nth-child(even):before {
    opacity: 1
}

.pic-product-list {
    position: relative;
    display: inline-block;
    width: 50%;
    vertical-align: middle;
    background-color: #fff;
    overflow: hidden
}

.pic-product-list a {
    display: block
}

.pic-product-list img {
    width: 100%;
    height: auto;
    display: block
}

.txt-product-list {
    position: relative;
    display: inline-block;
    width: 49%;
    vertical-align: middle;
    padding: 40px
}

.txt-product-list h3,.txt-product-list h3 a {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    color: #003f62;
    margin-bottom: 10px;
    display: block;
    position: relative
}

.basic-feature {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 10px;
    position: relative
}

.basic-feature p {
    font-size: 15px;
    line-height: 1.7
}

.title-feature {
    font-weight: 700;
    color: #000;
    margin-bottom: 5px;
    position: relative;
    display: block
}

.item-product-list .price {
    font-size: 30px;
    margin: 10px 0;
    position: relative;
    display: block
}

.technical-info {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin: 0
}

.technical-info span {
    display: inline-block;
    font-weight: 700;
    vertical-align: middle
}

.technical-info img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
    position: relative;
    width: 50px;
    height: 50px
}

.view-detail {
    position: relative;
    display: inline-block;
    color: #333;
    margin: 20px 0;
    vertical-align: middle
}

.view-detail span {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
    background: url(../images/next.svg) no-repeat center center/contain;
    background-color: #758392
}

.view-more {
    display: block;
    position: relative;
    height: auto;
    width: 100%;
    text-align: center;
    padding: 50px 0
}

.view-more a {
    display: inline-block;
    color: #333
}

.view-more p {
    line-height: 1.6;
    font-size: 16px
}

.view-more span {
    width: 50px;
    margin-top: 5px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 7px 11px 7px rgba(0,0,0,.1);
    background: url(../images/next.svg) no-repeat center center/contain;
    background-color: #758392
}

.product-detail {
    float: none;
    max-width: 80vw;
    width: 100%;
    margin: 40px auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.left-detail {
    width: 50%;
    display: block;
    position: relative
}

.right-detail {
    width: 50%;
    display: block;
    position: relative;
    padding: 0 0 0 3vw
}

.right-detail h3 {
    font-weight: 700;
    font-size: 1.8vw;
    margin-bottom: 30px;
    color: #003f62
}

.right-detail hr {
    border-top: 1px dashed #ddd;
    margin: 30px 0
}

.right-detail .price {
    font-size: 24px;
    float: left;
    margin-bottom: 10px;
    height: 45px
}

.buy-product {
    background-color: #db9615;
    padding: 8px 15px 8px 0;
    color: #fff;
    display: block;
    float: right;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px
}

.buy-product span {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/next.svg) no-repeat center center/contain;
    line-height: 1
}

.link-sale {
    position: relative;
    background: 0 0;
    padding: 8px 15px 8px 0;
    color: #fff;
    display: block;
    float: right;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    margin: 0
}

.link-sale span {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/next.svg) no-repeat center center/contain;
    line-height: 1
}

.link-sale::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#f12711,#faba17 ,#db9615);
    background-size: 400% 400%;
    animation: BorderBox 3s infinite;
    z-index: -1
}

.buy-product.active {
    display: inline-block;
    vertical-align: middle;
    float: none
}

.link-sale.active {
    display: inline-block;
    vertical-align: middle;
    float: none
}

a.extra-3d {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    color: #000;
    transition: all .3s ease-in-out
}

a.extra-3d svg {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin: 0 0 0 10px;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    background-color: #db9615
}

.right-detail .technical-info {
    float: left
}

.warranty {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    float: right
}

.warranty span {
    display: inline-block;
    font-weight: 700;
    vertical-align: middle
}

.warranty img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px
}

.icons-detail {
    margin-top: 20px;
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 20px;
    max-width: 400px
}

.icons-detail>div {
    display: inline-block;
    width: 13%;
    position: relative;
    margin-right: 2%
}

.icons-detail img {
    width: 100%
}

.like-but {
    position: absolute;
    display: inline-block;
    bottom: 90px;
    right: 0;
    width: auto;
    height: auto;
    cursor: pointer;
    padding: 10px;
    border-radius: 30px;
    background-color: rgba(0,0,0,.1);
    z-index: 5
}

.like-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background: url(../images/share-icon.png) no-repeat center bottom;
    margin-right: 10px
}

.like-circle {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background-color: #003f62
}

.detail-product {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.detail-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    color: #fff;
    text-align: center
}

.detail-box h2 {
    padding: 20px 0 10px 0;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.6
}

.detail-box h3 {
    margin: 0 0 10px 0;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 500;
    font-weight: 500;
    line-height: 1.6
}

.detail-item h3>span>span {
    transition: all .9s ease;
    opacity: 0
}

.detail-item.move h3>span>span.move {
    opacity: 1
}

.detail-slider {
    display: block;
    width: 100%;
    height: auto;
    max-width: 35vw;
    margin: auto
}

.detail-item {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%
}

.product-pic {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center
}

.product-pic img {
    display: block;
    width: 100%
}

.thumb-box {
    position: relative;
    width: 100%;
    display: block;
    height: auto;
    margin: 10px 0
}

.thumb-slider {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    margin: auto
}

.thumb-slider .thumb-pic:before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #575757;
    z-index: 100
}

.thumb-slider .slide-wrapper-outer {
    overflow: visible
}

.thumb-slider .slide-item {
    width: 50px
}

.thumb-slider .slide-item.actived .thumb-pic:before {
    border-width: 3px
}

.thumb-pic {
    position: relative;
    display: block;
    width: 90%;
    max-width: 50px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
    background-color: transparent;
    text-align: center
}

.thumb-pic img {
    position: relative;
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center center
}

.description-product {
    background-color: #003f62;
    position: relative;
    display: block;
    width: 100%;
    color: #fff
}

.title-detail {
    margin-bottom: 30px;
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    text-align: center
}

.title-detail h2 {
    font-weight: 700;
    font-size: 25px;
    text-transform: uppercase
}

.txt-description {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    column-count: 2;
    column-gap: 40px;
    text-align: left
}

.description-product p {
    line-height: 1.6;
    font-size: 16px
}

.description-product .content-wrap {
    max-width: 1000px
}

.product-view {
    background-color: #d1d9de;
    position: relative;
    display: block;
    width: 100%
}

.slide-same {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0
}

.slide-view {
    width: 90%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: auto
}

.slide-view .slide-item {
    padding: 0 10px
}

.slide-view .item-product {
    background-color: #fff;
    white-space: normal
}

.slide-view .item-product h3 {
    margin-top: 0;
    font-size: 12px
}

.slide-view .txt-product {
    padding: 20px
}

.slide-same .slide-pagination,.slide-view .slide-pagination {
    display: none
}

.slide-view .price {
    display: none
}

.slide-same .slide-item {
    padding: 0 10px
}

.col {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px
}

.size_6 {
    float: left;
    width: calc(50% - 6px)
}

.size_6:nth-child(even) {
    float: right
}

.pass-mask {
    position: absolute;
    left: 20px;
    top: 1px;
    width: calc(100% - 30px);
    height: calc(100% - 2px);
    font-weight: 400;
    font-size: 18px;
    line-height: 60px;
    color: #464646;
    background-color: #fff;
    z-index: 1
}

.pass-mask.hide {
    width: 0;
    overflow: hidden
}

.slide-view .item-product {
    width: 98%;
    margin: auto
}

.detail-contains-video {
    display: flex;
    align-items: center;
    justify-content: center
}

.detail-contains-video .video-youtube-full {
    width: 35vw;
    height: calc(35vw * .5625)
}

.detail-contains-video .youtube-video iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: none
}

.detail-contains-video .bg-video {
    width: 100%;
    height: 100%
}

.detail-contains-video .play-button {
    display: none
}

#library-page .padding-main {
    padding: 40px 0 0 0
}

.set-post {
    transition: height .3s ease
}

.library-project {
    background-color: #c2c8cc
}

.title-1 {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 40px;
    text-align: center
}

.title-1:after,.title-1:before {
    content: ' ';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background-color: #003f62;
    left: 0
}

.title-1:before {
    left: auto;
    right: 0
}

.title-1.title-white:after,.title-1.title-white:before {
    background: #fff
}

.title-1 h2 {
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    color: #003f62;
    text-transform: uppercase
}

.title-white h2 {
    color: #fff
}

.title-sub {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 30px;
    text-align: center
}

.title-sub h3 {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: #003f62;
    text-transform: uppercase
}

.title-white .title-sub h3 {
    color: #fff
}

.switch-slide {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    text-align: center
}

.switch-slide li {
    display: inline-block;
    margin: 0 10px
}

.switch-slide li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px
}

.icon-all,.icon-slide {
    width: 27px;
    height: 19px;
    background: url(../images/switch.png) no-repeat top left;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle
}

.icon-all {
    background-position: -47px 0;
    width: 30px;
    height: 20px
}

.switch-slide li.active a {
    color: #db9615;
    pointer-events: none
}

.switch-slide li.active .icon-slide {
    background-position: 0 -26px
}

.switch-slide li.active .icon-all {
    background-position: -47px -26px
}

.item-box-main {
    padding: 0 10px;
    position: relative;
    display: inline-block;
    width: 98%;
    max-width: 530px;
    margin: 0 5px 20px 5px;
    vertical-align: top
}

.slide-item .item-box-main {
    width: 100%
}

.item-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border: none;
    cursor: pointer;
    padding: 5px;
    background-color: #fff
}

.item-pic {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    line-height: 0
}

.item-pic::before {
    content: '';
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 66.4% 0 0 0
}

.item-pic img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    object-position: center ce
}

.item-name {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 20px;
    background-color: #fff;
    color: #697a86;
    line-height: 1.4;
    text-align: center;
    z-index: 1;
    text-align: center
}

.item-name h3 {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: normal
}

.pic-slider {
    position: relative;
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 0 40px 0;
    text-align: center
}

.video-company,.video-product {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    margin: auto;
    text-align: center
}

.library-application {
    background-color: #003f62
}

.video-company {
    background-color: #c2c8cc;
    padding: 40px 0
}

.video-product {
    background-color: #697a86;
    padding: 40px 0 0 0
}

.item-catalogue {
    padding: 0 10px;
    position: relative;
    height: auto;
    display: inline-block;
    width: 98%;
    max-width: 332px;
    margin: 0 5px 20px 5px;
    vertical-align: top
}

.item-catalogue .item-pic {
    border: 5px solid #fff
}

.item-catalogue .item-pic::before {
    display: none
}

.item-catalogue .item-pic img {
    position: relative;
    transform: none;
    left: 0;
    width: 100%
}

.item-catalogue .item-name {
    position: relative;
    background-color: transparent;
    padding: 20px 0
}

.item-catalogue .item-name h3 {
    font-size: 18px
}

.view-catalogue {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
    background-color: rgba(105,122,134,.7);
    border-radius: 50%
}

.view-catalogue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,255,255,.6);
    transform: scale(.7,.7);
    border-radius: 50%;
    z-index: 10
}

.view-catalogue::after {
    content: '';
    display: inline-block;
    background: url(../images/icon-download.png) no-repeat center center/contain;
    width: 70px;
    height: 70px;
    position: relative;
    z-index: 10
}

.view-catalogue span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(0);
    background: linear-gradient(0deg,#3f6e8f 0,#003f62 100%);
    border-radius: 50%
}

.item-catalogue a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-product .item-catalogue .item-name {
    color: #fff
}

.library-videos {
    padding-bottom: 0
}

.library-models3d .view-catalogue::after {
    background: url(../images/download-file.svg) no-repeat center center/contain
}

.signup-design {
    background: #e2e2e2;
    padding-bottom: 0
}

.signup-design-box {
    display: block;
    position: relative;
    width: 90%;
    height: auto;
    padding: 30px;
    background-color: #e2e2e2;
    z-index: 10;
    max-width: 1100px;
    margin: auto
}

.txt-box-1 {
    padding: 40px;
    border: 1px solid #999;
    position: relative;
    display: block;
    height: auto;
    margin: auto;
    color: #003f62
}

.txt-box-1 p {
    line-height: 1.6;
    font-size: 16px
}

.signup-design .txt-box-1 {
    margin-bottom: 80px
}

.form-main .input-but {
    margin-top: 20px
}

.support-design {
    color: #fff;
    padding: 200px 0 120px 0
}

.support-design .title-inner {
    margin-bottom: 80px
}

.support-design .txt-aboutshowroom {
    width: 90%;
    margin: auto;
    max-width: 900px
}

.bg-gradient::after {
    background: linear-gradient(90deg,rgba(219,150,29,.8) 0,#003f62 100%)
}

.txt-service-other {
    display: block;
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: auto
}

.txt-service-other p {
    line-height: 1.6;
    color: #003f62;
    font-size: 16px
}

#support-page .content-wrap {
    max-width: 1000px
}

.support-info {
    padding: 60px 0 0 0
}

.support-info .txt-info2 h3 {
    margin-bottom: 15px;
    text-align: center;
    font-size: 36px
}

.txt-support {
    padding: 40px;
    color: #003f62;
    width: 100%;
    margin: 0 auto 40px auto;
    border: 1px solid #999;
    text-align: center
}

.txt-support a {
    font-size: 24px;
    color: #db9614;
    font-weight: 700
}

.download-div {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 50px 0
}

.title-download-div {
    position: relative;
    height: auto;
    margin-bottom: 10px;
    color: #003f62
}

.icon-pdf {
    width: 70px;
    height: 70px;
    display: inline-block;
    background: url(../images/icon-pdf.svg) no-repeat center center/contain
}

.warranty-policy {
    margin-bottom: 20px
}

.warranty-register {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    padding: 50px 0
}

.warranty-form {
    position: relative;
    height: auto;
    display: block;
    width: 90%;
    max-width: 900px;
    margin: auto
}

.warranty-register .form-main {
    background-color: rgba(0,63,98,.5);
    padding: 40px
}

.warranty-register .bg-cover:after {
    display: none
}

.warranty-form .radio-box label span {
    color: #fff
}

.agency {
    background-color: #697a86;
    padding-bottom: 0
}

.quick-box {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    max-width: 1020px;
    margin: 0 auto 20px auto;
    text-align: center
}

.quick-col {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    width: auto;
    max-width: 320px
}

.quick-col .input-but {
    margin: 0;
    padding: 0;
    border: none
}

.quick-col .input-but button[type=submit] {
    display: block;
    width: 100%;
    padding: 0 20px;
    height: 64px;
    font-size: 15px;
    font-weight: 700
}

.map-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    background-color: #fff;
    overflow: hidden
}

.map-box::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    box-shadow: 0 0 20px 10px rgba(0,0,0,.1);
    z-index: 10
}

.list-view {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 500px;
    max-height: calc(100vh - 200px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #aaa;
    scrollbar-width: none
}

.map-view {
    position: relative;
    float: left;
    display: block;
    width: calc(100% - 500px);
    height: calc(100vh - 200px);
    background-color: #f2f2f2
}

.map-view iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.map-view .googlemap {
    width: 100%;
    height: 100%;
    max-height: none
}

.map-view .googlemap .zoom-control {
    right: auto;
    right: 20px;
    bottom: 40px;
    top: auto
}

.map-view .googlemap::after,.map-view .googlemap::before {
    display: none
}

.list-title {
    display: block;
    height: 56px;
    background-color: #162d6c;
    line-height: 56px;
    padding: 0 25px
}

.list-title h2 {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2
}

.list-result {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.list-result ul {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.list-view li {
    position: relative;
    display: block;
    padding: 25px;
    border-bottom: 1px solid #c8cfd4;
    background-color: #fff;
    cursor: pointer;
    transition: background-color .3s ease-in-out
}

.list-view h3 {
    margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
    color: #003f62;
    font-weight: 700;
    transition: color .3s ease-in-out
}

.list-view p {
    font-size: 16px;
    color: #363636;
    font-weight: 400;
    line-height: 1.6;
    transition: color .3s ease-in-out
}

.list-view li.active {
    background-color: #db9614
}

.list-view li.active h3,.list-view li.active p {
    color: #fff
}

.map-view.full-screen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    max-height: inherit;
    z-index: 9999
}

.no-index {
    pointer-events: none;
    opacity: 0!important;
    position: static!important;
    z-index: -99999!important
}

.list-view li.hide {
    display: none
}

.faq-answer {
    background-color: #f1f1f1;
    padding-bottom: 300px
}

.list-collapse {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.a-collapse {
    display: block;
    position: relative;
    line-height: 1.4;
    width: 100%;
    color: #333;
    padding: 25px 45px 25px 88px;
    font-size: 15px;
    text-transform: uppercase;
    background: #fff;
    border-radius: 10px
}

.number-collapse {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    border-right: 1px solid #d7d7d7;
    height: 100%;
    text-align: center
}

.number-collapse:after,.number-collapse:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.number-collapse span {
    font-weight: 100;
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    height: auto
}

.arrow-collapse {
    width: 20px;
    height: 10px;
    background: url(../images/arrow1.png) no-repeat;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 25px
}

.list-collapse li {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 2px
}

.list-collapse li .active.a-collapse {
    background-color: #db9614!important;
    color: #fff
}

.list-collapse li .active.a-collapse .arrow-collapse {
    background-position: 0 -10px
}

.content-collapse {
    padding: 30px;
    position: relative;
    display: block;
    height: auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 4px 1px rgba(0,0,0,.1)
}

.content-collapse h3 {
    font-weight: 700;
    text-transform: uppercase;
    color: #003f62;
    font-size: 22px;
    margin-bottom: 10px
}

.content-collapse p {
    line-height: 1.6;
    font-size: 16px
}

.list-collapse li:nth-child(2n) .a-collapse {
    background-color: #eaeaea
}

.title-2 {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 30px;
    text-align: center
}

.title-2 h2 {
    text-align: center;
    font-weight: 700;
    font-size: 35px;
    color: #003f62;
    text-transform: uppercase
}

.title-2.title-white h2 {
    color: #fff
}

.form-question {
    position: relative;
    display: block;
    height: auto;
    width: 90%;
    max-width: 900px;
    margin: -300px auto 0 auto
}

.question-support .form-main {
    padding: 40px;
    background-color: #e2e2e2
}

.download-div table {
    display: block;
    min-width: inherit;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.download-div table tbody {
    display: table;
    width: 100%;
    min-width: 500px;
    position: relative
}

.download-div table td:nth-child(1) {
    vertical-align: top;
    font-weight: 700;
    min-width: 90px
}

.download-div table td:nth-child(1) p,.download-div table td:nth-child(1) span {
    font-weight: 700
}

.scroll-slide {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
    background-color: #e9e9e9;
    padding: 30px 0
}

.news-link {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    max-width: 1200px;
    margin: 0 auto
}

.news-link.no-link {
    pointer-events: none
}

.link-page {
    position: relative;
    display: block;
    width: 100%;
    height: 130px;
    padding: 18px;
    color: #4d4d4d;
    text-align: left;
    transition: all .5s ease-in-out;
    overflow: hidden;
    background-color: #fff
}

.pic-thumb {
    position: relative;
    float: left;
    display: block;
    width: auto;
    height: auto;
    min-width: 98px;
    max-width: 46%;
    margin: 0 10px 0 0;
    border: 1px solid #dce3e6;
    overflow: hidden;
    line-height: 0;
    text-align: center;
    z-index: 2
}

.pic-thumb img {
    position: relative;
    height: 92px;
    width: auto;
    margin: 0 -50%;
    z-index: -1
}

.link-text {
    position: relative;
    display: block;
    height: 100%;
    z-index: 0;
    line-height: 94px;
    overflow: hidden
}

.link-text h3 {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    max-height: 72px;
    overflow: hidden;
    white-space: normal;
    font-family: Arial,Helvetica,sans-serif
}

.link-page.current {
    background-color: #003f62;
    color: #fff
}

.link-page a {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2
}

.link-page::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 10
}

.link-page.current {
    pointer-events: none
}

.link-page.current::after {
    display: block
}

.news-link .slide-item {
    padding: 1px 3px
}

.load-content {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
    padding-bottom: 70px
}

.load-content:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 400px;
    width: 100%;
    display: block;
    background-color: #003f62
}

.load-bg {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0
}

.load-data {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 50vh
}

.load-details {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin: 0 auto
}

.load-title {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #697a86;
    padding: 15px
}

.load-title h3 {
    position: relative;
    display: inline-block;
    font-weight: 100;
    font-size: 25px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.4;
    font-family: Arial,Helvetica,sans-serif
}

.load-text {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 30px;
    border: 1px solid #ddd;
    border-top: 0;
    background-color: #fff;
    font-size: 16px;
    color: #666;
    line-height: 1.4;
    font-family: Arial,Helvetica,sans-serif
}

.details-text iframe,.load-text iframe {
    max-width: 100%;
    margin: 10px auto;
    display: block
}

.load-text table {
    display: block;
    min-width: inherit;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.load-text table tbody {
    display: table;
    width: 100%;
    min-width: 500px;
    position: relative
}

.load-text p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    font-family: Arial,Helvetica,sans-serif
}

.load-text cite,.load-text em,.load-text i {
    font-family: Arial,Helvetica,sans-serif
}

.load-text>:last-child {
    margin: 0
}

.load-text a {
    color: #940000;
    transition: all .3s ease-in-out
}

.load-text img {
    display: block;
    width: auto!important;
    height: auto!important;
    max-width: 100%;
    margin: 10px auto
}

.load-text h1,.load-text h2,.load-text h3,.load-text h4,.load-text h5,.load-text h6 {
    font-size: 18px;
    color: #003768;
    line-height: 1.4;
    margin-bottom: 20px
}

.date-news {
    position: absolute;
    left: 0;
    padding: 15px 10px;
    color: #333;
    text-align: center;
    background: #ffcb08;
    top: 50%;
    margin-top: -43px;
    min-height: 87px
}

.date-news span {
    display: block;
    position: relative;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 5px
}

.date-news:after,.date-news:before {
    content: ' ';
    position: relative;
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.date-news p {
    display: inline-block;
    vertical-align: middle
}

.share-news {
    font-size: 12px;
    color: #666;
    margin-top: 15px;
    text-align: center;
    margin-top: 15px
}

.share-news span {
    display: block;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase
}

.share-news a {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px
}

.share-news a.facebook {
    background: #acacac url(../images/facebook1.svg) no-repeat center center/contain
}

.share-news a.goole {
    background: #acacac url(../images/google1.svg) no-repeat center center/contain
}

.share-news a.linkedin {
    background: #acacac url(../images/linkedin.svg) no-repeat center center/contain
}

.content-policy {
    background: linear-gradient(180deg,#fff,#c2c8cc)
}

.news-list {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    text-align: center
}

.news-item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 32%;
    max-width: 380px;
    margin: 6px;
    text-align: left;
    padding: 18px;
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.news-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #dbdbdb
}

.news-pic {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #eee;
    overflow: hidden;
    height: 180px
}

.news-pic img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover
}

.news-txt {
    position: relative;
    display: block;
    width: 100%;
    height: 58px;
    padding: 15px 10px;
    text-align: center;
    overflow: hidden
}

.news-txt h3 {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: #6f6f6f;
    text-transform: uppercase;
    display: block
}

.news-item .date {
    color: #002134;
    background-color: #f1f1f1;
    transform: none;
    left: 1px;
    top: auto;
    bottom: 28px
}

.news-item .date span {
    color: #4c4c4c
}

.news-item .date::after {
    display: none
}

.box-footer {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 60px auto;
    padding: 40px 50px;
    color: #fff;
    text-align: left;
    max-width: 900px;
    border: 1px solid rgba(255,255,255,.1);
    background-color: rgba(0,0,0,.1);
    box-shadow: 0 0 20px rgba(255 ,255 ,255 ,.1)
}

.wrap-box-footer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 1100px;
    margin: auto
}

.box-footer .company-info {
    position: relative;
    display: block;
    text-align: left;
    padding-right: 60px;
    width: calc(100% - 243px)
}

.title-footer {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: left
}

.title-footer h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0
}

.box-footer .company-info a,.box-footer .company-info p {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    font-size: 15px;
    max-width: unset;
    color: #fff
}

.box-footer .company-info a:hover {
    color: #db9614
}

.license {
    position: relative;
    display: block;
    width: 245px
}

.license img {
    position: relative;
    display: block;
    width: 150px
}

.license p {
    position: relative;
    display: block;
    font-size: 11px;
    color: #fff;
    font-style: italic;
    margin-top: 15px
}

.map-main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #003f62;
    max-width: 1200px;
    margin: auto
}

.map-adreess {
    width: 50%;
    float: left;
    position: relative;
    display: block;
    height: auto
}

.map-content {
    width: 50%;
    float: left;
    position: relative;
    display: block;
    height: auto;
    height: calc(60vh);
    padding: 10px 0 10px 5%
}

.map-content:after,.map-content:before {
    content: ' ';
    position: relative;
    vertical-align: middle;
    display: inline-block;
    height: 100%
}

.map-content .box-companyinfo {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    width: 98%
}

.map-content .box-companyinfo a,.map-content .box-companyinfo li {
    color: #fff
}

.map-a {
    height: 60vh;
    position: relative;
    display: block;
    width: 100%
}

.map-a iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.map-1 {
    position: relative;
    display: block;
    height: auto;
    width: 100%
}

.contact-form .form-main {
    background-color: rgba(0,63,98,.5);
    padding: 40px
}

#contact-page .title-inner {
    padding: 50px 0 0 0
}

.contact-map {
    padding-bottom: 50px
}

.content-table {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    overflow-x: auto
}

table {
    width: 100%;
    min-width: 840px;
    margin: 0 auto;
    border-spacing: 1px;
    border-spacing: 1px;
    table-layout: fixed;
    font-size: 16px;
    line-height: 1.4
}

table th {
    padding: 10px 15px;
    background-color: #697a86;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle
}

table td {
    padding: 10px 15px;
    background-color: #c2c8cc;
    font-size: 15px;
    font-weight: 400;
    color: #000;
    vertical-align: middle
}

table tbody tr:nth-child(even) td {
    background-color: #dfdfdf;
    color: #000
}

table td a {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    transition: all .3s ease-in-out
}

table tbody tr:nth-child(even) td a {
    color: #000
}

.career {
    background-color: #fff;
    padding: 30px 0 0 0
}

.career-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.career-list {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    max-width: 1180px;
    margin: 0 auto 40px auto;
    padding: 25px;
    background-color: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,.2)
}

.career-list td,.career-list th {
    text-align: center;
    line-height: 1.2
}

.career-list th {
    padding: 20px 0;
    line-height: 1.2
}

.th-title {
    display: none
}

.career-list th:nth-child(1) {
    width: 60px
}

.career-list th:nth-child(3) {
    width: 100px
}

.career-list th:nth-child(4) {
    width: 180px
}

.career-list th:nth-child(5) {
    width: 140px
}

.career-list th:nth-child(6) {
    width: 240px
}

.career-list th:nth-child(7) {
    width: 180px
}

.career-list td:nth-child(2),.career-list td:nth-child(4) {
    text-align: left
}

.status {
    position: relative;
    display: inline-block;
    font-weight: 700;
    font-family: inherit
}

.status.hot {
    position: relative;
    display: block
}

.status.hot a {
    background-color: #db9614;
    color: #fff;
    padding: 7px 15px;
    display: inline-block;
    color: #fff;
    border-radius: 30px;
    transition: all .3s ease-in-out
}

.career-form {
    padding: 60px 0 80px 0;
    background-color: #c2c8cc;
    position: relative
}

.join-title {
    display: block;
    width: 90%;
    height: auto;
    position: relative;
    text-align: center;
    margin: 0 auto 40px auto
}

.join-title h3 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    text-transform: uppercase
}

.join-title p {
    font-size: 14px;
    font-weight: 400;
    color: #fff
}

.join-us {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    max-width: 600px;
    margin: 0 auto;
    text-align: center
}

.join-form {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    overflow: hidden
}

.join-us .input-text {
    float: left;
    width: 50%;
    margin: 0 0 12px 0
}

.join-us .input-text:nth-child(odd) {
    padding-right: 6px
}

.join-us .input-text:nth-child(even) {
    padding-left: 6px
}

.join-us .input-but {
    margin-top: 15px
}

.file-up {
    cursor: pointer
}

.input-text input[type=file] {
    position: relative;
    display: block;
    width: 100%;
    height: 64px;
    z-index: 1;
    opacity: 0;
    cursor: pointer
}

.file-name {
    display: block;
    position: absolute;
    left: 6px;
    top: 0;
    width: calc(100% - 6px);
    height: 64px;
    line-height: 64px;
    background: #fff;
    border: 1px solid #a1a1a1;
    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    color: #727272;
    font-weight: 400;
    z-index: 0;
    white-space: nowrap;
    padding: 0 100px 0 20px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis
}

.file-mark {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    width: 96px;
    height: 54px;
    line-height: 54px;
    background-color: #db9614;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    transition: all .3s ease-in-out
}

.btn-blue {
    padding: 15px 30px;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    background-color: #003768;
    cursor: pointer
}

.recruitment-box {
    padding-bottom: 0!important
}

.details-content {
    position: fixed;
    width: 100%;
    height: 100vh;
    opacity: 0;
    text-align: center;
    overflow-x: hidden;
    z-index: 3000
}

.details-content::after,.details-content::before {
    content: '';
    position: relative;
    display: inline-block;
    width: auto;
    height: 100%;
    vertical-align: middle
}

.details-content>span {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1
}

.details-center {
    position: relative;
    display: inline-block;
    width: 90%;
    vertical-align: middle;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    margin: 0 auto;
    z-index: 5;
    background-color: #fff
}

.details-center h2 {
    color: #002134;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    display: block;
    margin: 0 0 20px 0
}

.details-outer {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 30px 50px 50px 50px;
    background-color: #fff
}

.details-text {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30px 0;
    display: block;
    border-bottom: 1px dotted #404040;
    border-top: 1px dotted #404040;
    font-size: 15px;
    line-height: 1.4;
    color: #404040;
    text-align: left
}

.details-text h3 {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #404040;
    text-transform: uppercase
}

.details-text p {
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6
}

.details-text img,.details-text p img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    border: 10px solid rgba(255,255,255,.5);
    border-radius: 30px
}

.details-text ol,.details-text ul {
    text-align: left;
    list-style: inherit
}

.details-text li,.details-text ol li,.details-text p span,.details-text span {
    text-align: left;
    margin: 5px 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit
}

.details-text a {
    color: #009ce0;
    font-weight: 700
}

.details-text a:hover {
    color: #003768
}

.details-text table {
    display: inline-block;
    width: auto;
    max-width: 100%;
    border-spacing: 1px;
    border-spacing: 1px;
    margin: 20px auto;
    table-layout: fixed
}

.details-text table td,.details-text table th {
    padding: 10px 10px 12px 10px;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    line-height: 1.2;
    border-radius: 5px
}

.details-text table tbody:only-child tr:first-child td,.details-text table thead td,.details-text table thead th {
    background-color: rgba(0,0,0,.3);
    color: #fff;
    font-size: 15px;
    text-align: center
}

.details-center {
    opacity: 0
}

.details-content .close-popup {
    top: 30px;
    right: 30px;
    position: fixed
}

.download-but {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0 0 80px 0;
    text-align: center
}

.download-but a {
    position: relative;
    display: inline-block;
    color: #fff;
    padding: 20px 80px 20px 30px;
    background-color: #db9614;
    text-align: left;
    border-radius: 30px;
    transition: all .3s ease-in-out
}

.download-but a::before {
    content: '';
    position: absolute;
    left: -7px;
    top: -7px;
    width: calc(100% + 14px);
    height: calc(100% + 14px);
    border-radius: 30px;
    border: 1px solid #db9614;
    transition: all .3s ease-in-out
}

.download-but a::after {
    content: '';
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -20px;
    background: url(../images/select.png) no-repeat center center;
    background-color: #fbb124;
    border-radius: 50%;
    transition: all .3s ease-in-out
}

.details-center .download-but span {
    font-size: 20px;
    font-weight: 400
}

.details-center .download-but h3 {
    margin-top: 5px;
    font-size: 36px;
    font-weight: 700
}

.thank-you .details-center {
    padding: 80px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 30px solid #fff
}

.thank-you .details-outer {
    background-color: transparent;
    padding: 0
}

.thank-you .details-text {
    padding: 0;
    text-align: center;
    border: none
}

.thank-you .details-text::after,.thank-you .details-text::before {
    content: '';
    position: relative;
    display: inline-block;
    width: 200px;
    height: 1px;
    margin: 30px 0;
    background-color: #fff
}

.thank-you h2 {
    color: #fff;
    font-size: 100px;
    line-height: 1;
    margin: 0
}

.thank-you p {
    color: #fff;
    font-size: 18px
}

.thank-you .details-text p:last-child {
    margin: 0
}

.account {
    background-color: #e2e2e2;
    padding: 60px 0
}

.order-main {
    display: block;
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: auto
}

.order-item {
    display: block;
    position: relative;
    height: auto;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 20px
}

.code-oder {
    margin-bottom: 5px
}

.top-order-item {
    display: block;
    position: relative;
    height: auto;
    padding: 15px 20px;
    border-bottom: 1px solid #ddd
}

.txt-order {
    display: block;
    position: relative;
    height: auto;
    padding: 20px
}

.order-span {
    background-color: #eff0f5;
    padding: 5px 10px;
    border-radius: 40px
}

.txt-order h3 {
    font-weight: 700;
    padding-right: 10px
}

.order-qty {
    width: 100px
}

.order-delivery {
    width: 200px;
    max-width: 200px
}

.order-img {
    width: 100px;
    max-width: 100px
}

.order-img img {
    width: 80px
}

.txt-order .cart-group li {
    font-size: 15px
}

.top-order-main {
    overflow: hidden;
    display: block;
    position: relative;
    height: auto;
    width: 100%;
    padding: 30px 0;
    background-color: #c2c8cc
}

.top-order-main h2 {
    float: left;
    font-size: 36px;
    text-transform: uppercase;
    margin-top: 5px;
    font-weight: 200;
    color: #003f62
}

.update-account {
    float: right;
    display: inline-block;
    width: auto;
    height: auto;
    height: 50px;
    padding: 0 30px;
    background-color: #003f62;
    line-height: 50px;
    font-size: 18px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transition: all .3s ease-in-out
}

.update-account:hover {
    background-color: #6d6d6d
}

.mobile-show {
    display: none
}

.item-group {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px
}

.txt-order .item-group:last-child {
    margin: 0;
    border: 0;
    padding: 0
}

.text-center {
    text-align: center
}

.top-order-main.text-center h2 {
    float: none
}

.change-password {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 30px
}

.change-password h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333
}

.details-text .form-box {
    opacity: 1;
    width: 100%;
    max-width: none
}

.details-text .form-box .require-col {
    box-shadow: none;
    padding: 0;
    background: 0 0
}

.popup-account .details-center {
    max-width: 800px
}

.popup-account .details-outer {
    padding-bottom: 0
}

.popup-account .form-box {
    background: 0 0;
    padding: 0
}

.popup-account .form-box .outer-but {
    float: none
}

.login-user {
    background: url(../images/login-user.svg) no-repeat center center/contain;
    background-color: #003f62;
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 50%
}

.search-content {
    background-color: #fff;
    z-index: 1
}

.search-content .title {
    padding: 0 0 20px 0
}

.search-content h2 {
    font-size: 36px
}

.search-result {
    position: relative;
    display: block;
    width: 90%;
    height: auto;
    max-width: 740px;
    margin: 0 auto
}

.search-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    counter-reset: div
}

.resultCount {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    text-align: right
}

.resultCount span {
    font-size: 16px;
    line-height: 1.4;
    color: #444;
    font-weight: 700;
    text-transform: uppercase
}

.item-search {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    transition: all .3s ease-in-out
}

.item-search a {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 30px;
    transition: all .3s ease-in-out;
    border: 1px solid #ddd;
    border-top: 0;
    color: #333
}

.item-search:first-child a {
    border-top: 1px solid #ddd
}

.item-search:nth-child(odd) a {
    background-color: #fff
}

.item-search:nth-child(even) a {
    background-color: #ebeef1
}

.item-link-name {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    font-size: 13px;
    line-height: 1.4;
    margin: 7px 0;
    word-break: break-word;
    font-family: Arial,Helvetica,sans-serif
}

.item-search::before {
    content: counter(div) " ";
    counter-increment: div;
    position: absolute;
    left: -20px;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 0;
    line-height: 40px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    text-align: center;
    transition: all .3s ease-in-out;
    z-index: 1
}

.item-search:nth-child(-n+9)::before {
    content: "0" counter(div)
}

.item-search:nth-child(odd)::before {
    background-color: #2274a2
}

.item-search:nth-child(even)::before {
    background-color: #0c557d
}

.item-search h3 {
    font-size: 15px;
    font-weight: 700;
    color: #003f62
}

.item-date {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 13px;
    color: #999;
    margin: 0 0 5px 0
}

.item-search p {
    font-size: 13px;
    line-height: 1.4;
    margin: 7px 0;
    font-family: Arial,Helvetica,sans-serif
}

.item-search h3 strong,.item-search p strong {
    font-weight: 700
}

.item-search p .item-date {
    display: inline-block;
    width: auto;
    margin: 0 5px 0 0
}

.search-mess {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 30px 0
}

.search-mess p {
    font-size: 18px;
    line-height: 1.4;
    color: #333;
    text-transform: uppercase;
    text-align: center
}

.search-content .page-num {
    max-width: 252px
}

.search-tempty {
    padding: 5% 0
}

.search-tempty h2 {
    font-size: 60px;
    text-transform: uppercase;
    text-align: center
}

.log-out {
    position: fixed;
    right: 30px;
    top: 120px;
    width: 60px;
    height: 60px;
    padding: 5px;
    box-shadow: 0 0 0 5px #fff;
    line-height: 50px;
    background-color: #003f62;
    color: #fff;
    margin: -30px 0 0 0;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
    transition: all .3s ease-in-out
}

.log-out h3 {
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1.2;
    text-align: center;
    vertical-align: middle
}

.log-out.active {
    display: block!important
}

.log-out.hide {
    top: 95px
}

.log-out.on-show {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.googlemap {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    max-height: 650px;
    display: block;
    box-shadow: 0 10px 50px rgba(0,0,0,.1);
    z-index: 1
}

.all-album {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto;
    z-index: 3600
}

.album-load {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    opacity: 0
}

.album-center {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: block
}

.album-pic-center {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    display: block
}

.album-pic-center img {
    width: auto;
    height: auto;
    position: relative;
    display: inline-block;
    margin: auto;
    vertical-align: middle;
    max-height: 85%;
    max-width: 85%
}

.has-thumb .album-pic-center img {
    max-width: 80%;
    max-height: 80%
}

.album-pic-center .pic-name {
    position: absolute;
    left: 0;
    top: 1.5%;
    z-index: 5;
    width: 100%;
    height: auto
}

.album-pic-center .pic-name h2 {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    text-align: left;
    position: relative;
    display: block;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5)
}

.album-pic-center .pic-name h2>span {
    transition: all .8s ease;
    opacity: 0
}

.album-pic-center .pic-name.move h2>span.move {
    opacity: 1
}

.album-pic-center .pic-name h3 {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
    display: inline-block;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    text-transform: uppercase;
    padding: 10px 20px
}

.album-pic-center .pic-name h3>span>span {
    transition: all .9s ease;
    opacity: 0
}

.album-pic-center .pic-name.move h3>span>span.move {
    opacity: 1
}

.all-pics {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 4000;
    display: none
}

.all-pics.show {
    display: block
}

.all-pics .text-length {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9998;
    opacity: 0;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto;
    text-align: center
}

.all-pics .text-length h3 {
    font-weight: 500;
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
    position: relative;
    text-align: center;
    padding: 10px 20px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    text-transform: uppercase;
    background-color: rgba(0,0,0,.5);
    display: inline-block
}

.full {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: block
}

.full img {
    width: auto;
    height: auto;
    outline: 0;
    border: none;
    margin: 0 auto;
    display: block;
    opacity: 0;
    position: relative;
    cursor: url(../images/openhand.png) 6 8,move;
    z-index: 5
}

.full.size-large img {
    max-width: inherit;
    max-height: inherit;
    min-width: 80%
}

.full span {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.dragscroll {
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto
}

.pinch-zoom-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    margin: 0
}

.pinch-zoom {
    width: 100%;
    left: 0;
    top: 0;
    text-align: center
}

.pinch-zoom:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.pinch-zoom:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.pinch-zoom>img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0 -3px
}

.zoom {
    width: 76px;
    height: 76px;
    position: absolute;
    right: 40px;
    top: 40px;
    border-radius: 50%;
    z-index: 20;
    display: block
}

.zoom::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #bbb;
    transition: all .3s ease-in-out
}

.zoom::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url(../images/zoom.svg) no-repeat center center;
    background-size: cover
}

.allvideo {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    display: none;
    z-index: 2200
}

.video-list {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100
}

.video-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    overflow: hidden;
    z-index: 100
}

.video-skin {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    z-index: 10
}

.video-wrap iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    display: block;
    top: 0;
    left: 0;
    z-index: 10
}

.container-zoom img.zoomscale {
    cursor: zoom-in
}

.container-zoom img.zoomin {
    cursor: ew-resize;
    cursor: e-resize;
    cursor: url(../images/grabbing.png) 8 8,move
}

.touch {
    background-image: url(../images/pinchzoom.svg);
    background-position: left top;
    background-repeat: no-repeat
}

.cursor {
    cursor: url(../images/openhand.png) 8 8,move
}

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

.go-top {
    position: fixed;
    box-shadow: 0 0 20px 3px rgba(0,0,0,.2);
    right: 25px;
    bottom: 25px;
    width: 60px;
    height: 60px;
    background: url(../images/top.png) no-repeat center center;
    background-color: #db9614;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    cursor: pointer;
    opacity: 0;
    z-index: -9999;
    display: none
}

.go-top.show {
    opacity: 1;
    mix-blend-mode: luminosity;
    display: block;
    z-index: 20
}

.go-top:hover {
    background-color: rgba(0,0,0,.2)
}

.scroll-down {
    width: 40px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: auto;
    background: url(../images/mouse_down.svg) no-repeat center center;
    display: none;
    z-index: 100;
    margin-top: -20px;
    margin-left: -20px
}

.scroll-down.show {
    display: block;
    cursor: pointer
}

.scroll-down.show::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.scroll-down.show::after {
    background-color: #fff;
    width: 5px;
    height: 10px;
    border-radius: 10px;
    animation: trackBallSlide 3s linear infinite
}

.scroll-down.hide {
    display: none
}

.wheel {
    border: 1px solid rgba(255,255,255,.5);
    width: 30px;
    transition: opacity .3s ease-in-out;
    height: 54px;
    position: fixed;
    right: 20px;
    bottom: 30px;
    border-radius: 50px;
    opacity: 0;
    pointer-events: none;
    z-index: 20
}

.wheel.transparent {
    background-color: transparent
}

.wheel.show {
    opacity: 1
}

.wheel.show::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.wheel.show::after {
    background-color: #fff;
    width: 5px;
    height: 10px;
    border-radius: 10px;
    animation: trackBallSlide 3s linear infinite
}

.slide-nav {
    position: absolute;
    left: 50%;
    bottom: -40px;
    width: 110px;
    height: 50px;
    margin-left: -55px;
    z-index: 90;
    display: none
}

.next-prev {
    position: absolute;
    left: 20px;
    bottom: -20px;
    width: 160px;
    margin: 0;
    height: 80px;
    display: block;
    text-align: center;
    z-index: 15;
    opacity: 0
}

.prevslide {
    position: absolute;
    height: 60px;
    width: 60px;
    left: 0;
    top: 0;
    background: url(../images/previous.svg) no-repeat center center/contain;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
    opacity: 1;
    background-color: rgba(255,255,255,.1);
    z-index: 99999
}

.nextslide {
    position: absolute;
    height: 60px;
    width: 60px;
    right: 0;
    top: 0;
    background: url(../images/next.svg) no-repeat center center/contain;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
    opacity: 1;
    background-color: rgba(255,255,255,.1);
    z-index: 99999
}

.prevslide:hover {
    background-color: rgba(0,0,0,.3);
    box-shadow: 0 0 20px rgba(255,255,255,.8)
}

.nextslide:hover {
    background-color: rgba(0,0,0,.3);
    box-shadow: 0 0 20px rgba(255,255,255,.8)
}

.nextslide.disable,.prevslide.disable {
    opacity: .3;
    pointer-events: none
}

.slide-pic-nav {
    width: 100%;
    position: absolute;
    height: auto;
    top: 50%;
    margin-top: -30px;
    bottom: auto;
    left: 0;
    z-index: 10;
    display: none
}

.next-pic {
    background: url(../images/next.svg) no-repeat center center/contain;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 30px;
    top: 0;
    cursor: pointer;
    transition: all .3s ease-in-out;
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.5);
    background-color: rgba(255,255,255,.1)
}

.prev-pic {
    background: url(../images/previous.svg) no-repeat center center/contain;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 30px;
    top: 0;
    cursor: pointer;
    transition: all .3s ease-in-out;
    -ms-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0 0 60px rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.5);
    background-color: rgba(255,255,255,.1)
}

.next-pic:not(.disabled):hover,.prev-pic:not(.disabled):hover {
    background-color: rgba(255,255,255,.3);
    box-shadow: 0 0 20px rgba(255,255,255,.8)
}

.next-pic.disabled,.prev-pic.disabled {
    opacity: .3;
    cursor: default
}

.album-box .slide-prev {
    left: 3%;
    width: 50px;
    height: 100px;
    background: url(../images/previous1.svg) no-repeat center center/contain
}

.album-box .slide-next {
    right: 3%;
    width: 50px;
    height: 100px;
    background: url(../images/next1.svg) no-repeat center center/contain
}

.member-box .slide-prev {
    left: -70px;
    width: 50px;
    height: 100px;
    margin: -50px 0 0 0;
    background: url(../images/previous1.svg) no-repeat center center/contain
}

.member-box .slide-next {
    right: -70px;
    width: 50px;
    height: 100px;
    margin: -50px 0 0 0;
    background: url(../images/next1.svg) no-repeat center center/contain
}

.bg-cover {
    position: absolute;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    transition: transform 3s ease-in-out;
    backface-visibility: hidden;
    background-image: url(https://malloca.com/pictures/catalog/about/background06.png);
}

.bg-cover::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,33,52,.5);
    mix-blend-mode: multiply;
    backface-visibility: hidden
}

.project-pic:hover .bg-cover {
    transform: scale(1.11)
}

.img-bg-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    transition: transform 1s ease-in-out
}

.img-bg-cover img {
    opacity: 0;
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none
}

.bg-overlay {
    height: 100vh;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/pattern.png) repeat;
    z-index: -10
}

.bg-overlay::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/shadow.png) no-repeat center center;
    background-size: cover
}

.overlay-dark {
    background: linear-gradient(135deg,rgba(8,0,0,.95) 0,#003f62 100%);
    height: 0;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    -ms-touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto;
    transition: height .8s ease-in-out;
    z-index: 1500
}

.overlay-dark.show {
    height: 100%
}

.bg-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0
}

.bg-fixed {
    background-attachment: fixed;
    backface-visibility: hidden
}

.bg-fixed::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,rgba(0,72,53,.3) 0,rgba(176,92,30,.3) 100%);
    mix-blend-mode: multiply
}

.view-album {
    background-color: #697a86;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -35px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 50%;
    z-index: 10;
    overflow: hidden
}

.view-album span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(0);
    background: linear-gradient(0deg,#3f6e8f 0,#003f62 100%);
    border-radius: 50%
}

.view-album::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/album.svg) no-repeat 50%/80%
}

.model-box .view-album {
    top: auto;
    bottom: 25px;
    margin: 0 0 0 -35px
}

.view-video {
    background-color: #697a86;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -35px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 50%;
    z-index: 10;
    overflow: hidden
}

.view-video span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(0);
    background: linear-gradient(0deg,#db9615,#a88363);
    border-radius: 50%
}

.view-video::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/player.svg) no-repeat 50%/80%
}

.player-vid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    background: linear-gradient(0deg,rgba(255,207,138,.7) 0,#0e5945 70%);
    margin: -87px 0 0 -87px;
    border-radius: 50%;
    z-index: 10
}

.player-vid span {
    position: absolute;
    left: 27px;
    top: 27px;
    width: calc(100% - 54px);
    height: calc(100% - 54px);
    background: url(../images/player.svg) no-repeat 50%/80%;
    z-index: 3
}

.player-vid::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(255,0,0,.7) 0,#9a2525 70%);
    transition: all .3s ease-in-out;
    transform: scale(0);
    border-radius: 50%;
    z-index: 2
}

.player-vid:hover::before {
    transform: scale(1)
}

.player-vid:hover::after {
    animation: scaleUpTo 1.5s linear infinite
}

.player-vid.hide {
    display: none;
    opacity: 0
}

.player-vid.show {
    display: block;
    opacity: 1
}

.view-360 {
    background-color: #697a86;
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -35px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 50%;
    z-index: 10;
    overflow: hidden
}

.view-360 span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: scale(0);
    background: linear-gradient(0deg,#ff7200,#ffc20e);
    border-radius: 50%
}

.view-360::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/360deg.svg) no-repeat 50%/80%
}

.model-box .view-360 {
    top: auto;
    bottom: 25px;
    margin: 0 0 0 -35px
}

.hotline-1 {
    position: fixed;
    bottom: 33px;
    left: 20px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    width: auto;
    height: auto;
    padding: 10px 15px 10px 40px;
    border-radius: 30px;
    display: block;
    z-index: 10
}

.hotline-1 span {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 5px;
    top: 5px;
    background: url(../images/hotline.svg) no-repeat center center/contain;
    display: block
}

.hotline-1::after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    display: block;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 30px;
    background-color: rgba(255,255,255,.2);
    z-index: -2
}

.hotline-1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: rgba(0,0,0,.5);
    z-index: -1
}

.hotline-1.special-grad::before {
    background: linear-gradient(270deg,#ff7200,#ffc20e,#003f62);
    background-size: 400% 400%;
    animation: BorderBox 3s infinite
}

.hotline-1.special-grad::after {
    left: -5px;
    top: -5px;
    display: block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background-color: rgba(255,255,255,.2);
    z-index: -2
}

.icon-360 {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    color: #fff;
    padding: 10px;
    position: fixed;
    left: 180px;
    bottom: 25px;
    z-index: 12
}

.icon-360::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    left: -5px;
    top: -5px;
    background-color: rgba(0,0,0,.5);
    border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0,0,0,.2);
    z-index: -1
}

.icon-360::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: -1
}

.icon-360 svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.icon-360 svg path {
    stroke-miterlimit: 10;
    stroke: #fff;
    stroke-width: 0;
    stroke-dasharray: 800;
    stroke-dashoffset: 800
}

.icon-360.special-grad::before {
    background: linear-gradient(270deg,#ff7200,#ffc20e,#003f62);
    background-size: 400% 400%;
    animation: BorderBox 3s infinite
}

.icon-sale {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    color: #fff;
    padding: 10px;
    position: fixed;
    left: 333px;
    bottom: 25px;
    z-index: 12
}

.icon-sale::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: -1
}

.icon-sale svg {
    width: 94%;
    height: 94%;
    position: absolute;
    left: 3%;
    top: 3%
}

.icon-sale svg path {
    stroke-miterlimit: 10;
    stroke: #fff;
    stroke-width: 0;
    stroke-dasharray: 800;
    stroke-dashoffset: 800
}

.icon-sale::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    display: block;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    background-color: rgba(0,0,0,.5);
    border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0,0,0,.2);
    z-index: -1
}

.icon-sale.special-grad::before {
    background: linear-gradient(270deg,#ff7200,#ffc20e,#003f62);
    background-size: 400% 400%;
    animation: BorderBox 3s infinite
}

.icon-youtube {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    color: #fff;
    padding: 10px;
    position: fixed;
    left: 258px;
    bottom: 25px;
    z-index: 12
}

.icon-youtube::before {
    content: '';
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    position: absolute;
    left: -5px;
    top: -5px;
    background-color: rgba(0,0,0,.5);
    border-radius: 50%;
    box-shadow: 0 20px 30px rgba(0,0,0,.2);
    z-index: -1
}

.icon-youtube::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: -1
}

.icon-youtube svg {
    width: 98%;
    height: 98%;
    position: absolute;
    left: 1%;
    top: 1%
}

.icon-youtube svg path {
    stroke-miterlimit: 10;
    stroke: #fff;
    stroke-width: 0;
    stroke-dasharray: 800;
    stroke-dashoffset: 800
}

.icon-youtube.special-grad::before {
    background: linear-gradient(270deg,#ff7200,#ffc20e,#003f62);
    background-size: 400% 400%;
    animation: BorderBox 3s infinite
}

.close-video {
    background: url(../images/close.svg) no-repeat center center/cover;
    display: block;
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: calc(50% - 20px);
    bottom: auto;
    margin: 0;
    transition: all .3s ease-in-out;
    border-radius: 50%;
    display: block;
    background-color: rgba(255,255,255,0);
    box-shadow: 0 0 10px rgba(255,255,255,0);
    border: 1px solid rgba(255,255,255,.6);
    z-index: 999999
}

.close-video:hover {
    background-color: rgba(255,255,255,.1);
    box-shadow: 0 0 30px 0 rgba(255,255,255,.3)
}

.close-pics {
    background: url(../images/close.svg) no-repeat center center/cover;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    font-size: 0;
    cursor: pointer;
    position: fixed;
    right: 20px;
    top: 20px;
    left: auto;
    bottom: auto;
    margin: 0;
    transition: all .3s ease-in-out;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 60px rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.5);
    background-color: rgba(255,255,255,.1);
    z-index: 9999
}

.close-pics:hover {
    background-color: rgba(255,255,255,.3);
    box-shadow: 0 0 20px rgba(255,255,255,.8)
}

.close-pics-small {
    background: url(../images/close.svg) no-repeat center center/cover;
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: fixed;
    left: 50%;
    top: 10px;
    margin-left: -20px;
    border: 1px solid rgba(255,255,255,.5);
    background-color: rgba(0,0,0,.1);
    border-radius: 50%;
    display: none;
    z-index: 99999
}

.close-album {
    background: url(../images/close.svg) no-repeat center center/cover;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    font-size: 0;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 20px;
    left: auto;
    bottom: auto;
    margin: 0;
    transition: all .3s ease-in-out;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 60px rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.5);
    background-color: rgba(255,255,255,.1);
    z-index: 9999
}

.close-album:hover {
    background-color: rgba(255,255,255,.3);
    box-shadow: 0 0 20px rgba(255,255,255,.8)
}

.close-popup {
    background: url(../images/close.svg) no-repeat 50%/70%;
    background-color: #db9614;
    padding: 0;
    border: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    bottom: 30px;
    border-radius: 50%;
    display: block;
    z-index: 999999
}

.close-popup::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border: 1px solid #db9614;
    border-radius: 50%;
    transition: all .3s ease-in-out
}

.close-popup:hover::after {
    border: 10px solid #fff
}

.close-top {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(../images/close2.svg) no-repeat center center;
    background-size: contain;
    background-color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
    cursor: pointer;
    z-index: 9
}

.close-top:hover {
    transform: scale(.9)
}

.close-details {
    position: absolute;
    left: 50%;
    bottom: -40px;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 0 0 0 -40px;
    background: url(../images/close.svg) no-repeat center center/contain;
    background-color: #0680c2;
    border: 3px solid #fff;
    box-shadow: 5px 5px 0 rgba(0,0,0,.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
    cursor: pointer;
    z-index: 30
}

.close-details:hover {
    transform: scale(.9)
}

.no-scroll {
    overflow-x: hidden;
    overflow-y: hidden!important;
    overflow: hidden
}

.wrap-page {
    width: 100%;
    max-width: 900px;
    position: relative;
    margin: 0 auto;
    height: auto
}

.no-link {
    pointer-events: none
}

.level-index-out {
    z-index: -9999;
    pointer-events: none
}

.level-index-in {
    z-index: 9999
}

.visible {
    overflow: visible
}

.TA-center .slide-wrapper {
    width: 100%!important;
    justify-content: center
}

.thumb-box.TA-center .slide-item {
    width: auto!important
}

.two-column {
    column-count: 2;
    column-gap: 40px;
    text-align: justify
}

.display-none {
    display: none!important
}

.desktop {
    display: block
}

.mobile {
    display: none
}

img.desktop {
    display: block
}

img.mobile {
    display: none
}

.map-background {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat
}

.map-background img {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0
}

.map-background canvas {
    width: 2000px;
    height: 1125px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    display: block;
    opacity: 1
}

.img-moving {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    cursor: url(../images/hand.png) 6 8,move;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: -moz-none;
    -ms-user-select: auto
}

.img-moving img {
    transform: translateZ(0);
    position: absolute;
    top: 0;
    left: 0
}

.hidemouse {
    pointer-events: none
}

#contact-loader {
    position: fixed;
    background: url(../images/cycle.png) no-repeat center center;
    top: 50%;
    left: 50%;
    z-index: 110000;
    width: 82px;
    height: 82px;
    margin: -41px 0 0 -41px;
    border-radius: 50%;
    animation: Rotate 2.5s linear infinite;
    display: none
}

.class-hidden {
    display: none
}

.contact-success,.register-success {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -150px;
    padding: 20px;
    font-size: 13px;
    line-height: 1.4;
    width: 300px;
    height: auto;
    background-color: #c30004;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    z-index: 99999;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5)
}

.color-red {
    background-color: #700809;
    color: #fff
}

.color-blue {
    background-color: #042750;
    color: #fff
}

.inputContainer {
    position: relative;
    float: left
}

.formError {
    position: absolute;
    top: -30px;
    left: 20px;
    display: block;
    cursor: pointer;
    z-index: 5000
}

.formErrorContent {
    background-color: rgba(209,0,8,.8);
    position: relative;
    display: inline-block;
    color: #fff;
    width: auto;
    height: auto;
    max-width: 300px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    padding: 8px 12px;
    border-radius: 10px;
    z-index: 5001
}

.formErrorContent::after {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 7px 0 7px;
    border-color: rgba(209,0,8,.8) transparent transparent transparent
}

.greenPopup .formErrorContent {
    background-color: #ef402a
}

.blackPopup .formErrorContent {
    background-color: #393939;
    color: #fff
}

.ajaxSubmit {
    padding: 20px;
    background-color: #ef402a;
    display: none
}

.bookshelf-page .outer-nav {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0;
    text-align: center;
    z-index: 5
}

.bookshelf-page .outer-nav:not(.second) h2 {
    position: relative;
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-black-alpha-04);
    padding: 20px 5%;
    text-transform: uppercase;
    z-index: -1
}

.bookshelf-page .title-page {
    display: none
}

.bookshelf-page .outer-nav:not(.second) {
    display: none
}

.title-cataloge {
    position: absolute;
    left: 0;
    top: 12vh;
    width: 10vw;
    height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5
}

.title-cataloge h2 {
    position: relative;
    display: block;
    transform: rotate(-90deg);
    font-size: 8vh;
    white-space: nowrap;
    color: var(--color-white-alpha-03);
    font-weight: 700;
    text-transform: uppercase
}

.bookshelf-page .bg-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.content-bookshelf {
    min-height: 100vh;
    display: flex;
    align-items: center
}

.sub-book {
    position: fixed;
    width: auto;
    height: auto;
    margin-right: 15px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20
}

.sub-book ul {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.sub-book li {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 1px 0;
    box-shadow: 0 20px 30px var(--color-black-alpha-01)
}

.sub-book li a {
    position: relative;
    display: block;
    padding: 10px 15px;
    text-transform: uppercase;
    vertical-align: top;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-white);
    background-color: var(--color-black-alpha-04);
    font-family: 'Roboto Condensed',sans-serif
}

.sub-book li.current a {
    color: var(--color-highlight);
    pointer-events: none
}

.bookshelf {
    position: relative;
    width: 100%;
    height: auto;
    /*margin: 100px 0 40px 0;*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5
}

.bookshelf-inner {
    position: relative;
    width: 1100px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(2px 10px 10px var(--color-black-alpha-05))
}

.bookshelf-row {
    position: relative;
    width: 100%;
    height: calc(288/1240 * 1100px);
    display: flex;
    justify-content: center
}

.bookshelf-col {
    position: relative;
    width: 85%;
    height: 75%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap
}

.bookshelf-pdf {
    position: relative;
    width: calc(100%/5);
    height: 100%;
    display: flex;
    justify-content: center
}

.bookshelf-link {
    position: relative;
    display: block;
    width: 135px;
    height: 200px;
    margin: auto
}

.bookshelf-link h3 {
    position: absolute;
    width: auto;
    max-width: 150px;
    height: auto;
    left: -60px;
    top: -40px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 8px 20px 0 var(--color-black-alpha-02);
    transform: scale3d(0,1,1);
    transform-origin: top right;
    opacity: 0;
    z-index: 10
}

.bookshelf-link h3::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: -8px;
    top: calc(50% - 8px);
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent var(--color-white)
}

.bookshelf-link a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    color: currentColor;
    overflow: hidden;
    z-index: 1
}

.bookshelf-link a::after,.bookshelf-link a::before {
    content: "";
    position: absolute;
    display: block;
    width: inherit;
    height: inherit;
    top: 0;
    background: var(--color-white);
    border: 1px solid var(--color-bg-dark);
    z-index: -1
}

.bookshelf-link::before {
    left: -3px
}

.bookshelf-link::after {
    left: -6px
}

.bookshelf-link img {
    position: relative;
    display: block;
    width: inherit;
    height: inherit;
    transform-origin: 0 50%;
    transform: rotateY(0);
    perspective: 1000px
}

.top-shelf .bookshelf-link {
    bottom: -10px
}

.center-shelf .bookshelf-link {
    bottom: -5px
}

.bottom-shelf .bookshelf-link {
    bottom: 0
}

.top-shelf {
    background-image: url(https://malloca.com/catalog/view/theme/default/images/bookshelf-top.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom
}

.center-shelf {
    background-image: url(https://malloca.com/catalog/view/theme/default/images/bookshelf-center.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom
}

.bottom-shelf {
    background-image: url(https://malloca.com/catalog/view/theme/default/images/bookshelf-bottom.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top
}

.no-display {
    display: none
}

.load-iframe {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0
}

.load-text .div-iframe {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: unset;
    display: block;
    margin: 20px 0
}

.load-text .div-iframe iframe {
    position: relative;
    width: 100%;
    height: auto;
    min-height: var(--this-height);
    display: block
}

.load-data .div-iframe {
    position: relative;
    width: 100%;
    height: auto;
    min-height: var(--this-height);
    max-width: 100%;
    aspect-ratio: unset;
    display: block;
    margin: 20px 0
}

@media screen and (max-width: 1300px) and (max-height:700px) {
    .wrap-footer li {
        margin-bottom:15px
    }

    .social {
        padding: 5px 0
    }

    .phone-footer {
        margin-bottom: 0
    }

    .txt-info {
        max-width: 500px
    }

    .language {
        right: 15px
    }

    .search-but,.search-form {
        right: 60px
    }

    .cart-login {
        right: 100px
    }

    .txt-info h2 {
        font-size: 40px
    }

    .group-central[data-name=showroom-home] .txt-info h2 {
        font-size: 50px
    }
}

@media screen and (max-width: 1500px) {
    .cart-login a {
        margin-right:5px
    }

    .right-detail hr {
        margin: 20px 0
    }

    .list-view {
        width: 400px
    }

    .map-view {
        width: calc(100% - 400px)
    }

    .title-footer {
        font-size: 14px
    }

    .icon-360,.icon-sale,.icon-youtube {
        width: 50px;
        height: 50px
    }

    .hotline-1 {
        bottom: 30px
    }

    .list-conpany-info {
        display: grid;
        grid-template-columns: auto auto
    }

    .content-bookshelf {
        align-items: flex-start;
        min-height: inherit
    }

    .bookshelf-inner {
        width: 1000px
    }

    .bookshelf-row {
        height: calc(288/1240 * 1000px)
    }

    .bookshelf-link {
        width: 125px;
        height: 183px
    }

    .sub-book li a {
        font-size: 13px
    }
}

@media screen and (max-width: 1300px) {
    .cart-login {
        top:10px;
        right: 15px
    }

    .cart-login a {
        width: 30px;
        height: 30px
    }

    .search-but {
        top: 50px;
        right: 55px;
        width: 30px;
        height: 30px
    }

    .search-form {
        right: 50px
    }

    .language {
        right: 20px;
        top: 50px
    }

    .language button {
        width: 30px;
        height: 30px;
        font-size: 11px;
        line-height: 28px
    }

    .footer-inner .wrap-footer {
        max-width: 90vw
    }

    .right-detail h3 {
        font-size: 25px;
        margin-bottom: 20px
    }

    .right-detail {
        padding-right: 5%
    }

    .career-list th {
        padding: 15px
    }

    .career-list td a,.career-list th {
        font-size: 13px
    }

    .career-list td {
        font-size: 13px
    }

    .career-list th:nth-child(1) {
        width: 50px;
        padding: 0
    }

    .career-list th:nth-child(3) {
        width: 80px
    }

    .career-list th:nth-child(4) {
        width: 120px
    }

    .career-list th:nth-child(5) {
        width: 120px
    }

    .career-list th:nth-child(6) {
        width: 140px
    }

    .career-list th:nth-child(7) {
        width: 120px
    }

    .bookshelf-inner {
        width: 940px
    }

    .bookshelf-row {
        height: calc(288/1240 * 940px)
    }

    .bookshelf-link {
        width: 118px;
        height: 172px
    }

    .top-shelf .bookshelf-link {
        bottom: -6px
    }

    .sub-book li a {
        font-size: 12px
    }
}

@media screen and (max-width: 1200px) {
    .item-product-list .price {
        margin-bottom:20px
    }

    .icons-detail {
        margin-top: 20px
    }

    .right-detail .price {
        margin: 0;
        font-size: 20px
    }
}

@media screen and (max-width: 1100px) {


    .wheel {
        display: none
    }

    .social li a {
        width: 40px;
        height: 40px
    }

    .sub-nav li:last-child {
        margin-right: 5%
    }

    .sub-nav li a {
        transition: none;
        font-size: 13px;
        padding: 15px 10px
    }

    .outer-nav {
        padding: 0
    }

    .outer-nav.second.fixed {
        top: 60px
    }

    .video-youtube-full {
        height: auto
    }

    .youtube-video iframe {
        position: relative;
        height: calc(1125/2000 * 100vw);
        left: auto;
        top: auto;
        transform: translateY(0)
    }

    .control {
        font-size: 11px;
        padding: 10px;
        width: 100%;
        left: 0;
        bottom: 0;
        margin: 0
    }

    .control.hide {
        opacity: 1
    }

    .control button {
        width: 25px;
        height: 25px;
        transition: none;
        margin: 0 15px;
        pointer-events: auto
    }

    .control button:hover {
        opacity: 1
    }

    .control::after {
        transition: none;
        background-color: rgba(0,0,0,.5)
    }

    .play-button {
        width: 80px;
        height: 80px;
        margin: -40px 0 0 -40px
    }

    .video-wrap {
        width: 100%;
        height: 100%
    }

    .video-wrap iframe {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: auto;
        top: 0
    }

    .is-IOS .control,.is-IOS .play-button {
        display: none;
        z-index: -9999
    }

    .is-IOS .youtube-video iframe {
        z-index: auto
    }

    .view-album {
        width: 50px;
        height: 50px;
        right: auto;
        bottom: auto;
        left: 50%;
        top: 50%;
        margin: -25px 0 0 -25px;
        border: none
    }

    .view-album span {
        transition: none;
        transform: scale(1)
    }

    .view-video {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        border: none
    }

    .view-video span {
        transition: none;
        transform: scale(1)
    }

    .player-vid {
        width: 80px;
        height: 80px;
        margin: -40px 0 0 -40px
    }

    .player-vid span {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        left: 10px;
        top: 10px
    }

    .player-vid::before {
        transition: none
    }

    .player-vid:hover::before {
        transform: scale(0)
    }

    .player-vid:hover::after {
        animation: none
    }

    .view-project {
        width: 60px;
        height: 60px;
        margin: 0 0 0 -30px;
        border: none
    }

    .view-project span {
        transition: none;
        transform: scale(1)
    }

    .player {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px
    }

    .player::before {
        display: none
    }

    .video-box:hover .player::after {
        animation: none 0s linear infinite
    }

    .play-video {
        width: 80px;
        height: 80px;
        margin: -40px 0 0 -40px;
        transition: none
    }

    .play-video:hover {
        transform: none;
        background-color: transparent;
        box-shadow: none
    }

    .zoom::before {
        transform: none
    }

    .zoom:hover::before {
        background-color: #bbb
    }

    .album-pic-center img {
        max-width: 98%;
        max-height: inherit
    }

    .go-top {
        display: none!important
    }

    .button-btn {
        transform: none
    }

    .button-btn:hover {
        background-color: #ef402a
    }

    .button-btn:hover:before {
        border-color: #ef402a
    }

    .file-mark {
        transform: none
    }

    .status.hot a {
        transform: none
    }

    .status.hot a:hover {
        background-color: #ef402a
    }

    .close-popup {
        width: 35px;
        height: 35px
    }

    .close-popup::after {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px
    }

    .close-popup::after {
        transform: none
    }

    .close-popup:hover::after {
        border: 1px solid #db9614
    }

    .download-but a {
        transform: none
    }

    .download-but a::before {
        transform: none
    }

    .download-but a::after {
        transform: none
    }

    .content-page {
        width: 100%;
        height: auto;
        position: relative
    }

    .box-content {
        position: relative;
        height: auto;
        top: auto;
        left: auto;
        width: auto;
        display: block
    }

    .colum-box {
        position: relative;
        height: auto;
        width: 100%;
        float: left;
        display: block;
        margin: 0;
        padding: 0
    }

    .all-pics.show::after {
        content: '';
        background: url(../images/pinchzoom.svg) no-repeat left top;
        position: absolute;
        left: 0;
        top: 0;
        width: 80px;
        height: 80px
    }

    .full.lock {
        overflow-x: hidden
    }

    .full img {
        max-width: 100%;
        max-height: inherit
    }

    .all-pics .text-length h3 {
        font-size: 20px;
        line-height: 26px;
        padding: 10px 20px
    }

    .all-pics .text-length p {
        font-size: 16px;
        line-height: 22px
    }

    .slide-pic-nav {
        top: auto;
        margin-top: 0;
        bottom: 60px;
        left: 0
    }

    .next-pic {
        right: 10px;
        width: 40px;
        height: 40px;
        transition: none
    }

    .prev-pic {
        left: 10px;
        width: 40px;
        height: 40px;
        transition: none
    }

    .next-pic:hover,.next-pic:hover:not(.disabled),.prev-pic:hover,.prev-pic:hover:not(.disabled) {
        background-color: rgba(255,255,255,.1);
        box-shadow: 0 0 60px rgba(0,0,0,.2)
    }

    .next-pic.disabled,.prev-pic.disabled {
        opacity: .1
    }

    .allvideo {
        z-index: 5000;
        top: 0;
        background-image: none;
        -ms-transition: none;
        transition: none
    }

    .overlay-video {
        z-index: 1000;
        background-color: #000
    }

    .album-pic-center img {
        max-width: 98%;
        max-height: inherit
    }

    .center-no-paging .slide-buttons,.center-paging .slide-buttons {
        display: none
    }

    .center-no-paging .slide-pagination,.center-paging .slide-pagination {
        display: block
    }

    .close-album {
        right: auto;
        top: auto;
        left: 50%;
        margin-left: -20px;
        bottom: 20px;
        position: fixed;
        width: 40px;
        height: 40px;
        background-size: cover;
        transition: none
    }

    .close-album:hover {
        background-color: rgba(255,255,255,.1);
        box-shadow: none
    }

    .close {
        background: url(../images/close.svg) no-repeat center center;
        left: 50%;
        top: -20px;
        margin: 0 0 0 -20px;
        width: 40px;
        height: 40px;
        position: absolute;
        background-size: cover;
        border-radius: 50%;
        display: block;
        background-color: #c43a51;
        visibility: hidden;
        z-index: 10
    }

    .show .close {
        visibility: visible
    }

    .close-pics {
        display: none
    }

    .close-pics-small {
        display: block;
        background-size: cover
    }

    .close-top {
        width: 45px;
        height: 45px;
        right: 10px;
        top: 10px;
        margin: 0;
        transition: none
    }

    .close-top:hover {
        transform: scale(1)
    }

    .close-video {
        right: auto;
        left: 50%;
        top: 10px;
        margin-left: -20px;
        width: 40px;
        height: 40px;
        transition: none
    }

    .close-video:hover {
        background-color: rgba(255,255,255,.1);
        box-shadow: 0 0 10px rgba(255,255,255,0)
    }

    .thumb-content {
        bottom: 60px
    }

    .gallery-thumbs .item-container {
        width: 80px;
        height: 50px
    }

    .thumb-box {
        position: relative;
        bottom: auto;
        left: auto
    }

    .img-moving {
        overflow: visible;
        height: auto;
        cursor: default
    }

    .img-moving img {
        position: relative;
        top: auto!important;
        left: auto!important
    }

    .desktop {
        display: none
    }

    .mobile {
        display: block
    }

    img.desktop {
        display: none
    }

    img.mobile {
        display: block
    }

    .scroll-down {
        display: none
    }

    .bg-cover {
        transition: none
    }

    .project-pic:hover .bg-cover {
        transform: none
    }

    .slide-bg::after,.slide-bg::before {
        display: none
    }

    .bg-fixed {
        background-attachment: scroll
    }

    .list-result {
        overflow: visible;
        height: auto
    }

    .video-cover,.video-full {
        min-height: inherit
    }

    .video-full {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        min-height: inherit;
        transform: translate(0,0)
    }

    .box-video-center {
        height: calc(1125/2000 * 100vw);
        width: 100%;
        top: auto;
        left: auto;
        position: relative
    }

    .controls {
        bottom: 0;
        left: 0;
        margin: 0
    }

    .pic-video::after {
        display: none
    }

    .player-vid {
        transition: none;
        width: 80px;
        height: 80px;
        margin: -40px 0 0 -40px;
        background-color: rgba(0,0,0,.3);
        opacity: 1
    }

    .player-vid:hover {
        background-color: rgba(0,0,0,.3)
    }

    .controls.addshow {
        bottom: 10px
    }

    .is-IOS .controls {
        display: none
    }

    #home-page-full .controls.addshow {
        bottom: 10px
    }

    #home-page .slogan {
        bottom: auto;
        top: auto;
        position: relative;
        display: block;
        padding: 20px 0
    }

    #home-page .slogan.show span {
        opacity: 1
    }

    #home-page .slogan h2 {
        font-size: calc(100vw/30)
    }

    #home-page .slogan p {
        font-size: calc(100vw/40)
    }

    .group-central[data-name=banner-home] {
        background-color: #003f62
    }

    .slogan h2 {
        font-size: 30px;
        margin-bottom: 10px;
        padding-bottom: 10px
    }

    .slogan p {
        font-size: 20px
    }

    .box-slider {
        height: auto;
        float: none
    }

    .box-nav {
        display: none
    }

    .group-central {
        position: relative;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
        display: block;
        float: left;
        text-align: center;
        transform: translate(0,0)!important;
        z-index: auto!important
    }

    .content-main::after,.content-main::before {
        display: none
    }

    .content-main {
        position: relative;
        height: auto;
        left: auto;
        top: auto;
        padding: 30px 0 30px 0
    }

    .group-central[data-name=footer-home] .content-main {
        padding: 0
    }

    .group-central[data-name=promotion-home],.group-central[data-name=showroom-home] {
        height: 500px
    }

    .group-central .content-main {
        position: static;
        margin: 0
    }

    .group-central .bg-cover {
        height: 100%!important
    }

    .group-central[data-name=banner-home] .slide-controls {
        position: absolute;
        bottom: 5px
    }

    .view-a {
        margin-top: 0
    }

    .view-a:after {
        margin: 0;
        width: 23px;
        height: 23px
    }

    .group-central[data-name=showroom-home] .txt-info h2,.txt-info h2 {
        font-size: 30px;
        font-weight: 500
    }

    .title-main-home h2 {
        font-size: 30px;
        font-weight: 500
    }

    .group-central[data-name=showroom-home] .txt-info {
        max-width: none
    }

    .txt-info {
        left: 0;
        bottom: 0;
        padding: 0 20px 10px 20px;
        max-width: inherit;
        background-color: rgba(0,63,98,.7);
        width: 100%;
        text-align: center
    }

    .txt-info p {
        max-width: 600px;
        margin: 10px auto;
        color: #fff
    }

    .txt-info h2 {
        max-width: 600px;
        margin: 10px auto
    }

    .pic-cate-home img {
        height: auto;
        width: 100%
    }

    .wrap-news {
        padding: 0 10px;
        width: 100%
    }

    .colum-text h3 {
        text-align: center
    }

    .slide-cate {
        width: 90%;
        max-width: 500px
    }

    .slide-cate .slide-buttons {
        display: block
    }

    .slide-cate .slide-pagination {
        display: none
    }

    .pic-home:before {
        display: none
    }

    .item-history h3 {
        font-size: 30px
    }

    .txt-cate-home h3 {
        font-size: 15px
    }

    .hotline {
        position: fixed;
        left: 10px;
        top: auto;
        bottom: 10px;
        width: 45px;
        height: 45px;
        display: none
    }

    .hotline {
        display: block;
        z-index: 4
    }

    .hotline span {
        display: none
    }

    .hotline a {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        text-indent: -999px;
        overflow: hidden;
        background: url(../images/phone2.svg) no-repeat center center/contain;
        background-color: #fff;
        border-radius: 50%;
        border: 5px solid #ffcb08;
        animation: BorderColor;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate
    }

    .license-home .box-footer {
        width: 100%
    }

    .license-home.show-text::after {
        opacity: 1
    }

    .license-home .title-footer h2 {
        font-size: 22px
    }

    .license-home .box-footer .company-info a,.license-home .box-footer .company-info p {
        font-size: 14px
    }

    .license-home .content-main {
        padding: 0
    }

    #home-page .copyright,#home-page .social {
        position: relative;
        left: auto;
        bottom: auto
    }

    #home-page .text-right {
        text-align: center
    }

    .wrap-footer {
        margin-bottom: 20px;
        display: none!important
    }

    .menu-footer {
        display: none
    }

    .wrap-footer li {
        margin-bottom: 10px
    }

    .col-1 {
        width: 30%
    }

    .col-2 {
        width: 38%
    }

    .col-3 {
        width: 62%
    }
    #about-page .bg-cover,#contact-page .bg-cover,#service-page .bg-cover,#support-page .bg-cover {
        background-attachment: scroll
    }

    .about-info3 {
        padding: 50px 0 60px 0
    }

    .title-inner h2 {
        font-size: 36px;
        font-weight: 500
    }

    .box-companyinfo {
        margin: 20px 0
    }

    .about-info4 {
        padding: 10px 0 30px 0
    }

    .padding-main {
        padding: 30px 0
    }

    .txt-box {
        padding: 20px
    }

    .title-inner {
        margin-bottom: 25px;
        padding: 0 10px
    }

    .about-showroom h2 {
        font-size: 30px
    }

    .item-history {
        padding: 110px 30px 30px 30px
    }

    .about-info1 {
        background-color: #434d4f
    }

    .slide-history {
        margin-bottom: 30px
    }

    .slide-history .slide-pagination {
        display: block
    }

    .slide-history .slide-controls {
        position: absolute
    }

    .but-nav {
        display: none
    }

    .row-cate .pic-img {
        height: 350px
    }

    .title-cate {
        font-size: 20px
    }

    .footer-inner .list-conpany-info,.footer-inner .text-center {
        display: none
    }

    .item-product-list::before {
        display: none
    }

    .item-product-list .price,.txt-product-list h3 a {
        font-size: 18px
    }

    .item-product-list .content-wrap {
        width: 100%
    }

    .title-inner-list {
        padding: 20px 0
    }

    .main-list-product>.bg-cover {
        height: 500px
    }

    .item-product h3 {
        font-size: 14px
    }

    .txt-product-list {
        padding: 20px
    }

    .product-detail {
        display: block
    }

    .detail-slider {
        max-width: inherit
    }

    .left-detail,.right-detail {
        width: 100%;
        float: none
    }

    .detail-contains-video .video-youtube-full {
        width: 80vw;
        height: calc(80vw * .5625)
    }

    .product-detail {
        max-width: 700px;
        margin: auto
    }

    .right-detail h3 {
        font-size: 20px
    }

    .center-paging .slide-pagination {
        margin-top: 30px
    }

    .right-detail {
        padding: 5% 0
    }

    .title-detail h2 {
        font-size: 20px
    }

    .like-but {
        top: 10px;
        right: 10px;
        bottom: auto;
        transform: scale(.8)
    }

    .description-product p {
        font-size: 15px
    }

    #library-page .padding-main {
        padding: 30px 0 0 0
    }

    #library-page .center-paging .slide-pagination {
        margin-top: 0
    }

    .title-1 h2 {
        font-size: 25px
    }

    .video-company,.video-product {
        padding: 30px 0
    }

    .title-1,.title-sub {
        margin-bottom: 20px
    }

    .library-videos {
        padding-bottom: 0
    }

    .catalogue-slide .slide-item,.pic-slider .slide-item {
        text-align: center
    }

    .pic-slider,.video-company,.video-product {
        padding: 30px 0
    }

    .pic-slider {
        margin: 0
    }

    .item-name {
        padding: 5px 10px
    }

    .item-catalogue .item-name h3,.item-name h3 {
        font-size: 14px
    }

    .view-catalogue::after {
        width: 80px;
        height: 80px
    }

    .signup-design-box {
        padding: 0;
        margin: 0 auto
    }

    .signup-design .txt-box-1 {
        padding: 20px;
        margin-bottom: 30px
    }

    .support-design .txt-aboutshowroom:before {
        display: none
    }

    .support-design .title-inner {
        margin-bottom: 30px
    }

    .support-info {
        padding: 30px 0 0 0
    }

    .form-question {
        margin-top: 0
    }

    .txt-support a {
        font-size: 20px
    }

    .map-view {
        width: 100%;
        float: none;
        position: relative;
        height: calc(1125/2000 * 100vw);
        min-height: 320px
    }

    .list-view {
        width: 100%;
        float: none;
        position: relative;
        height: auto;
        overflow: visible;
        max-height: inherit
    }

    .map-box {
        overflow: visible
    }

    .question-support .form-main,.warranty-register .form-main {
        padding: 20px
    }

    .title-2 h2 {
        font-size: 25px
    }

    .agency {
        padding-bottom: 0
    }

    .a-collapse {
        font-size: 12px;
        padding: 15px 35px 15px 70px;
        font-weight: 700
    }

    .arrow-collapse {
        right: 10px;
        transform: scale(.8,.8)
    }

    .number-collapse {
        width: 57px
    }

    .number-collapse span {
        font-size: 24px
    }

    .list-view h3 {
        font-size: clamp(16px,10vw,3.5vw);
        transition: none
    }

    .list-view p {
        font-size: 13px;
        transition: none
    }

    .list-view li {
        transition: none
    }

    .warranty-register .bg-cover {
        background-image: none!important;
        background-color: #003f62
    }

    .support-info .txt-info2 h3 {
        font-size: 25px
    }

    .load-title h3 {
        font-size: 26px;
        font-weight: 400
    }

    .news-detail {
        padding-top: 30px
    }

    .load-bg {
        padding: 0 20px
    }

    .link-page {
        padding: 10px;
        height: auto;
        width: 240px;
        height: 92px;
        transition: none;
        display: inline-block;
        vertical-align: top;
        margin: 0 2px
    }

    .pic-thumb {
        min-width: 50px;
        max-width: 40%
    }

    .pic-thumb img {
        height: 70px
    }

    .link-text {
        line-height: 70px
    }

    .scroll-slide {
        -webkit-overflow-scrolling: touch
    }

    .news-link {
        width: 100%;
        white-space: nowrap;
        font-size: 0
    }

    .contact-form .form-main {
        padding: 20px
    }

    .join-title h3 {
        font-size: 23px
    }

    .career-form {
        padding: 30px 0
    }

    .join-title {
        margin-bottom: 20px
    }

    .details-outer {
        padding: 20px
    }

    .details-center {
        width: 95%
    }

    .details-content .close-popup {
        top: 25px;
        right: 25px
    }

    .details-center h2 {
        font-size: 18px
    }

    .download-but a {
        padding: 15px 64px 20px 17px
    }

    .details-center .download-but h3 {
        font-size: 22px;
        margin: 0
    }

    .top-recruiting p {
        font-size: 15px
    }

    .thank-you .close-popup {
        right: 10px;
        top: 15px
    }

    #contact-page .title-inner {
        padding: 25px 0 0 0
    }

    .contact-map {
        padding-bottom: 0
    }

    .career-form {
        display: none
    }

    .map-adreess,.map-content {
        width: 100%;
        float: none;
        height: auto
    }

    .map-content {
        padding: 30px 5%
    }

    .map-a {
        height: calc(1125/2000 * 100vw);
        min-height: 320px
    }

    .box-companyinfo h3 {
        font-size: clamp(16px,10vw,3.5vw)
    }

    .map-content .box-companyinfo {
        width: 100%;
        padding: 0;
        text-align: center
    }

    .map-content .box-companyinfo li {
        display: inline-block;
        vertical-align: top;
        margin: 10px;
        width: auto
    }

    .map-content .company-info a,.map-content .company-info p {
        margin: 0
    }

    .map-content::after,.map-content::before {
        display: none
    }

    .box-footer {
        margin: 0
    }

    .login-overlay.active {
        z-index: 100
    }

    .login-box {
        top: 83px;
        right: 20px;
        padding: 30px
    }

    .login-box::before {
        right: 172px
    }

    .login-box::before {
        border-left: 13px solid transparent;
        border-right: 13px solid transparent
    }

    .details-center h2 {
        font-size: 16px
    }

    .thank-you h2 {
        font-size: 30px
    }

    .thank-you p {
        font-size: 16px
    }

    .thank-you .details-center {
        padding: 50px 5%;
        border: 10px solid #fff
    }

    .thank-you .details-text::after,.thank-you .details-text::before {
        margin: 20px 0
    }

    .txt-order .cart-group li {
        position: relative;
        display: table-cell;
        font-size: 13px
    }

    .mobile-show {
        display: block
    }

    .mobile-show.order-span {
        display: inline-block;
        margin-bottom: 10px
    }

    .txt-order .cart-group li.name-order,.txt-order .cart-group li.order-delivery {
        display: none
    }

    .txt-order .cart-group {
        float: none;
        min-height: 10px
    }

    .txt-order h3 {
        font-size: 15px;
        margin-bottom: 10px;
        padding: 0
    }

    .txt-order .cart-group li.order-img {
        width: 100px;
        max-width: 100px
    }

    .txt-order .cart-group li.order-img img {
        max-width: 100px
    }

    .top-order-main {
        padding: 20px 0
    }

    .top-order-main h2 {
        font-size: 30px;
        font-weight: 500
    }

    .update-account {
        font-size: 14px;
        padding: 0 10px;
        height: 40px;
        line-height: 40px
    }

    .update-account:hover {
        background-color: #000
    }

    .account {
        padding: 30px 0
    }

    .order-main .form-box .require-col {
        padding: 5%
    }

    .order-qty {
        width: 70px
    }

    .top-order-item {
        font-size: 13px
    }

    .quick-box {
        width: 90%
    }

    .quick-col {
        width: 48%
    }

    .input-select select {
        font-size: 14px;
        background-size: 50px 64px;
        padding: 0 50px 0 15px;
        height: 50px
    }

    .news-item {
        width: calc(50% - 10px);
        margin: 3px
    }

    .news-pic {
        height: auto;
        padding-top: 60%
    }

    .content-collapse p,.description-product p,.item-history p,.list-view p,.load-text p,.pass-mask,.radio-box label span,.txt-aboutshowroom p,.txt-box p,.txt-box-1 p,.txt-info p,.txt-info-1 p,.txt-info2 p,.txt-service-other p,input[type=password],input[type=text],textarea {
        font-size: 15px
    }

    #subiz_wrapper {
        right: 0!important;
        bottom: 10px!important
    }

    .button_chat_offline_text {
        display: none!important
    }

    .button_chat_offline {
        border-radius: 50%!important;
        padding: 6px 0 6px!important
    }

    .log-out {
        top: 90px;
        right: 10px;
        z-index: 100
    }

    .log-out.on-show {
        opacity: 1;
        animation: none;
        animation-duration: 0s;
        width: 50px;
        height: 50px;
        line-height: 40px
    }

    .log-out.show-sp {
        opacity: 1!important
    }

    .log-out h3 {
        font-size: 10px
    }

    .bookshelf-page .outer-nav:not(.second) {
        display: block
    }

    .bookshelf-page .outer-nav:not(.second) h2 {
        font-size: 20px
    }

    .title-cataloge {
        display: none
    }

    .bookshelf {
        margin: 15vw 0 15vw 0
    }

    .bookshelf-inner {
        width: 940px
    }

    .bookshelf-row {
        width: 940px;
        height: calc(288/1240 * 940px)
    }

    .bookshelf-col {
        width: 80%
    }

    .sub-book {
        position: absolute;
        width: 100%;
        margin: 0;
        right: auto;
        left: 0;
        top: 20px;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none
    }

    .sub-book ul {
        white-space: nowrap;
        text-align: center
    }

    .sub-book>* {
        transform: translate3d(0,0,0)
    }

    .sub-book li {
        display: inline-block;
        margin: 0 -1px
    }

    .sub-book li a {
        font-size: 13px;
        line-height: 1.2
    }

    .sub-book li a br {
        display: none
    }
}

@media screen and (max-width: 900px) {
    .item-product-list .content-wrap {
        max-width:520px;
        margin: auto;
        width: 100%
    }

    .item-product-list {
        margin: 0
    }

    .pic-product-list,.txt-product-list {
        width: 96%;
        margin: 0 2%
    }

    .txt-product-list {
        padding: 20px 0
    }

    .item-product-list:before {
        display: none
    }

    .view-detail {
        background-color: #db9615;
        padding: 5px 20px 5px 5px;
        bottom: auto;
        border-radius: 30px;
        color: #fff;
        margin: 20px 0;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px
    }

    .view-detail span {
        background-color: #003f62;
        width: 30px;
        height: 30px;
        box-shadow: none
    }

    .buy-product {
        background-color: #db9615;
        padding: 5px 20px 5px 5px;
        border-radius: 30px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px
    }

    .buy-product span {
        background-color: #003f62;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 5px 0 0
    }

    .link-sale {
        padding: 5px 20px 5px 5px;
        border-radius: 30px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 13px
    }

    .link-sale span {
        background-color: #003f62;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 5px 0 0
    }

    .link-sale::after {
        border-radius: 30px
    }

    .technical-info,.warranty {
        margin: 20px 0
    }

    .box {
        width: 48%;
        margin-bottom: 15px
    }

    .box-catalogue {
        width: 96%;
        margin: 0
    }

    .title-inner h2 {
        font-size: 28px
    }

    .title-detail h2 {
        font-weight: 500
    }

    .right-detail {
        padding: 5%
    }

    .check-box {
        display: block;
        margin: 5px 0
    }

    .check-box li {
        margin: 0
    }

    .list-view li.active {
        background-color: #fff
    }

    .list-view li.active h3,.list-view li.active p {
        color: #003f62
    }

    .list-view li.active p {
        color: #363636
    }
}

@media screen and (max-width: 780px) {

    .pass-mask {
        line-height: 54px;
        font-size: 14px
    }

    .captcha {
        float: none;
        display: inline-block;
        vertical-align: top;
        width: 110px;
        height: 60px;
        overflow: hidden;
        margin: 0 2px
    }

    .g-recaptcha>div {
        margin: -6px 0 0 -2px;
        overflow: hidden
    }

    .captcha::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        width: 60px;
        height: 60px;
        background: url(https://www.gstatic.com/recaptcha/api2/logo_48.png) no-repeat center center;
        z-index: 100;
        background-color: #f9f9f9
    }

    .captcha+.outer-but {
        float: none;
        display: inline-block;
        vertical-align: top
    }

    .captcha+.outer-but button {
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        font-size: 16px
    }

    .load-title h3 {
        font-size: 18px
    }

    .load-text {
        padding: 15px
    }

    .join-title h3 {
        font-size: 20px
    }

    .group-central[data-name=promotion-home],.group-central[data-name=showroom-home] {
        height: 400px
    }

    .row-cate .item-cate {
        width: 100%!important;
        max-width: 500px;
        margin: 0 auto 15px auto!important
    }

    .row-cate {
        padding: 0;
        margin: 0
    }

    .row-cate:after {
        display: none
    }

    .row-cate .pic-img {
        height: 300px
    }

    .title-1 h2 {
        font-size: 20px
    }

    .title-1:after,.title-1:before {
        width: 10%
    }

    .support-design .bg-screen {
        position: relative;
        height: calc(1125/2000 * 100vw)
    }

    .support-design .title-inner {
        position: absolute;
        top: 180px;
        margin: 0
    }

    .support-design .txt-aboutshowroom:before {
        display: none
    }

    .support-design .txt-aboutshowroom {
        background-color: #001a28;
        width: 100%
    }

    .support-design {
        padding: 0
    }

    .update-account {
        font-size: 12px
    }

    .top-order-main h2 {
        font-size: 16px
    }

    .list-conpany-info {
        display: block
    }
}

@media screen and (max-width: 680px) {
    .bookshelf-inner {
        width:100vw;
        overflow: hidden
    }

    .bookshelf-row {
        width: 120vw;
        left: -10vw;
        height: 280px
    }

    .bookshelf-col {
        width: 90vw;
        height: 225px;
        justify-content: flex-start;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none
    }

    .bookshelf-pdf {
        width: auto;
        margin-right: 40px
    }

    .bookshelf-link {
        width: 150px;
        height: 225px
    }

    .bottom-shelf .bookshelf-link,.center-shelf .bookshelf-link,.top-shelf .bookshelf-link {
        bottom: auto
    }

    .top-shelf .bookshelf-col {
        bottom: -20px
    }

    .center-shelf .bookshelf-col {
        bottom: -15px
    }

    .bottom-shelf .bookshelf-col {
        bottom: -10px
    }

    .sub-nav-2 li a {
        width: 180px;
        white-space: normal
    }

    .bottom-shelf {
        background-position: center 95%
    }
}

@media screen and (max-width: 620px) {
    .slogan h2 {
        font-size:18px;
        margin-bottom: 10px;
        padding-bottom: 10px
    }

    #homepage .slogan h2 {
        font-size: 18px
    }

    .slogan p {
        font-size: 16px
    }

    .group-central[data-name=showroom-home] .txt-info h2,.txt-info h2 {
        font-size: 20px
    }

    .title-main-home h2 {
        font-size: 20px
    }

    .box {
        width: 100%;
        max-width: 400px
    }

    .box-catalogue {
        width: 100%
    }

    .phone-footer span {
        font-size: 25px
    }

    .box-companyinfo h3 {
        font-size: 18px
    }

    .slide-products-hot .slide-item {
        padding: 0
    }

    .slide-same .slide-item,.slide-view .slide-item {
        padding: 0
    }

    .item-box-main,.item-catalogue {
        width: 100%;
        max-width: 400px;
        float: none;
        margin: 0 0 20px 0
    }

    .title-2 h2 {
        font-size: 20px
    }

    .r-text p {
        font-size: 13px
    }

    .join-us .input-text {
        width: 100%
    }

    .file-name {
        width: 100%;
        left: 0
    }

    .join-us .input-text:nth-child(2n),.join-us .input-text:nth-child(2n+1) {
        padding: 0
    }

    .txt-description {
        column-count: 1;
        column-gap: 0
    }

    .txt-info p {
        display: none
    }

    .box-footer {
        padding: 10px 5% 30px 5%
    }

    .wrap-box-footer {
        display: block
    }

    .box-footer .company-info {
        padding: 0 0 15px 0;
        margin: 0 0 20px 0;
        border-bottom: 1px solid #4e5862;
        width: 100%
    }

    .license {
        width: 90%;
        margin: auto;
        text-align: center
    }

    .license img {
        margin: auto
    }

    .title-footer h2 {
        font-size: 18px
    }

    .company-info li::before {
        width: 25px;
        height: 25px
    }

    .company-info .bt-represent::before {
        background-size: contain
    }

    .company-info .bt-location::before {
        background-size: contain
    }

    .company-info .bt-phone::before {
        background-size: contain
    }

    .company-info .bt-email::before {
        background-size: contain
    }

    .company-info .bt-tax::before {
        background-size: contain
    }
}

@media screen and (max-width: 580px) {
    .txt-product-list {
        padding:5%
    }

    .txt-support {
        padding: 20px
    }

    .main-list-product>.bg-cover {
        height: 400px
    }

    .outer-nav.second.fixed {
        top: 48px
    }

    .item-product-list:nth-child(even) {
        background-color: #efefef
    }

    .right-detail .technical-info,.warranty {
        float: none
    }

    .title-detail h2 {
        font-size: 18px
    }

    .join-title h3 {
        font-size: 18px
    }

    .top-order-main h2 {
        font-size: 13px
    }

    .slide-cate .slide-prev {
        left: -50px
    }

    .slide-cate .slide-next {
        right: -50px
    }

    .slide-cate .slide-next,.slide-cate .slide-prev {
        margin: -50px 0 0 0
    }

    .slide-popup-mod {
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        transform: none
    }

    .slide-popup-mod .bg-slider img {
        object-fit: contain
    }

    .bg-slider {
        width: 100vw;
        height: 100vh
    }

    .popup-home .details-center {
        margin: 60px -3px 100px -3px
    }

    .logo-popup svg {
        width: 40vw
    }

    .list-object {
        flex-direction: column
    }

    .object-box {
        width: 95%;
        margin: 0 0 2px 0;
        max-width: 300px;
        display: flex;
        padding: 20px
    }

    .icon-box {
        width: 80px;
        margin: 0
    }

    .text-box {
        font-size: 14px;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
        padding: 0 0 22px 20px;
        width: calc(100% - 70px);
        text-align: left
    }

    .text-box::after {
        bottom: -20px;
        left: 5px;
        transform: scale(.85)
    }

    .details-center.show .object-box:nth-child(1) {
        animation-name: fadeInUp;
        animation-duration: .8s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .details-center.show .object-box:nth-child(2) {
        animation-name: fadeInUp;
        animation-duration: .8s;
        animation-delay: .2s;
        animation-fill-mode: forwards
    }

    .details-center.show .object-box:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: .8s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .object-box {
        opacity: 0
    }

    .title-page h1 {
        font-size: 26px
    }

    .col-1,.col-2,.col-3,.col-6 {
        width: 100%
    }

    .header.hide .search-form.active,.search-form.active {
        width: calc(100vw - 65px)
    }

    .box-catalogue h3 {
        font-size: 20px
    }

    .title-inner h2 {
        font-size: 26px
    }

    .about-showroom h2 {
        font-size: 20px
    }

    .item-history h3 {
        font-size: 25px
    }

    .title-cate {
        font-size: 18px
    }

    .company-info li {
        font-size: 13px
    }

    .loadicon {
        width: 80px;
        height: 80px;
        margin: -40px 0 0 -40px
    }

    .header .logo {
        left: 0;
        top: 0
    }

    .logo-company {
        width: 130px;
        height: 60px;
        background: url(../images/logo-m1.svg) no-repeat center center/contain
    }

    .txt-box {
        font-size: 14px
    }

    .sub-nav li a {
        font-size: 12px
    }

    .contact-form .form-main {
        padding: 0;
        background-color: transparent
    }

    .question-support .form-main,.warranty-register .form-main {
        padding: 0;
        background-color: transparent
    }

    .check-box {
        text-align: center
    }

    .check-box label span,.title-download-div {
        font-size: 14px
    }

    .quick-col {
        width: 100%
    }

    .support-info .txt-info2 h3 {
        font-size: 16px
    }

    .copyright {
        padding-bottom: 50px
    }

    .language {
        right: 60px
    }

    .search-but {
        right: 100px
    }

    .content-collapse p,.description-product p,.item-history p,.list-view p,.load-text p,.pass-mask,.radio-box label span,.txt-aboutshowroom p,.txt-box p,.txt-box-1 p,.txt-info p,.txt-info-1 p,.txt-info2 p,.txt-service-other p,input[type=password],input[type=text],textarea {
        font-size: 14px
    }

    .news-item {
        width: 100%;
        margin: 3px 0
    }

    .box-companyinfo h3 {
        font-size: 16px
    }

    .search-content h2 {
        font-size: 26px
    }

    .item-search h3 {
        font-size: 13px
    }

    .item-search a {
        padding: 15px 15px 15px 30px
    }

    .item-search::before {
        width: 34px;
        height: 34px;
        line-height: 34px;
        left: -10px
    }

    .search-tempty h2 {
        font-size: 30px
    }

    #home-page .slogan h2 {
        font-size: calc(100vw/20)
    }

    #home-page .slogan p {
        font-size: calc(100vw/30)
    }

    .hotline-1 {
        width: 44px;
        height: 44px
    }

    .hotline-1 span {
        width: 30px;
        height: 30px
    }

    .icon-360 {
        width: 35px;
        height: 35px;
        bottom: 85px
    }

    .icon-youtube {
        width: 35px;
        height: 35px;
        bottom: 135px
    }

    .icon-sale {
        width: 35px;
        height: 35px;
        bottom: 185px
    }
}

@media screen and (max-width: 440px) {
    .row-cate .pic-img {
        height:250px
    }

    .title-inner h2,.title-page h1 {
        font-size: 22px
    }

    .right-detail {
        padding-right: 3%
    }

    .right-detail h3 {
        font-size: 16px
    }

    .title-1 h2 {
        font-size: 18px
    }

    .txt-support a {
        font-size: 16px
    }

    .title-2 h2 {
        font-size: 18px
    }

    .load-title h3 {
        font-size: 16px
    }

    .slogan h2 {
        font-size: 16px
    }

    #homepage .slogan h2 {
        font-size: 16px
    }

    .item-name h3 {
        font-size: 14px
    }

    .slogan p {
        font-size: 14px
    }

    .map-content .box-companyinfo {
        text-align: left
    }

    .map-content .box-companyinfo li {
        display: block
    }

    .bookshelf-pdf {
        margin-right: 20px
    }

    .top-shelf .bookshelf-col {
        bottom: -34px
    }

    .center-shelf .bookshelf-col {
        bottom: -32px
    }

    .bottom-shelf .bookshelf-col {
        bottom: -24px
    }
}

@media screen and (max-width: 380px) {
    .bookshelf-pdf {
        margin-right:15px
    }

    .bookshelf-page .outer-nav:not(.second) h2 {
        font-size: 18px
    }
}

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

.sub-nav::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.horizon-tab::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.content-table::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.navigation::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.scroll-slide::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.iframe-sroll::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.list-view::-webkit-scrollbar {
    width: 0!important;
    height: 0!important;
    display: none!important
}

.content-table,.horizon-tab,.iframe-sroll,.scroll-slide,.sub-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-color: inherit;
    scrollbar-width: none
}

.navigation {
    scroll-behavior: smooth;
    scrollbar-color: inherit;
    scrollbar-width: none
}

.cart-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.6);
    z-index: 1500
}

.cart-icon {
    background: url(../images/cart.svg) no-repeat center center/contain;
    background-color: #003f62;
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 50%
}

.cart-shopping.animate .cart-icon {
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    animation: zezoRotateY .4s ease-in-out forwards
}

.cart-shopping.animate .cart-text {
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    animation: zezoRotateY .5s ease-in-out forwards
}

.login-but {
    background: url(../images/login-user.svg) no-repeat center center/contain;
    background-color: #003f62
}

.cart-text {
    position: absolute;
    right: -5px;
    opacity: 0;
    top: -5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 24px
}

.cart-text.color {
    background-color: #db9614;
    opacity: 1
}

.cart-items-box {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.cart-items {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin: 0;
    z-index: 5
}

.append-item {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin: 0
}

.cart-group,.cart-top {
    position: relative;
    display: table;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    table-layout: fixed
}

.cart-group li,.cart-top li {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    line-height: 1.4
}

.cart-group {
    border-spacing: 1px
}

.cart-group li {
    background-color: #fff
}

.cart-top {
    border-spacing: 1px 0
}

.cart-top li {
    background-color: #697a86;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 15px;
    text-transform: uppercase
}

.cart-name {
    width: 200px;
    max-width: 200px;
    padding: 15px 20px
}

.cart-img {
    width: 120px;
    max-width: 120px
}

.cart-no {
    width: 60px;
    max-width: 60px;
    text-align: center;
    color: #666;
    font-size: 26px
}

.cart-img {
    width: 160px;
    max-width: 160px
}

.cart-quantity {
    width: 140px;
    max-width: 140px;
    text-align: center;
    color: #000
}

.cart-price {
    width: 160px;
    max-width: 160px;
    padding: 15px;
    color: #c58226;
    text-align: right;
    font-weight: 700;
    color: #c58226;
    font-size: 24px
}

.cart-amount {
    width: 130px;
    max-width: 130px
}

.cart-delete {
    width: 60px;
    max-width: 60px;
    text-align: center;
    color: #666
}

.cart-name h3 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase
}

.cart-name p {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6
}

.cart-img a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    text-align: center;
    overflow: hidden
}

.cart-img a img {
    display: block;
    height: auto;
    width: 100%;
    margin: 0
}

.cart-delete {
    cursor: pointer
}

.cart-delete span {
    position: relative;
    display: inline-block;
    font-size: 26px;
    font-weight: 700;
    transition: all .3s ease-in-out
}

.cart-quantity input {
    display: inline-block;
    width: 60px;
    height: 34px;
    line-height: 34px;
    margin: 0 5px;
    padding: 0 3px;
    text-align: center;
    background-color: #fff;
    font-weight: 700;
    color: #666;
    font-size: 18px;
    border-radius: 0;
    border: 1px solid #666;
    vertical-align: middle
}

.cart-quantity input:focus {
    background-color: #666;
    color: #fff
}

.cart-down {
    background: url(../images/zoom-out.svg) no-repeat center center;
    background-size: contain;
    background-color: #697a86
}

.cart-up {
    background: url(../images/zoom-in.svg) no-repeat center center;
    background-size: contain;
    background-color: #697a86
}

.cart-down,.cart-up {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 34px;
    vertical-align: middle;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.cart-add {
    display: block;
    width: 50px;
    height: 50px;
    margin: 5px auto;
    padding: 13px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    transition: all .3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 30px transparent
}

.cart-add:hover {
    background-color: #000;
    box-shadow: 0 0 30px rgba(0,0,0,.5)
}

.cart-add-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/cart.png) no-repeat center center;
    background-size: cover
}

.cart-mess {
    display: inline-block;
    width: 90%;
    height: auto;
    vertical-align: middle;
    font-weight: 400;
    font-size: 48px;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.4
}

.cart-content {
    background-color: #e2e2e2;
    z-index: 1;
    padding-top: 60px
}

.cart-content h2 {
    font-size: 36px;
    color: #003f62;
    font-weight: 400
}

.cart-content.cart-empty {
    text-align: center;
    padding: 60px 0
}

.cart-content.cart-empty:after,.cart-content.cart-empty:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 100%;
    vertical-align: middle
}

.cart-empty .form,.cart-empty .title {
    display: none
}

.cart-empty .outer-nav-bottom {
    position: absolute;
    left: 0;
    bottom: 0
}

.cart-box {
    position: relative;
    display: block;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto
}

.cart-agreement,.cart-bill,.cart-but,.cart-order,.cart-send,.cart-step {
    position: relative;
    display: block;
    width: 100%;
    height: auto
}

.cart-bill {
    margin: 0 0 60px 0;
    padding: 30px;
    overflow: hidden;
    border-bottom: 1px dotted #fff
}

.cart-bill span {
    display: block;
    margin: 0 0 0 2px;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 30px;
    color: #666
}

.cart-bill span.cart-total {
    float: right;
    color: #c58226;
    font-size: 36px
}

.cart-bill .cart-total small {
    position: relative;
    top: -4px;
    font-size: 24px;
    color: #666;
    font-weight: 400
}

.cart-discount-box {
    padding: 30px;
    overflow: hidden;
    border-bottom: 1px dotted #fff;
    display: none
}

.cart-discount-box span {
    display: block;
    margin: 0 0 0 2px;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 30px;
    color: #636363
}

.cart-discount-box span.cart-discount {
    float: right;
    color: #c58226;
    font-size: 36px
}

.cart-discount-box .cart-discount small {
    position: relative;
    top: -4px;
    font-size: 24px;
    color: #666;
    font-weight: 400
}


@media screen and (max-width: 920px) {
    .cart-box {
        width:100%
    }

    .cart-items-box {
        padding: 0 20px 20px 20px
    }

    .cart-items {
        display: inline-block;
        padding: 5px;
        background-color: rgba(0,0,0,.1);
        border-radius: 5px
    }

    .cart-top {
        display: block;
        height: 30px;
        float: left;
        clear: both
    }

    .cart-top .cart-delete,.cart-top .cart-no,.cart-top .cart-quantity {
        display: none
    }

    .cart-group {
        min-height: 150px;
        float: left;
        clear: both;
        margin: 0 0 5px 0
    }

    .cart-group li,.cart-top li {
        position: absolute;
        display: block
    }

    .cart-no {
        width: 30px;
        padding: 10px 0;
        left: 0;
        top: 0;
        height: 100%;
        text-align: center;
        font-size: 18px
    }

    .cart-img {
        width: 140px;
        left: 32px;
        top: 0;
        height: 100%
    }

    .cart-name {
        width: 224px;
        padding: 10px;
        left: 174px;
        top: 0;
        height: 100%;
        max-width: inherit
    }

    .cart-price,.cart-quantity {
        width: calc(100% - 400px);
        left: 400px;
        height: calc(50% - 1px);
        max-width: inherit;
        text-align: center
    }

    .cart-down,.cart-quantity input,.cart-up {
        height: 30px;
        width: 30px
    }

    .cart-group .cart-price {
        top: 0;
        padding: 0;
        line-height: 78px
    }

    .cart-group .cart-quantity {
        bottom: 0;
        padding: 0;
        line-height: 78px
    }

    .cart-group .cart-delete {
        right: 0;
        bottom: 20px;
        background-color: rgba(0,0,0,.1);
        width: 40px;
        height: 40px;
        padding: 0;
        line-height: 35px;
        border-radius: 3px
    }

    .cart-top .cart-img,.cart-top .cart-name,.cart-top .cart-price {
        padding: 0;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        text-align: center
    }

    .cart-bill {
        padding: 10px 20px 30px 20px;
        margin-bottom: 40px
    }

    .cart-bill span {
        font-size: 26px
    }

    .cart-bill span.cart-total {
        font-size: 26px
    }

    .cart-bill .cart-total small {
        font-size: 24px;
        top: 0
    }
}

@media screen and (max-width: 740px) {
    .cart-content h2,.cart-mess {
        font-size:26px
    }

    .continute-but a,.outer-but button {
        height: 60px;
        line-height: 60px;
        padding: 0 15px;
        font-size: 14px
    }

    .form-box .outer-but {
        margin: 0 5px
    }
}

@media screen and (max-width: 640px) {
    .cart-group {
        min-height:220px
    }

    .cart-top .cart-img {
        display: none
    }

    .cart-top .cart-name {
        left: 0;
        height: 100%;
        top: 0;
        width: 50%;
        font-size: 12px
    }

    .cart-no {
        width: 25px;
        padding: 40px 0 0 0;
        font-size: 20px
    }

    .cart-img {
        width: calc(50% - 25px);
        height: 80px;
        max-width: inherit;
        left: 27px
    }

    .cart-img a {
        padding: 5px
    }

    .cart-img a img {
        height: 100%;
        width: auto;
        margin: 0 -50%;
        display: inline-block
    }

    .cart-price {
        width: calc(50% - 2px);
        left: auto;
        right: 0
    }

    .cart-name {
        width: calc(50% - 25px);
        max-width: inherit;
        padding: 10px;
        height: calc(100% - 82px);
        left: 27px;
        top: auto;
        bottom: 0;
        font-size: 12px
    }

    .cart-name h3 {
        font-size: 12px
    }

    .cart-name p {
        font-size: 11px
    }

    .cart-group .cart-price,.cart-group .cart-quantity {
        width: calc(50% - 4px);
        left: auto;
        right: 0;
        line-height: 119px
    }

    .cart-group .cart-price {
        font-size: 18px
    }

    .cart-down,.cart-up {
        width: 25px;
        height: 25px;
        font-size: 24px;
        line-height: 25px
    }

    .cart-quantity input {
        width: 25px;
        font-size: 13px
    }

    .cart-group .cart-delete {
        bottom: 0;
        width: 30px;
        height: 30px;
        line-height: 30px
    }

    .cart-group .cart-delete span {
        font-size: 18px
    }
}

@media screen and (max-width: 520px) {
    .cart-content h2,.cart-mess {
        font-size:22px
    }

    .form-box {
        width: 100%
    }

    .form-box .require-col {
        padding: 5%;
        box-shadow: none
    }

    .form-box .input-but {
        padding: 20px
    }

    .term-agree {
        padding: 0 0 10px 0;
        width: 100%;
        display: block
    }

    .cart-content .captcha {
        position: relative;
        right: auto;
        bottom: auto
    }

    .form-box .require-col {
        text-align: center
    }

    .form-box .pass-mask {
        text-align: left
    }

    .cart-icon,.cart-login a,.cart-text {
        border-radius: 0
    }

    .cart-bill .cart-total small,.cart-bill span,.cart-bill span.cart-total {
        font-size: 18px
    }

    .cart-login.hide {
        opacity: 0!important;
        pointer-events: none
    }
}

@media screen and (max-width: 390px) {
    .cart-sub-total-box .cart-sub-total small,.cart-sub-total-box span,.cart-sub-total-box span.cart-sub-total {
        font-size:16px
    }

    .cart-discount-box .cart-discount small,.cart-discount-box span,.cart-discount-box span.cart-discount {
        font-size: 16px
    }

    .cart-discount-box input[type=text] {
        margin: 0 0 0 10px;
        top: -10px;
        font-size: 13px;
        width: 110px
    }

    .cart-bill .cart-total small,.cart-bill span,.cart-bill span.cart-total {
        font-size: 16px
    }
}

@media screen and (max-width: 350px) {
    .cart-sub-total-box span {
        font-size:14px
    }

    .cart-discount-box span {
        font-size: 14px
    }

    .cart-bill span {
        font-size: 14px
    }

    .cart-discount-box input[type=text] {
        font-size: 12px;
        width: 100px
    }

    .continute-but a,.outer-but button {
        font-size: 13px
    }

    .form-box .outer-but {
        margin: 0 2px
    }
}

@keyframes zezoRotateY {
    100% {
        transform: rotateY(0)
    }
}

@keyframes Shake1 {
    from,to {
        transform: translate3d(0,0,0) rotate(0)
    }

    0%,50% {
        transform: translate3d(-10px,0,0) rotate(5deg)
    }

    25% {
        transform: translate3d(10px,0,0) rotate(-5deg)
    }
}

@keyframes Shake {
    from,to {
        transform: translate3d(0,0,0) rotate(0)
    }

    0%,50% {
        transform: translate3d(-10px,0,0) rotate(15deg)
    }

    25% {
        transform: translate3d(10px,0,0) rotate(-15deg)
    }
}

@keyframes Start {
    from {
        visibility: hidden
    }

    to {
        visibility: visible
    }
}

@keyframes Reveal {
    from {
        transform: scale(.001)
    }

    to {
        transform: scale(1)
    }
}

@keyframes Slide {
    to {
        transform: translateX(20px)
    }
}

@keyframes Color {
    from {
        color: #004835
    }

    to {
        color: #b05c1e
    }
}

@keyframes aniWidth {
    to {
        width: 0
    }
}

@keyframes fallPerspective {
    100% {
        transform: translateZ(0) translateY(0) rotateX(0);
        opacity: 1
    }
}

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

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

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes DrawStroke1 {
    0% {
        stroke-dashoffset: 800
    }

    100% {
        stroke-dashoffset: 0
    }
}

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

    to {
        background-position: -360px
    }
}

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

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

    100% {
        box-shadow: 0 0 60px rgba(220,220,220,0);
        border: 0 solid rgba(220,220,220,0);
        transform: scale(1.5)
    }
}

@keyframes Bg-Animation {
    0% {
        transform: translate3d(-50%,-50%,0) scale(.8);
        opacity: 0
    }

    70% {
        transform: translate3d(-50%,-50%,0) scale(1.2);
        opacity: 1
    }

    100% {
        transform: translate3d(-50%,-50%,0) scale(.8);
        opacity: 0
    }
}

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

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

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

@keyframes Opacity {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes BgColor {
    from {
        background-color: #004835
    }

    to {
        background-color: #b05c1e
    }
}

@keyframes BorderColor {
    0% {
        border-color: #db9614
    }

    50% {
        border-color: #b3bcc1
    }

    100% {
        border-color: #db9614
    }
}

@keyframes Leftpage {
    from {
        left: -100%
    }

    to {
        left: 100%
    }
}

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

    to {
        transform: rotate(360deg) translateZ(0)
    }
}

@keyframes empty {
    0% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fadeOff {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: scaleX(0)
    }
}

@keyframes fadeOn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes backSlideOut {
    25% {
        opacity: .5;
        transform: translateZ(-500px)
    }

    75% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%)
    }

    100% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%)
    }
}

@keyframes backSlideIn {
    0%,25% {
        opacity: .5;
        transform: translateZ(-500px) translateX(200%)
    }

    75% {
        opacity: .5;
        transform: translateZ(-500px)
    }

    100% {
        opacity: 1;
        transform: translateZ(0) translateX(0)
    }
}

@keyframes scaleToFade {
    to {
        opacity: 0;
        transform: scale(.8)
    }
}

@keyframes Go {
    from {
        background-position: center 50px
    }

    to {
        background-position: center 140px
    }
}

@keyframes goDown {
    from {
        transform: translateY(-100%)
    }
}

@keyframes scaleUpFrom {
    from {
        opacity: 0;
        transform: scale(1.5)
    }
}

@keyframes scaleUpTo {
    to {
        opacity: 0;
        transform: scale(1.5)
    }
}

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

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

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

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

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

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

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg) scale(.5);
        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 goRight {
    0% {
        opacity: 0;
        transform: translate3d(-100px,0,0)
    }

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

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

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

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

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

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

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

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

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

@keyframes scaleMidium {
    0% {
        opacity: 0;
        transform: scale(.96)
    }

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

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

    100% {
        opacity: 1;
        transform: scale(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 aniWidth {
    to {
        width: 0
    }
}

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

    to {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}

@keyframes aniHeightZezo {
    from {
        height: 100%
    }

    to {
        height: 0
    }
}

@keyframes arrowLeft {
    0% {
        opacity: 1;
        transform: translateX(-8px)
    }

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

    30% {
        opacity: 1;
        transform: translateX(-8px)
    }

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

    60% {
        opacity: 1;
        transform: translateX(-8px)
    }

    100% {
        opacity: 1;
        transform: translateX(-8px)
    }
}

@keyframes DrawLine {
    0% {
        stroke-dashoffset: 800
    }

    100% {
        stroke-dashoffset: 0
    }
}

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

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

.rotatenew {
    animation-name: RotateNew;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

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

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

.flipoutx {
    backface-visibility: visible!important;
    animation-name: flipOutX;
    animation-duration: .8s;
    animation-fill-mode: forwards
}

.flipinx {
    backface-visibility: visible!important;
    animation-name: flipInX;
    animation-duration: .8s;
    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: .8s;
    animation-fill-mode: forwards
}

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

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

.slide-fade-out {
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-fade-in {
    z-index: 10;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-backSlide-out {
    animation-name: backSlideOut;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-backSlide-in {
    animation-name: backSlideIn;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-goDown-out {
    animation-name: scaleToFade;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-goDown-in {
    animation-name: goDown;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-fadeUp-in {
    animation-name: scaleUpFrom;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.slide-fadeUp-out {
    animation-name: scaleUpTo;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

.cart-login,.hotline-1,.icon-360,.icon-sale,.icon-youtube,.language,.nav-click,.search-but,.slogan {
    opacity: 0
}

.header.show .nav-click {
    animation-name: fadeIn;
    animation-duration: .9s;
    animation-fill-mode: forwards
}

.header.show .search-but {
    animation-name: goLeft;
    animation-duration: .9s;
    animation-delay: .6s;
    animation-fill-mode: forwards
}

.header.show .language {
    animation-name: goLeft;
    animation-duration: .9s;
    animation-delay: .9s;
    animation-fill-mode: forwards
}

.header.show .cart-login {
    animation-name: goLeft;
    animation-duration: .9s;
    animation-delay: .3s;
    animation-fill-mode: forwards
}

.slogan.show {
    opacity: 1
}

.hotline-1.show,.icon-360.show,.icon-sale.show,.icon-youtube.show {
    visibility: visible;
    animation-name: fadeInUp;
    animation-duration: .9s;
    animation-delay: 350ms;
    animation-fill-mode: forwards
}

.sbzoff.show {
    animation-name: fadeInUp;
    animation-duration: .9s;
    animation-delay: 350ms;
    animation-fill-mode: forwards
}

.slider-inner-main.show .slide-inner {
    animation-name: fadeIn;
    animation-duration: .9s;
    animation-delay: 0s;
    animation-fill-mode: forwards
}

.on-show .sub-nav {
    animation-name: fadeIn;
    animation-duration: .9s;
    animation-delay: 0s;
    animation-fill-mode: forwards
}

.slider-inner-main.show::before {
    animation-name: fadeInDown;
    animation-duration: .9s;
    animation-delay: .3s;
    animation-fill-mode: forwards
}

@media screen and (min-width: 1100px) {
    .container .set-post {
        opacity:0
    }

    .container .set-post.show {
        animation-name: fadeIn;
        animation-duration: .6s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .show-text .box-bg {
        opacity: 1
    }

    .show-text .one {
        animation: 15s linear 0s normal none infinite Bg-Animation
    }

    .show-text .two {
        animation: 18s linear 0s normal none infinite Bg-Animation
    }

    .show-text .three {
        animation: 20s linear 0s normal none infinite Bg-Animation
    }

    .group-central .box-footer {
        opacity: 0
    }

    .show-text .box-footer {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .about-info,.about-info4 .box-companyinfo,.about-showroom,.slide-history,.title-inner,.txt-box,.txt-info2 {
        opacity: 0
    }

    .about-info.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .on-show.title-inner {
        animation-name: fadeIn;
        animation-duration: .9s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .on-show.txt-box {
        animation-name: goLeft;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .on-show.slide-history {
        animation-name: goRight;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .on-show.txt-info2 {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .on-show.about-showroom {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .about-info4 .on-show .box-companyinfo:nth-child(n) {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .about-info4 .on-show .box-companyinfo:nth-child(2n) {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .about-info4 .on-show .box-companyinfo:nth-child(1) {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .about-info4 .on-show .box-companyinfo:nth-child(2) {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .about-info4 .on-show .box-companyinfo:nth-child(3) {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .about-info4 .on-show .box-companyinfo:nth-child(4) {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .phone-footer {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .footer.on-show .wrap-footer {
        animation-name: fadeIn;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .on-show .social {
        animation-name: fadeIn;
        animation-duration: .9s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .on-show .copyright {
        animation-name: fadeIn;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .footer-inner .list-conpany-info,.footer-inner .text-center,.item-cate,.row-cate:after {
        opacity: 0
    }

    .row-cate.on-show .item-cate:nth-child(1) {
        animation-name: goRight;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .row-cate.on-show .item-cate:nth-child(2) {
        animation-name: goLeft;
        animation-duration: .9s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .footer-inner .list-conpany-info.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .footer-inner .text-center.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .4s;
        animation-fill-mode: forwards
    }

    .on-show.row-cate:after {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .item-product-list,.main-list-product>.bg-cover,.outer-nav:not(.second),.slide-products-hot {
        opacity: 0
    }

    .outer-nav:not(.second).on-show {
        animation-name: fadeIn;
        animation-duration: .9s;
        animation-delay: 0s;
        animation-fill-mode: forwards
    }

    .on-show.slide-products-hot {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .main-list-product>.bg-cover.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .item-product-list.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .product-detail,.slide-same,.slide-view,.title-detail,.txt-description {
        opacity: 0
    }

    .product-detail.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .title-detail.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .txt-description.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .slide-view.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .slide-same.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .item-box-main,.item-catalogue,.switch-slide,.title-1,.title-sub {
        opacity: 0
    }

    .title-1.on-show {
        animation-name: fadeInDown;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .switch-slide.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .content-library.on-show .item-box-main,.content-library.on-show .item-catalogue {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-fill-mode: forwards;
        animation-delay: .3s
    }

    .title-sub.on-show {
        animation-name: fadeInDown;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .library-project.on-show .item-box-main {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-fill-mode: forwards;
        animation-delay: .3s
    }

    .form-main,.product-footer,.support-design .txt-aboutshowroom,.txt-box-1,.txt-service-other {
        opacity: 0
    }

    .txt-box-1.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .form-main.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .support-design .txt-aboutshowroom.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .txt-service-other.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .product-footer.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .download-div,.list-collapse,.title-2,.txt-support,.warranty-policy {
        opacity: 0
    }

    .warranty-policy.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .txt-support.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .download-div.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .list-collapse.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .title-2.on-show {
        animation-name: fadeInDown;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .agency::after,.agency::before {
        content: '';
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: #697a86;
        transition: all 1s cubic-bezier(.23,1,.38,1) .1s;
        animation-delay: .6s;
        z-index: 30
    }

    .agency::before {
        left: 0
    }

    .agency::after {
        right: 0
    }

    .agency.on-show::after,.agency.on-show::before {
        width: 0
    }

    .scroll-slide {
        opacity: 0
    }

    .scroll-slide.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .career-list,.join-title,.join-us,.map-main {
        opacity: 0
    }

    .map-main.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .career-list.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .join-title.on-show {
        animation-name: fadeInDown;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .join-us.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .6s;
        animation-fill-mode: forwards
    }

    .news-item {
        opacity: 0
    }

    .news-item.on-show {
        animation-name: fadeInUp;
        animation-duration: .9s;
        animation-delay: .3s;
        animation-fill-mode: forwards
    }

    .bookshelf-pdf,.sub-book {
        opacity: 0
    }

    .title-cataloge {
        opacity: 0
    }

    .title-cataloge.on-show {
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-fill-mode: forwards
    }

    .sub-book.show {
        animation-name: toRight;
        animation-duration: 1s;
        animation-delay: .8s;
        animation-fill-mode: forwards
    }

    .bookshelf-pdf.on-show {
        animation-name: fadeIn;
        animation-duration: 1s;
        animation-delay: calc(80ms * var(--data-index));
        animation-fill-mode: forwards
    }
}