h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

.pc-block {
    display: block;
}

.m-block {
    display: none;
}

p,
span {
    font-size: 16px;
}

.delayList h3 {
    transition-delay: .2s;
}

.delayList p,
.delayList ul {
    transition-delay: .4s;
}

.delayList li:nth-child(1) {
    transition-delay: .4s;
}

.delayList li:nth-child(2) {
    transition-delay: .6s;
}

.delayList li:nth-child(3) {
    transition-delay: .8s;
}

.delayList li:nth-child(4) {
    transition-delay: 1s;
}

.delayList li:nth-child(5) {
    transition-delay: 1.2s;
}

.delayList li:nth-child(6) {
    transition-delay: 1.4s;
}

.delayList li:nth-child(7) {
    transition-delay: 1.6s;
}

.delayList li:nth-child(8) {
    transition-delay: 1.8s;
}

.delayList li:nth-child(9) {
    transition-delay: 2s;
}

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1
}

.swiper-container-no-flexbox .swiper-slide {
    float: left
}

.swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column
}

.swiper-slide,
.swiper-wrapper {
    width: 100%;
    height: 100%;
    position: relative
}

.swiper-wrapper {
    z-index: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.swiper-container-fade>.swiper-wrapper {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}

.swiper-container-multirow>.swiper-wrapper {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-wp8-horizontal {
    -ms-touch-action: pan-y;
    touch-action: pan-y
}

.swiper-wp8-vertical {
    -ms-touch-action: pan-x;
    touch-action: pan-x
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%20fill%3D%23007aff%2F%3E%3C%2Fsvg%3E);
    left: 10px;
    right: auto
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%20fill%3D%23000000%2F%3E%3C%2Fsvg%3E)
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z%20fill%3D%23ffffff%2F%3E%3C%2Fsvg%3E)
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%20fill%3D%23007aff%2F%3E%3C%2Fsvg%3E);
    right: 10px;
    left: auto
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%20fill%3D%23000000%2F%3E%3C%2Fsvg%3E)
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Dhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%20viewBox%3D0%200%2027%2044%3E%3Cpath%20d%3DM27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z%20fill%3D%23ffffff%2F%3E%3C%2Fsvg%3E)
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

.dui-navbar.collapsed:after,
.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #000;
    opacity: .2
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-white .swiper-pagination-bullet,
.swiper-pagination-white .swiper-pagination-bullet-active {
    background: #fff
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #007aff
}

.swiper-pagination-black .swiper-pagination-bullet-active {
    background: #000
}

.swiper-container-vertical>.swiper-pagination {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -o-transform: translate(0, -50%);
    -ms-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet {
    margin: 5px 0;
    display: block
}


/* .swiper-container-horizontal>.swiper-pagination {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px
} */

.swiper-container-3d {
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-container-coverflow .swiper-wrapper {
    -ms-perspective: 1200px
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide,
.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube {
    overflow: visible
}

.swiper-container-cube .swiper-slide {
    pointer-events: none;
    visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-container-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .6;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    z-index: 0
}

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

.swiper-container-horizontal>.swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%
}

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

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

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
    animation: swiper-preloader-spin 1s steps(12, end) infinite
}

.swiper-lazy-preloader:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: 50%;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat
}

.swiper-lazy-preloader-white:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}

@-webkit-keyframes swiper-preloader-spin {
    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes swiper-preloader-spin {
    to {
        transform: rotate(360deg)
    }
}


/***********************************************************************************/

body {
    position: relative;
}

.control-btn,
span.control-arrow-left {
    display: flex;
    align-items: center;
    justify-content: center
}

span.control-arrow-left {
    vertical-align: middle;
    opacity: 0;
    position: relative;
    width: 40px;
    height: 40px
}

span.control-arrow-left .arrow-icon {
    width: 10px;
    height: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPuWbvuaghy1pY29uPC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik04LjMyODMzMzE5LDEyLjUyOTIzOTUgQzguMDM2NjM0NTQsMTIuMjM2NjgxNiA4LjAzNjM4OTE0LDExLjc2Mjg4NTkgOC4zMjc1OTcsMTEuNDcwMDIzMSBMOC4zMjcyNDQzNSwxMS40Njk2Njk5IEwxMy43ODc5NDMyLDYgQzE0LjM3Mjc2ODksNi41ODU3ODY0NCAxNC4zNzI3Njg5LDcuNTM1NTMzOTEgMTMuNzg3OTQzMiw4LjEyMTMyMDM0IEw5LjkxNTYyNTE2LDEyIEwxMy43ODc5NDMyLDE1Ljg3ODY3OTcgQzE0LjM3Mjc2ODksMTYuNDY0NDY2MSAxNC4zNzI3Njg5LDE3LjQxNDIxMzYgMTMuNzg3OTQzMiwxOCBMOC4zMjcyNDQzNSwxMi41MzAzMzAxIEw4LjMyODMzMzE5LDEyLjUyOTIzOTUgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgPC9kZWZzPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0icGMvaGVyby8xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMzk0LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iaW1nLSstZGl2LSstc3dpcGVyLXNjcm9sbGVyLWl0ZW0tKy1uYXYtbWFpbi3okpnniYgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjExMDIzMywgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJpbWciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMTg3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJDYXJvdXNlbC0tLei1sOmprOeBry/pgJrmoI8tLS1XaWRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjExMDIzMywgNzUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSLwn5qr5qih54mILXRlbXBsYXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSLlt6bkvqfnrq3lpLQtbGVmdC1hcnJvdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDQ2NC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ibGlnaHQvYW5nbGUtbGVmdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGlkPSJTaGFwZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
}

.visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0 0 99.9% 99.9%);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0
}

.control-btn {
    position: absolute;
    height: 96px;
    width: 48px;
    background-color: rgba(0, 0, 0, .3);
    top: 50%;
    margin-top: -64px;
    z-index: 400;
    transition: all .4s;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer
}

.control-btn.control-btn-right {
    transform: rotate(180deg)
}

body.display-tips {
    margin-top: 40px
}

body.display-tips section.homepage-banner .cookie-tip,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .eyebrow-icon {
    display: block
}

body.display-tips .dui-navbar .search-box-cover,
body.display-tips .dui-navbar .search-push {
    top: 104px
}

body.display-tips.suggest-country-show .dui-navbar .search-box-cover,
body.display-tips.suggest-country-show .dui-navbar .search-push {
    top: 168px
}

section.homepage-banner.homepage-big-banner {
    position: relative;
    width: 100%;
    height: auto !important;
    background-color: none;
    z-index: 800;
    overflow: hidden;
}

section.homepage-banner .cookie-tip {
    display: none;
    position: absolute;
    height: 40px;
    left: 0;
    width: 100%;
    top: -40px;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    background-color: #535759
}

section.homepage-banner .cookie-tip .cookie-tip-content {
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    justify-content: center
}

section.homepage-banner .cookie-tip .cookie-tip-content a {
    color: #fff;
    text-decoration: none
}

section.homepage-banner .cookie-tip .cookie-tip-content a:hover {
    text-decoration: underline
}

section.homepage-banner .cookie-tip .cookie-tip-click {
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat
}

section.homepage-banner .cookie-tip .cookie-tip-text {
    display: inline-block;
    vertical-align: middle;
    margin-right: 16px
}

section.homepage-banner a.banner-link {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    z-index: 300
}

section.homepage-sub-banner a.banner-link {
    background-color: rgba(0, 0, 0, .5);
}

section.homepage-banner .banner-content {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 0px;
    text-align: center;
    color: #fff;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ededed
}

section.homepage-banner .banner-content>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    top: 0;
    left: 0;
    /*display: none;*/
}

section.homepage-big-banner .banner-content {
    padding-top: 0;
}

section.homepage-banner .banner-content.theme-dark .eyebrow-text,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-dark .eyebrow-text {
    margin-top: 10px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
}

section.homepage-banner .banner-content.theme-dark .banner-button .icon,
section.homepage-banner .banner-content.theme-dark .banner-button .text,
section.homepage-banner .banner-content.theme-dark .banner-slogan,
section.homepage-banner .banner-content.theme-dark h2.banner-title,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-dark .link-box .icon,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-dark .link-box .text,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-dark .logo,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-dark .subhead {
    color: rgba(255, 255, 255, .85);
    z-index: 400;
}

section.homepage-banner .banner-content.theme-dark .banner-button {
    border: 1px solid rgba(0, 0, 0, .85)
}

section.homepage-banner .banner-content.theme-dark .banner-button:hover,
section.homepage-banner .banner-content.theme-dark .dui-watch-video:hover {
    background: rgba(0, 0, 0, .04)
}

section.homepage-banner .banner-content.theme-dark .dui-watch-video {
    border: 1px solid rgba(0, 0, 0, .85);
    color: rgba(0, 0, 0, .85)
}

section.homepage-banner .banner-content.theme-dark .dui-watch-video:after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTIgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+c29saWQvcGxheS12aXN1YWwtY2VudGVyPC90aXRsZT4KICAgIDxnIGlkPSJIb21lIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9IjAuODUiPgogICAgICAgIDxnIGlkPSJzb2xpZC9wbGF5LXZpc3VhbC1jZW50ZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjAwMDAwMCwgLTEuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNC42MjcxMDgzLDguNjU0NTEyMzQgTDUuMDg0OTY1MjQsMTMuOTg0ODI2IEM0LjcyMzQ4ODA1LDE0LjE4NzA4MTEgNC4yNjY0OTI3NSwxNC4wNTgwMDYxIDQuMDY0MjM3NjYsMTMuNjk2NTI4OSBDNC4wMDE2MjU5MSwxMy41ODQ2MjcgMy45Njg3NSwxMy40NTg1NDEgMy45Njg3NSwxMy4zMzAzMTM3IEwzLjk2ODc1LDIuNjY5Njg2MzQgQzMuOTY4NzUsMi4yNTU0NzI3OCA0LjMwNDUzNjQ0LDEuOTE5Njg2MzQgNC43MTg3NSwxLjkxOTY4NjM0IEM0Ljg0Njk3NzM2LDEuOTE5Njg2MzQgNC45NzMwNjMzOCwxLjk1MjU2MjI1IDUuMDg0OTY1MjQsMi4wMTUxNzQgTDE0LjYyNzEwODMsNy4zNDU0ODc2NiBDMTQuOTg4NTg1NSw3LjU0Nzc0Mjc1IDE1LjExNzY2MDUsOC4wMDQ3MzgwNSAxNC45MTU0MDU0LDguMzY2MjE1MjQgQzE0Ljg0Nzc3MTgsOC40ODcwOTIyOSAxNC43NDc5ODUzLDguNTg2ODc4NzUgMTQuNjI3MTA4Myw4LjY1NDUxMjM0IFoiIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)
}

section.homepage-banner .banner-content.theme-light .eyebrow-text,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-light .eyebrow-text {
    color: rgba(255, 255, 255, 1)
}

section.homepage-banner .banner-content.theme-light .banner-button .icon,
section.homepage-banner .banner-content.theme-light .banner-button .text,
section.homepage-banner .banner-content.theme-light .banner-slogan,
section.homepage-banner .banner-content.theme-light h2.banner-title,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-light .link-box .icon,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-light .link-box .text,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-light .logo,
section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-light .subhead {
    color: #fff
}

section.homepage-banner .banner-content.theme-light .banner-button {
    border: 1px solid #fff
}

section.homepage-banner .banner-content.theme-light .banner-button:hover,
section.homepage-banner .banner-content.theme-light .dui-watch-video:hover {
    background: rgba(255, 255, 255, .09)
}

section.homepage-banner .banner-content.theme-light .dui-watch-video {
    border: 1px solid #fff;
    color: #fff
}

section.homepage-banner .banner-content.theme-light .dui-watch-video:after {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTIgMTQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+c29saWQvcGxheS12aXN1YWwtY2VudGVy5aSH5Lu9PC90aXRsZT4KICAgIDxnIGlkPSJIb21lIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ic29saWQvcGxheS12aXN1YWwtY2VudGVyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4wMDAwMDAsIC0xLjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTQuNjI3MTA4Myw4LjY1NDUxMjM0IEw1LjA4NDk2NTI0LDEzLjk4NDgyNiBDNC43MjM0ODgwNSwxNC4xODcwODExIDQuMjY2NDkyNzUsMTQuMDU4MDA2MSA0LjA2NDIzNzY2LDEzLjY5NjUyODkgQzQuMDAxNjI1OTEsMTMuNTg0NjI3IDMuOTY4NzUsMTMuNDU4NTQxIDMuOTY4NzUsMTMuMzMwMzEzNyBMMy45Njg3NSwyLjY2OTY4NjM0IEMzLjk2ODc1LDIuMjU1NDcyNzggNC4zMDQ1MzY0NCwxLjkxOTY4NjM0IDQuNzE4NzUsMS45MTk2ODYzNCBDNC44NDY5NzczNiwxLjkxOTY4NjM0IDQuOTczMDYzMzgsMS45NTI1NjIyNSA1LjA4NDk2NTI0LDIuMDE1MTc0IEwxNC42MjcxMDgzLDcuMzQ1NDg3NjYgQzE0Ljk4ODU4NTUsNy41NDc3NDI3NSAxNS4xMTc2NjA1LDguMDA0NzM4MDUgMTQuOTE1NDA1NCw4LjM2NjIxNTI0IEMxNC44NDc3NzE4LDguNDg3MDkyMjkgMTQuNzQ3OTg1Myw4LjU4Njg3ODc1IDE0LjYyNzEwODMsOC42NTQ1MTIzNCBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+)
}

section.homepage-banner .eyebrow-icon {
    margin: auto;
    display: block
}

section.homepage-banner .eyebrow-text {
    font-size: 30px;
    line-height: 1;
    text-align: left;
    /* height: 30px; */
    letter-spacing: 2px;
}

section.homepage-banner .banner-text .xingh {
    font-size: 24px;
    line-height: 1;
    /* opacity: .65; */
    margin-top: 20px;
    color: #fff;
}

section.homepage-banner img.banner-logo {
    height: 24px;
    width: auto;
    margin-top: 16px;
    margin-bottom: 16px
}

section.homepage-banner h2.banner-title {
    font-size: 40px;
    line-height: 44px;
    margin-top: 8px;
    margin-bottom: 8px
}

section.homepage-banner .banner-slogan {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500
}

.banner_center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 18%;
    width: 66%;
    display: flex;
    flex-direction: column;
    z-index: 250;
}

section.homepage-banner .banner-text {
    /* margin: 0;
    width: auto;
     position: absolute;
    top: 45%;
    left: 18.25%;
    right: 0; */
    position: relative;
    transition: all .6s ease;
    z-index: 250;
    text-align: left;
}

section.homepage-banner .banner-text .banner-headline,
section.homepage-banner .banner-text .banner-slogan,
section.homepage-banner .banner-text .eyebrow {
    opacity: 0;
    transform: translateY(-60px)
}

section.homepage-banner .banner-image {
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: all .8s;
    opacity: 0;
    transform: translateY(120px);
    z-index: 200
}

section.homepage-banner .banner-image img,
section.homepage-banner img.banner-logo {
    display: inline-block;
    vertical-align: bottom
}

section.homepage-banner .banner-btn-box {
    margin-top: 28px;
    display: inline-flex;
    justify-content: left;
    /* position: absolute;
    left: 18.25%;
    right: 0;
    top: 60%; */
    position: relative;
    z-index: 400;
    opacity: 0;
    transform: translateY(-60px)
}

section.homepage-banner .banner-btn-box a.banner-button {
    display: flex;
    align-items: center;
    padding: 5px 22px;
    border-radius: 64px;
    margin: 0 8px;
    transition: all .3s ease
}

section.homepage-banner .banner-btn-box a.banner-button:first-child {
    margin-left: 0;
}

section.homepage-banner .banner-btn-box a.banner-button .text {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1px;
}

section.homepage-banner .banner-btn-box a.banner-button .icon {
    margin-left: 8px;
    font-size: 14px;
    width: 14px;
    height: 14px
}

section.homepage-banner .banner-video {
    position: relative;
    transition: all .6s ease;
    z-index: 400;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 64px
}

section.homepage-banner .banner-video .dui-watch-video {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    padding: 5px 16px;
    border-radius: 64px;
    transition: all .3s ease
}

section.homepage-banner .banner-video .dui-watch-video:after {
    display: inline-block;
    content: '';
    width: 11px;
    height: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 8px;
    vertical-align: bottom;
    transition: all .3s ease
}

section.homepage-banner .swiper-wrapper {
    position: relative;
    z-index: 200
}

section.homepage-banner .swiper-slide {
    height: 100%;
    width: 100%;
    position: relative;
}

section.homepage-banner .banner-swiper-container {
    position: relative;
    min-width: 1200px;
    z-index: 400
}

section.homepage-banner .banner-swiper-container .swiper-pagination {
    bottom: 40px;
    z-index: 999;
}

section.homepage-banner .banner-swiper-container .swiper-pagination span {
    border-radius: 0;
    margin: 0 4px;
    width: 48px;
    height: 3px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 60px;
    opacity: 1;
}

section.homepage-banner .banner-swiper-container .swiper-pagination span.swiper-pagination-bullet-active {
    background-color: #fff;
    width: 48px;
    height: 3px;
    border: none;
    transform: translateY(0);
}

section.homepage-banner .banner-swiper-container:hover .swiper-control .control-arrow-left {
    opacity: 1
}

section.homepage-banner .banner-swiper-container .swiper-control .control-btn {
    background: rgba(0, 0, 0, 0)
}

section.homepage-banner .banner-swiper-container .swiper-control .control-btn:hover {
    background: rgba(0, 0, 0, .3)
}

section.homepage-banner .banner-swiper-container .swiper-control-pre .control-btn {
    left: 0
}

section.homepage-banner .banner-swiper-container .swiper-control-next .control-btn {
    right: 0
}

section.homepage-banner .swiper-slide-active .banner-text {
    z-index: 250
}

section.homepage-banner .swiper-slide-active .banner-text .eyebrow {
    transform: none;
    opacity: 1;
    transition: opacity .6s linear, transform .6s cubic-bezier(.215, .61, .355, 1)
}

section.homepage-banner .swiper-slide-active .banner-text .banner-headline {
    transition-delay: .2s;
    transform: none;
    opacity: 1;
    transition: opacity .6s linear .3s, transform .6s cubic-bezier(.215, .61, .355, 1) .3s
}

section.homepage-banner .swiper-slide-active .banner-text .banner-slogan {
    transition-delay: .4s;
    transform: none;
    opacity: 1;
    transition: opacity .6s linear .6s, transform .6s cubic-bezier(.215, .61, .355, 1) .6s
}

section.homepage-banner .swiper-slide-active .banner-btn-box {
    transition-delay: .6s;
    transform: none;
    opacity: 1;
    transition: opacity .6s linear .9s, transform .6s cubic-bezier(.215, .61, .355, 1) .9s
}

section.homepage-banner .swiper-slide-active .banner-image {
    transform: none;
    opacity: 1
}

section.homepage-banner .swiper-scroller {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -600px;
    z-index: 850
}

section.homepage-banner .swiper-scroller .slider {
    position: absolute;
    left: 0;
    top: 68px;
    width: 2px;
    height: 16px;
    background-color: rgba(255, 255, 255, .25);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    opacity: 0;
    overflow: hidden
}

section.homepage-banner .swiper-scroller .slider .progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #fff;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    transform-origin: 0 0;
    transform: scaleY(0);
    transition: transform 0s linear
}

section.homepage-banner .swiper-scroller .slider.active {
    opacity: 1
}

section.homepage-banner .swiper-scroller .slider.active .progress {
    transform: scaleY(1);
    transition: transform 6s linear
}

section.homepage-banner .swiper-scroller .slider.origin {
    opacity: 0
}

section.homepage-banner .swiper-scroller .slider.origin .progress {
    transform: scaleY(0);
    transition: transform 0s linear
}

section.homepage-banner .swiper-scroller .slider-cancle-progress.active .progress {
    transform: scaleY(1);
    transition: transform 0s linear
}

section.homepage-banner .swiper-scroller ul {
    position: relative;
    height: 140px
}

section.homepage-banner .swiper-scroller ul li {
    position: absolute;
    transition: all .4s;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden
}

section.homepage-banner .swiper-scroller ul li a {
    padding: 6px 40px;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    cursor: default;
    font-weight: 300
}

section.homepage-banner .swiper-scroller ul li:nth-child(1),
section.homepage-banner .swiper-scroller ul li:nth-child(5) {
    opacity: 0;
    visibility: visible;
    cursor: pointer
}

section.homepage-banner .swiper-scroller ul li:nth-child(1) a,
section.homepage-banner .swiper-scroller ul li:nth-child(2) a,
section.homepage-banner .swiper-scroller ul li:nth-child(4) a,
section.homepage-banner .swiper-scroller ul li:nth-child(5) a {
    cursor: pointer
}

section.homepage-banner .swiper-scroller ul li:nth-child(2),
section.homepage-banner .swiper-scroller ul li:nth-child(4) {
    opacity: .5;
    visibility: visible;
    cursor: pointer
}

section.homepage-banner .swiper-scroller ul li:nth-child(3) {
    opacity: 1;
    visibility: visible
}

section.homepage-banner .swiper-scroller ul li:nth-child(3) a {
    font-weight: 600
}

section.homepage-banner .swiper-scroller ul li:nth-child(2) {
    transform: translateY(30px)
}

section.homepage-banner .swiper-scroller ul li:nth-child(3) {
    transform: translateY(60px)
}

section.homepage-banner .swiper-scroller ul li:nth-child(4) {
    transform: translateY(90px)
}

section.homepage-banner .swiper-scroller ul li:nth-child(5) {
    transform: translateY(120px)
}

section.homepage-banner .swiper-scroller ul li:nth-child(6) {
    transform: translateY(150px)
}

section.homepage-banner .swiper-scroller ul li:nth-child(7) {
    transform: translateY(180px)
}

section.homepage-products-banner {
    margin-top: 16px;
    padding: 0 16px
}

section.homepage-products-banner ul.products-banner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

section.homepage-active-banner ul.active-banner-list li.active-banner-item,
section.homepage-products-banner ul.products-banner-list li.products-banner-item {
    position: relative;
    width: calc(50% - 8px);
    padding-top: 33%;
    /* height: 610px; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

section.homepage-active-banner ul.active-banner-list li.active-banner-item:nth-child(n+3),
section.homepage-products-banner ul.products-banner-list li.products-banner-item:nth-child(n+3),
section.homepage-stories-module ul.stories-module-list li.stories-module-item:nth-child(n+3) {
    margin-top: 16px
}

section.homepage-active-banner ul.active-banner-list a.active-banner-link,
section.homepage-products-banner ul.products-banner-list a.products-banner-link,
section.homepage-stories-module ul.stories-module-list li.stories-module-item a.banner-link {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 300;
    cursor: pointer;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, .5));
    opacity: 0;
    z-index: 10;
}

section.homepage-active-banner ul.active-banner-list li:hover a.active-banner-link,
section.homepage-products-banner ul.products-banner-list li:hover a.products-banner-link {
    opacity: 0.6;
}

section.homepage-active-banner ul.active-banner-list .active-banner-text,
section.homepage-products-banner ul.products-banner-list .products-banner-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 520px;
    padding-top: 23%;
    margin: auto;
    text-align: left;
    z-index: 400;
    padding-left: 9%;
    opacity: 1;
    transition: 1s;
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .pro-con,
section.homepage-products-banner ul.products-banner-list .products-banner-text .pro-con {
    margin-top: 200px;
    opacity: 0;
    transition: 1s;
}

section.homepage-active-banner ul.active-banner-list li:hover .active-banner-text .pro-con,
section.homepage-products-banner ul.products-banner-list li:hover .products-banner-text .pro-con {
    opacity: 1;
    margin-top: 0px;
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .eyebrow {
    font-size: 16px;
    line-height: 20px;
    text-align: left
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .eyebrow-icon {
    display: block;
    margin: auto
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .logo-icon {
    margin: 16px auto;
    display: block
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .logo {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 28px;
    line-height: 44px;
    text-align: left;
    font-weight: 500
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .subhead {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    font-weight: 500
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .link-box {
    position: relative;
    z-index: 400;
    text-align: center;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 64px;
    transition: all .3s ease;
    cursor: pointer;
    margin-left: 0px
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .link-box:hover .text {
    text-decoration: underline
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .link-box .text {
    font-size: 14px;
    line-height: 24px
}

section.homepage-products-banner ul.products-banner-list .products-banner-text .link-box .icon {
    font-size: 14px;
    width: 16px;
    height: 16px
}

section.homepage-active-banner {
    margin-top: 16px
}

section.homepage-active-banner ul.active-banner-list {
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .eyebrow-text,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-dark .eyebrow-text {
    color: rgba(255, 255, 255, 1);
    margin-top: 10px;
    font-size: 14px;
    height: 22px;
}

section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .eyebrow-text {
    display: none;
}

section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .link-box .icon,
section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .link-box .text,
section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .logo,
section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .subhead,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-dark .desc,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-dark .headline,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-dark .link-box .icon,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-dark .link-box .text,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-dark .headline,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-dark .link-box .icon,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-dark .link-box .text {
    color: rgba(255, 255, 255, .85);
    z-index: 20;
}

section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-light .eyebrow-text,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-light .eyebrow-text {
    color: rgba(255, 255, 255, .65)
}

section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-light .link-box .icon,
section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-light .link-box .text,
section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-light .logo,
section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-light .subhead,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-light .desc,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-light .headline,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-light .link-box .icon,
section.homepage-child-module .child-module-list .child-module-item .text-box.theme-light .link-box .text,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-light .headline,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-light .link-box .icon,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-light .link-box .text {
    color: #fff
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .eye-brow-icon {
    margin: auto;
    display: block
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .eyebrow {
    font-size: 16px;
    line-height: 20px;
    text-align: left
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .logo-icon {
    margin: 16px auto;
    display: block
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .logo {
    font-size: 31px;
    line-height: 44px;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: 500
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .subhead {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    font-weight: 500
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .link-box {
    position: relative;
    z-index: 400;
    text-align: center;
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 64px;
    transition: all .3s ease;
    cursor: pointer;
    margin-left: 0px
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .link-box:hover .text,
section.homepage-child-module .child-module-list .child-module-item .link-box:hover .text,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box:hover .text {
    text-decoration: underline
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .link-box .text {
    font-size: 14px;
    line-height: 24px
}

section.homepage-active-banner ul.active-banner-list .active-banner-text .link-box .icon {
    font-size: 14px;
    width: 16px;
    height: 16px
}

section.homepage-child-module,
section.homepage-stories-module {
    margin-top: 48px
}

section.homepage-stories-module .content {
    width: 100%;
    max-width: 1200px;
    margin: auto
}

section.homepage-stories-module .stories-text-box {
    max-width: 693px;
    margin: auto;
    text-align: center
}

section.homepage-stories-module .stories-text-box .eyebrow-text {
    color: rgba(0, 0, 0, .45);
    font-size: 16px;
    line-height: 20px
}

section.homepage-stories-module .stories-text-box .eyebrow-text+.title,
section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .eyebrow-text+.headline {
    margin-top: 8px
}

section.homepage-stories-module .stories-text-box .title {
    font-size: 36px;
    line-height: 44px;
    color: rgba(0, 0, 0, .85);
    text-align: center;
    font-weight: 600
}

section.homepage-stories-module .stories-text-box .desc {
    margin-top: 24px;
    font-size: 18px;
    line-height: 28px;
    color: rgba(0, 0, 0, .65)
}

section.homepage-stories-module ul.stories-module-list {
    margin-top: 48px;
    display: flex;
    justify-content: space-between
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item {
    width: calc(50% - 8px);
    height: 592px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text {
    position: absolute;
    top: 48px;
    width: 100%;
    padding: 0 48px;
    text-align: center
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .eyebrow-text {
    font-size: 16px;
    line-height: 20px
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .headline-icon {
    display: block
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .headline {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box {
    position: relative;
    z-index: 400;
    text-align: center;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    transition: all .3s ease;
    cursor: pointer
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box+.link-box {
    margin-left: 8px
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box .text {
    font-size: 16px;
    line-height: 24px
}

section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box .icon {
    font-size: 16px;
    width: 16px;
    height: 16px
}

section.homepage-child-module .content {
    width: 1200px;
    margin: auto;
    text-align: center
}

section.homepage-child-module .title {
    font-size: 40px;
    line-height: 44px;
    font-weight: 500;
    color: rgba(0, 0, 0, .85);
    text-align: center
}

section.homepage-child-module .child-module-list {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

section.homepage-child-module .child-module-list .child-module-item {
    position: relative;
    overflow: hidden;
    cursor: pointer
}

section.homepage-child-module .child-module-list .child-module-item .grid-img {
    transition: all .6s ease
}

section.homepage-child-module .child-module-list .child-module-item:hover .grid-img {
    transform: scale(1.1)
}

section.homepage-child-module .child-module-list .child-module-item .text-box {
    padding: 0 48px;
    position: absolute;
    top: 48px;
    width: 100%
}

section.homepage-child-module .child-module-list .child-module-item .headline {
    font-size: 32px;
    line-height: 36px;
    font-weight: 500;
    text-align: center
}

section.homepage-child-module .child-module-list .child-module-item .desc {
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
    text-align: center
}

section.homepage-child-module .child-module-list .child-module-item .link-box {
    position: relative;
    z-index: 400;
    text-align: center;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    transition: all .3s ease;
    cursor: pointer;
    margin-left: 8px
}

section.homepage-child-module .child-module-list .child-module-item .link-box .text {
    font-size: 16px;
    line-height: 24px
}

section.homepage-child-module .child-module-list .child-module-item .link-box .icon {
    font-size: 16px;
    width: 16px;
    height: 16px
}

section.homepage-child-module .child-module-list .grid-compact {
    width: 389px;
    height: 512px;
    display: block
}

section.homepage-child-module .child-module-list .grid-loose {
    width: 592px;
    height: 440px
}

section.homepage-child-module .child-module-list .grid-loose:nth-child(n+3) {
    margin-top: 16px
}

section.homepage-child-module .child-module-list .grid-hybrid:nth-child(1),
section.homepage-child-module .child-module-list .grid-hybrid:nth-child(2) {
    width: 592px;
    height: 440px
}

section.homepage-child-module .child-module-list .grid-hybrid:nth-child(n+3) {
    width: 389px;
    height: 512px;
    margin-top: 16px
}

section.homepage-service-module {
    background-color: #f7f9fa;
    margin-top: 58px;
    padding: 0 !important;
}

section.homepage-service-module .content {
    max-width: 1200px;
    width: 80%;
    margin: auto
}

section.homepage-service-module ul.service-module-list {
    display: flex;
    justify-content: space-between;
    ;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
}

section.homepage-service-module ul.service-module-list li.service-module-item {
    text-align: center;
    position: relative
}

section.homepage-service-module ul.service-module-list li.service-module-item .service-banner-link {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 300;
    cursor: pointer
}

section.homepage-service-module ul.service-module-list li.service-module-item .icon {
    display: block;
    height: 72px;
    margin: auto
}

section.homepage-service-module ul.service-module-list li.service-module-item .title-icon {
    display: block;
    margin: 16px auto auto
}

section.homepage-service-module ul.service-module-list li.service-module-item .title {
    font-size: 24px;
    line-height: 36px;
    color: rgba(0, 0, 0, .85);
    margin-top: 16px;
    font-weight: 500
}

section.homepage-service-module ul.service-module-list li.service-module-item .link-box {
    position: relative;
    z-index: 400;
    text-align: center;
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 64px;
    transition: all .3s ease;
    cursor: pointer;
    margin-left: 8px
}

section.homepage-service-module ul.service-module-list li.service-module-item .link-box:hover .text {
    text-decoration: underline
}

section.homepage-service-module ul.service-module-list li.service-module-item .link-box .text {
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, .85)
}

section.homepage-service-module ul.service-module-list li.service-module-item .link-box .icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: rgba(0, 0, 0, .85)
}

section.homepage-service-module ul.service-module-list li.service-module-item .link-box.theme-dark {
    color: rgba(0, 0, 0, .85)
}

section.homepage-service-module ul.service-module-list li.service-module-item .link-box.theme-light {
    color: #fff
}

section.homepage-skypixel-module .skypixel-container {
    margin-top: 16px;
    /* height: 720px; */
    position: relative
}

section.homepage-skypixel-module .skypixel-banner-link {
    display: block
}

section.homepage-skypixel-module .contents-container {
    padding: 48px 24px 0;
    text-align: center;
    pointer-events: none;
    z-index: 10
}

section.homepage-skypixel-module .contents-container .content {
    position: relative;
    height: 640px
}

section.homepage-skypixel-module .contents-container,
section.homepage-skypixel-module .contents-container .slide-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

section.homepage-skypixel-module .contents-container .slide-content .desc {
    opacity: 0
}

section.homepage-skypixel-module .contents-container .slide-content.active .desc {
    opacity: 1
}

section.homepage-skypixel-module .contents-container .content .animation-text .desc {
    overflow: hidden;
    min-height: 36px
}

section.homepage-skypixel-module .contents-container .slide-content .animation-text .text {
    opacity: 0;
    transform: translateY(100%)
}

section.homepage-skypixel-module .contents-container .slide-content .animation-text .text.sp-learn-more {
    visibility: hidden
}

section.homepage-skypixel-module .contents-container .slide-content.active .author-text {
    opacity: 1
}

section.homepage-skypixel-module .contents-container .slide-content.prev .animation-text .text {
    transform: translateY(-100%)
}

section.homepage-skypixel-module .contents-container .slide-content.prev .animation-text .text.sp-learn-more {
    transition: all .3s ease
}

section.homepage-skypixel-module .contents-container .slide-content.prev .animation-text .text.product-name-text {
    transition: all .6s ease
}

section.homepage-skypixel-module .contents-container .slide-content.next .animation-text .text {
    transform: translateY(100%)
}

section.homepage-skypixel-module .contents-container .slide-content.next .animation-text .text.sp-learn-more {
    transition: all .3s ease
}

section.homepage-skypixel-module .contents-container .slide-content.next .animation-text .text.product-name-text {
    transition: all .6s ease
}

section.homepage-skypixel-module .contents-container .slide-content.active .animation-text .text {
    opacity: 1;
    transform: translateY(0)
}

section.homepage-skypixel-module .contents-container .slide-content.active .animation-text .text.sp-learn-more {
    visibility: visible;
    transition: all .6s ease .3s
}

section.homepage-skypixel-module .contents-container .slide-content.active .animation-text .text.product-name-text {
    transition: all .6s ease
}

section.homepage-skypixel-module .contents-container .sp-learn-more {
    margin-top: 16px;
    pointer-events: auto;
    position: relative
}

section.homepage-skypixel-module .contents-container .sp-learn-more:hover .sp-learn-more-text {
    text-decoration: underline
}

section.homepage-skypixel-module .contents-container .sp-learn-more-text {
    display: inline-block;
    padding-right: 16px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 100% center;
    line-height: 24px;
    font-size: 16px;
    color: #fff;
    transition: all .3s ease
}

section.homepage-skypixel-module .contents-container .author-text {
    position: absolute;
    bottom: 88px;
    line-height: 24px;
    font-size: 16px;
    color: rgba(255, 255, 255, .45);
    width: 100%;
    text-align: center;
    word-wrap: break-word;
    opacity: 0;
    transition: opacity .3s ease .3s
}

section.homepage-skypixel-module .desc,
section.homepage-skypixel-module .product-name-text {
    font-size: 36px;
    line-height: 44px;
    font-weight: 500;
    color: #fff;
    padding-bottom: 4px
}

section.homepage-skypixel-module .sp-learn-more {
    line-height: 24px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    word-wrap: break-word;
    margin: 24px auto 0 8px;
    display: inline-flex !important;
    align-items: center
}

section.homepage-skypixel-module .sp-learn-more .learn-text {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

section.homepage-skypixel-module .sp-learn-more .icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #fff;
}

section.homepage-skypixel-module .sp-learn-more:hover {
    text-decoration: underline
}

section.homepage-skypixel-module .swiper-container {
    position: relative;
    height: 100%
}

section.homepage-skypixel-module .swiper-container .swiper-slide {
    width: 63%;
    padding-top: 35.5%;
    /*width: 1200px;*/
    /*height: 675px;*/
    overflow: hidden
}

section.homepage-skypixel-module .swiper-container .slide-grid-img {
    width: auto;
    height: 100%
}

section.homepage-skypixel-module .swiper-container .slide-grid-content,
section.homepage-skypixel-module .swiper-container .slide-video-poster {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 20;
    transform: scale(1.2);
    transition: transform .6s cubic-bezier(.25, .39, .25, 1), opacity .6s ease-in-out
}

section.homepage-skypixel-module .swiper-container .slide-video-poster {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

section.homepage-skypixel-module .swiper-container .video-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 30;
}

section.homepage-skypixel-module .swiper-container .slide-grid-content {
    opacity: 1
}

section.homepage-skypixel-module .swiper-container .swiper-slide-active .slide-grid-content,
section.homepage-skypixel-module .swiper-container .swiper-slide-active .slide-video-poster {
    transform: scale(1)
}

section.homepage-skypixel-module .swiper-pagination-box {
    position: absolute;
    bottom: 28px;
    padding: 0 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 100%
}

section.homepage-skypixel-module .swiper-pagination-bullet {
    height: 100%;
    width: 48px;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 4px;
    opacity: 1
}

section.homepage-skypixel-module .swiper-pagination-bullet .progress {
    opacity: 1;
    width: 48px;
    height: 3px;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 60px;
    position: relative;
    overflow: hidden
}

section.homepage-skypixel-module .swiper-pagination-bullet .progress:after {
    content: " ";
    display: block;
    height: 3px;
    width: 0;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

section.homepage-skypixel-module .swiper-pagination-bullet-active .progress:after {
    opacity: 1;
    width: 48px
}

section.homepage-skypixel-module .swiper-btn-next {
    right: calc((100vw - 1152px)/2)
}

section.homepage-skypixel-module .swiper-btn-next:hover {
    background-color: rgba(0, 0, 0, .3)
}

section.homepage-skypixel-module .swiper-btn-next .arrow-icon {
    transform: rotate(180deg)
}

section.homepage-skypixel-module .swiper-btn-prev {
    left: calc((100vw - 1152px)/2)
}

section.homepage-skypixel-module .swiper-btn-prev:hover {
    background-color: rgba(0, 0, 0, .3)
}

section.homepage-skypixel-module .swiper-next-area {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    height: 100%;
    width: calc((100vw - 1232px)/2)
}

section.homepage-skypixel-module .swiper-prev-area {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    height: 100%;
    width: calc((100vw - 1232px)/2)
}

section.homepage-skypixel-module .swiper-next-area:hover,
section.homepage-skypixel-module .swiper-prev-area:hover {
    cursor: pointer
}

section.homepage-skypixel-module .swiper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    z-index: 9;
    cursor: pointer
}

section.homepage-skypixel-module .arrow-icon {
    width: 10px;
    height: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iN3B4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA3IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHRpdGxlPuWbvuaghy1pY29uPC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGQ9Ik04LjMyODMzMzE5LDEyLjUyOTIzOTUgQzguMDM2NjM0NTQsMTIuMjM2NjgxNiA4LjAzNjM4OTE0LDExLjc2Mjg4NTkgOC4zMjc1OTcsMTEuNDcwMDIzMSBMOC4zMjcyNDQzNSwxMS40Njk2Njk5IEwxMy43ODc5NDMyLDYgQzE0LjM3Mjc2ODksNi41ODU3ODY0NCAxNC4zNzI3Njg5LDcuNTM1NTMzOTEgMTMuNzg3OTQzMiw4LjEyMTMyMDM0IEw5LjkxNTYyNTE2LDEyIEwxMy43ODc5NDMyLDE1Ljg3ODY3OTcgQzE0LjM3Mjc2ODksMTYuNDY0NDY2MSAxNC4zNzI3Njg5LDE3LjQxNDIxMzYgMTMuNzg3OTQzMiwxOCBMOC4zMjcyNDQzNSwxMi41MzAzMzAxIEw4LjMyODMzMzE5LDEyLjUyOTIzOTUgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgPC9kZWZzPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0icGMvaGVyby8xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMzk0LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iaW1nLSstZGl2LSstc3dpcGVyLXNjcm9sbGVyLWl0ZW0tKy1uYXYtbWFpbi3okpnniYgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjExMDIzMywgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJpbWciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAtMTg3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJDYXJvdXNlbC0tLei1sOmprOeBry/pgJrmoI8tLS1XaWRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjExMDIzMywgNzUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSLwn5qr5qih54mILXRlbXBsYXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSLlt6bkvqfnrq3lpLQtbGVmdC1hcnJvdyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDQ2NC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0ibGlnaHQvYW5nbGUtbGVmdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuMDAwMDAwLCAzNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPG1hc2sgaWQ9Im1hc2stMiIgZmlsbD0id2hpdGUiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXNrPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGlkPSJTaGFwZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)
}

section.homepage-banner .swiper-slide-active.banner-swiper-slide.swiper-slide-countdown .banner-text {
    z-index: 400
}

section.homepage-banner .swiper-slide-active.banner-swiper-slide.swiper-slide-countdown .banner-text .banner-time {
    transition-delay: .2s;
    transform: none !important;
    opacity: 1 !important;
    transition: opacity .6s linear .3s, transform .6s cubic-bezier(.215, .61, .355, 1) .3s
}

section.homepage-banner .swiper-slide-active.banner-swiper-slide.swiper-slide-countdown .banner-text .banner {
    transition-delay: .4s;
    transform: none !important;
    opacity: 1 !important;
    transition: opacity .6s linear .6s, transform .6s cubic-bezier(.215, .61, .355, 1) .6s
}

section.homepage-banner .swiper-slide-active.banner-swiper-slide.swiper-slide-countdown .banner-learn-more {
    transform: none !important;
    opacity: 1 !important;
    transition-delay: .6s;
    transition: opacity .6s linear .9s, transform .6s cubic-bezier(.215, .61, .355, 1) .9s
}

section.homepage-banner .swiper-slide-countdown .banner,
section.homepage-banner .swiper-slide-countdown .banner-learn-more,
section.homepage-banner .swiper-slide-countdown .banner-time,
section.homepage-banner .swiper-slide-countdown .eyebrow {
    opacity: 0;
    transform: translateY(-60px)
}

section.homepage-banner .swiper-slide-countdown .banner-content.theme-dark .eyebrow-text {
    color: rgba(0, 0, 0, .45)
}

section.homepage-banner .swiper-slide-countdown .banner-content.theme-dark .banner-time,
section.homepage-banner .swiper-slide-countdown .banner-content.theme-dark .banner-title {
    color: rgba(0, 0, 0, .85)
}

section.homepage-banner .swiper-slide-countdown .banner-content.theme-light .eyebrow-text {
    color: rgba(255, 255, 255, .65)
}

section.homepage-banner .swiper-slide-countdown .banner-content.theme-light .banner-time,
section.homepage-banner .swiper-slide-countdown .banner-content.theme-light .banner-title {
    color: #fff
}

section.homepage-banner .swiper-slide-countdown .banner-content.banner-vertical-align-middle .banner-text {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

section.homepage-banner .swiper-slide-countdown .banner-content.banner-vertical-align-top .banner-text {
    left: 50%;
    top: 112px;
    transform: translate(-50%, 0)
}

section.homepage-banner .swiper-slide-countdown .banner-text {
    position: absolute;
    z-index: 0
}

section.homepage-banner .swiper-slide-countdown .banner-text .banner-text-link {
    position: absolute;
    width: 100%;
    height: calc(100% - 48px);
    left: 0
}

section.homepage-banner .swiper-slide-countdown .banner-logo {
    margin: 8px 0 0
}

section.homepage-banner .swiper-slide-countdown .banner-title {
    font-size: 20px;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 500
}

section.homepage-banner .swiper-slide-countdown .banner-logo-text {
    font-size: 40px;
    line-height: 44px
}

section.homepage-banner .swiper-slide-countdown .banner-time {
    margin-top: 0
}

section.homepage-banner .swiper-slide-countdown .banner-slogan {
    margin-top: 8px
}

section.homepage-banner .swiper-slide-countdown .eyebrow-text {
    font-size: 16px;
    line-height: 20px;
    font-weight: lighter;
    color: rgba(0, 0, 0, .45)
}

section.homepage-banner .swiper-slide-countdown .eyebrow-text span:after {
    display: inline-block;
    content: '|';
    margin: 0 16px;
    color: #fff;
    vertical-align: top;
    font-size: 12px
}

section.homepage-banner .swiper-slide-countdown .eyebrow-text span:last-child:after {
    display: none
}

section.homepage-banner .swiper-slide-countdown .eyebrow-icon {
    display: block;
    margin: 0 auto
}

section.homepage-banner .swiper-slide-countdown .banner-video-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden
}

section.homepage-banner .swiper-slide-countdown .banner-video-bg video {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -o-object-fit: cover;
    object-fit: cover;
    height: 100%;
    min-width: 100%
}

section.homepage-banner .swiper-slide-countdown .countdown-thumb {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    margin-top: 8px
}

section.homepage-banner .swiper-slide-countdown .banner-more {
    display: none;
    margin-top: 32px
}

section.homepage-banner .swiper-slide-countdown .watch-live {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    height: 24px;
    color: #fff;
    cursor: pointer;
    transition: all .3s ease
}

section.homepage-banner .swiper-slide-countdown .watch-live:after {
    display: inline-block;
    content: '';
    width: 16px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 8px;
    vertical-align: text-top;
    transition: all .3s ease
}

section.homepage-banner .swiper-slide-countdown .watch-live.active,
section.homepage-banner .swiper-slide-countdown .watch-live:hover {
    color: rgba(255, 255, 255, .7);
    text-decoration: none
}

section.homepage-banner .swiper-slide-countdown .watch-live.active:before,
section.homepage-banner .swiper-slide-countdown .watch-live:after,
section.homepage-banner .swiper-slide-countdown .watch-live:hover:before {
    background-image: url(//www4.djicdn.com/assets/images/v3/homepage/icon-video-6eec1256d5f6847b187c39b338aa4d75.svg)
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more {
    height: 40px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin-top: 24px
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more .count-down-btn {
    display: none
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more.theme-dark .banner-learn-more-link {
    color: rgba(0, 0, 0, .85);
    border: 1px solid rgba(0, 0, 0, .85)
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more.theme-dark .banner-learn-more-link:hover {
    background-color: rgba(0, 0, 0, .04)
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more.theme-light .banner-learn-more-link {
    color: #fff;
    border: 1px solid #fff
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more.theme-light .banner-learn-more-link:hover {
    background-color: rgba(255, 255, 255, .09)
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more .banner-learn-more-link {
    padding: 6px 16px;
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    vertical-align: middle;
    border-radius: 60px;
    transition: all .3s ease;
    display: inline-block;
    margin: 0 8px
}

section.homepage-banner .swiper-slide-countdown .banner-learn-more .banner-learn-more-link .fa {
    width: 14px;
    height: 14px;
    font-size: 14px;
    margin-left: 8px
}

.suggest-country-show .dui-navbar {
    transition: none
}

.suggest-country-show #site-header {
    top: 64px
}

.suggest-country-show #cookie-tip {
    top: -104px
}

.suggest-country-show #suggest-country-pane {
    background-color: #303233;
    color: #fff
}

.suggest-country-show #suggest-country-pane .suggest-country-jump {
    background-color: #fff;
    color: #303233;
    background-image: none
}

.suggest-country-show #suggest-country-pane .dui-btn.suggest-country-other {
    border-color: #fff;
    color: #fff
}

.suggest-country-show #suggest-country-pane .close {
    background-image: url(//www2.djicdn.com/assets/images/v3/head/close-suggest-country.svg)
}

@media screen and (max-width:768px) {
    section.homepage-banner.homepage-big-banner {
        height: 100vh;
    }

    section.homepage-banner .banner-content {
        /* background-position: right; */
        /*background: none !important;*/
    }

    /*section.homepage-banner .banner-content>img {*/
    /*    display: block;*/
    /*}*/
    section.homepage-banner .banner-swiper-container {
        min-width: 100%;
    }

    section.homepage-banner .swiper-scroller {
        left: 0;
        margin-left: 0;
    }

    section.homepage-banner .banner-text {
        top: 18%;
        left: 10%;
        text-align: center;
        width: 80%;
    }

    section.homepage-banner .eyebrow-text {
        font-size: 24px !important;
        text-align: center;
    }

    section.homepage-banner .banner-text .xingh {
        font-size: 20px;
    }

    section.homepage-banner .banner-btn-box {
        margin-top: 25px;
        left: 10%;
        width: 80%;
    }

    section.homepage-banner .banner-btn-box a.banner-button:first-child,
    section.homepage-banner .banner-btn-box a.banner-button {
        margin: 0 auto;
    }

    section.homepage-active-banner {
        padding: 0;
        margin-top: 0;
    }

    section.homepage-active-banner ul.active-banner-list {
        padding: 0 0;
    }

    section.homepage-active-banner ul.active-banner-list li,
    section.homepage-products-banner li {
        margin-bottom: 16px;
        width: 100% !important;
        height: 100vh;
        background-position: center bottom !important;
    }

    section.homepage-active-banner ul.active-banner-list li.active-banner-item,
    section.homepage-products-banner ul.products-banner-list li.products-banner-item {
        height: 100vh;
        margin-bottom: 0;
    }

    section.homepage-active-banner ul.active-banner-list li.active-banner-item:nth-child(n+3),
    section.homepage-products-banner ul.products-banner-list li.products-banner-item:nth-child(n+3),
    section.homepage-stories-module ul.stories-module-list li.stories-module-item:nth-child(n+3) {
        margin-top: 0;
    }

    section.homepage-active-banner ul.active-banner-list li:nth-child(2),
    section.homepage-products-banner li:nth-child(1) {
        background-position: center bottom !important;
    }

    section.homepage-products-banner {
        padding: 0;
        margin: 0;
    }

    .homepage-skypixel-module {
        padding: 0 14px;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text .pro-con,
    section.homepage-products-banner ul.products-banner-list .products-banner-text .pro-con {
        opacity: 1;
        margin-top: 0;
    }

    section.homepage-banner .banner-content.theme-dark .eyebrow-text,
    section.homepage-products-banner ul.products-banner-list .products-banner-text.theme-dark .eyebrow-text {
        margin-top: 0;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text,
    section.homepage-products-banner ul.products-banner-list .products-banner-text {
        margin: 0 5%;
        max-width: 90%;
        padding-top: 14%;
        padding-left: 0;
        text-align: center;
    }

    section.homepage-products-banner ul.products-banner-list .products-banner-text .logo {
        text-align: center;
        font-size: 24px;
    }

    section.homepage-products-banner ul.products-banner-list .products-banner-text .subhead {
        font-size: 14px;
        text-align: center;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text .logo {
        font-size: 24px !important;
        line-height: 1.4;
        margin-bottom: 20px;
        text-align: center;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text .subhead {
        font-size: 14px;
        text-align: center;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text .link-box {
        margin-top: 14px;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text.theme-dark .eyebrow-text,
    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-dark .eyebrow-text {
        margin-top: 0;
    }

    section.homepage-skypixel-module .skypixel-container {
        margin-top: 0;
        height: 38vh
    }

    section.homepage-skypixel-module .contents-container .content {
        height: 100%;
    }

    section.homepage-skypixel-module .swiper-pagination-box {
        bottom: 10px;
    }

    section.homepage-skypixel-module .contents-container {
        padding: 40px 20px 0;
    }

    section.homepage-skypixel-module .desc,
    section.homepage-skypixel-module .product-name-text {
        /* font-size: 24px; */
        font-size: 20px !important;
        line-height: 1.4;
    }

    section.homepage-skypixel-module .sp-learn-more .learn-text {
        font-size: 14px;
        line-height: 2;
    }

    section.homepage-skypixel-module .swiper-container .slide-grid-content,
    section.homepage-skypixel-module .swiper-container .slide-video-poster {
        object-fit: cover;
    }

    section.homepage-skypixel-module .swiper-btn-next {
        right: 0;
    }

    section.homepage-skypixel-module .swiper-btn-prev {
        left: 0;
    }

    section.homepage-child-module,
    section.homepage-stories-module {
        margin-top: 28px;
        padding: 0 14px;
    }

    section.homepage-stories-module .content {
        width: 100%;
    }

    section.homepage-stories-module ul.stories-module-list {
        display: block;
        margin-top: 28px;
    }

    section.homepage-stories-module .stories-text-box .title {
        font-size: 24px !important;
        line-height: 1.4;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .headline {
        font-size: 20px;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box .text {
        font-size: 14px;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .link-box {
        margin-top: 0;
    }

    section.homepage-active-banner ul.active-banner-list a.active-banner-link,
    section.homepage-products-banner ul.products-banner-list a.products-banner-link,
    section.homepage-stories-module ul.stories-module-list li.stories-module-item a.banner-link {
        opacity: 0.6;
        background: none;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item {
        width: 100%;
        height: auto;
        background: none !important;
        margin-bottom: 16px;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-light .link-box .text,
    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .eyebrow-text+.headline {
        color: #222;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .eyebrow-text+.headline br {
        display: none;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text {
        top: auto;
        padding: 0px 20px 10px 20px;
        bottom: 0;
        background: rgba(255, 255, 255, 0.67);
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text.theme-light .link-box .icon {
        color: #333;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item a.banner-link {
        z-index: 0;
    }

    section.homepage-service-module {
        box-shadow: 0 0 10px #999;
        padding: 28px;
        width: calc(100% - 28px);
        margin: 0 auto 16px;
        background: #fff;
    }

    section.homepage-service-module .content {
        width: 100%;
    }

    section.homepage-service-module ul.service-module-list li.service-module-item .icon {
        height: 42px;
    }

    section.homepage-service-module ul.service-module-list li.service-module-item .title {
        font-size: 14px !important;
        margin-top: 5px;
    }

    section.homepage-service-module ul.service-module-list li.service-module-item .link-box .text {
        font-size: 14px;
    }

    section.homepage-service-module ul.service-module-list li.service-module-item .link-box {
        display: none;
        font-size: 14px;
        margin-top: 0;
    }
}


/* ------ */

.flexBox {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: space-between;
    -webkit-align-items: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.nyBanner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.nyBanner.half {
    height: 67vh;
}

.nybanTxt {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 1200px;
    text-align: left;
    z-index: 21;
}

.newsBanTxt {
    width: 1300px;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
}

.nybanTxt span {
    font-size: 40px;
    color: #fff;
    letter-spacing: 1px;
}

.nybanTxt.left {
    width: 70%;
    left: 15%;
    text-align: left;
}

.nybanTxt.left img {
    display: block;
    width: 208px;
    margin-bottom: 14px;
}

.nybanTxt.nyMan {
    text-align: center;
    top: 14%;
    transform: translateY(0);
}

.nybanTxt.nyMan img {
    margin: 0 auto;
}

.nybanPic {
    width: 100%;
    height: 100%;
    /*background: none !important;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nybanPic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

@media(max-width:768px) {
    .nybanPic {
        height: 100vh;
    }

    .nyBanner.half .nybanPic {
        height: 100%;
    }
}

.bgf8 {
    background: #f8f8f8;
}

.W1200 {
    width: 1200px;
    margin: 0 auto;
}

.W1300 {
    width: 1300px;
    margin: 0 auto;
}

.W1050 {
    width: 1050px;
    margin: 0 auto;
}

.W1350 {
    width: 70%;
    margin: 0 auto;
}

.nyTitle {
    padding: 40px 0;
    border-bottom: 1px solid #e5e5e5;
    /* margin-bottom: 40px; */
    /* text-align: center; */
}

.nyTitle ul {
    justify-content: center;
}

.nyTitle li {
    position: relative;
    /* flex-grow: 1; */
    padding: 0 40px;
    /* border-right: 1px solid #e5e5e5; */
}

.nyTitle li::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    top: 4px;
    right: 0;
    background: #e5e5e5;
}

.nyTitle li:last-child:before {
    content: none;
}

.nyTitle li a {
    position: relative;
    color: #666666;
    font-size: 16px;
}

.nyTitle li a.active,
.nyTitle li a:hover {
    color: #222222;
    font-weight: bold;
}

.nyTitle li a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 5px;
    left: 0;
    bottom: 0;
    background: #ecc69b;
    transition: all 0.5s;
}

.nyTitle li a.active::before,
.nyTitle li a:hover::before {
    width: 100%;
}

.nyTitle li a span {
    position: relative;
    font-size: 16px;
}

.proInner {
    padding-bottom: 80px;
}

.productBox {
    margin-top: 40px;
}

.proList li {
    width: 48%;
    margin: 0 1% 2%;
    background: #fff;
    border-radius: 8px;
    padding: 50px 30px;
    transition: all 0.5s;
}

.proList li:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, .09);
}

.proList li a {
    width: 100%;
}

.proListText {
    width: 60%;
    align-content: space-between;
}

.proListTit {
    width: 100%;
}

.proListText h3 {
    color: #222222;
    font-size: 20px;
}

.proListText p {
    font-size: 14px;
    color: #888888;
    margin-top: 5px;
}

.proListText span {
    display: block;
    color: #888888;
    font-size: 14px;
}

.proListMore {
    display: inline-flex;
    align-items: center;
}

.proListMore .icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #888888;
    text-align: center;
}

.proListImg {
    width: 40%;
    padding-left: 12%;
}

.page {
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
}

.page a {
    display: inline-block;
    border-radius: 5px;
    padding: 6px 12px;
    color: #222222;
    font-size: 16px;
    margin: 0 2px;
    transition: all 0.3s;
}

.page a:hover,
.page a.current {
    background: #000;
    color: #fff;
}

.aboutOne {}

.aboutTitle {
    border-bottom: none;
}

.aboutTitle li::before {
    content: none;
}

.aboutOneText h3 {
    font-size: 36px;
    color: #222222;
}

.aboutOneText span {
    display: block;
    margin: 10px auto;
    width: 1px;
    height: 34px;
    /* background: #d2d2d2; */
}

.aboutOneText p {
    font-size: 14px;
    color: #888;
    line-height: 2;
    margin: 10px 0;
}

.pd80 {
    padding: 60px 0;
}

.img_pic {
    position: relative;
    width: 100%;
    padding-top: 50%;
    overflow: hidden;
}

.img_pic img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
    -o-object-fit: cover;
    object-fit: cover;
}

.img_pic img:hover {
    transform: scale(1.05);
}

.aboutOneNr {
    margin-top: 30px;
}

.aboutOneNrPic {
    width: 66.666%;
    padding-right: 7%;
}

.aboutOneNrTxt {
    width: 33.3333%;
}

.aboutOneNrTxt li {
    margin: 30px 0;
    padding-bottom: 30px;
    border-bottom: 1px solid #eeeeee;
}

.aboutOneNrTxt li h3 {
    font-size: 20px;
    font-weight: bold;
    color: #222;
}

.aboutOneNrTxt li p {
    font-size: 14px;
    color: #888888;
    margin-top: 10px;
}

.aboutOneNrPic {
    position: relative;
    cursor: pointer;
}

.aboutOneNrPic .img_pic {
    padding-top: 0;
    height: 100%;
}

.aboutOneNrPic .img_pic::before {
    position: absolute;
    width: 60px;
    content: '';
    height: 60px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    opacity: 0.2;
    z-index: 2;
}

.aboutOneNrPic:hover .img_pic::before {
    opacity: 0.3;
}

.aboutOneNrPic .img_pic::after {
    position: absolute;
    width: 60px;
    content: '';
    height: 60px;
    border-radius: 50%;
    background: url(../picture/sjx.svg) no-repeat center;
    background-size: 20px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.video_bg {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 999;
    display: none;
}

.video_inner {
    position: fixed;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    text-align: right;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none;
}

.video_inner video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.video_inner span {
    position: absolute;
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    top: 30px;
    right: 30px;
    display: inline-block;
    font-size: 26px;
    color: #222;
    cursor: pointer;
    z-index: 9;
    text-align: center;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.video_inner span:hover {
    background: rgba(255, 255, 255, .5);
}

.bt10 {
    border-bottom: 10px solid #fafafa;
}

.aboutTwo {
    /* background: url(../picture/bjbg.png) no-repeat bottom center;
    background-size: cover; */
}

.abBjBox {
    background: url(../picture/bj-Bg.jpg) no-repeat bottom center;
    background-size: cover;
    /* padding: 100px 0; */
}

.abHeight {
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center;
    min-height: calc(100vh - 221px);
    /* min-height: 686px; */
    align-items: center;
}

.abHeight>img {
    display: none;
}

.wrapper {
    align-items: center;
}

.aboutTwoBox {
    overflow: hidden;
}

.aboutBt {
    margin-bottom: 40px;
}

#tab {
    align-items: center;
    padding: 40px 0 40px 0;
}

#tab .tab-con-item {
    display: none;
}

#tab .tab-nav {
    position: relative;
    width: 482px;
    height: 482px;
}

#tab .tab-nav>img {
    position: absolute;
    width: 44.5%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 9;
}


/* #tab .abYwbj li {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
} */

#tab .j-tab-nav a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #0D0D0D;
    font-size: 24px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#tab .j-tab-nav .slice.current a {
    font-size: 24px;
    font-weight: bold;
}

#tab .j-tab-nav .slice-1 a {
    text-align: center;
    top: 41%;
    transform: rotate(45deg);
}

#tab .j-tab-nav .slice-2 a {
    text-align: center;
    left: auto;
    right: 0;
    top: 46%;
    transform: rotate(-45deg);
}

#tab .j-tab-nav .slice-3 a {
    text-align: center;
    top: auto;
    bottom: 41%;
    transform: rotate(-135deg);
}

#tab .j-tab-nav .slice-4 a {
    text-align: center;
    top: 42%;
    transform: rotate(-225deg);
    left: -3%;
}

.pie {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    transform: rotate(0deg)
        /*针对mac safari浏览器兼容*/
}

.pie::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #747474;
    z-index: 9;
    transform: rotate(45deg);
}

.pie::after {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background: #747474;
    z-index: 9;
    transform: rotate(-45deg);
}

.slice {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    background: rgba(255, 255, 255, .5);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.slice.current {
    background: rgba(255, 255, 255, .65);
}

.slice-1 {
    transform: rotate(-45deg) skewY(0deg);
}

.slice-2 {
    transform: rotate(45deg) skewY(0deg);
}

.slice-3 {
    transform: rotate(135deg) skewY(0deg);
}

.slice-4 {
    transform: rotate(225deg) skewY(0deg);
}

#tab .tab-con {
    width: calc(100% - 482px);
    padding-left: 7%;
}

#tab .tab-con h3 {
    font-size: 18px;
    color: #222;
    font-weight: bold;
}

#tab .tab-con p {
    font-size: 16px;
    color: #fff;
    margin-top: 30px;
    line-height: 2;
    text-align: justify;
}


/* xiugai */

.pd60 {
    padding: 60px 0;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
}

.lkTitle {
    text-align: center;
    margin-bottom: 40px;
}

.lkTitle h3 {
    color: #222;
    font-size: 36px;
    margin-bottom: 12px;
    line-height: 1;
}

.lkTitle p span {
    display: block;
    color: #222;
    font-size: 16px;
    line-height: 1.8;
}

.abOneList li {
    width: 31%;
    position: relative;
}

.abOneList li .abOneListTu {
    padding-top: 135%;
}

.abOneList li .abOneListTxt {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 10% 5%;
    text-align: center;
}

.abOneList li .abOneListTxt h3 {
    font-size: 28px;
    color: #222;
    margin-bottom: 20px;
}

.abOneList li .abOneListTxt p {
    min-height: 58px;
}

.abOneList li .abOneListTxt p span {
    display: block;
    font-size: 16px;
    color: #222;
    line-height: 1.8;
}

.pdt0 {
    padding-top: 0;
}


/*  xiugai end */


/* history */

.timer-parent {
    position: relative;
    padding: 0px 50px;
    overflow: hidden;
}

.con {
    width: 100%;
}

.mid {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}

.mid .left {
    width: 28%;
    position: relative;
    overflow: hidden;
}

.mid .left h2 {
    color: #b2b2b2;
    font-size: 80px;
    font-weight: bold;
}

.mid .left .photo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.mid .left .photo .pic {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-size: contain;
}

.mid .left .photo.navOutNext {
    -webkit-animation: scaleUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
    animation: scaleUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.mid .left .photo.navInNext {
    -webkit-animation: scaleDownUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
    animation: scaleDownUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.mid .right {
    width: 72%;
}

.his_list li {
    font-size: 16px;
}

.his_list li span {
    font-weight: bold;
    width: 30px;
    font-size: 16px;
    text-align: left;
    color: #222222;
}

.his_list li sub {
    position: relative;
    width: 80px;
}

.his_list li sub::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 8px;
    left: 50%;
    background: #e5e5e5;
}

.his_list li:last-child sub::before {
    content: none;
}

.his_list li sub::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    top: 8px;
    left: 50%;
    background: #ecc69b;
}

.his_list li p {
    width: calc(100% - 110px);
    font-size: 14px;
    padding-bottom: 20px;
    color: rgb(136, 136, 136);
}

.mid .right .time-con {
    height: 50px;
    position: relative;
    width: 100%;
}

.mid .right .time-con .time-msg {
    position: absolute;
    width: 100%;
    color: rgba(0, 0, 0, 0.05);
    left: 0;
    bottom: -0.8rem;
    white-space: nowrap;
    font-size: 2rem;
    filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    z-index: 9;
    line-height: 1.6rem;
}

.mid .right .time-con .time-msg.on {
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

.mid .right .time-con .time-msg.navOutNext {
    -webkit-animation: scaleUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
    animation: scaleUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.mid .right .time-con .time-msg.navInNext {
    -webkit-animation: scaleDownUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
    animation: scaleDownUp 1.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.mid .right .msg-box {
    position: relative;
    z-index: 20;
}

.mid .right .msg-box .note {
    position: relative;
    display: none;
    animation-duration: 1.5s;
    opacity: 1;
    visibility: visible;
}

.mid .right .msg-box .note.on {
    display: block;
}

.mid .right .msg-box .note .box {
    position: relative;
}

.mid .right .msg-box .note .box h2 {
    color: #000;
}

.mid .right .msg-box .note .box .text {
    line-height: 24px;
    padding-right: 10px;
    overflow: auto;
    height: 96px;
}

.mid .right .msg-box .note .box .text.on {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.mid .right .msg-box .note .box .more {
    position: absolute;
    left: 0;
    top: calc(100% + 12px);
}

.mid .his_list {
    line-height: 2;
    cursor: pointer;
}

.btm {
    position: relative;
}

.btm .timer-box {
    width: 100%;
    overflow: hidden;
    /* margin: 0 10%; */
}

.btm .timer-box .line {
    position: absolute;
    height: 1px;
    left: 0;
    width: 100%;
    top: 36px;
    background-color: #eeeeee;
}

.btm .timer-box .t-prev {
    position: absolute;
    left: 4%;
    top: -20px;
    color: #909090;
    background-color: #e9e9e9;
}

.btm .timer-box .t-prev:hover {
    color: #fff;
    background-color: #f2e100;
}

.btm * {
    box-sizing: border-box;
}

.btm .timer-box .t-next {
    position: absolute;
    right: 4%;
    top: -20px;
    color: #909090;
    background-color: #e9e9e9;
}

.btm .timer-box .t-next:hover {
    color: #fff;
    background-color: #f2e100;
}

.btm .timer-box .timer-dot {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: auto;
    width: 100%;
    overflow: hidden;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}

.btm .timer-box .timer-dot .timer-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    flex-wrap: wrap;
    position: relative;
}

.btm .timer-box .timer-dot .timer-list .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    line-height: 5px;
    text-align: center;
    /* background-color: #909090; */
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}

.btm .timer-box .timer-dot .timer-list .pre-line {
    position: absolute;
    top: 3px;
    width: 100%;
    height: 1px;
    left: 50%;
    opacity: 0;
}

.btm .timer-box .timer-dot .swiper-slide-thumb-active .timer-list .pre-line:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #f2e100;
    animation-fill-mode: both;
    animation-duration: 2.8s;
    animation-timing-function: linear;
}


/* .btm .timer-box .timer-dot .timer-list:last-of-type .pre-line {
    display: none;
} */

.btm .timer-box .timer-dot .timer-list>small {
    width: 100%;
    color: #888888;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 10px;
    line-height: 24px;
}

.btm .timer-box .timer-dot .swiper-slide-thumb-active .timer-list .dot {
    background-color: #888888;
}

.btm .timer-box .timer-dot .swiper-slide-thumb-active .timer-list .pre-line {
    opacity: 1;
}

.btm .timer-box .timer-dot .swiper-slide-thumb-active .timer-list .pre-line:after {
    animation-name: line_1;
}

.btm .timer-box .timer-dot .swiper-slide-thumb-active .timer-list>small {
    color: #222;
    font-size: 22px;
}

.btm .timer-box .timer-dot .timer-list.go .pre-line {
    opacity: 1;
}

.btm .timer-box .timer-dot .timer-list.go .pre-line:after {
    right: 0;
    left: auto;
    animation-duration: 0.8s;
    animation-name: line_2;
}

.mid .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* display: none; */
}


/* .mid .swiper-slide{} */

@keyframes line_1 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.btn-1 {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    line-height: 45px;
    text-align: center;
    background-color: #e9e9e9;
    color: #909090;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    display: inline-block;
    cursor: pointer;
    background: none;
    margin-top: 0;
    display: none;
}

@media screen and (max-width: 800px) {
    .mid .swiper-slide {
        flex-wrap: wrap;
    }

    .timer-parent .mid .left {
        width: 100%;
    }

    .mid .right {
        width: 100%;
    }

    .mid .right .msg-box {
        padding-left: 0;
        padding-top: 10px;
    }

    .mid .his_list .text {
        font-size: 14px;
    }

    .btm .timer-box .t-prev {
        left: 0;
    }

    .btm .timer-box .t-next {
        right: 0;
    }

    .btm {
        margin-bottom: 20px;
    }
}

.aboutFourList li {
    position: relative;
    width: 25%;
    padding: 1% 0;
    /* border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5; */
}


/* .aboutFourList li:last-child {
    border: none;
}

.aboutFourList li:nth-last-child(2),
.aboutFourList li:nth-last-child(3),
.aboutFourList li:nth-last-child(4) {
    border-bottom: none;
}

.aboutFourList li:nth-child(1),
.aboutFourList li:nth-child(2),
.aboutFourList li:nth-child(3),
.aboutFourList li:nth-child(4) {
    border-right: 1px solid #e5e5e5;
    border-image: linear-gradient(to bottom, transparent, #e5e5e5) 1 10;
}

.aboutFourList li:nth-child(1),
.aboutFourList li:nth-child(5) {
    border-bottom: 1px solid #e5e5e5;
    border-image: linear-gradient(to right, transparent, #e5e5e5) 1 10;
}

.aboutFourList li:nth-child(4),
.aboutFourList li:nth-child(8) {
    border-bottom: 1px solid #e5e5e5;
    border-image: linear-gradient(to left, transparent, #e5e5e5) 1 10;
}

.aboutFourList li:nth-last-child(2),
.aboutFourList li:nth-last-child(3),
.aboutFourList li:nth-last-child(4) {
    border-right: 1px solid #e5e5e5;
    border-image: linear-gradient(to top, transparent, #e5e5e5) 1 10;
}

.aboutFourList li:first-child {
    border-right: none;
}

.aboutFourList li:first-child::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 0;
    right: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), to(#e5e5e5));
    background: linear-gradient(180deg, transparent 0, #e5e5e5);
}

.aboutFourList li:nth-child(4n) {
    border-right: none;
} */

.honBox {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 9% 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.honOne,
.honTwo,
.honThree {
    height: 0;
}

.honBox .wrapper>div.active {
    height: auto;
}

.honOne>.swiper-wrapper {
    height: 150px !important;
}

.honBox .swiper-slide {
    min-height: 150px;
}

.honBox .swiper-pagination {
    position: relative;
    width: 100%;
    left: 0;
    margin-top: 120px;
}

.aboutFourList li img {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 68px;
    object-fit: contain;
}

.aboutFive {
    padding-bottom: 0;
}

.tabList {
    text-align: center;
    margin-top: 18px;
    justify-content: center;
}

.tabList li {
    position: relative;
    color: #888888;
    font-size: 26px;
    margin: 0 40px;
}

.tabList li::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 20px;
    background: #E5E5E5;
    top: 4px;
    right: -40px;
}

.tabList li:last-child:before {
    content: none;
}

.tabList li.active a,
.tabList li:hover a {
    color: #222222;
}

.tabList li a {
    display: block;
    cursor: pointer;
}

.honBox .img_pic1 {
    border-radius: 50%;
    overflow: hidden;
    width: 148px;
    height: 148px;
    margin: 0 auto;
}

.honBox .img_pic1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.honBox h3 {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-top: 18px;
}

.abFourBox {
    width: 100%;
    background-repeat: no-repeat;
    background-position: calc();
    background-size: cover;
    padding: 5% 0;
    min-height: calc(100vh - 191px);
    overflow: hidden;
}

.abFiveBox {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7% 0;
    /*min-height: calc(100vh - 200px);*/
}

.mid {
    position: relative;
    padding-bottom: 53px;
}

.mid .swiper-wrapper {
    align-items: flex-end;
}

.mid .swiper-slide {
    border-left: 1px dashed rgb(255 255 255 / 32%);
}

.mid .right {
    width: 100%;
}

.mid .swiper-slide {
    display: block;
    padding: 0 35px 0 17px;
}

.mid .swiper-slide .timer-list {
    display: block;
}

.mid .swiper-slide .timer-list .dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    line-height: 5px;
    margin: 10px 0 20px -24px;
    text-align: center;
    background-color: #fff;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
}

.mid .swiper-slide .timer-list>small {
    width: 100%;
    color: #fff;
    font-size: 36px;
    display: block;
    line-height: 1;
}

.timer-parent .line {
    position: absolute;
    height: 2px;
    left: 0;
    width: 100%;
    bottom: 114px;
    background-color: #fff;
}

.his_list li {
    padding-bottom: 10px;
}

.his_list li span {
    color: #fff;
    font-size: 20px;
}

.his_list li p {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
    padding-bottom: 0;
    text-align: justify;
}


/* his-m */

.m-banhostr {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    padding-bottom: 100px;
    margin-top: 30px;
    display: none;
}

.m-banhostr .item {
    overflow: hidden;
    padding-bottom: 20px
}

.m-banhostr .year {
    font-size: 50px;
    float: left;
    padding-right: 75px;
    font-family: OPPOSans;
    position: relative;
    color: rgba(255, 255, 255, .4);
    margin-right: 94px
}

.m-banhostr .year::after {
    position: absolute;
    content: "";
    width: 35px;
    height: 2px;
    background: #b42328;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    content: ""
}

.m-banhostr .txt {
    overflow: hidden;
}

.m-banhostr .tit {
    font-size: 20px
}

.m-banhostr .desc {
    font-size: 16px;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    height: 137px;
    line-height: 2
}

.m-banhostr .desc p {
    position: relative;
    padding-left: 14px
}

.m-banhostr .desc p span {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .9em
}

.m-banhostr .slick-prev {
    display: none !important
}

.m-banhostr .slick-next {
    border: none;
    background-color: transparent;
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    line-height: 1;
}

.m-banhostr .slick-next>div {
    display: inline-block;
    vertical-align: middle;
}

.m-banhostr .slick-next .next span {
    width: 30px;
    height: 30px;
    background: #40a9ff;
    border-radius: 50%;
    border: none;
    background-image: url(../picture/a2.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px auto;
    margin-right: 12px;
    cursor: pointer;
    display: inline-block
}

.m-banhostr .slick-next .txt {
    font-size: 14px;
    color: #888;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
}


/* his-m  end */

.bgF2 {
    background: #F2F2F2;
}

.newsTab {
    margin: 0 0 30px;
}

.newsInfoTab {
    margin: 28px 0 0;
}

.newsTab a {
    display: inline-block;
    margin: 0 40px 0 20px;
    color: #888888;
    font-size: 16px;
}

.newsTab.newsInfoTab a {
    margin: 0 80px 0 0;
}

.newsTab a.active,
.newsTab a:hover {
    color: #222222;
}

.newsList {
    width: calc(100% + 1.4%);
    margin-left: -0.7%;
    justify-content: flex-start;
}

.newsList li {
    width: 31.933%;
    margin: 0 0.7% 1.4%;
}

.newsList li a {
    display: block;
    background: #fff;
}

.newsList li .img_pic {
    padding-top: 67%;
    border-radius: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.newsList li:hover .img_pic {
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}

.newsListText {
    padding: 6%;
}

.newsList li h3 {
    font-size: 16px;
    color: #222;
    height: 44px;
    line-height: 1.5;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.newsList li span {
    color: #888888;
    font-size: 12px;
    display: block;
    margin-top: 14px;
}

.news-info-view {
    padding: 60px 0 0;
    align-items: flex-start;
}

.cd-list__full {
    width: 100%;
    /* width: calc(100% - 310px); */
    /* letter-spacing: 1px; */
    /* padding-right: 5%; */
    /* border-right: 1px solid #efefef; */
    padding-bottom: 20px;
}

.cd-list__title {
    position: relative;
    /* border-bottom: 1px solid rgba(193, 189, 189, 0.4);
    padding-bottom: 34px; */
    margin-bottom: 40px;
}

.newsVideo {
    max-width: 100%;
}

.cd-list__full h3 {
    color: #222;
    line-height: 1.6;
    font-size: 28px;
    margin-bottom: 14px;
    margin-top: 0;
    font-weight: 400;
}

.cd-list__full span {
    text-transform: uppercase;
    font-size: 14px;
    color: rgba(17, 17, 17, 0.5);
}

.newsPicS .swiper-button-prev,
.newsPicS .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.5s;
    /*background: rgba(0,0,0,0.15);*/
    opacity: 1;
    z-index: 99;
}

.newsPicS .swiper-button-next {
    transform: rotate(-180deg);
}

.newsPicS .swiper-button-prev:hover,
.newsPicS .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.15);
}

.newsPicS .swiper-button-prev svg,
.newsPicS .swiper-button-next svg {
    width: 22px;
    height: 30px;
    fill: #fff;
    opacity: 1;
    margin-left: 13px;
    margin-top: 5px;
}

.cd-list__text {
    width: 800px;
    margin: 0 auto;
}

.cd-list__title .img {
    position: absolute;
    top: 0;
    right: 0;
}

.cd-list__title .img img {
    width: 120px;
}

.cd-list__full h5 {
    display: block;
    color: #333;
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 400;
}

.cd-list__full h6 {
    display: block;
    color: #333;
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 400;
}

.cd-list__full p {
    font-size: 16px;
    line-height: 2;
    color: #888;
    margin-top: 10px;
}

.cd-list__full p img {
    /*display: block;*/
    max-width: 100%;
    margin-bottom: 20px;
}

.cd-push__full {
    position: relative;
    width: 310px;
}

.list-toggle__full {
    margin: 6% 0;
}

.list-toggle__full a {
    display: block;
    width: 96px;
    height: 32px;
    line-height: 32px;
    margin: 0 auto;
    border: 1px solid #EEEEEE;
    font-size: 16px;
    color: #888;
    text-align: center;
}

.list-toggle__full a:hover {
    color: #fff;
    background: #222;
}

.cd-push__content {
    position: relative;
    width: 100%;
    top: 0;
    bottom: auto;
}

.cd-push__main {
    /*border-left: 1px solid #efefef;*/
    width: 100%;
    padding-left: 50px;
}

.cd-push__content.fixed {
    position: fixed;
    top: 48px;
    bottom: auto;
}

.cd-push__content.pos {
    position: absolute;
    bottom: 0;
    top: auto;
}

.cd-target__box {
    letter-spacing: 1px;
}

.mb-80 {
    margin-bottom: 50px;
}

.cd-target__box span {
    font-size: 28px;
    line-height: 1.4;
    color: #222;
    display: block;
    margin-bottom: 25px;
}

.cd-target__list li {
    margin-bottom: 30px;
    transition: all .4s;
}


/* .cd-target__list li:hover span {
    text-decoration: underline;
} */

.cd-target__list a {
    transition: color .4s;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(17, 17, 17, 0.8);
}

.cd-target__list .current a {
    color: #579632;
}

.cd-target__list a:hover {
    color: #579632;
}

.cd-target__list li .img {
    position: relative;
    width: 100%;
}

.cd-target__list a .img_pic {
    padding-top: 69%;
}

.cd-target__list a img {
    width: 100%;
}

.cd-target__list a h3 {
    display: block;
    font-size: 16px;
    line-height: 1.8;
    color: #888;
    margin-top: 10px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cd-target__list a:hover h3 {
    color: #222;
}

.cd-target__list a span {
    display: block;
    color: #888;
    font-size: 14px;
    margin: 20px 0;
}

.topbtm_bar {
    justify-content: center;
    /* border-top: 1px solid #efefef; */
    padding: 60px 0;
    overflow: hidden;
}

.topbtm_bar .icon {
    position: relative;
    margin: 0 10px;
    display: inline-block;
}

.topbtm_bar .prev:before {
    content: "";
    transition: ease .5s;
    display: block;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: url(../picture/icon_next.png) no-repeat center;
    background-size: 20px;
    position: absolute;
    left: -45px;
    top: -5px;
    transform: rotate(180deg);
}

.topbtm_bar .next:before {
    content: "";
    transition: ease .5s;
    display: block;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: url(../picture/icon_next.png) no-repeat center;
    background-size: 20px;
    position: absolute;
    right: -45px;
    top: -5px;
}

.topbtm_bar .next .icon:before {
    right: -15px;
    left: auto;
}

.topbtm_bar a {
    color: #888;
    margin: 0 10%;
}

.topbtm_bar a p {
    width: calc(100% - 100px);
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.topbtm_bar a:hover i {
    color: #222;
}

.topbtm_bar a.fr {
    text-align: right;
}

.topbtm_bar span {
    position: relative;
    margin: 0 10px
}

.topbtm_bar i {
    font-style: normal;
    font-size: 15px;
}

.textLeft {
    text-align: left !important;
}

.contactNr {
    width: 100%;
}

.contactFlex li {
    width: 48%;
    margin: 1%;
}

.contactDiv {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 6% 10%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.contactFlex li>span {
    font-size: 20px;
    color: #222;
    display: block;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
}

.contactFlex li .conTel {
    width: calc(100% - 120px);
    text-align: center;
}

.contactFlex li .conTel div {
    display: inline-block;
    text-align: left;
}

.contactFlex li .conTel h4 {
    margin-top: 36px;
    font-size: 28px;
}

.center {
    text-align: center;
}

.contactNr p {
    font-size: 14px;
    color: #888;
    line-height: 1.8;
}

.contactNr p img {
    width: 120px;
    display: block;
    margin-top: 5px;
}

.contactNr p span {
    font-size: 14px;
    display: block;
    line-height: 1.8;
}

.contactNr h5 {
    font-size: 16px;
    color: #222;
    margin-bottom: 12px;
}

.contactSwItem,
.contactFlex {
    width: 102%;
    margin-left: -1%;
}

.contactSwItem li {
    position: relative;
    width: 23%;
    margin: 1%;
}

.contactSwPic {
    padding-top: 130%;
}

.contactSwTxt {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 20px;
    background: rgba(255, 255, 255, .8);
    align-items: center;
}

.contactSwTxt img {
    width: 40px;
    margin-right: 10px;
}

.contactSwTxt .swWz {
    width: calc(100% - 60px);
}

.contactSwTxt .swWz a {
    color: #222;
}

.contactAddItem li {
    width: 50%;
    padding-right: 5%;
}

.contactAddItem li h4 {
    margin-bottom: 12px;
}

.contactAddItem li p {
    margin-bottom: 40px;
    line-height: 1.8;
}

.conDibu {
    margin-top: 30px;
    justify-content: space-between;
}

.conDibu li {}

.conDibu li img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.conDibu li h2 {
    font-size: 24px;
}

.contactAddItem li:nth-child(2n) {
    /* border-left: 1px solid #EEEEEE;
    padding-left: 5%;
    padding-right: 0; */
}

.mt60 {
    margin-top: 60px;
}

.ceNavTit {
    position: relative;
}

.ceNav li.on .ceNavTit::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 8px;
    margin-top: -4px;
    background-image: url(../picture/down.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 6px;
}

.ceNav li.cur .ceNavTit::after {
    background-image: url(../picture/up.png);
}

.ceNavA {
    display: none;
    position: relative;
    padding: 0 30px;
}

.ceNavA a {
    color: #888;
    display: block;
    margin: 40px 0;
    font-size: 18px;
}

.ceNavA a.on,
.ceNavA a:hover {
    color: #222;
}

.serviceBox {
    background: #fff;
}

.serviceNav {
    width: 377px;
    background: #fff;
    border-right: 4px solid #f8f8f8;
    padding: 50px;
}

.ceNav li {
    margin-bottom: 50px;
}

.ceNav li h3,
.ceNav li h3 a {
    font-size: 20px;
    color: #222;
    cursor: pointer;
}

.serviceNr {
    width: calc(100% - 377px);
    background: #fff;
    padding: 50px 50px 60px;
}

.serviceNr .aboutBt h3 {
    text-align: left;
}

.serviceUl li {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #EEEEEE;
}

.serviceUl li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.serviceUl li h4 {
    font-size: 20px;
    color: #222;
}

.serviceUl li p {
    font-size: 16px;
    color: #888;
    margin-top: 14px;
    line-height: 1.8;
}

.serviceUl li p span {
    display: block;
    font-size: 14px;
}

.serviceUl li>span {
    font-size: 16px;
    display: block;
    color: #009ED0;
    margin-top: 10px;
}

.serviceIcon {
    margin-top: 35px;
}

.serviceIconLi {
    margin-right: 15%;
}

.serviceIconLi img {
    width: 80px;
    display: block;
    margin-bottom: 30px;
}

.serviceIconLi span {
    display: block;
    font-size: 16px;
    color: #888;
    margin-top: 15px;
}

.faqTt {
    margin-bottom: 25px;
}

.faqUl li {
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

.faqTit {
    position: relative;
    font-size: 20px;
    color: #222222;
    padding-right: 80px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    cursor: pointer;
}

.faqP {
    display: none;
    margin-top: 30px;
}

.faqP p {
    color: #888;
    font-size: 16px;
    margin: 10px 0;
    line-height: 2;
}

.faqTit::after {
    content: "+";
    color: #c0c0c0;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 14px;
    height: 8px;
    margin-top: -17px;
    font-size: 30px;
    font-weight: 100;
    line-height: 1;
}

.faqUl li.cur .faqTit::after {
    content: "-";
}

.recJob_sech {
    justify-content: center;
}

.recJob_sel {
    position: relative;
    width: 33%;
    margin: 0 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 17px 24px;
}

.recJob_sel .recJob_a {
    display: block;
    color: #222;
    font-size: 18px;
    background-image: url(../picture/down.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 14px 6px;
}

.recJob_sel .recJob_opt {
    position: absolute;
    left: 0;
    top: 40px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    border-top: none;
    visibility: hidden;
    transform: translateY(10%);
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.13);
    padding: 10px 0;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 400px;
    overflow-y: scroll;
}

.recJob_sel .recJob_opt a {
    display: block;
    padding: 14px 20px;
    color: #888;
    font-size: 14px;
    border-top: 1px solid #eee;
}

.recJob_sel .recJob_opt a:hover {
    color: #222;
}

.recJob_sel.on {
    z-index: 3;
}

.recJob_sel.on .recJob_a {
    background-image: url(../picture/up.png);
}

.recJob_sel.on .recJob_opt {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.offlineList {
    margin-top: 80px;
}

.offlineList li {
    width: 29.333%;
    margin: 0 2% 4%;
}

.offlineList li h4 {
    font-size: 18px;
}

.offlineList li p {
    font-size: 16px;
    color: #888888;
    margin-top: 10px;
    padding-left: 22px;
    background: url(../picture/add.png) no-repeat top 3px left;
    background-size: 18px;
}

.dowebok img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* ---------- */

.guideList li {
    width: 100%;
    margin: 0 0 50px;
    padding: 0 0 50px;
    border-bottom: 1px solid #EEEEEE;
}

.guideList li:hover {
    box-shadow: none;
}

.guideList .proListText h3 {
    color: #222222;
    font-size: 20px;
}

.guideList .proListText p {
    font-size: 16px;
    margin-top: 10px;
}

.guideList .proListText span {
    color: #1F95FF;
    font-size: 16px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.guideList .proListMore .icon {
    color: #1F95FF;
}

.guideList li:hover .proListText span,
.guideList li:hover .proListMore .icon {
    color: #222;
}

.courseList li {
    margin-bottom: 60px;
    padding-bottom: 60px;
}

.courseList .proListText {
    width: 50%;
}

.courseList .proListImg {
    width: 50%;
    padding-left: 3%;
    padding-top: 30%;
}

.courseList .proListImg::before {
    position: absolute;
    width: 60px;
    content: '';
    height: 60px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    opacity: 0.2;
    z-index: 2;
}

.courseList li:hover .proListImg::before {
    opacity: 0.3;
}

.courseList .proListImg::after {
    position: absolute;
    width: 60px;
    content: '';
    height: 60px;
    border-radius: 50%;
    background: url(../picture/sjx.svg) no-repeat center;
    background-size: 20px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
}


/* distributor */

.distributorBox {
    min-height: 100vh;
}

.distriH3 {
    font-size: 36px;
    text-align: center;
    margin-bottom: 50px;
}

.distributorList li {
    position: relative;
    width: 32.333%;
    min-height: 22vh;
    margin: 0 0.5% 1%;
    padding: 8% 5%;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.distributorList li:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}

.distriItem {
    position: absolute;
    width: 100%;
    height: 96px;
    padding: 0 15%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.distributorList li:hover .distriItem {
    height: 153px;
}

.distributorList li img {
    height: 30px;
}

.distributorList li h4 {
    margin-top: 14px;
    font-size: 18px;
    color: #222222;
}

.distributorList li p {
    margin-top: 10px;
    font-size: 14px;
    height: 0;
    color: #888888;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    opacity: 0;
}

.distributorList li:hover p {
    height: auto;
    opacity: 1;
}

.distributorTwo {
    background-image: url(../picture/disTwoBg.jpg);
    height: calc(100vh - 55px);
    background-position: center;
    padding: 60px 0;
}

.pdt90 {
    padding-top: 90px;
}

.pdb0 {
    padding-bottom: 0;
}

.distriTwoList {
    padding: 6% 0 6% 40%;
    justify-content: center;
}

.distriTwoList li {
    width: 31.333%;
    margin: 4% 1% 8%;
    text-align: center;
}

.distriTwoList li img {
    height: 50px;
    margin: 0 auto;
}

.distriTwoList li p {
    font-size: 21px;
    color: #222222;
    margin-top: 20px;
}

.distriTwoList li p span {
    display: block;
    font-size: 21px;
    color: #222222;
}

.distributorThree {
    position: relative;
    background-image: url(../picture/disThreeBg.jpg);
    height: calc(100vh - 45px);
}

.write {
    color: #fff !important;
}

.distriThreeList {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
}

.distriThreeList li {
    width: 16.66%;
    padding: 0 1%;
    text-align: center;
}

.distriThreeList li span {
    color: #fff;
    font-size: 30px;
}

.distriThreeList li p {
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
}

.distributorFour .distriH3 {
    position: relative;
}

.distributorFour .distriH3::after {
    content: '';
    display: block;
    width: 162px;
    height: 2px;
    background: #D0D0D0;
    margin: 8px auto 0;
}

.store-contact {
    font-size: 15px;
}

.store-contact .row {
    margin: 0 -35px;
    overflow: hidden;
}

.store-contact .col {
    float: left;
    width: 33.33333%;
    padding: 0 35px;
    margin-bottom: 4%;
}

.store-contact .col p,
.store-contact .text p {
    margin-bottom: 15px;
    font-size: 17px;
}

.store-contact .col input {
    width: 100%;
    padding: 18px 25px 18px 46px;
    line-height: 30px;
    height: 56px;
    background-color: #f9f9f9;
    background-position: left 12px center;
    background-repeat: no-repeat;
    -o-background-size: 22px;
    background-size: 22px;
    border: none;
    border: 1px solid #D0D0D0;
    color: #a2a2a2;
    font-size: 16px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.store-contact .col:hover input {
    border: 1px solid #222;
}

.store-contact .col input.upper {
    background-color: #25599f;
    color: #fff;
}

.store-contact .col input.user {
    background-image: url(../picture/messageIcon01.png);
}

.store-contact .col input.tel {
    background-image: url(../picture/messageIcon02.png);
}

.store-contact .col input.E-mail {
    background-image: url(../picture/messageIcon03.png);
}

.store-contact .col input.city {
    background-image: url(../picture/messageIcon04.png);
}

.store-contact .col input.industry {
    background-image: url(../picture/messageIcon05.png);
}

.store-contact .text textarea.massage {
    background-image: url(../picture/messageIcon06.png);
}

.store-contact .text {
    /*margin-top: 38px;*/
    position: relative;
}

.store-contact .text textarea {
    padding: 18px 25px 18px 46px;
    background-color: #f9f9f9;
    background-position: 13px 18px;
    background-repeat: no-repeat;
    -o-background-size: 22px;
    background-size: 22px;
    border: none;
    border: 1px solid #D0D0D0;
    color: #a2a2a2;
    height: 180px;
    width: 100%;
}

.store-contact .text:hover textarea {
    border: 1px solid #222;
}

.store-contact .text textarea.upper {
    background-color: #25599f;
    color: #fff;
}

.store-contact .button-bubble {
    margin-top: 50px;
}

.button-bubble {
    display: block;
    text-align: right;
    width: 180px;
    height: 56px;
    margin: 30px 0 0;
    line-height: 56px;
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.button-bubble .button {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 20px;
    background: #0E0D0D;
    border-radius: 10px;
    font-style: normal;
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.button-bubble .button:hover {
    opacity: 0.9;
}

.store-contact .col input::-webkit-input-placeholder,
.store-contact .text textarea::-webkit-input-placeholder {
    color: #a2a2a2;
}

.store-contact .col input::-moz-placeholder,
.store-contact .text textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #a2a2a2;
}

.store-contact .col input:-moz-placeholder,
.store-contact .text textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #a2a2a2;
}

.store-contact .col input:-ms-input-placeholder,
.store-contact .text textarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #a2a2a2;
}

.messageButtom {
    overflow: hidden;
}

.messageButtom span {
    float: right;
}


/* distributor  end */

.termsItem {
    /* margin-top: 80px; */
}

.termsItem h3 {
    text-align: center;
    font-size: 36px;
    color: #222;
    margin-bottom: 40px;
}

.termsItem p,
.returnItem p {
    font-size: 16px;
    color: #888;
    line-height: 2;
}

.returnItem {
    margin-top: -20px;
}

.returnItem h4 {
    font-size: 18px;
    color: #222;
    margin-bottom: 10px;
}

.bxTable {
    width: 100%;
    margin: 20px 0;
}

.bxTable td {
    width: 11.11%;
    font-size: 14px;
    color: #222;
    border: 1px solid #E4E4E4;
    padding: 8px 0;
    text-align: center;
}

.bxTable .bxTabOne {
    text-align: left;
    padding-left: 10px;
}

.bxTable tr:nth-child(2n) {
    background: #EEEEEE;
}

.bxTable tr:nth-child(2n) td {
    font-size: 12px;
    color: #888;
}

.zyLeft {
    width: 80px;
}

.zyLeft p span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #009ED0;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    font-size: 16px;
    margin-right: 5px;
}

.zyRight {
    width: calc(100% - 80px);
}

.blue {
    color: #009ED0 !important;
}

.SfItem {
    margin-bottom: 38px;
}

.SfTable {
    width: 100%;
    margin: 20px 0;
}

.SfTable thead {
    background: #EEEEEE;
}

.SfTable td {
    font-size: 14px;
    color: #03101A;
    border: 1px solid #E4E4E4;
    padding: 12px 0;
    text-align: center;
    width: 33.33%;
}

.SfTable thead td {
    font-size: 12px;
    color: #888;
}

.proceList {
    margin: 80px 0;
    padding-bottom: 80px;
    border-bottom: 1px solid #EEEEEE;
}

.proceList li {
    position: relative;
    width: 25%;
    text-align: center;
}


/* .proceList li::before{
    content: '';
    position: absolute;
} */

.proceList li img {
    display: block;
    margin: 0 auto;
    height: 32px;
    margin-bottom: 20px;
}

.proceList li.lcJt {
    width: 12.5%;
}

.proceList li.lcJt img {
    margin-top: 30px;
    max-width: 90px;
    height: auto;
}

.proceList li p span {
    display: block;
    color: #222222;
    font-size: 16px;
}

.proceList li p i {
    display: block;
    font-size: 14px;
    font-style: inherit;
}

.joinFlex {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.joinTxt,
.joinImg {
    position: relative;
    width: 50%;
}

.joinImg {
    /*height: calc(100vh - 160px);*/
}

.joinImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.joinTxt {
    padding: 5% 10%;
}

.joinThr_txt {
    padding: 6% 10%;
}

.joinH3 {
    font-size: 28px;
}

.joinSpan {
    font-size: 20px;
    color: #222;
    font-weight: 600;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.joinList {
    position: relative;
}

.joinList div {
    cursor: pointer;
    margin: 38px 0;
}

.joinList p {
    margin-top: 10px;
}

.joinOne {
    padding-bottom: 0 !important;
}

.joinOne_span {
    margin-top: 28px;
    font-size: 18px;
    color: #222;
    font-weight: bold;
    display: none;
}

.joinOne_img {
    margin-top: 38px;
    height: calc(100vh - 255px);
}

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

.joinOne_img img {
    width: 100%;
}

.joinOne_img_pc {
    display: block;
}

.joinOne_img_m {
    display: none;
}

.joinTwo {
    height: calc(100vh - 45px);
    background-size: cover;
    background-position: center;
    /*background: #2A2352;*/
    overflow: hidden;
}

.joinTwo .wrapper {
    height: 100%;
    padding-bottom: 0 !important;
}

.joinTwo_box {
    height: 100%;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    max-width: 1200px;
    margin: 0 auto;
}

.joinTwo .lkTitle h3 {
    color: #fff;
}

.joinTwo_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 100px 0;
    height: calc(100vh - 370px);
}

.joinTwo_item {
    cursor: pointer;
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgb(2 1 1 / 26%);
    text-align: center;
    z-index: 21;
}

.joinTwo_item:hover .joinTwo_bg {
    opacity: 1;
}

.joinTwo_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s;
}

.joinTwo_bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(2, 1, 1, 0.1);
    z-index: 18;
    animation: beforeanimate 1.5s infinite alternate;
}

.joinTwo_bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(2, 1, 1, 0.3);
    z-index: 20;
    animation: afteranimate 1.5s infinite alternate;
}

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

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

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

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

.joinTwo_div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 21;
    padding: 10% 20%;
}

.joinTwo_item h3 {
    color: #fff;
    font-size: 28px;
}

.joinTwo_item p {
    color: #fff;
    opacity: 0.7;
    margin: 28px auto;
}

.joinTwo_btm {
    opacity: 0;
    display: none;
}

.joinTwo_btn {
    position: relative;
    text-align: center;
}

.joinTwo_btn>div {
    position: relative;
    text-align: center;
    display: inline-block;
}

.joinTwo_btn_bg {
    position: relative;
}

.joinTwo_btn_img {
    position: absolute;
    bottom: 28.5%;
    left: 20%;
    z-index: 11;
}

.joinTwo_line {
    width: 1px;
    height: 100px;
    background: #CCCCCC;
    margin: 0 auto;
    opacity: 0.5;
}

.joinThr {
    position: relative;
}

.joinThr .swiper-pagination {
    bottom: 0;
}

.joinThr .swiper-container,
.joinThr .swiper-slide {
    width: 100%;
    height: 100%;
}

.joinThr_img {
    order: -1;
    overflow: hidden;
}

.joinThr_img img {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s;
}

.joinThr_img img:hover {
    transform: scale(1.1);
}

.joinThr .joinList p {
    display: none;
}

.joinThr .joinList>div:first-child p {
    display: block;
}

.joinFor_txt {
    text-align: right;
}

.joinFor_txt>div {
    display: inline-block;
    text-align: left;
}

.joinFive {
    background: #F8F8F8
}

.joinFive .swiper-pagination {
    position: relative;
    width: 100%;
    left: 0;
    margin-top: 20px;
}

.joinFive_a {
    width: 100%;
    min-height: 268px;
    background: #fff;
    border-radius: 12px;
    transition: all 0.48s;
    padding: 48px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.joinFive_a:hover {
    box-shadow: 5px 5px 10px #ddd;
}

.joinFive_img {
    border-radius: 100%;
    width: 180px;
    height: 180px;
    overflow: hidden;
}

.joinFive_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.joinFive_txt {
    order: -1;
    position: relative;
    text-align: left;
    width: calc(100% - 230px);
}

.joinFive_txt .p1 {
    font-size: 14px;
}

.joinFive_txt .p2 {
    line-height: 1.4;
    min-height: 46px;
    margin: 24px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.joinMore {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.joinMore span {
    font-size: 14px;
}

.joinMore img {
    display: block;
    width: 7px;
    margin-left: 6px;
}

.teamDet {
    cursor: pointer;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.teamDet .wrapper {
    max-width: 980px;
    padding: 48px;
    cursor: default;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    overflow: hidden;
}

.teamDet .teamFix_cls {
    position: absolute;
    right: 38px;
    top: 30px;
    cursor: pointer;
    z-index: 111;
}

.teamDet .teamFix_cls svg {
    width: 19px;
    height: 19px;
}

.teamDet .indMore .more {
    padding: 10px 40px;
}

.teamDet .adsTop {
    position: relative;
    padding-top: 42px;
    color: #999;
    background: url(images/yinhao.png) no-repeat top left;
    margin-bottom: 68px;
}

.teamDet .adsTop span {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #999;
    font-size: 14px;
    text-transform: capitalize;
}

.teamDet_box {
    position: relative;
    text-align: right;
}


/* .teamDet_box::before {
    content: "";
    position: absolute;
    left: -428px;
    top: -380px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background-color: rgba(210, 210, 210, 0.15);
    visibility: inherit;
} */

.teamDet_box>div {
    vertical-align: top;
}

.teamDet_img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-height: 360px;
    width: 268px;
    display: inline-block;
    text-align: center;
    box-shadow: 4px 6px 38px #999;
}

.teamDet_img div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.teamDet_img img {
    display: none;
    width: 100%;
    margin: 0 auto;
}

.teamDet_info {
    display: inline-block;
    width: calc(100% - 348px);
    text-align: left;
}

.teamDet_tit {
    margin-bottom: 40px;
}

.teamDet_tit em {
    font-style: inherit;
    color: #222;
    line-height: 2;
    font-weight: bold;
    font-size: 32px;
    margin-left: 8px;
}

.teamDet_tit h2 {
    font-size: 24px;
    line-height: 1;
    color: #000;
    font-weight: bold;
    letter-spacing: normal;
}

.teamDet_tit p {
    margin-top: 10px;
    text-transform: capitalize;
    color: #999;
}

.teamDet_p {
    height: 238px;
    overflow: hidden;
    padding-right: 30px;
}

.teamDet_p p {
    line-height: 2.1;
}

.teamDet_p .mCSB_scrollTools {
    width: 3px;
}

.teamDet_p .mCSB_scrollTools .mCSB_draggerContainer {
    background: #F2F7FB;
}

.teamDet_p .mCSB_scrollTools .mCSB_dragger {
    background: #222;
}

.teamDet_p .mCSB_inside>.mCSB_container {
    padding-right: 30px;
}

.joinSix {
    position: relative;
}

.joinJob_a span {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    display: block;
    margin-bottom: 10px;
}

.joinJob_a div {
    margin: 42px 0;
}

.joinJob_a li {
    margin: 10px 0;
}

.joinJob .swiper-pagination {
    position: relative;
    margin-top: 28px;
}

.joinJob_a span {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    display: block;
    margin-bottom: 10px;
}

.joinJob_a div {
    margin: 42px 0;
}

.joinJob_a li {
    margin: 10px 0;
}

.joinJob .swiper-pagination {
    position: relative;
    margin-top: 28px;
}

.joinLink {
    background: #F0F0F0;
}

.joinLink_box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.joinLink_box a {
    margin: 0 5%;
    text-align: center;
}

.joinLink_box img {
    height: 89px;
}

.joinLink_box a:hover img {
    animation: gelatine 0.5s 1;
}

.serviceList {
    padding-bottom: 0 !important;
}

.aerviceMobTitle a {
    font-size: 16px;
}

.aerviceMobTitle li {
    width: 25%;
    text-align: left;
}

.aerviceMobTitle li.active a {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    color: #222;
}

.aerviceMobItem {
    background: #f5f5f5;
    padding: 15px 5% 30px;
    margin-top: 10px;
}

.aerviceMobItem li {
    display: none;
}

.aerviceMobItem li a {
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    color: #222;
}

@keyframes gelatine {

    from,
    to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(0.9, 1.1);
        transform: scale(0.9, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, 0.9);
        transform: scale(1.1, 0.9);
    }

    75% {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}

@-webkit-keyframes gelatine {

    from,
    to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(0.9, 1.1);
        transform: scale(0.9, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, 0.9);
        transform: scale(1.1, 0.9);
    }

    75% {
        -webkit-transform: scale(0.95, 1.05);
        transform: scale(0.95, 1.05);
    }
}

.app .delayList h3 {
    text-align: left;
}

.appP {
    margin: 0 0 20px;
    line-height: 2;
}

.appTab {
    display: none;
}

.appBox {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.appItem {
    width: 45%;
}

.appImg {
    text-align: center;
    margin: 60px 0;
}

.appImg img {
    display: block;
    max-width: 208px;
    width: 50%;
    margin: 0 auto;
}

.appImg p {
    font-weight: bold;
    color: #222;
    margin-top: 20px;
    font-size: 16px;
}

.appItem li {
    margin: 20px 0;
}

.appItem p {
    line-height: 2;
}

.appItem span {
    color: #222;
    font-weight: bold;
}

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

    .abHeight,
    .abFiveBox {
        height: calc(100vh - 200px);
    }

    .abFourBox {
        height: auto;
    }

    .distributorTwo,
    .distributorThree {
        height: calc(100vh - 55px);
        min-height: 600px;
    }

    .aboutFourList li {
        padding: 2% 0;
    }

    .joinOne_img {
        height: calc(100vh - 235px);
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    p,
    span {
        font-size: 14px;
    }

    .W1350,
    .W1200,
    .nybanTxt {
        width: 90%;
    }

    .lkTitle h3,
    .distriH3,
    .aboutOneText h3,
    .termsItem h3,
    .mid .swiper-slide .timer-list>small {
        font-size: 30px;
    }

    h4,
    .distributorList li h4,
    .ceNavA a,
    .returnItem h4 {
        font-size: 16px;
    }

    .lkTitle p span,
    .abOneList li .abOneListTxt p span,
    .distributorList li p,
    .guideList .proListText p,
    .serviceUl li p,
    .serviceUl li>span,
    .proceList li p span,
    .faqP p,
    .termsItem p,
    .returnItem p,
    .contactNr p {
        font-size: 14px;
    }

    .pd80 {
        padding: 50px 0;
    }

    .pdt90 {
        padding-top: 70px;
    }

    .pdt0 {
        padding-top: 0;
    }

    .pdb0 {
        padding-bottom: 0;
    }

    .distributorTwo {
        padding: 50px 0;
    }

    .lkTitle,
    .distriH3,
    .aboutBt {
        margin-bottom: 40px;
    }

    .abOneList li .abOneListTxt h3 {
        font-size: 22px;
    }

    #tab .j-tab-nav a,
    .tabList li,
    .contactFlex li .conTel h4 {
        font-size: 20px;
    }

    #tab .j-tab-nav a.current {
        font-size: 22px;
    }

    .his_list li span,
    .distriThreeList li p,
    .distriTwoList li p span,
    .ceNav li h3,
    .ceNav li h3 a,
    .guideList .proListText h3,
    .serviceUl li h4,
    .serviceUl li p span,
    .serviceIconLi span,
    .faqTit,
    .button-bubble .button {
        font-size: 18px;
    }

    .courseList li,
    .guideList li {
        margin-bottom: 40px;
        padding-bottom: 40px;
    }

    .ceNavA a {
        margin: 30px 0;
    }

    .serviceUl li {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .faqP {
        margin-top: 20px;
    }

    .faqUl li {
        padding: 28px 0;
    }

    .returnItem {
        margin-top: 0px;
    }

    .distriTwoList li img {
        height: 56px;
    }

    .button-bubble {
        width: 160px;
        height: 48px;
        line-height: 48px;
    }

    .serviceNav {
        width: 320px;
    }

    .serviceNr {
        width: calc(100% - 320px);
    }

    #tab .tab-nav {
        width: 420px;
        height: 420px;
    }

    #tab .tab-con {
        width: calc(100% - 420px);
    }

    #tab .j-tab-nav .slice.current a {
        font-size: 24px;
    }

    .timer-parent .line {
        bottom: 108px;
    }

    .mid .swiper-slide {
        padding: 0 17px;
    }

    .W1300,
    .newsBanTxt {
        width: 984px;
    }

    .joinFive_txt .p2 {
        min-height: 40px;
    }

    .nybanTxt span {
        font-size: 32px;
    }

    .joinTwo_item h3,
    .joinH3 {
        font-size: 24px;
    }

    .joinSpan,
    .joinJob_a span {
        font-size: 18px;
    }

    .cd-list__full h3 {
        font-size: 24px;
    }

    .recJob_sel {
        padding: 12px 24px;
    }
}

@media screen and (max-height:600px) {
    .distriTwoList{
        padding-top: 1%;
    }
}
@media screen and (max-width:1280px) {
    #tab .tab-nav>img{
        width: 38.5%;
    }
    #tab .j-tab-nav .slice.current a {
        font-size: 22px;
    }
    #tab .tab-nav {
        width: 368px;
        height: 368px;
    }

    #tab .tab-con {
        width: calc(100% - 368px);
    }

    .lkTitle h3,
    .distriH3,
    .aboutOneText h3,
    .termsItem h3,
    .mid .swiper-slide .timer-list>small,
    section.homepage-stories-module .stories-text-box .title {
        font-size: 28px;
    }

    .timer-parent .line {
        bottom: 107px;
    }

    .serviceNav {
        width: 280px;
        padding: 40px;
    }

    .serviceNr {
        width: calc(100% - 280px);
        padding: 40px;
    }

    .courseList .proListImg::before,
    .courseList .proListImg::after {
        width: 50px;
        height: 50px;
    }
}

@media screen and (max-width:1200px) {
    section.homepage-skypixel-module .skypixel-container {
        height: auto;
    }

    section.homepage-skypixel-module .swiper-container .swiper-slide {
        width: 100vw !important;
        height: auto;
        padding-top: 56%;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text .logo,
    section.homepage-products-banner ul.products-banner-list .products-banner-text .logo,
    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .headline {
        font-size: 24px;
    }

    section.homepage-skypixel-module .desc,
    section.homepage-skypixel-module .product-name-text {
        font-size: 30px;
    }

    section.homepage-service-module ul.service-module-list li.service-module-item .title {
        font-size: 20px;
    }

    .W1050 {
        width: 90%;
    }
}

@media screen and (max-width:1024px) {
    .newsPicS .swiper-wrapper {
        display: block;
    }

    .newsPicS .swiper-button-prev,
    .newsPicS .swiper-button-next {
        display: none;
    }

    #tab .tab-nav {
        width: 328px;
        height: 328px;
    }

    #tab .tab-con {
        width: calc(100% - 328px);
    }

    #tab .tab-nav>img {
        width: 128px;
    }

    #tab .j-tab-nav .slice.current a,
    section.homepage-banner .banner-text .xingh {
        font-size: 20px;
    }

    section.homepage-banner .eyebrow-text {
        font-size: 24px;
    }

    section.homepage-active-banner ul.active-banner-list .active-banner-text .logo,
    section.homepage-products-banner ul.products-banner-list .products-banner-text .logo,
    section.homepage-stories-module ul.stories-module-list li.stories-module-item .stories-module-text .headline {
        font-size: 20px;
    }

    .joinTwo_item {
        width: 260px;
        height: 260px;
    }

    .joinTwo_list {
        margin-left: 70px;
        margin-right: 70px;
    }

    .teamDet_info {
        width: calc(100% - 308px);
    }

    .teamDet_tit h2 {
        font-size: 20px;
    }

    .teamDet .teamFix_cls svg {
        width: 14px;
        height: 14px;
    }

    .teamDet_tit {
        margin-bottom: 20px;
    }

    .serviceNav {
        width: 240px;
        padding: 30px;
    }

    .serviceNr {
        width: calc(100% - 240px);
        padding: 30px;
    }

    .courseList li,
    .guideList li {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .video_inner {
        width: 90%;
        height: auto;
    }

    .video_inner video {
        height: auto;
        width: 100%;
    }

    .W1300,
    .newsBanTxt {
        width: 90%;
    }

    .cd-list__text {
        width: 100%;
    }

    .recJob_sel .recJob_a {
        font-size: 16px;
    }

    .serviceIconLi {
        margin-right: 0;
    }

    .nybanTxt {
        text-align: center;
        left: 5%;
        top: 46%;
        transform: translate(0);
    }

    .distributorList li.active {
        box-shadow: 0 0 10px rgba(0, 0, 0, .08);
    }

    .distributorList li.active p {
        height: auto;
        opacity: 1;
    }

    .delayList h3,
    .delayList p,
    .delayList ul,
    .delayList li:nth-child(1),
    .delayList li:nth-child(2),
    .delayList li:nth-child(3),
    .delayList li:nth-child(4),
    .delayList li:nth-child(5),
    .delayList li:nth-child(6),
    .delayList li:nth-child(7),
    .delayList li:nth-child(8),
    .delayList li:nth-child(9) {
        transition-delay: 0s;
    }

    .contactFlex li>span,
    .contactFlex li .conTel h4 {
        font-size: 18px;
    }

}

@media screen and (max-width:900px) {
    .serviceBox {
        flex-wrap: wrap;
    }

    .serviceNav,
    .serviceNr {
        width: 100%;
    }

    .serviceNav {
        /*display: none;*/
    }

    .serviceNav {
        border-right: none;
        border-bottom: 4px solid #f8f8f8;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .ceNav li {
        margin: 20px 0;
    }

    .ceNavA a {
        margin: 17px 0;
    }

    .ceNavA {
        padding: 0 20px;
    }

    .contactSwItem li {
        width: 48%;
    }
}

@media screen and (max-width:768px) {
    .nybanPic img {
        display: block;
    }

    .nybanPic {
        background: none !important;
    }

    .pc-block {
        display: none;
    }

    .m-block {
        display: block;
    }

    .nyBanner {
        height: 100vh;
    }

    .nyBanner.half {
        height: auto;
    }

    .wrapper {
        width: 90%;
    }

    .mlbImg {
        display: block;
    }

    section.homepage-stories-module ul.stories-module-list li.stories-module-item .mlbImg {
        height: 41vh;
    }

    .lkTitle h3,
    .distriH3,
    .aboutOneText h3,
    .termsItem h3 {
        font-size: 24px;
        color: #222;
    }

    .mid .swiper-slide .timer-list>small {
        font-size: 20px;
        color: #222;
    }

    .abOneList li .abOneListTxt h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .abOneList li .abOneListTxt p {
        min-height: 50px;
    }

    .delayList p,
    .delayList ul {
        width: 90%;
        margin: 0 auto;
    }

    .abBjBox {
        position: relative;
    }

    .abBjBox::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    }

    .abBjBox .wrapper {
        position: relative;
        z-index: 21;
    }

    .abHeight {
        min-height: auto;
    }

    .abBjBox.abHeight {
        height: auto;
        min-height: 80vh;
        align-items: flex-start;
    }

    .m-color * {
        color: #fff !important;
    }

    .abThree {
        background: url(../picture/m-gcBg.jpg) no-repeat center;
        background-size: cover;
        min-height: calc(100vh - 45px);
    }

    .abFour {
        background: url(../picture/m-hisBg.jpg) no-repeat center;
        background-size: cover;
        min-height: calc(100vh - 45px);
        margin-top: -20px;
    }

    .aboutFour {
        padding-top: 50px;
        background: url(../picture/m-logoBg.jpg) no-repeat center;
        background-size: cover;
        min-height: calc(100vh - 45px);
    }

    .aboutFive {
        background: url(../picture/m-honBg.jpg) no-repeat center;
        background-size: cover;
        min-height: calc(100vh - 45px);
    }

    .tabList {
        margin-top: 18px !important;
    }

    .abFour .mlbImg,
    .aboutFour .mlbImg,
    .aboutFive .mlbImg {
        display: none;
    }

    .abThreePic.abHeight {
        display: none;
    }

    #tab {
        display: block;
    }

    #tab .tab-nav {
        margin: 0 auto 50px;
    }

    #tab .tab-con {
        padding: 0;
        width: 80%;
        margin: 0 auto;
    }

    .timer-parent .line {
        bottom: 149px;
    }

    .abFourBox,
    .honBox,
    .abFiveBox {
        background: none !important;
        height: auto;
    }

    .abFiveBox {
        min-height: 60vh;
    }

    .honBox {
        min-height: 66vh;
    }

    .honBox {
        padding: 7% 0;
    }

    .abFourBox,
    .abFiveBox {
        padding: 0;
    }

    .abFourBox .swiper-pagination {
        display: none !important;
    }

    .timer-parent {
        padding: 0;
    }

    .mid {
        display: block;
        padding: 0;
    }

    .mid .swiper-wrapper {
        display: block;
        height: 68vh;
        overflow: hidden;
    }

    .mid .swiper-wrapper.show {
        height: auto;
        overflow: inherit;
    }

    .mid .swiper-slide {
        display: flex;
        height: auto;
        padding: 14px 0 0;
        border: 0;
    }

    .mid .swiper-slide .timer-list {
        order: -1;
        width: 100%;
        position: relative;
    }

    .mid .swiper-slide .timer-list .dot,
    .timer-parent .line {
        display: none;
    }

    .his_list li span,
    .his_list li p {
        color: #222;
    }

    .his_list li span {
        display: none;
    }

    .his_list li p {
        position: relative;
        padding-left: 14px;
    }

    .his_list li p::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        width: 4px;
        height: 4px;
        background: #999;
        border-radius: 50%;
    }

    .mlbBtn {
        display: block;
    }

    .his_list li span,
    .distriThreeList li p,
    .distriTwoList li p span,
    .ceNav li h3,
    .ceNav li h3 a,
    .guideList .proListText h3,
    .serviceUl li h4,
    .serviceUl li p span,
    .serviceIconLi span,
    .faqTit,
    .contactFlex li .conTel h4,
    .button-bubble .button {
        font-size: 16px;
    }

    .aboutFourList li {
        width: 33.33%;
    }

    .tabList li {
        margin: 0 20px;
    }

    .tabList li::before {
        right: -20px;
        height: 13px;
        top: 6px;
        background: rgba(255, 255, 255, .5);
    }

    .tabList li a {
        color: rgba(255, 255, 255, .5) !important;
    }

    .tabList li.active a {
        color: #fff !important;
    }

    .aboutFiveList .slick-slide>div {
        margin: 0 10px 50px;
    }

    .aboutFiveList {
        padding-bottom: 20px;
    }

    .honBox .swiper-wrapper {
        padding-bottom: 15%;
    }

    .swiperControl .swiper-pagination span,
    section.homepage-skypixel-module .swiper-pagination-bullet,
    section.homepage-banner .banner-swiper-container .swiper-pagination span,
    section.homepage-banner .banner-swiper-container .swiper-pagination span.swiper-pagination-bullet-active {
        width: 24px;
        height: 3px;
        margin: 5px;
    }

    .nybanTxt.left {
        /* width: 50%; */
    }

    .nybanTxt.left img {
        margin-bottom: 2px;
    }

    .nybanTxt span {
        font-size: 24px;
    }

    section.homepage-skypixel-module .contents-container .sp-learn-more {
        margin-top: 0;
    }

    .banner_center {
        width: 100%;
        left: 0%;
        transform: translateY(0);
        top: 14%;
    }

    .con {
        display: none;
    }

    .m-banhostr {
        display: block;
        padding-bottom: 70px;
        margin-top: 10px;
        /* margin-top: 25%; */
    }

    section.homepage-banner .banner-btn-box {
        display: none;
    }

    .joinOne_img_pc {
        display: none;
    }

    .joinOne_img_m {
        display: block;
    }

    .joinOne .lkTitle h3 {
        font-size: 20px;
        line-height: 1.6;
    }

    .joinOne_span {
        font-size: 16px;
    }

    .joinOne_img {
        position: relative;
        padding-top: 28px;
        height: calc(100vh - 165px);
        margin: 0;
    }

    /*.joinOne_img::before {*/
    /*    content: "";*/
    /*    position: absolute;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 80%;*/
    /*    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
    /*    z-index: 9;*/
    /*}*/
    .joinTwo_list {
        margin-left: 20px;
        margin-right: 20px;
    }

    .joinSpan,
    .joinJob_a span {
        font-size: 16px;
    }

    .joinThr_img {
        order: inherit;
    }

    .joinImg {
        height: calc(100vh - 473px);
    }

    .joinFor .joinImg {
        height: calc(100vh - 473px);
    }

    .joinFlex {
        flex-wrap: wrap;
    }

    .joinTxt,
    .joinImg,
    .joinFor_txt>div,
    .joinFive_txt {
        width: 100%;
    }

    .joinList div {
        margin: 30px 0;
    }

    .joinFive_a {
        flex-wrap: wrap;
    }

    .joinFive_txt {
        order: inherit;
    }

    .joinFive_img {
        margin: 0 auto 20px;
    }

    .joinLink_box img {
        height: 69px;
    }

    .distributorList li {
        width: 100%;
    }

    .distriItem {
        padding: 0;
    }

    .distributorTwo {
        background-image: url(../picture/m-disTwobg.jpg);
        height: calc(100vh - 45px);
        align-items: self-start;
    }

    .distributorTwo .distriH3,
    .distriTwoList li p span {
        color: #fff;
    }

    .distriTwoList {
        padding: 0;
    }

    .distriTwoList li img {
        height: 46px;
    }

    .store-contact .col {
        width: 50%;
        padding: 0 15px;
    }

    .store-contact .row {
        margin: 0 -15px;
    }

    .store-contact .text {
        margin-top: 0;
    }

    .button-bubble {
        width: 130px;
        height: 42px;
        line-height: 42px;
    }

    .store-contact .col input,
    .ceNavA a {
        font-size: 14px;
    }

    .page {
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .page a {
        padding: 4px 10px;
        font-size: 14px;
    }

    .newsTab.newsInfoTab a,
    .newsTab a {
        margin: 0 30px 0 0;
    }

    .news-info-view {
        padding: 30px 0 0;
    }

    .cd-list__full h3 {
        font-size: 20px;
    }

    .cd-list__title {
        margin-bottom: 30px;
    }

    .cd-list__full p {
        font-size: 14px;
    }

    .newsList li {
        width: 100%;
        margin: 0 0 5%;
    }

    .newsList li h3,
    .offlineList li p {
        font-size: 14px;
    }

    .offlineList li h4 {
        font-size: 16px;
    }

    .recJob_sel {
        width: 44%;
        margin: 0 8px;
    }

    .recJob_sel .recJob_a {
        font-size: 15px;
    }

    .offlineList li {
        width: 46%;
    }

    .offlineList {
        margin-top: 50px;
    }

    .distributorTwo {
        position: relative;
    }

    .distributorTwo .W1200 {
        width: 100%;
    }

    .distriTwoList {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, .5);
        padding: 5% 0;
    }

    .distriTwoList li {
        margin-bottom: 2%;
    }

    .contactFlex li {
        width: 100%;
        margin: 3% 0;
    }

    .contactNr p img {
        width: 90px;
    }
}

@media screen and (max-width:680px) {
    .distributorTwo {
        padding: 30px 0;
    }

    .pd80 {
        padding: 30px 0;
    }

    .pdt90 {
        padding-top: 40px;
    }

    .wrapper {
        width: 90%;
    }

    .lkTitle,
    .distriH3,
    .aboutBt {
        margin-bottom: 20px;
    }

    .delayList p,
    .delayList ul {
        width: 100%;
    }

    .abOneList li {
        width: 100%;
        margin-top: 20px;
    }

    .abOneList {
        margin-top: -20pxz;
    }

    .abOneList li .abOneListTu {
        padding-top: 124%;
    }

    #tab .tab-con {
        width: 100%;
    }

    #tab .tab-nav {
        width: 308px;
        height: 308px;
        margin-bottom: 30px;
    }

    #tab .j-tab-nav a,
    .tabList li {
        font-size: 16px;
    }

    #tab .tab-con p {
        font-size: 14px;
    }

    .aboutFourList li {
        width: 33.33%;
        padding: 10px;
    }

    .aboutFourList li img {
        height: 60px;
    }

    .aboutFiveList h3 {
        color: #fff;
    }

    .aboutFiveList .swiper-slide .img_pic1 {
        width: 128px;
        height: 128px;
    }

    .aboutFiveList .swiper-slide h3 {
        font-size: 14px;
        color: #222;
        margin-top: 10px;
    }

    .aboutFiveList .slick-slide>div {
        margin-bottom: 20px;
    }

    .honBox .img_pic1 {
        width: auto;
        height: auto;
    }

    .honBox h3 {
        font-size: 12px;
        font-weight: 500;
    }

    section.homepage-skypixel-module .contents-container {
        padding-top: 28px;
    }

    .joinTwo_item {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
    }

    .joinTwo_item h3 {
        font-size: 20px;
    }

    .joinTwo_list {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 80px;
    }

    .joinTwo_div {
        padding: 10%;
    }

    .joinTwo_item p {
        margin: 13px auto;
    }

    .joinFive_a,
    .teamDet .wrapper {
        padding: 28px;
    }

    .joinFive_img {
        width: 150px;
        height: 150px;
    }

    .teamDet_img {
        position: static;
        height: 30vh;
    }

    .teamDet_info,
    .teamDet_img {
        width: 100%;
    }

    .teamDet_info {
        margin-top: 25px;
    }

    .teamDet_tit h2 {
        font-size: 18px;
    }

    .teamDet_p p {
        line-height: 1.8;
    }

    .teamDet_p {
        height: 147px;
        padding-right: 20px;
    }

    .teamDet .teamFix_cls {
        right: 11px;
        top: 7px;
    }

    .joinJob_a div {
        margin: 22px 0;
    }

    .joinJob_a li {
        margin: 6px 0;
    }

    .joinJob .swiper-pagination {
        margin-top: 5px;
    }

    .joinLink_box img {
        height: 49px;
    }

    .distributorList li img {
        height: 22px;
    }

    .distributorList li {
        /* min-height: auto; */
    }

    .distriItem {
        position: relative;
    }

    .distriTwoList li {
        /* margin-bottom: 5%; */
    }

    .distriTwoList li img {
        height: 36px;
    }

    .distriTwoList li p span {
        font-size: 14px;
    }

    .distriThreeList li p {
        font-size: 12px;
        padding: 0 4px;
    }

    .distriThreeList li span {
        font-size: 22px;
    }

    .distriThreeList li {
        width: 33.33%;
        padding: 15px 0;
    }

    .distriThreeList {
        padding: 30px 0;
    }

    .store-contact .row {
        margin: 0;
    }

    .store-contact .col {
        width: 100%;
        padding: 0;
    }

    .appBox,
    .proList li a {
        flex-wrap: wrap;
    }

    .appItem,
    .courseList .proListText,
    .courseList .proListImg {
        width: 100%;
    }

    .appImg {
        margin: 20px 0;
    }

    .appImg p {
        font-size: 14px;
    }

    .appImg img {
        max-width: 108px;
    }

    .appImg p {
        margin-top: 10px;
    }

    .serviceNr {
        padding: 20px;
    }

    .serviceNav {
        padding: 5px 20px;
    }

    .courseList .proListImg {
        padding-top: 0;
        padding-left: 0;
        margin-top: 15px;
    }

    .courseList .proListImg img {
        position: static;
    }

    .video_inner span {
        top: -40px;
        right: 0;
    }

    .courseList li,
    .guideList li {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .proListMore {
        margin-top: 30px;
    }

    .guideList .proListText span {
        font-size: 14px;
    }

    .proListMore .icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }

    .faqUl li {
        padding: 20px 0;
    }

    .faqTit::after {
        right: 0;
        margin-top: -10px;
        font-size: 22px;
    }

    .proListImg {
        width: 30%;
    }

    .recJob_sel {
        padding: 8px 16px;
        margin: 0 5px;
    }

    .offlineList {
        margin-top: 30px;
    }

    .offlineList li {
        width: 100%;
        margin: 0 0 20px;
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 20px;
    }

    .serviceIconLi img {
        width: 50px;
        margin-bottom: 10px;
    }

    .serviceIconLi span {
        margin-top: 1px;
    }

    .SfTable td {
        font-size: 12px;
    }

    .contactSwTxt img {
        width: 26px;
    }

    .contactSwTxt .swWz {
        width: calc(100% - 36px);
    }

    .contactSwTxt {
        padding: 10px;
    }

    .contactSwTxt .swWz h4 {
        font-size: 14px;
    }

    .contactSwTxt .swWz p {
        font-size: 12px;
    }

    .contactAddItem li {
        width: 100%;
        padding: 0;
        margin: 0 0 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .contactAddItem li p {
        margin-bottom: 15px;
    }

    .appTab p {
        width: 50%;
        text-align: center;
    }

    .appTab p.active {
        color: #222;
    }

    .appBox .appItem {
        display: none;
    }

    .appBox .appItem:first-child {
        display: block;
    }

    .appTab {
        display: flex;
        margin: 20px 0;
    }

}