.sep-container a:hover { color: #fff; } .swiper { position: relative; overflow: hidden; z-index: 1; display: block; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 } .container .btn--search, .XWDetails .btn--search, .colour .btn--search { display: inline-block; width: 50px; height: 60px; vertical-align: middle; cursor: pointer; margin-right: 16px; background: url(../images/search-button.png) no-repeat center; } .white .btn--search, .CPDetails .btn--search { display: inline-block; width: 50px; height: 60px; background: url(../images/search_btn1.png) center no-repeat; vertical-align: middle; cursor: pointer; margin-right: 16px; } .swiper-container-no-flexbox .swiper-slide { float: left } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .swiper-container-multirow>.swiper-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .swiper-container-free-mode>.swiper-wrapper { -webkit-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-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform } .swiper-slide-invisible-blank { visibility: hidden } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; -o-transition-property: transform, height; transition-property: transform, height; transition-property: transform, height, -webkit-transform } .swiper-container-3d { -webkit-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; 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, right top, left 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: -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, left top, right 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: -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 bottom, left top, 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: -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 top, left bottom, 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: -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-wp8-horizontal, .swiper-container-wp8-horizontal>.swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical>.swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 27px; margin-top: -13px; z-index: 10; cursor: pointer; background-size: 27px 27px; 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%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%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-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%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-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%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%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-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") } .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%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") } .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%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%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-lock { display: none } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s opacity; -o-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(.66); -ms-transform: scale(.66); transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(.33); -ms-transform: scale(.33); transform: scale(.33) } .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; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet-active { opacity: 1; background: #007aff } .swiper-container-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block } .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 8px } .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: .2s top, .2s -webkit-transform; transition: .2s top, .2s -webkit-transform; -o-transition: .2s transform, .2s top; transition: .2s transform, .2s top; transition: .2s transform, .2s top, .2s -webkit-transform } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px } .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap } .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s left, .2s -webkit-transform; transition: .2s left, .2s -webkit-transform; -o-transition: .2s transform, .2s left; transition: .2s transform, .2s left; transition: .2s transform, .2s left, .2s -webkit-transform } .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s right, .2s -webkit-transform; transition: .2s right, .2s -webkit-transform; -o-transition: .2s transform, .2s right; transition: .2s transform, .2s right; transition: .2s transform, .2s right, .2s -webkit-transform } .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top } .swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0 } .swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, .25) } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000 } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, .25) } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000 } .swiper-pagination-lock { display: none } .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-scrollbar-lock { display: none } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center } .swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain } .swiper-slide-zoomed { 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%; -ms-transform-origin: 50%; transform-origin: 50%; -webkit-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%; 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 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity } .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; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .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; 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-container-flip { overflow: visible } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px } @font-face { font-family: 'commoniconFont'; src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAABIwAA0AAAAAH4AAABHYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACDYhEICq4ko3kLPAABNgIkA14EIAWFAgeCWRsvGSMDwcYBIEgeJfurBO5Qdys6IE6lIitn8aUiIEv3eKDMJZQ1nmN+jZBkdnja5r+jWkThcEQebSZxVqNiYALDyOmydOk6XFX6XXR/+ef7xd0z+xbLhxCjEMWmJlmbDww/HGyzIndOdh2aysyeVdZMkDWR5Jt8CdTGa9ARXTFF3tfmVco5iSZ3bYE8iCSWBer931pqdwIAOm8LOsKUlKsxPzMH82ePaHOFCSG6gnBVFS7hvSuhJFBpVF9lnag0lZpcV/HS2ReX8lwKYEKN300uBgBAjeC/lQhJUh8iEwC2EWmIeCNmo2NBH6vhgAML4S4+AA8ApgNzAQAwFTpBb0AA0vYb47EpBpmDVoEjz8Ebcu9eDMXYu2DkmZAmXrBjda0PZANwV4PobBw4ousSTx+b9hw8J6Py4EVOKUCoSGky2JRgNfhFyctRL7tf3nn56Q259wE4MJ5zsZDnEc9TFdLPPT4W/gP/hr/BX+Bn8FP4FtwDd8Mn4OPwPng3PJ+3lzuLa+HGcNVengACihsiSMtMwQgAZ4JfHgjgl6Hez3WsgEQo1iTi/HTymjNxOgFgdSwGeiyBtsaOECABMiBagqGLVvVhYnhcCocl1NXrKVBoIp3OYdOIBybDk2RCIi8Ck87nE3xDxXxvjz4wDYwVNCGZHMqXUih0sg+PxhJtQhCP8jdJxZJmppajBw1eu7W7W3WgG8+ecKrndMO6HmjkihuPmLL6hmLWWngWhzdzrlfXbi4yB1l9cqflc+ExvGZ1eSm6CtZfv3HDsOlSTw9lgu92/x29qDj73/6RCrv2wrMWLVq4YcOBPUEnegIWL/dd8Gnrgp2HVxwKWrlh4cYag8o8PEjAD3vvA+L7bHAaHqjskFUpOZQyJNVr2agZDfm+5lPFdVMRVj2viOlB8PoAuUx0LhdlLuBI3Qh7CpO5zCNcZqgMGZfSAt5gjwD5Wmys+Wcs1BLLPYlm78eNkJkFpaTcB8IdGCia8YJIAfl32w/IHDJk5SBkJYoLMMAyYssZAndAHgYQNKkD5UyxFDcMbEiF244E7kJl/Bixhv88T3X/zs+xF7juNVYFOQqJA+gqJPyEz7eHA1kQAOLQioAfnkV+DH7ec4/N2idge2+BJveWb0OJ3dfeo0/+lEqlMfJwdOff6SbZTpVHcfmuO8b2INv0DbJgVIc/00J2ojjKaok2T2yfm2veYkY1JT9/9BJuZySjV6RzHTr8oUhvh8xcFS0b+3yYpqQlEzWM65iHomYsh1CIBAHzPEGSeSQjheVHY9pq+WAaumiSKpMvcFwZQB2CLlnMxtJ5Y1sFjzhgs1GHrIZ653avtP+gQ7euNlabH78eTu2+azCrEkccRCvYvmJqEOZvnkU/xbx/ILNxRRQbXer/26+OI8D+LcEG+hA/Yk/I44OPsf1j+8WKZ8KVHfLfeOi79iEofUqZWkz4fxWmLIro92jffc0HJAgga34N7uJCPvLYpPJqrGV1CB5tZIpl9KL+gHRUfO2K9kIXNq0ZMgIIQmi/TuWsSq5iHkTB1gi8TdC9tjp3UD+wXztEfZ8w8SXIfu7qj1up6+JZsiAgV02XqQOAN1NWWLBuQZg8p8B6Fpcp7yxcir+5Q4e0/Qf0cx2xhpGOSCcX4lKMjMwmS3SyqzycDZ765WvSsuepxZSVxf49E9vnOmqn8hHD28dO+pq/9rsGsrGWRdaoF/N+rLoDmVwUekq9nJmGPmy4/VeGgZE52WrGPW9bu7/0tSIZkfar3wcEAdo3490YTzEEzCGMBXuNdIYjUE70jbAVg8uQWShYe39pKb6fSoW74Upt5hOEgKE7o6yGaPazmo4bInWyKJeyYNmWM7rjT6bxXnd4pTOSeTbiHYQsdScYVe2JZp8rlbeTDbHw+n57NNvxJJhmwTuv7rVFMq2nKpE2qPn67ELE5ezZ5Lskdka/sGy4CLujO7tqypQTA34lvr8Dd76lW77vBj8PBsIgQHpSrhIK3O7e4f4CtjtB9m6EfSzUZnoX39Os8r7qmUHNsxSMXeZq5VjtpBgy50hP9CWKo4xEXZ7XG1PllMrnZUj7EjwCbV+70qSSVIhCbDqmfrpTnXvSMkM+IIteNBbd8/4RiuuOiB+GJM1kkkrKvl5GCSd0nYe812LX1bpH03Yaur+xD1ibrRDImo/TjasJLTu2flvzZVPQ6sW18SC7CgcOrSjUzOaQro0V8sB+41JlIzjzNGjBM1XRE31y7ni9rwz0QDucikIxqNwkniELn5cJuozlv+s0Vfsy7sXeCCjhhG6TeE2F+ji0mwLZu0ddwk+482Gd4GPahfQ8+QBhMviefdSH4Z/wo8QJ9iT2M3m8m9kdhnWkDdX+c8foWr02LND8tZ/p6o+Kq9a4NY016QiX+ShrVAyPaZtTiFdkvqRv2ZtUccmraW+QNbKUfDKuA0Rs2UYWykXrr406aNIKzvoh2GboGvXX/uR1fXOfzkoIpe0+utj7xL4E4Fdo2kPhHAGC8kPh7XWLhDSTLv9ict+0hQGYuVn5eZkuJmBYM/Pys8Ilg3bWYI28uAhRvsmut/NyqEaMojuJkeWTpouPG0qnmIO8Xykt5ixneV1S91kUKlqgFBt0ybqwcIjw7M039sqygwcRwYAx8ZHKwc/+Eb4lLC2QxGMzC/yGo/x0qjp9oKggONTkZSEZqTH/5g2k1VMLhW5rguXKgq82DdbBeul1vlH3dZcAezsT7ZOBG0zJHiQnB257Gd128GvKSKQsJbQGlUKZdJFal5gUahf5i+95GSQrSivKKoVJzcne0Zb4SE8FHARijR/rciKblMqiyZOLlHbkih0pUhLwt0LsVxD7hiPeNzyCFZ7Gj885gc+dQwuOTMKr47CzbuzvHascgf8SSCWQBane4plnrwOmqQGyhxWHBpeEluLlGFxPy6FuHIYn7bRIzexgjzOtgnG3d1ZsH93DWDoORyAT9fl0TPhOWMs9iMGeZnbIw52cxq0mj4LgTuGEJ21zfPECEYke+j27aAXi3RgixpI5xpln0MHBM7KvO8a+8vT3r2dunKhy2tG0qNO3sNKy+RNBFKRlWZlf1SoLiqgXqlFEZVFvUqvMqGqBq4ZUM63i261F+8ULxftFq5POonlo4e9Othw/jq/jZ12K5i2E9XYrEBCghaxpE0dlLk0A3yRkVf1LH57WJON3buItr+gYOjSMk2WkWYS+Q5dvG+JrEdKMnKywKbUdFct5mzr5sqa04en/BDGHypVWXtHF9leaJ5bExMF2QV8H8Idy+wrqaxITLU80r8Zf4hUpreWH+tDURSE1D1qK0fD36xgJEU2O2CEA8MTxzHXvw9HilgeFCUVqKsjiXFy27J5yPzLpsH4XZ73ynixH1iEwBJRus0RZamupAe9mjt1vS74XEaQlkpMv4Sjq1narCyK3d5qpoUDbsYY9TzGPbeqRS+9zlG+oud4jeL0RuHw5MC1mqYUu5UvplqUzOnHsU/K0ylfy3qRee2R44NqFTg/WfciwmYb0NYMt/h0q9G5CU4I5pqnGNLI6NroxoULoElTU7o5HbTZK2wRqEDNPbGX6DaV+rsnM+L+ii2/zKc4PUKclaQy6JL0m3RBuyhnGudIY4MzOsdvrVd+uSqbmZERcv1JtWunAIfVLTg3RxltimmqMccnNBdzEFLnJCCJH4FetOskz8czJDSGlIUVFxRV6n4GFuTK09H7oihKsNySb73nxJ+O1Aosg8OreYn2aLjVVl6bfk6DBDOvF97ADgGN4drbNtiFAfQDoHR/fhqJtk9ABy3dMcvuhhwJy/P1zqhw4Z5X72LwWhOlgMV1BBQF51gBboMsjUBrkkZPQnrdE1fE5VI++jLVY4HF0UXPWoOAMznnOxiUNdLIg0BrwA37dxkX1sIBbkf9TPJofKELm3QtR3JttYyXoaMs1wywP8gUlJf8LQU5Qj8wTprWe6thOF3vn5ngXwEZdgr/QeH4AsfMGcmSOUbsq0zuFk0xvtBKMnlk8WgspDcI1vL07ZOOyHddainx450SIwZ/MGPjlovG3Qdrb3f4UDOy/7ZX3fQE6v2uj3TzpUiYz0CJHuJqZRjww0yO5UPplfYakEYen3KOwM5F2W8G0Lebf0wBbIvN/S0DJl6ZhyXfI5BIaPWh6ixmlHssN26pvrAuWYcHyitvrD4/xr3dQGq/NaiJxHtcv7tnZRPJ77GtsHXcEZZZRjV0pwtO3DsRG+V+tTyHJ01amiE7fPPhWNF0tvyxXGR8P7u1kc8J74uCgh3Sw4ewItjwZvDap2aP4o9jmeo/Dgue9BmLZjnebxPQ9psPv5D5stNM9+B50+1hbkTy0OdjqN7TT/N5fl5MW9GQuCMwLCMgPwgQJ0P9LSdcFj1JF80WpjwQzR8zMHZHr8+jQAySujObBZ9NLx5bRJbCUXhotvsBVg88yr3b1PDWsgrfqveaqeWpeZ8d1Q4DWnpHs0o3BMhNr2tIkGRJblVWTrfJL8E/Mi0cHmfyFRRHtAVv8+4VLCZjlPNKVT9m5tuz+OhN3h/SHzdeEJZrHa72TJ0dXLxkcoMadKzYRgfj545mcxIGRCc5BCc6BkVMGRiU4o+ihRQ8GeUWYhhUMST64MFGWJM9PbQ8rqXybCVlkZll6Gyqsxkio3Bmfn8nw5RnI8cMMZx8XgzNbMHsDaQB6F6stiArNVlksquwEDiZEd49/w8cR6ghxhjj4Tvrqg3GOktjKvI7RjoD8HlGVF3Ahr6fA2uUYffayMZXOkpjLq8H1hHQzEqdQGBFTemmEU5eemiGbNElW++kyIhyl6YjJwwM87gQCl5XtZbD5bMbekWfAp//Jv5sCnC/CaXN9JD7tnKPYAbq8uMvopqraGTE5JQtSdUaDOdOSwjXqpc4BkXLvTythzvIuaVLqkDiZWe4s9GxDXKqfyud3cjg/FS9UbSon5yHbNME1zpSaZZIYxalN47nLKJqfOou7A8srCeRZ8z8oRpXRcmErjT2T328tsdUY/hg28JRROjraUaQD8nb5+bQ0m9A5zynIE8j1Qs2M286jXpC1y9+/0cBGbjEPN9IXSP346O3h7Ha2NWsyer3LY+54gsBpPmdlBVehUl6ST5p744aN1fx0XiJkPyIruP0oPl3qG9fIuUzqRlQlZT+1V6YkmpY9Kn98rfzRMlPilCvan2UlKqSbdJnTmCmSxuSBqGVl75YsScFLnq+orKg4L2+XXQAR027GtiGKMlCgSVElotoE7ZoEDWZY41aZlYRqjlQuPHr/QFjxQ27MkJu+pzyXm5ADG03R526ojovdCSoXAtDnj1r2s62fP3+U/uNnNefZgVuHCyscc/tev3r+ej2QfO3ZR986RV4zxQaxP/SZ5bdKF/UjwQkBOaD3/148jdgRDElg9sGQhqHibn5IAsAiWpU89oBKyArAAXQRcjLgEwcZQVIIsMfZSnQy5EnGtigH+vf6N54AysFZbcQAYK0aMCKyuEoE/QVkmiKkRBWAXgCusrsPlz1TzVQIkEC6igFE4ELsVfxIxEH8QhUPqOAgEiD+jkoBWlH3pgJPnQALINwRAMoAqBBgFaViAAPkIxbiGxAH8RNUPPCuCwkQf1algDxPI1GBUl9g1syhXL96ehVxFQaWdqvUoJ4TrueBCyspgpsi4JcAB4zj7pXNwaVVrXLNwNPzp7v/9KF0HodmLdwjxflnyC9w3v3m/Q1+XkmCqPc+eR47tmjjEnCR3Y9Td2rGWDfZ44PQHWojNhy0xs1YDVh5dY0hcNFm55Y2V0C/fs4z9fT+ZHrCzPImpzAAfcNvaBSRb1zMGXLYUGWcdnAi1e70TM9EjEMlx1POBYhAQgADxS+zGbuTs4vD1c1y9/D04oHNE4cXb1w8MD6fNcBdf/akS3+Hu6IBfwKhHXFgQ2u1+9gO09REcLX2SxVu+skIdpqpvd6fUFnurvIumvsHHGz6cxBZxCo37/vSRWgRNS2tDRTvvF/zU6v+AcnTqn/fIh90bl6n4SPrgGt2N7mJ86AB7np/YmmVO4gulPLm5ob+p3VshPWN9Ap3rVsX+vMe9ZisLFZ1dzSHDreyvIFQ1fnA4wLaJjvLTi4dsKlr4FL5oNYGAAAA') format('woff2'), url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAABYwAA0AAAAAH4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAWFAAAABoAAAAclfKZQ0dERUYAABX0AAAAHgAAAB4AKQAjT1MvMgAAAaQAAABGAAAAYDw2TdxjbWFwAAACOAAAAKQAAAHiBWjztGdhc3AAABXsAAAACAAAAAj//wADZ2x5ZgAAAxgAABCkAAAXJCDd+25oZWFkAAABMAAAADEAAAA2I9u2N2hoZWEAAAFkAAAAIAAAACQITAQFaG10eAAAAewAAABJAAAAXkZrBqdsb2NhAAAC3AAAADwAAAA8VpxdYG1heHAAAAGEAAAAHwAAACABMAEIbmFtZQAAE7wAAAFGAAACgl6CAQJwb3N0AAAVBAAAAOgAAAFZPDkCKHjaY2BkYGAA4q8uL1jj+W2+MnCzMIDAA3VLWRj9/9//BpYC5gYgl4OBCSQKAC9BCw4AAAB42mNgZGBgbvjfwBDDUvT/HwMDSwEDUAQFCAEAiUQFWnjaY2BkYGCQZfjDwMkAAkxAzAWEDAz/wXwGACTEAjkAeNpjYGFhYZzAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjG85mRu+N/AwMB8h6ERKMyIpESBgREAZcIMkgAAeNpjYYAAxlAGBpai//9YgGwglgLiVCBuAGJvqJgDlLZlYWAUBtKtQFqNhfH/fxaIEV0MiQySDKEMa5kYGEIZsxkaGBoAy/MLVQAAAHjaY2BgYGaAYBkGRgYQuAPkMYL5LAwHgLQOgwKQxfOM4RnnM+5ngs9En6k8U3tm9Mz8mfUz32f+zyKfxT6rfh77ounFlRe3X3x8zfn/PwMDXLUIVLXZM6tnPlhUc/z/L8Us+Vvyl+RXyc+STyWfSN6UvCZ5RfKI5GHJXZLbJWdJ7BSfKu4ibieuKSoMdSHRgJGNAa6FkQlIMKErYBj2AAC4gEjjAAAAAAAAAAAA4AHyAkgDCgM6A4ADugROBMYFGAUsBaAFtAcoB/QI0glCCXQKAgp2CuILAgtEC2YLfAuSeNqVWHtwXNdZP4/72Oe9e3fvY+9d7euu9t5daXcl7VPy6mU9bdmWZUuRLdeR7MSxTOM0iRnixHFStWkm1HjCTAkMJSlkOh2nr2QoUEhKpzhAYQjMNDymU0KnA6EDBRPakpZ/iFZ85678SIfCIN35zjnf/c6555zvO9/vdxYJO52d17mH6CU0hu5C59Ej6Ar6NYRwCktYlHi7wrkV3KiPc61xbKSwocvwwtCbE7jZaqaIoUsE1Gms03HqVmjOlmiKacYxBesUkThRcGCI1jil+jh2RInouJoimiphp1GvkJztwMhVXVMF9iEH2vUm/USPwZmqfXxjY2UqP75wdHE+rgRld2bzQ+PJOT0Qo5TylOOUrJyORBOtUg8lPj/P0bicUf4z0bQ5XR2eO1xcvLQ2rPuz9cyeSw9+4INaXgpEBKoY9oA99nAmRBSpObd02SnQbG9Pmovjrx346OnhrJMtL2wMZVIwtY17tbg2247FVHxJH53amxicrpghyss95b2V1Exd3zN79J4FLUBCIUORw4mwGSCiEBIoj6VUXDI1IySGBEnsvKqMzB8pZgcToUxzenZqdECywqE0XvVpSijf19/rZE0hVG64472JoSTf+THtb/RxtFhxyY8LB8/P2jZOpYv7hzMpJ/2Z0/emLJrQx+Z1U0MUoZ0tDtEtlET70e+B5xzXGcAV7Dq2CC4UVM9rVXBfq9mo8/WWbsC/pjJpVD0JZatZq+qi4KmHBAPGcB3mYegGzhMFELuP44mcIwo5u1EfgM81DL3mjQ9+hMFaze6g7HMuuNiLFNZBwqoggpNbzVv/MDVQgbWE6Y9EgfNR99mTG29unHzWLRRuV9/bSAhhRQhwvBLL04AUivipn4+oQQETfk8yhfmHNu5uDhMBY8kXqmBsxwI85QkXDftsvxQSe/ySFDQVwQ8WmAQVkSPwVu6J+kI8EbhA1C/7AoRwGV0IUj2uUhjXKms+LiBIhl8mHPfgK8UNniunsrnn8Q9Saigq/sQcveq5kZFD8xwv8L5Qo6dPt7DgC0V0EXNcQErqmYalDubIyPD6qc7fUb6lpvNazKSYpyoViF9IiUGBqpyIRV4sD0uUEkwFTqUiFnhMKFgo6aAq+gZ4KeIL+1q5kOrDMLifJ7xfDwkc5QQhoNrVyNXNufFywaqfvorgjyILxD+Rt1AJNVELYqTaHMP1Cs5lbQlriprCtWx1nJ0+G0JAALXTUHgImrym6nnBdvNNMDB4ej2iF+eK22dAwENeAKFn9FJm+0ymhBfyq3m8oHcejZainVfUOHnBjHVewf26/KPibKEwW+wcLc4U4ZF1XU6XSmn80hu6/sY7sv5MMPgNSfoGmytB9+28Sp+n6zDTJ2GmFWKzROTFiSh4YdVi4QJRDUEHgceCy2U6ncUqC9ymE4MTIAoyyz/QNWezswDhCi/H8QR2vbeiwyKQtTxZH4eshDWRRa6MuxFMc2TxqRefWiSxCF/Q4pQEgtGEYfp8vZqmzA480R69PDCraFqvXzSNRDQYIDSuFfhIKiS6ZriYrskaz/uc5DlXGVKcc0lX5HlNrqWLYdMVQ+BcXXUln8BzchC3z14+28ZBGYLHJzmaDhHYv3r1yJGrq+Z4erBSrSeGZJNSS5LMo3YyXaulk/ZRUw5blJryUKJerQymxzuvy9HVk5WRviCnmf6Q7CjRvBzymxoX7BseOLkalcPhvpJbiqhh3ZKD8vyFyckLc5GgbOlhNdJfKPWFuj7YgnjZgtQSQiZCWdvFkJOrBtZVAUKj3sLNqq5CVNIjanh7Xepxw+TTUmJ7QU1IUHETEihZzelhNaenx2GthMta3vgHdv6cvkYbKIbyCMUgR2EINsCMChFEP3ZselPVrBBPcUrT8APaKAg54O9x8lLn652va23tllrFxT1aV4l/GzSdX2KvpLzTEwiCMW5r+DjYdz4B6g9pe4pY9ZQsf6Ikh8g/oiAyUA5mk602AYWytqDqvCdrnobeUS/Rz0YtK/recZD0K14RvUPVrZMrVt6C5ztWrwVP541uE74noMmd36TX6RKKoyzag6bRSXQfQvmqbkAWVoV+gFgIVrbVcO4gq7Ivs+9isMgyi1zWs/Cwso1/wuJ/H4O8WVsMzoRjsfBMcPHsYrDTw+r4u8HFWnZgYGpgoDMBBvi7TNvp8UxuWu8a4A//HyO8OTEUs2JDE7vFJNNNDeCt/4+6G4c3se0wWvKQjeWoCmZJqwtrHCwW1tSPd7EJiAqkBTjHgDTS7ilmGMZ0qiikGBSxEXI2nH8Xf2mkOL5v4vxH7h9Ppx6YP4GDv1BnuWnwyXePTN6b6OlbqJQW+qeHo5KvtrzxYCRF/St7SguluE+0kr7cxPnJhZ+NH5zG1T1zyQvz0xemJx+ev+fcva/OnbgYMjJ66PzSxLUTdx+rLvZXDldGVmQ+q2yubBSFaHRyqbK40RdOR8Tw6NzMham1/fkptt6xna/RP6TTKIVqCPFus4uhXvpiSK57SNtsGcyTuM4SmIfgKnttM0P66ktl02y1Tp76zqmTreFhqDy4MDPdfCmY1N77o0r50OKri4fKlVsV/qXm9MzCgzdtoVNz2DTLLwW0JH7t5PtMWQWcgGM7f00tWkY8Qn7c8mOXnO28fAK/3Fk+gbfw8onOMtQQh57e+TP6OG0jCSVQAzyIsF3BdTbllEcEKLgRkAdwp84Q2xnrLsiL3py34CTY5fJD3iu2OC/ca96K2SuC5i7OzbVHr3pyrrpSra6cYaLzmGw0aqsnNhVVVZb3zRX7DIl8XlH7inP7lpnu3NpqraHhobmLVx/L5bsS/8FubxDv/a0ekTfXjtXqqq1Br/nloGJymhJcnofBNFut146tbQYVje2HA/tRvrkfLmwJfsvbBfzynfvh29nZeZuLUwdV4Kw/jX4DfRn9CXob/RcMAatmi2OI1brtbnHIgzwvzj2ve2au00XCnOdu+G84t/kU2xuty+KAdXmMDkZhpyCFY+x8yLhLt/Ta0C5LY9Z6GzhZXgLO3+qqGdB6yMq+IOIukYQx2nioepMTGt4kumyu1mTwCzzRs5S6F4U23iWFjECyAXJChQACE2bPbg4CeVsl1Eo18xVLJ7wSjMVnKsfXB21HlSgh4T/9nZi+srI2tS+djCt9qYI11T5ycCEcX506OjTsx6Jc8SX6S+PDTiIejlLOFynzkxU7EwIu5wul7Urq+cTGyNgRjgciRQM8P1O3s41kxcZSICoUOtcCIT4SiMZyalrE4QD1SzgwlK1b8c5Xg2G9NxTzifUcDYaLRsjPia2gZPl8YBqQelhJ+UeSc25Q6z+YTPVwXG+qdcB3u9Ufn8xLUma0ZBGiVvb2yuFsu2wSquHnezMFKyWJARwvJWNBOZJaHxioN9xeNfDIFdg5q1ydGh0pZOOvD5dcQ8Oiapbri1jLjI2FU9V8TQ0FI64c9UsBVSKJTM7UAnEaMNJz+FplJixHOGAcviBPpJAvmh5cepjnA5Ly8TWiqEFgkFw0OReQSSiwXk7B/anzFcqb0VQ25VB/OpKPpp2HYwKJpWVDIDgWiT6jRDAR0nFrLJOsRtOEz8TNcaheUy2eYMnKxrQ+1+IxDrNqP8vZfsjZT3k5u4unA6iN5uFe+Sj6FUC43WzNsKh1Rz33U+r8T9HjnEdVkzi7W7J8LnhE1uAZkVUgpcTghgkwDpdKJdvQwBICtY21lEd+sxpDwzEABohccqMYNc3o+8W/97EaE+/s6iwTR/8HJfng3qgV7TwetWLTjdW4VV4cIJ+sHavVji2kG+ntsyDo1ntb6Z6UO4nBEj8dM2NjmbFobBoAD57r3eLO530qcn09HI2G17tyqDI03YkOrTQ4XDteJ6R+vLZdSlaT8ODnnltZSVTlyKlwNBbe6MpknFEOJIJfvg1+6UU+pKB96B70MfQs+lXvLsD2UNVdrwCIhHxM3IZ3y/MSEWyV4R3/CXwLgVJkF4hYMQAMBE54mt05vQzD8sIuodaFPPBzAOZufvIufB5857wUNoChR95jVmwetVs1/K5mWkXb/i0m+kzyN6WlcyOR84tLa2dWl4eqc9Npzs+FuJ+LZZVE3CdFBP3Eo1NGTyxzgqci76fGyPiLHMXhJi9impYtdd+lffsuPXtpHx7ezhCO/3Cpb//CsYMfX5ePzM4cFkksaFiRdIwXl/AfS4YhqZb1xd2S9JpFyypYFc00iya2On9Z3ThQ5un+i7bdX9y3f3Xu8erJoB8Y+x4qUihoYxle+wYhJ4UOVO6/DMmnP0kxFik/unlpc3Rsc7Ry8nG4aa5dXhgf682PnBkjvb0XZ1MJwsGFjxSuGz1xI2l0JQIsvbLzu/QRehT4uIYGwXtdLPV2GKLcvcnt6C4oNG5TA83jBgxtu670sr4HFl1mQVBxtlicPcpEMeG6TddNhIOlxtnJY7XqyrG/OLZSrR2b2KyXg+HFmb1OoV0+VBsZqR0qtwvO3hk8W5jzuh6dK3zLabG71/Ynfamh9TNXnrrvOHSFMY7f99SVM+sDGR+dLzhT04sbm4eX6uVyfWnp7Mbi9JRTAN5zGp2mHyG/DjkjAWvbJa2MCIiwTu+Sxu4ffrhx7Nmel6JRibwGnPM//BEfJ37ve4FYwo+1zg0/PtU9MTvBaAz0/kTU37nRuRGA+Pchc+cH9O8pBW7lwh4Oof1oGd2N1tkJMNjPUDe3R2ztRrnjpQyXTYNNSGTCIyfARhiFZD9o3GJkjKvlu/wETGq3ajlyzQhK9z23fPcL5YG8PZV7LGZHEqYaDB7aO7MZixuFTPrbaiZdiBsq+Yei+8zBI9NThw5NTR8xehR73Wymc50nQroeilrxz3klpB2ik+kHJg5NzSzNjA5XNkd5kfDUsfc/0Zv/gOHGTcdYMfMwtNF5Z6o9PG1nLzxzIWPznL++WhhsntZMXbO0rmS5gUN3wX3vC9SAnWmhGXQE9sSotdhiZUadCWRWibBcSiCzjpN21x/sdiQqsAU8UAWl7vBVj5Z5dK2ZvbOBq1d+/kqo1wwvrqVafYbR10ptf/NmbW0xbPbi729/08yTrEkGoch38rDMnGniTcUraeDKFbAKLUKHZOfzyW7XJF5ltcVwzvw3O975TDxPsB3HJy1ny4zexTbqfQJh9PLO9+lRGkFT7DYxgJu3yJbRPSXd360mMIuDW81WVzJjdmyMW006Eu6ViNnTan+x3UqYBFoyD2yD90XDihTT3Uws5ecb/ROtdKo10d/g/alYxtVjkhKO+gRCOQEn+tbsUwuLfZVK/+H9G9m1/qqbjkUw1iKm5hYrWX9Ikf1Ahgj1hF9WQv5spehqZkTDOBJLu+A/TNDOX9F/of3AtRHwT5bH2WGBpNCib6Q7p2CDwvjezqfCZi6MT6Xwi2wvOy90PsV8Al3QXTtb4P8t1Mcyi+Mq+q0LxW7eNjQAg5t8vaHU2E9GGv3cxMUa7gdW/Vkg2f2ssmKacTM/mc9PHpjIvzx+/wT+VsHpvLh2cH8J/vYf/NLBhf4S9/uBwtThadeddslXpx7a+2W2Bnw/+hnyi+SXUQwa9SGgsTB9YLHsJ0a2HnLmXSEUFd4Nh38oKGEBP4nxD0UlBAo76L1h69hCX6CXyRacdsgiWlY0Wq5I3tq+Rk48PXrjn9v4+l1Pt//1xii6abt129YQ3ZaBbbK+/emPtW/cuMP2vwG5pdiweNp9kM1Kw0AUhc/0T21BxILrWRVBSH+WpbtC3blwUddtOklbkkyYTAtdunXlA7j1MXwAn0Fw5YN4Gq8IFZqQyzfn3nNmJgAu8QmFn6eNa2GFU9wJV3CCWLhK/VG4Rn4RrqOFN+EG9Q/hJm7USLiFtnpmgqqdcdUp0/ascIGRcAXneBCuUrfCNfKTcB1XeBVuUH8XbmKKL+EWOmqJMRwMZvCsC2jMsWNdIWRuhqisHhg7M/Nmoec7vQptFtmM4r+pv9Y942JskDDacWniTTJzRy1HWlOmORQc2bc0+gjQo2xcsbKZ7ge9o/Zb2rMy4vCeBbY85oCqp1Hzc7SnpInEGF4hIWvkZW9NJaQeMNZkxv3+lWIbD7yPdORsqifc1iSJ1bmzaxN6Di/LPXIM0eUbHaQH5eFTjnmfD7vdSAKC0Kb4Bg9qcIcAAHjabU5bboMwEGRoMC2Blr5f6hH8kaOkF4gMdp2NLLsYLEJPX6ehUlR1pdGuZndnJkmTYxXJ//UWgSRFijMskIEhxzkuUGCJEhUucYUa17jBLe5wjwc84gnPeMFruSdrhNWjosZlo/NG5pMLOxI27Tqmg7ANVdKFxihu1MfAV6wVJIUtSY/c8L71StlcxodtEKx3oQ+umCUGF5ZSWW0Cb93nVHwFN9PZj+HCU0d5HGOKVb6RdJAphPdufCe9HdhxVTVk6ABuyKp0va53ZP2vw56EYzHhRLY85eu5b+KB1dNfImb5BtQqYFkAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAcAAEABAAAAAIAAAAAeNpjYGBgZACCq0vUOUD0A3VLWRgNADQ7BGQAAA==') format('woff'); font-weight: normal; font-style: normal; font-display: swap; font-display: fallback; } [class^="icon-"], [class*=" icon-"] { font-family: 'commoniconFont'; line-height: 1; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family: "iconfont"; src: url(../font/font_2684660_6vnathitti8.woff2) format('woff2'), url(../font/font_2684660_6vnathitti8.woff) format('woff'), url(../font/font_2684660_6vnathitti8.ttf) format('truetype'); font-display: fallback; } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon_icon-test:before { content: "\e649"; } .icon_screen:before { content: "\e647"; } .icon_caidan:before { content: "\eaf1"; } .icon_jia:before { content: "\ed21"; } .icon_nav1:before { content: "\e77d"; } .icon_nav2:before { content: "\e645"; } .icon_shengyinjingyin:before { content: "\eca9"; } .icon_shengyin:before { content: "\e643"; } .icon_youjiantou:before { content: "\e63f"; } .icon_zuojiantou:before { content: "\e641"; } .icon_fenxiang2:before { content: "\e86e"; } .icon_tuichuquanping:before { content: "\e63d"; } .icon_quanping:before { content: "\e634"; } .icon_fenxiang:before { content: "\e639"; } .icon_jiantou15_right:before { content: "\e632"; } .icon_24gf-playCircle:before { content: "\ea82"; } .icon_denglu-mimabukejian:before { content: "\e630"; } .icon_zhihu:before { content: "\ea8b"; } .icon_icon_bilibili:before { content: "\e62f"; } .icon_sousuo4:before { content: "\e62e"; } .icon_sousuo3:before { content: "\e6a7"; } .icon_bofang_o:before { content: "\eb5e"; } .icon_gouwuchekong:before { content: "\e62d"; } .icon_shezhi:before { content: "\e62c"; } .icon_more1:before { content: "\e71b"; } .icon_youtube:before { content: "\e76c"; } .icon_wenhao2:before { content: "\e646"; } .icon_wuzhangai:before { content: "\e638"; } .icon_fanhui:before { content: "\e6ff"; } .icon_wenhao1:before { content: "\e627"; } .icon_wenhao:before { content: "\e644"; } .icon_chuanshu:before { content: "\e65d"; } .icon_phone_1:before { content: "\e629"; } .icon_jiantou-you:before { content: "\e62b"; } .icon_linkedin:before { content: "\e642"; } .icon_youtube1:before { content: "\e8a7"; } .icon_go_top1:before { content: "\e625"; } .icon_xihuan2:before { content: "\e8c3"; } .icon_shoucang1:before { content: "\e622"; } .icon_dianzan1:before { content: "\e668"; } .icon_xihuan1:before { content: "\e637"; } .icon_tips:before { content: "\e687"; } .icon_xiaoxi1:before { content: "\e61c"; } .icon_delete:before { content: "\e718"; } .icon_edit:before { content: "\e61f"; } .icon_x2:before { content: "\e795"; } .icon_duihao:before { content: "\e6c6"; } .icon_yanjing:before { content: "\e648"; } .icon_xiaoxi:before { content: "\e66c"; } .icon_pingjia:before { content: "\e636"; } .icon_good:before { content: "\e62a"; } .icon_fenxiang1:before { content: "\e61b"; } .icon_xiaochengxu:before { content: "\e63e"; } .icon_home:before { content: "\e61a"; } .icon_jiantou14_down:before { content: "\e6cd"; } .icon_link:before { content: "\e618"; } .icon_weizhi2:before { content: "\e633"; } .icon_user2:before { content: "\e613"; } .icon_jianyi:before { content: "\e6cf"; } .icon_youxiang1:before { content: "\e66b"; } .icon_rili:before { content: "\e8cf"; } .icon_yueduliang:before { content: "\e6a0"; } .icon_linkedin2:before { content: "\ee48"; } .icon_user:before { content: "\e63c"; } .icon_sousuo2:before { content: "\e679"; } .icon_wangluo:before { content: "\e7b5"; } .icon_jiantou14_right:before { content: "\e611"; } .icon_mima:before { content: "\e60f"; } .icon_anquan:before { content: "\ec4d"; } .icon_shouji:before { content: "\e610"; } .icon_jiantou6_left:before { content: "\eb8c"; } .icon_jiantou13_right:before { content: "\e619"; } .icon_xiazai3:before { content: "\e794"; } .icon_instagram:before { content: "\e737"; } .icon_linkedin1:before { content: "\e6c1"; } .icon_guanbi:before { content: "\e623"; } .icon_bofang3:before { content: "\e63b"; } .icon_icon_jiantou12_right:before { content: "\e60e"; } .icon_shangjiantou:before { content: "\e60b"; } .icon_shangjiantou1:before { content: "\e60d"; } .icon_xiazai2:before { content: "\e617"; } .icon_weizhi:before { content: "\e78b"; } .icon_jiantou11_left:before { content: "\e76b"; } .icon_jiantou11_right:before { content: "\e8dc"; } .icon_dingwei:before { content: "\e8c4"; } .icon_douyin:before { content: "\e8db"; } .icon_yuanquanjiantou:before { content: "\e61e"; } .icon_stop:before { content: "\e650"; } .icon_bofang2:before { content: "\e87c"; } .icon_pengyouquan:before { content: "\e621"; } .icon_xiaohongshu:before { content: "\e609"; } .icon_dianhua1:before { content: "\e631"; } .icon_bofang1:before { content: "\e624"; } .icon_liuyan:before { content: "\e60a"; } .icon_shijian:before { content: "\e64d"; } .icon_dianhua:before { content: "\e616"; } .icon_youxiang:before { content: "\e608"; } .icon_xiazai1:before { content: "\e620"; } .icon_wendang1:before { content: "\e69c"; } .icon_address1:before { content: "\e67e"; } .icon_jiantou10_left:before { content: "\e768"; } .icon_jiantou10_right:before { content: "\e607"; } .icon_zuizuo3_left:before { content: "\e767"; } .icon_zuiyou3_right:before { content: "\e604"; } .icon_top1:before { content: "\e612"; } .icon_x:before { content: "\e688"; } .icon_jiantou9_left:before { content: "\e6e0"; } .icon_jiantou9_right:before { content: "\e766"; } .icon_jiantou8_left:before { content: "\e6a5"; } .icon_zuizuo2_right:before { content: "\e606"; } .icon_zuizuo2_left:before { content: "\e763"; } .icon_jiantou8_right:before { content: "\e764"; } .icon_zuizuo1_left:before { content: "\e70f"; } .icon_zuizuo1_right:before { content: "\e762"; } .icon_yanjing1:before { content: "\e605"; } .icon_position_small1:before { content: "\e603"; } .icon_qq:before { content: "\e760"; } .icon_jiantou7_right:before { content: "\e71a"; } .icon_jiantou7_left:before { content: "\e602"; } .icon_home1:before { content: "\e601"; } .icon_gouwu:before { content: "\e65c"; } .icon_yonghu:before { content: "\e719"; } .icon_sousuo1:before { content: "\e640"; } .icon_jiantou6_right:before { content: "\e628"; } .icon_jiantou5_left:before { content: "\e60c"; } .icon_jiantou5_right:before { content: "\e702"; } .icon_wechat:before { content: "\e701"; } .icon_weibo:before { content: "\e626"; } .icon_facebook:before { content: "\e653"; } .icon_twitter:before { content: "\e615"; } .icon_jiantou4_right:before { content: "\e6f3"; } .icon_jiantou4_left:before { content: "\e76a"; } .icon_jiantou3_up:before { content: "\e769"; } .icon_jiantou3_right:before { content: "\e651"; } .icon_jiantou3_left:before { content: "\e6ba"; } .icon_jiantou3_down:before { content: "\e761"; } .icon_jiantou2_left:before { content: "\e6b9"; } .icon_jiantou2_right:before { content: "\e614"; } .icon_zanting:before { content: "\e63a"; } .icon_bofang:before { content: "\e635"; } .icon_sousuo:before { content: "\e61d"; } .icon_yuyan:before { content: "\e600"; } .icon_jiantou1_right:before { content: "\e6b7"; } .icon_jiantou1_left:before { content: "\e6b8"; } .social-share { font-size: inherit; font-style: inherit; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale } .social-share .social-share-icon { position: relative; display: block; font-size: 27px; line-height: 27px; color: #b3b3b3; text-align: center; top: 10px; opacity: 1; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s } .social-share .social-share-icon:not(:first-child) { margin-top: 15px } .social-share .social-share-icon:nth-child(2) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s } .social-share .social-share-icon:nth-child(3) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s } .social-share .icon-weibo { color: #b3b3b3 } .social-share .icon-weibo:hover { color: #ff763b } .social-share .icon-tencent { color: #56b6e7; border-color: #56b6e7 } .social-share .icon-tencent:hover { background: #56b6e7 } .social-share .icon-qq { color: #b3b3b3 } .social-share .icon-qq:hover { color: #56b6e7 } .social-share .icon-qzone { color: #FDBE3D; border-color: #FDBE3D } .social-share .icon-qzone:hover { background: #FDBE3D } .social-share .icon-douban { color: #33b045; border-color: #33b045 } .social-share .icon-douban:hover { background: #33b045 } .social-share .icon-linkedin { color: #0077B5; border-color: #0077B5 } .social-share .icon-linkedin:hover { background: #0077B5 } .social-share .icon-facebook { color: #44619D; border-color: #44619D } .social-share .icon-facebook:hover { background: #44619D } .social-share .icon-google { color: #db4437; border-color: #db4437 } .social-share .icon-google:hover { background: #db4437 } .social-share .icon-twitter { color: #55acee; border-color: #55acee } .social-share .icon-twitter:hover { background: #55acee } .social-share .icon-diandian { color: #307DCA; border-color: #307DCA } .social-share .icon-diandian:hover { background: #307DCA } .social-share .icon-wechat { position: unset; color: #b3b3b3 } .social-share .icon-wechat:hover { color: #7bc549 } .social-share a { position: relative; text-decoration: none; outline: none } .social-share .icon-wechat .wechat-qrcode { display: none; border: 1px solid #eee; position: fixed; z-index: 20; top: 50%; left: 50%; width: 250px; color: #666; font-size: 12px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 2px 10px #aaa; box-shadow: 0 2px 10px #aaa; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .social-share .icon-wechat .wechat-qrcode.bottom { top: 40px; left: -84px } .social-share .icon-wechat .wechat-qrcode.bottom:after { display: none } .social-share .icon-wechat .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777 } .social-share .icon-wechat .wechat-qrcode .qrcode { width: 200px; margin: 20px auto; text-align: center } .social-share .icon-wechat .wechat-qrcode .qrcode img { width: 150px; height: 150px; margin: 0 auto } .social-share .icon-wechat .wechat-qrcode .qrcode table { margin: 0 !important } .social-share .icon-wechat .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0 } .social-share .icon-wechat:hover .wechat-qrcode { display: block } .wechat-qrcode { display: none; border: 1px solid #eee; position: fixed; z-index: 999; top: 50%; left: 50%; width: 200px; height: 190px; margin-top: -96px; margin-left: -100px; color: #666; font-size: 12px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 2px 10px #aaa; box-shadow: 0 2px 10px #aaa; -webkit-transition: all 200ms; transition: all 200ms; -webkit-tansition: all 350ms; -moz-transition: all 350ms; } .wechat-qrcode.bottom { top: 40px; left: -84px; } .wechat-qrcode.bottom:after { display: none; } .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777; } .wechat-qrcode .qrcode { width: 105px; margin: 10px auto; } .wechat-qrcode .qrcode table { margin: 0 !important; } .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0; width: 100%; } .wechat-qrcode .closeWechat { position: absolute; right: 5px; top: 5px; width: 16px; height: 16px; z-index: 9; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); cursor: pointer; } .wechat-qrcode .closeWechat:after { width: 2px; height: 100%; position: absolute; left: 50%; margin-left: -1px; content: ''; display: block; background: #666; } .wechat-qrcode .closeWechat::before { width: 100%; height: 2px; position: absolute; top: 50%; margin-top: -1px; content: ''; display: block; background: #666; } .icon-douyin:before { content: "\e8db"; } .icon-bilibili-line:before { content: "\e75d"; } .icon-world:before { content: "\e609"; } .icon-double-left-1:before { content: "\e615"; } .icon-jinrujiantouxiao:before { content: "\e8d4"; } .icon-jinrujiantou:before { content: "\e8f1"; } .icon-jiantou_xiangyou:before { content: "\eb08"; } .icon-jiantou_xiangzuo:before { content: "\eb09"; } .icon-igw-l-screen:before { content: "\e626"; } .icon-guanbi:before { content: "\e614"; } .icon-youjiantou:before { content: "\e637"; } .icon-zuojiantou:before { content: "\e63b"; } .icon-weibo:before { content: "\e64c"; } .icon-weixin1:before { content: "\e64f"; } .icon-qq:before { content: "\e611"; } .icon-xinlangweibo:before { content: "\e600"; } .icon-weixin:before { content: "\e67b"; } .icon-QQ:before { content: "\e882"; } .icon-riqi:before { content: "\e64d"; } .icon-_didian:before { content: "\e659"; } .icon-youjian:before { content: "\e60b"; } .icon-dianhua:before { content: "\e632"; } .icon-arrowRight:before { content: "\e65d"; } .icon-caidan:before { content: "\e624"; } .icon-denglu-copy:before { content: "\e63a"; } .icon-sousuo:before { content: "\e636"; } @font-face { font-family: "socialshare"; src: url(../font/socialshare.eot); src: url(../font/socialshare.woff) format("woff"), url(../font/socialshare.ttf) format("truetype"), url(../font/font/socialshare.svg) format("svg"); font-display: fallback; } .social-share { font-family: "socialshare"; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale } .social-share * { font-family: "socialshare" } .social-share .icon-tencent:before { content: "\f07a" } .social-share .icon-qq:before { content: "\f11a" } .social-share .icon-weibo:before { content: "\f12a" } .social-share .icon-wechat:before { content: "\f09a" } .social-share .icon-douban:before { content: "\f10a" } .social-share .icon-heart:before { content: "\f20a" } .social-share .icon-like:before { content: "\f00a" } .social-share .icon-qzone:before { content: "\f08a" } .social-share .icon-linkedin:before { content: "\f01a" } .social-share .icon-diandian:before { content: "\f05a" } .social-share .icon-facebook:before { content: "\f03a" } .social-share .icon-google:before { content: "\f04a" } .social-share .icon-twitter:before { content: "\f06a" } .social-share a { position: relative; text-decoration: none; margin-right: .5208vw; display: inline-block; outline: none } .social-share a:last-child { margin-right: 0px; } .social-share .social-share-icon { position: relative; display: inline-block; width: 2.6042vw; height: 2.6042vw; font-size: 1.0938vw; border-radius: 50%; line-height: 2.6042vw; color: #666; text-align: center; -webkit-transition: background 0.6s ease-out 0s; transition: background 0.6s ease-out 0s; background-color: #F4F4F4; } .social-share .social-share-icon:hover { background: #666; color: #fff } .social-share .icon-weibo { color: #666666; } .social-share .icon-weibo:hover { background: #ff763b; border-color: #f06463; } .social-share .icon-tencent { color: #666666; } .social-share .icon-tencent:hover { background: #56b6e7; border-color: #56b6e7; } .social-share .icon-qq { color: #666666; } .social-share .icon-qq:hover { background: #56b6e7 } .social-share .icon-qzone { color: #fff; border-color: #e19d3c; background: #e19d3c } .social-share .icon-qzone:hover { background: #e19d3c } .social-share .icon-douban { color: #33b045; border-color: #33b045 } .social-share .icon-douban:hover { background: #33b045 } .social-share .icon-linkedin { color: #0077B5; border-color: #0077B5 } .social-share .icon-linkedin:hover { background: #0077B5 } .social-share .icon-facebook { color: #000000; } .social-share .icon-facebook:hover { background: #44619D } .social-share .icon-google { color: #db4437; border-color: #db4437 } .social-share .icon-google:hover { background: #db4437 } .social-share .icon-twitter { color: #000000; } .social-share .icon-twitter:hover { background: #55acee; border-color: #55acee; } .social-share .icon-diandian { color: #307DCA; border-color: #307DCA } .social-share .icon-diandian:hover { background: #307DCA } .social-share .icon-wechat { position: relative; color: #666666; } .social-share .icon-wechat:hover { background: #47b262; border-color: #47b262; } .social-share .icon-wechat .wechat-qrcode { display: none; border: 1px solid #eee; position: absolute; z-index: 99; top: -205px; left: -84px; width: 200px; height: 192px; color: #666; font-size: 12px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 2px 10px #aaa; box-shadow: 0 2px 10px #aaa; -webkit-transition: all 200ms; transition: all 200ms; -webkit-tansition: all 350ms; -moz-transition: all 350ms; } .social-share .icon-wechat .wechat-qrcode.bottom { top: 40px; left: -84px } .social-share .icon-wechat .wechat-qrcode.bottom:after { display: none } .social-share .icon-wechat .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777 } .social-share .icon-wechat .wechat-qrcode .qrcode { width: 105px; margin: 10px auto } .social-share .icon-wechat .wechat-qrcode .qrcode table { margin: 0 } .social-share .icon-wechat .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0 } .social-share .icon-wechat .wechat-qrcode:after { content: ''; position: absolute; left: 50%; margin-left: -6px; bottom: -13px; width: 0; height: 0; border-width: 8px 6px 6px 6px; border-style: solid; border-color: #fff transparent transparent transparent } .social-share .icon-wechat:hover .wechat-qrcode { display: block } @media (max-width:992px) { /* .sidebar{display: none !important;} */ .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavBtn { width: 20% !important; } .social-share .social-share-icon { width: 30px; height: 30px; line-height: 30px; font-size: 15px; margin-right: 6px; } .social-share .icon-wechat .wechat-qrcode { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .social-share .icon-wechat .wechat-qrcode:after { display: none; } } @font-face { font-family: MONTSERRAT-MEDIUM; src: url(../font/MONTSERRAT-MEDIUM.otf); font-display: fallback; } @font-face { font-family: MONTSERRAT-REGULAR; src: url(../font/MONTSERRAT-REGULAR.otf); font-display: fallback; } @font-face { font-family: Catamaran-Regular; src: url(../font/Catamaran-Regular.ttf); font-display: fallback; } .Solar.solarwhite .text .title html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button, img { padding: 0; margin: 0; font-weight: 400; } p { margin: 0px; padding: 0px; } body, button, input, select, textarea { font: 14px/1.5 HarmonyOS Sans SC, OPPOSans, PingFang SC, Source Han Sans, Microsoft YaHei; color: #333; } img { border: 0px; vertical-align: middle; } table { border-collapse: collapse; border-spacing: 0; } table th, table td { border: 1px solid #ccc; padding: 16px 0; } *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat; } a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: #333; outline: none; cursor: pointer; } a:hover { background-repeat: no-repeat; text-decoration: none; } a, input[type="button"], button, label, input[type="submit"], input[type="reset"] { cursor: pointer; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input, textarea, select { outline: none; } input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], select, textarea { outline-style: none; -webkit-appearance: none; resize: none; border: none; -webkit-border-radius: 0; border-radius: 0; } textarea { overflow: auto; vertical-align: top; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px rgba(255, 255, 255, 0) inset !important; -webkit-box-flex-color: #333; } * { outline: none; margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: unset; } .auto_1600 { margin: auto; width: 83.33333333333333vw; } .auto_1440 { margin: auto; width: 75vw; } .auto_1300 { margin: auto; width: 67.8vw; } .auto_1000 { margin: auto; width: 52.08333333333333vw; } @media(min-width:768px) {} @media(min-width:1200px) {} @media(min-width:1600px) {} @media(min-width:1921px) { .auto_1600 { width: 1600px; } .auto_1440 { width: 1440px; } .auto_1300 { width: 1300px; } .auto_1000 { width: 1000px; } } @media(max-width:992px) { .auto_1600, .auto_1440, .auto_1300, .auto_1000 { width: 95%; } } .columns { display: flex; } .move { display: none; } @media(max-width:768px) { .pc { display: none !important; } .move { display: block; } } .image { overflow: hidden; } .image img { transition: 1s; width: 100%; height: auto; } select, input, textarea { border-radius: 0; -webkit-border-radius: 0; color: #878787; font-family: Arial; } input:focus { outline: none; } input, button, select, textarea { outline: none; } input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset !important; } input:-internal-autofill-previewed, input:-internal-autofill-selected { -webkit-text-fill-color: #999 !important; -webkit-transition: background-color 99999999s ease-in-out 0s !important; -o-transition: background-color 99999999s ease-in-out 0s !important; transition: background-color 99999999s ease-in-out 0s !important } textarea { resize: none; } textarea, input, select { background: none; border: none; margin: 0; padding: 0; } img { display: block; max-width: 100%; height: auto; } li { list-style: none; } .banner_ .image img { animation: amplify 8s infinite; -webkit-animation: amplify 8s infinite; animation-timing-function: linear; } @-webkit-keyframes amplify { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes amplify { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .bgimage img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .bgimage video { width: 100%; } /* .bgimage video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } */ .SeeMore { margin: 0 auto; text-align: center; border-radius: 50px; color: #FFFFFF; font-size: var(--font-size15); display: flex; justify-content: center; align-items: center; transition: .3s; width: 135px; padding: 7px 0; border: 1px solid rgba(255, 255, 255, .8); } .SeeMore1:hover{ background: initial !important;} .SeeMore img { width: 12px; margin: 0 7px 0 0; } .SeeMore:hover { background: var(--vi-color); transition: .3s; } @media(max-width:768px) { .SeeMore { margin: 0 auto 80px; } } @media(min-width:768px) { .SeeMore { width: 10.9375vw; padding: .78125vw .520833vw .78125vw 0; border: .104167vw solid rgba(255, 255, 255, .8); font-weight: 500; font-family: MONTSERRAT-REGULAR; } .SeeMore img { margin: 0 .520833vw 0 0; width: 1.145833vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .SeeMore { width: 210px; padding: 15px 10px 15px 0; border: 2px solid rgba(255, 255, 255, .8); } .SeeMore img { margin: 0 10px 0 0; width: 22px; } } .amplify:hover .image img { transform: scale(1.05); } .slick-dots { text-align: center; } .slick-dots li { position: relative; display: inline-block; margin: 0px 5px; } .slick-dots li button { background: #0071bc3f; display: block; font-size: 0; padding: 4px; border: 0; border-radius: 50px; } li.slick-active button { background: #0071bc; } .tanchuang { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 30%); visibility: hidden; opacity: 0; transition: .5s; } .tanchuang.on { visibility: unset; opacity: 1; transition: .5s; } .tanchuang .view { width: 80%; margin: auto; text-align: right; } .tanchuang .view #video1 {} .tanchuang .shiping { display: flex; align-items: center; justify-items: center; } #video1 { width: 100%; display: block; } .icon-guanbi { font-size: var(--font-size20); color: #fff; cursor: pointer; } .title { font-size: var(--font-size38); font-weight: 600; color: #333333; } .tanchuang.iframe .shiping, .tanchuang.iframe .view { height: 100%; } .tanchuang.iframe .view iframe { width: 100%; height: 100%; } @media(min-width: 768px) { .tanchuang { padding: 7.813vw 0; } .tanchuang .shiping #video1 { max-height: 32.291667vw; background: #000; } } @media(max-width: 768px) { .tanchuang .view { width: 100%; } .icon-guanbi { font-size: 18px; } .tanchuang .shiping, .tanchuang.iframe .view { height: auto; } .tanchuang.iframe .view iframe { width: 100%; height: 300px; } } @media(min-width: 768px) { html { --font-size12: .78125vw; --font-size13: .833333vw; --font-size14: .885417vw; --font-size15: .9375vw; --font-size16: .989583vw; --font-size17: 1.041667vw; --font-size18: 1.041667vw; --font-size19: 1.145833vw; --font-size20: 1.197917vw; --font-size21: 1.25vw; --font-size22: 1.302083vw; --font-size23: 1.354167vw; --font-size24: 1.40625vw; --font-size25: 1.458333vw; --font-size26: 1.510417vw; --font-size27: 1.5625vw; --font-size28: 1.614583vw; --font-size29: 1.666667vw; --font-size30: 1.71875vw; --font-size32: 1.822917vw; --font-size34: 1.927083vw; --font-size35: 1.979167vw; --font-size36: 2.03125vw; --font-size38: 2.135417vw; --font-size40: 2.239583vw; --font-size42: 2.34375vw; --font-size45: 2.5vw; --font-size46: 2.552083vw; --font-size48: 1.09375vw; --font-size50: 2.760417vw; --font-size54: 2.96875vw; --font-size56: 3.072917vw; --font-size60: 3.28125vw; --font-size64: 3.489583vw; --font-size70: 3.802083vw; --font-size73: 3.802083vw; --font-size78: 4.21875vw; --font-size80: 4.322917vw; --font-size90: 4.84375vw; --font-size139: 7.395833vw; --font-size160: 8.489583vw; } } @media(min-width: 1200px) { html { --font-size12: 0.625vw; --font-size13: 0.677vw; --font-size14: 0.729vw; --font-size15: 0.781vw; --font-size16: 0.833vw; --font-size17: 0.885vw; --font-size18: 0.938vw; --font-size19: 0.99vw; --font-size20: 1.042vw; --font-size21: 1.094vw; --font-size22: 1.146vw; --font-size23: 1.198vw; --font-size24: 1.25vw; --font-size25: 1.302vw; --font-size26: 1.354vw; --font-size27: 1.406vw; --font-size28: 1.458vw; --font-size29: 1.51vw; --font-size30: 1.563vw; --font-size32: 1.667vw; --font-size34: 1.771vw; --font-size35: 1.823vw; --font-size36: 1.875vw; --font-size38: 1.979vw; --font-size40: 2.083vw; --font-size42: 2.188vw; --font-size45: 2.344vw; --font-size46: 2.396vw; --font-size48: 2.5vw; --font-size50: 2.604vw; --font-size54: 2.813vw; --font-size56: 2.917vw; --font-size60: 3.125vw; --font-size64: 3.333vw; --font-size70: 3.646vw; --font-size73: 3.802vw; --font-size78: 4.063vw; --font-size80: 4.166667vw; --font-size90: 4.688vw; --font-size139: 7.239583vw; --font-size160: 8.333333vw; } } @media(min-width: 1600px) { html { --font-size12: 12px; --font-size13: 13px; --font-size14: 14px; --font-size15: 15px; --font-size16: 16px; --font-size17: 17px; --font-size18: 18px; --font-size19: 19px; --font-size20: 20px; --font-size21: 21px; --font-size22: 22px; --font-size23: 23px; --font-size24: 24px; --font-size25: 25px; --font-size26: 26px; --font-size27: 27px; --font-size28: 28px; --font-size29: 29px; --font-size30: 30px; --font-size32: 32px; --font-size34: 34px; --font-size35: 35px; --font-size36: 36px; --font-size38: 38px; --font-size40: 40px; --font-size42: 42px; --font-size45: 45px; --font-size46: 46px; --font-size48: 48px; --font-size50: 50px; --font-size54: 54px; --font-size56: 56px; --font-size60: 60px; --font-size64: 64px; --font-size70: 70px; --font-size73: 73px; --font-size78: 78px; --font-size80: 80px; --font-size90: 90px; --font-size139: 139px; --font-size160: 160px; } } @media(max-width: 768px) { html { --font-size12: 12px; --font-size13: 12px; --font-size14: 12px; --font-size15: 12px; --font-size16: 13px; --font-size17: 14px; --font-size18: 14px; --font-size19: 15px; --font-size20: 15px; --font-size21: 16px; --font-size22: 16px; --font-size23: 18px; --font-size24: 18px; --font-size25: 18px; --font-size26: 18px; --font-size27: 18px; --font-size28: 18px; --font-size29: 18px; --font-size30: 18px; --font-size32: 18px; --font-size34: 18px; --font-size35: 18px; --font-size36: 18px; --font-size38: 18px; --font-size40: 18px; --font-size42: 18px; --font-size45: 20px; --font-size46: 20px; --font-size48: 20px; --font-size50: 20px; --font-size54: 20px; --font-size56: 20px; --font-size60: 22px; --font-size64: 22px; --font-size70: 22px; --font-size73: 22px; --font-size78: 22px; --font-size80: 22px; --font-size90: 22px; --font-size139: 25px; --font-size160: 30px; } } .Landing { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(37, 38, 39, 1); display: flex; align-items: center; justify-content: center; z-index: 10; text-align: center; } .Landing .svg { animation: fadeInUp 1s; -webkit-animation: fadeInUp 1s; position: relative; } .Landing .svg path { animation: opacity2 3s; -webkit-animation: opacity2 3s; animation-timing-function: linear; animation-fill-mode: forwards; opacity: 0; } .Landing .svg svg path:nth-child(2) { animation-delay: .5s; } .Landing .svg svg path:nth-child(3) { animation-delay: 0.7s; } .Landing .svg svg path:nth-child(4) { animation-delay: .9s; } .Landing .svg svg path:nth-child(5) { animation-delay: 1.1s; } .Landing .svg svg path:nth-child(6) { animation-delay: 1.3s; } .Landing .svg svg path:nth-child(7) { animation-delay: 1.5s; } .Landing .svg svg path:nth-child(8) { animation-delay: 1.7s; } .Landing .svg svg path:nth-child(9) { animation-delay: 1.9s; } .Landing .svg svg path:nth-child(10) { animation-delay: 2.1s; } @-webkit-keyframes opacity2 { 0% { opacity: 0; } to { opacity: 1; } } @keyframes opacity2 { 0% { opacity: 0; } to { opacity: 1; } } @media(max-width:768px) { .Landing { z-index: 100; } .Landing>div { padding: 0 0 20px; } .Landing .svg svg { width: 102px; min-width: 102px; position: absolute; top: -43px; right: -5px; } .Landing .svg img { max-width: unset; width: 189px; } } @media(min-width:768px) { .Landing>div { padding: 0 0 2.083vw; } .Landing .svg svg { width: 5.313vw; top: -2.24vw; right: -0.417vw; } .Landing .svg img { width: 9.844vw; margin: -0.781vw -5.156vw 0 0; max-width: unset; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Landing>div { padding: 0 0 40px; } .Landing .svg svg { width: 102px; position: absolute; top: -43px; right: -8px; } .Landing .svg img { width: 189px; margin: auto; } } @media(max-width:992px) {} .indexBanner { overflow: hidden; position: relative; z-index: 15; background: #2C2F33; transition: .5s; } .indexBanner>i { width: 100%; height: 11.625vw; position: absolute; background: linear-gradient(180deg, rgb(0 0 0 / 30%), transparent); z-index: 2; } .indexBanner.on { opacity: 1; visibility: unset; transition: .5s; } .indexBanner.on .banner .list:nth-child(1) .image img { animation: incline2 2s; -webkit-animation: incline2 2s; animation-timing-function: ease; position: relative; z-index: 0; } .indexBanner.on .banner .list:nth-child(1) .image img {} @-webkit-keyframes incline2 { 0% { transform: rotate(10deg) translate(-10%, 100%) scale(1.4); } 100% { transform: rotate(0deg) translate(0%, 0%) scale(1); } } @keyframes incline2 { 0% { transform: rotate(10deg) translate(-10%, 100%) scale(1.4); } 100% { transform: rotate(0deg) translate(0%, 0%) scale(1); } } .indexBanner .list { position: relative; } .indexBanner .list.swiper-slide-next .image { transform: translate(60%, 60%); transition: 1.5s ease; opacity: 0; visibility: hidden; } .indexBanner .list.swiper-slide-prev .image { transform: translate(-60%, -60%); transition: 1.5s ease; opacity: 0; visibility: hidden; } .indexBanner .list.swiper-slide-active .image { transform: translate(0%, 0%); transition: .8s ease; opacity: 1; visibility: unset; } .indexBanner .list .image img { /* max-height: 100vh; */ } .indexBanner .columns { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; display: none; z-index: 1; opacity: 0; } .indexBanner .columns.on { animation: fadeInUp 2s; -webkit-animation: fadeInUp 2s; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; display: none !important; } .indexBanner .swiper-slide-active.on .columns { display: flex; justify-content: center; align-items: center; } @media ((max-width: 992px)) { .indexBanner .swiper-slide-active.on .columns { display: block } .indexBanner .columns .text_content {} } .indexBanner .swiper-slide-active.on .columns a { display: flex; height: 100%; text-indent: 1em; align-items: center; margin: inherit; } .indexBanner .columns .title { font-size: var(--font-size48); color: #FFFFFF; line-height: 1; text-align: left; } .indexBanner .columns .text_content { display: flex; flex-direction: column; align-items: start; justify-content: center; width: 50%; max-width: 840px; margin-left: 4%; } /* .indexBanner .columns .title span { background: linear-gradient(to bottom, #ffffff, #ffffff, #ffffff69); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */ .indexBanner .columns .Htitle { font-size: var(--font-size24); color: #FFFFFF; line-height: 1; width: 70%; text-align: left; } /* .indexBanner .columns .Htitle span { background: linear-gradient(to bottom, #ffffff, #ffffff, #ffffff4f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */ .indexBanner .columns .Htitle span span { display: block; color: #009ee7; font-size: var(--font-size21); margin-top: 10px; } .indexBanner .columns .intro { display: flex; align-items: center; justify-content: center; font-size: var(--font-size20); color: #FFFFFF; } .indexBanner .columns .intro>div { display: flex; align-items: center; } .indexBanner .swiper-pagination-bullet { border-radius: 50px; opacity: 0.2; background: #FFFFFF; } .indexBanner .swiper-pagination-bullet-active { opacity: 1; } .indexBanner .SeeMore { background: var(--vi-color); } .indexBanner .SeeMore:hover { box-shadow: 0 0 13px 0 #ffffffb0; } @media ((max-width: 992px)) { .indexBanner .columns .text_content { display: block; width: auto; max-width: none; margin: auto; /* margin-top: 8%; */ /* max-width: 90%; */ width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .indexBanner .columns .Htitle { margin: 1.041667vw 0; margin: 20px auto; text-align: center; width: 100%; } .indexBanner .swiper-slide-active.on .columns a { margin-top: 0 } } @media(max-width:768px) { .indexBanner>i { display: none; } .indexBanner .columns .title { line-height: unset; font-size: var(--font-size40); line-height: 1; margin: 0 0 6px; font-size: 25px; } .indexBanner .columns .title span { /* background: linear-gradient(to bottom, #ffffff, #ffffffe8, #ffffff5d); */ /* -webkit-background-clip: text; */ /* -webkit-text-fill-color: transparent; */ } .indexBanner .columns .Htitle { margin: 3px 0 5px 0; font-size: var(--font-size22); margin-top: 20px; line-height: 1.2; } .indexBanner .columns .intro { margin: 0 0 15px; } .indexBanner .columns .intro>div { margin: 0 10px; } .indexBanner .columns .intro>div img { margin: 0 8px 0 0; width: 12px; } .indexBanner .swiper-pagination { bottom: 20px; } .indexBanner .swiper-pagination-bullet { width: 11px; height: 3px; } .indexBanner .swiper-pagination-bullet-active { width: 16px; } } @media(min-width:768px) { .indexBanner .columns .Htitle { margin: 1.041667vw 0; } .indexBanner .columns .intro { margin: 0 0 1.5625vw; } .indexBanner .columns .intro>div { margin: 0 1.041667vw; } .indexBanner .columns .intro>div img { margin: 0 .416667vw 0 0; width: 1.145833vw; } .indexBanner .swiper-pagination { bottom: 2.864583vw; } .indexBanner .swiper-pagination-bullet { width: 1.197917vw; height: .208333vw; } .indexBanner .swiper-pagination-bullet-active { width: 2.34375vw; height: .208333vw; margin: 0 .15625vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .indexBanner .columns .Htitle { margin: 30px 0; } .indexBanner .columns .intro { margin: 0 0 30px; } .indexBanner .columns .intro>div { margin: 0 20px; } .indexBanner .columns .intro>div img { margin: 0 8px 0 0; width: 22px; } .indexBanner .swiper-pagination { bottom: 55px; } .indexBanner .swiper-pagination-bullet { width: 23px; height: 4px; } .indexBanner .swiper-pagination-bullet-active { width: 45px; height: 4px; margin: 0 3px; } } .Safety { position: relative; overflow: hidden; } .indexHtitle { font-weight: 400; font-size: var(--font-size20); color: rgba(157, 157, 157, 1); display: flex; align-items: center; font-family: MONTSERRAT-REGULAR; } .indexHtitle span { display: block; overflow: hidden; line-height: 1; /* position: relative; */ overflow: hidden; } .indexHtitle span i { content: ''; position: absolute; top: 2px; left: -15px; width: 60px; height: 60px; z-index: 5; transition: 1s; transform: rotate(0deg); -webkit-animation-name: indexrotate; animation-name: indexrotate; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } .Safety .indexHtitle span i, .indexSolution .indexHtitle span i { background: linear-gradient(180deg, #121314 50%, transparent 50%); } .indexProduct .indexHtitle span i, .indexNews .indexHtitle span i { background: linear-gradient(180deg, #ffffff 50%, transparent 50%); } @-webkit-keyframes indexrotate { 0% { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes indexrotate { 0% { transform: rotate(0deg); } to { transform: rotate(180deg); } } .Safety .indexHtitle { color: rgb(255, 255, 255); } .indexHtitle span img { display: block; } .Safety .Htitle { justify-content: center; } .Safety .title { font-size: var(--font-size60); color: #FFFFFF; } .Safety .title span:nth-child(2) { color: var(--vi-color); } .Safety .intro { font-size: var(--font-size18); /* color: rgba(255, 255, 255, .4); */ color: #FFFFFF; line-height: 1.5; text-align: center; } .Safety .video { position: relative; width: 100%; cursor: pointer; clip-path: inset(5% 22% round 500px); transition: .5s; } .Safety .video video { width: 100%; } .Safety .video iframe { width: 100%; } .Safety .video .icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .Safety .video .icon>div { position: relative; display: flex; align-items: center; justify-content: center; } .Safety .video .icon>div .bgimage img { z-index: 0; } .Safety .video .icon .img {} .ios_video { display: none; } .foutind { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; } .SeeMore1 { background: var(--vi-color); } @media(max-width:768px) { .pc_video { display: none; } .ios_video { display: block; } /* .Safety { padding: 235px 0 235px; } */ .Safety .Htitle { padding: 0 0 15px; } .indexHtitle { font-size: 19px; } .indexHtitle span { padding: 0 5px 0 0; } .Safety .title { padding: 0 0 15px; line-height: unset; font-size: 24px; } .Safety .title span { text-align: center; } .Safety .intro { padding: 0 0 30px; } .Safety>.bgimage img { height: calc(100% - 35px); background: rgba(37, 38, 39, 1); } .Safety .video { clip-path: inset(0); } .Safety .video video { width: 100%; } .Safety .video iframe { height: 220px; } .Safety .video .icon>div { width: 50px; height: 50px; } .Safety .video .icon .img { width: 10px; margin: 0 0 4px 4px; } .indexHtitle span img { /* height: 11px; */ margin: 1px 0 0; } .Safety .intro br { display: none; } } @media(min-width:768px) { /* .Safety { padding: 6.25vw 0 6.25vw; } */ .Safety .Htitle { padding: 0 0 3.125vw; } .indexHtitle span { padding: 0 .520833vw 0 0; } .Safety .title { padding: 0 0 3.125vw; } .Safety .intro { padding: 0 0 5.208333vw; } .Safety>.bgimage img { height: calc(100% - 4.375vw); } /* .Safety>.bgimage video { height: calc(100% - 4.375vw); } */ .Safety .video iframe { height: 36.458333vw; } .Safety .video .icon>div { width: 6.510417vw; height: 6.510417vw; } .Safety .video .icon .img { width: 1.09375vw; } .indexHtitle span img { height: 2vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { /* .Safety { padding: 120px 0 120px; } */ .Safety .Htitle { padding: 0 0 50px; } .indexHtitle span { padding: 0 10px 0 0; } .Safety .title { padding: 0 0 50px; } .Safety .intro { padding: 0 0 100px; } .Safety>.bgimage img { height: calc(100% - 84px); } .Safety .video iframe { height: 700px; } .Safety .video .icon>div { width: 125px; height: 125px; } .Safety .video .icon .img { width: 21px; } .indexHtitle span img { height: 30px; } } .indexProduct { overflow: hidden; } .indexProduct .Htitle { color: #9D9D9D; display: flex; align-items: center; } .indexProduct .title { font-size: var(--font-size38); color: #3B3B3B; } .indexProduct .title span { margin: 0; } .indexProduct .title span:nth-child(3) { color: var(--vi-color); } .indexProduct .columns { align-items: end; justify-content: space-between; } .indexProduct .columns .button { border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .indexProduct .columns .button span { width: 2px; height: 50px; background: #9AA5B1; opacity: 0.1; transform: rotate(30deg); } .indexProduct .columns .button a i { font-size: var(--font-size18); color: #C5E227; font-weight: 600; } .indexProduct .columns .button a.button-prev {} .indexProduct .columns .button a.button-next { transform: rotate(180deg); } .indexProduct .columns .button a.button-next i { color: var(--vi-color); } .indexProduct ul { border-left: 1px solid rgba(229, 229, 229, 1); } .indexProduct ul::before { content: ''; height: 100%; width: 1px; background: rgba(229, 229, 229, 1); position: absolute; right: 0; top: 0; } .indexProduct ul li { position: relative; border-top: 1px solid rgba(229, 229, 229, 1); border-bottom: 1px solid rgba(229, 229, 229, 1); border-right: 1px solid rgba(229, 229, 229, 1); } .authentication ul { border: none; } #authentication ul li { border: none; text-align: center; position: relative; padding-bottom: 4%; width: 250px; background-color: #f3f3f0; margin: 0 10px; } #pmd2 ul li { padding-bottom: 15%; } #authentication ul li img { position: absolute; left: 50%; top: 50%; width: 80%; height: 80%; object-fit: cover; transition: all .3s; transform: translate(-50%, -50%); } #authentication ul li img:hover { transform: translate(-50%, -50%) scale(1.1); } #authentication ul::before { display: none; } .indexProduct ul li .text { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; z-index: 2; } .indexProduct ul li .text .title { font-weight: 500; font-size: var(--font-size20); color: #3B3B3B; font-family: MONTSERRAT-REGULAR; } .indexProduct ul li .text .intro { font-size: var(--font-size18); color: #3B3B3B; line-height: 1.2; opacity: 0.4; } .indexProduct ul li:hover .text .intro { font-family: MONTSERRAT-REGULAR; } .indexProduct ul li .text .icon { border-radius: 50%; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; background: #FFFFFF; transition: .3s; flex-shrink: 0; } .indexProduct ul li .text .icon img {} .indexProduct ul li .bgimage { visibility: hidden; opacity: 0; transition: .3s; } .indexProduct ul li:hover .icon { visibility: unset; opacity: 1; transition: .3s; } .indexProduct ul li:hover .bgimage { visibility: unset; opacity: 1; transition: .3s; } .indexProduct ul li:hover .title { color: #FFFFFF; } .indexProduct ul li:hover .intro { color: #FFFFFF; opacity: 0.4; } .indexProduct ul li .icon:hover { background: var(--vi-color); } .indexProduct ul li .icon:hover img { filter: grayscale(100%) brightness(500%) } .indexProduct ul li .image { position: relative; z-index: 1; } #Honor ul li .image { padding-bottom: 145%; } #Honor ul li .image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; padding: 0; } .indexProduct .swiper-pagination { position: unset; display: flex; justify-content: center; margin: 20px 0 0; display: none; } .indexProduct .swiper-pagination-bullet { width: 11px; height: 3px; margin: 0 3px; border-radius: 50px; border-radius: 50px; opacity: 0.2; background: var(--vi-color); } .indexProduct .swiper-pagination-bullet-active { width: 16px; opacity: 1; } .invest_list { margin-top: 3vw; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .invest_list .invest_item { width: 48%; } .invest_list .invest_item a { position: relative; overflow: hidden; display: block; padding-bottom: 8%; padding-bottom: 11%; width: 55%; bottom: -30px; } .invest_list .invest_item a img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } .invest_list .invest_item .invest_text { margin-top: 20px; box-shadow: 0 0 10px 2px rgb(0 0 0 / 20%); border-radius: 15px; padding: 10px; } @media(max-width:768px) { .invest_list { flex-direction: column; } .invest_list .invest_item { width: 100%; margin-bottom: 30px; } } @media(max-width:768px) { .indexProduct { padding: 35px 0; } .indexProduct .title { padding: 10px 0 0; line-height: 1.2; font-size: 24px; } .authentication .title { padding: 10px 0 0; line-height: 1.2; font-size: 24px; } .indexProduct .columns .button { display: none; } .indexProduct ul { margin: 40px -5% 0 0; padding: 0 100px 0 0; } .indexProduct ul li { height: auto; } .indexProduct ul li .text { padding: 20px; } .indexProduct ul li .text .title { padding: 0 0 6px; font-size: 18px; font-weight: bold; } .indexProduct ul li .text .intro { font-size: 16px; } .indexProduct ul li .text .icon { width: 30px; height: 30px; } .indexProduct ul li .text .icon img { width: 12px; } .indexProduct ul li .image img { padding: 100px 20px 20px; } .indexProduct .swiper-pagination { display: flex; } #Honor { padding-bottom: 0; } } @media(min-width:768px) { .indexProduct ul li .image { padding: 6.770833vw 1.5625vw 1.5625vw; } #Honor ul li .image { padding: 0; padding-bottom: 145%; } .indexProduct ul li .image img { height: 24.583333vw; object-fit: contain; } .indexProduct { padding: 6.25vw 0 5.208333vw; } .indexProduct .title { padding: 1.5625vw 0 0; } .indexProduct .columns .button { width: 6.510417vw; height: 6.510417vw; margin: 0 0 2.083333vw; } .indexProduct .columns .button a.button-prev { margin: -1.041667vw .520833vw 0; } .indexProduct .columns .button a.button-next { margin: 1.041667vw .520833vw 0; } .indexProduct ul { /* margin: 6.510417vw 0 0; */ margin: 1.510417vw 0 0; } .indexProduct ul li .text { padding: 2.083333vw; } .indexProduct ul li .text .title { padding: 0 0 .625vw; } .indexProduct ul li .text .icon { width: 3.333333vw; height: 3.333333vw; } .indexProduct ul li .text .icon img { width: .9375vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .indexProduct ul li .image { padding: 130px 30px 30px; } #Honor ul li .image { padding-top: 0px; } .indexProduct ul li .image img { height: 472px; } .authentication { padding: 50px 0 100px !important; } .indexProduct { padding: 120px 0 100px; } .hweing { padding: 120px 0 10px !important; } .indexProduct .title { padding: 30px 0 0; } .indexProduct .columns .button { width: 125px; height: 125px; margin: 0 0 40px; } .indexProduct .columns .button a.button-prev { margin: -20px 10px 0; } .indexProduct .columns .button a.button-next { margin: 20px 10px 0; } .indexProduct ul { /* margin: 125px 0 0; */ margin: 25px 0 0; } .indexProduct ul li .text { padding: 40px; } .indexProduct ul li .text .title { padding: 0 0 12px; } .indexProduct ul li .text .icon { width: 64px; height: 64px; } .indexProduct ul li .text .icon img { width: 18px; } } .indexSolution { position: relative; overflow: hidden; } .indexSolution .Htitle {} .indexSolution .title { font-size: var(--font-size60); color: #FFFFFF; } .indexSolution .title span { margin: 0; color: #fff; } .indexSolution .title span:nth-child(2) { color: #009ee7; } .indexSolution .swiper {} .indexSolution .swiper .swiper-slide { text-align: center; cursor: pointer; } .indexSolution .swiper .swiper-slide .icon { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .indexSolution .swiper .swiper-slide .icon img { max-height: 100%; height: 100%; } .indexSolution .swiper .swiper-slide .icon img:nth-child(2) { opacity: 0; visibility: hidden; position: absolute; } .indexSolution .swiper .swiper-slide.on .icon img:nth-child(1), .indexSolution .swiper .swiper-slide:hover .icon img:nth-child(1) { opacity: 0; visibility: hidden; } .indexSolution .swiper .swiper-slide.on .icon img:nth-child(2), .indexSolution .swiper .swiper-slide:hover .icon img:nth-child(2) { opacity: 1; visibility: unset; } .indexSolution .swiper .swiper-slide .img img {} .indexSolution .swiper .swiper-slide .img { display: none; animation: float1 2.5s infinite; -webkit-animation: float1 2.5s infinite; } .indexSolution .swiper .swiper-slide.on .img { display: block; } @-webkit-keyframes float1 { 0% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes float1 { 0% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } .indexSolution .swiper .swiper-slide i { background: #FFFFFF; border-radius: 50%; display: block; margin: auto; } .indexSolution .swiper .swiper-slide .Stitle { font-weight: 300; font-size: var(--font-size18); color: #009ee7; opacity: 0.5; line-height: 1.2; transition: .3s; } .indexSolution .swiper .swiper-slide.on .Stitle, .indexSolution .swiper .swiper-slide:hover .Stitle { opacity: 1; transition: .3s; color: #009ee7; } .SolutionTop { position: relative; } .SolutionTop::before { width: 100%; height: 1px; background: rgba(255, 255, 255, .2); position: absolute; left: 0; content: ''; } .indexSolution ul { overflow: unset; } .indexSolution ul li { width: 100%; } .indexSolution ul li a { display: flex; align-items: center; } .indexSolution ul .image {} .indexSolution ul .text {} .indexSolution ul .text .title { font-weight: 500; font-size: var(--font-size36); color: #FFFFFF; line-height: 1.1; font-family: MONTSERRAT-REGULAR; } .indexSolution ul .text .intro { font-weight: 300; font-size: var(--font-size18); color: #FFFFFF; line-height: 1.4; opacity: 0.6; } .indexSolution ul .text .SeeMore { background: #009ee7; border-color: transparent; } .indexSolution ul .text .SeeMore:hover { background: transparent; border-color: #009ee7; } @media(max-width:768px) { .indexSolution { padding: 35px 0 40px; } .indexSolution .Htitle { padding: 0 0 15px; line-height: 1; } .indexSolution .title { padding: 0 0 30px; line-height: 1.2; font-size: 24px; } .indexSolution dl { padding: 0 70px 20px 0; } .indexSolution .swiper .swiper-slide .Stitle { padding: 8px 0 0; min-height: 46px; line-height: unset; font-size: 16px; } .indexSolution .swiper .swiper-slide .icon { height: 25px; margin: 20px 0 0; } .indexSolution .swiper .swiper-slide .img img { width: 10px; margin: 0px 0 0; } .indexSolution .swiper .swiper-slide i { width: 7px; height: 7px; } .SolutionTop::before { top: 3px; } .indexSolution ul { padding: 0 0; /* margin: 0 5%; */ /* overflow: hidden; */ } .indexSolution ul .image { width: 100%; min-width: 100%; } .indexSolution ul .text { padding: 0; max-width: 100%; } .indexSolution ul .text .intro { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; } .indexSolution ul .text .title { line-height: unset; padding: 18px 0 18px; font-size: 18px; font-weight: bold; } .indexSolution ul .text .SeeMore { margin: 20px 0 0; } .indexSolution ul li a { display: block; } @-webkit-keyframes float1 { 0% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } } @keyframes float1 { 0% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } } } .indexSolution .swiper .swiper-slide.on .Stitle { color: #fff; } @media(min-width:768px) { .indexSolution { padding: 4.6875vw 0 5.208333vw; } .indexSolution .Htitle { padding: 0 0 1.5625vw; } .indexSolution .title { padding: 0 0 3.385417vw; } .indexSolution dl { padding: 0 0 3.645833vw; } .indexSolution .swiper .swiper-slide .Stitle { padding: .885417vw 0 0; min-height: 3.177083vw; line-height: unset; } .indexSolution .swiper .swiper-slide .icon { height: 2.5vw; margin: 1.979167vw 0 0; } .indexSolution .swiper .swiper-slide .img img { width: .833333vw; margin: .520833vw 0 0; } .indexSolution .swiper .swiper-slide i { width: .364583vw; height: .364583vw; } .SolutionTop::before { top: .15625vw; } .indexSolution ul { padding: 0 16.666667vw; } .indexSolution ul .image { width: 25.364583vw; min-width: 25.364583vw; } .indexSolution ul .text { padding: 0vw 2.604167vw 2.604167vw 4.6875vw; max-width: 100%; flex: 1; } .indexSolution ul .text .title { padding: 0 0 1.822917vw; } .indexSolution ul .text .SeeMore { margin: 2.34375vw 0 0; } @-webkit-keyframes float1 { 0% { -webkit-transform: translate3d(0, .520833vw, 0); transform: translate3d(0, .520833vw, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, .520833vw, 0); transform: translate3d(0, .520833vw, 0); } } @keyframes float1 { 0% { -webkit-transform: translate3d(0, .520833vw, 0); transform: translate3d(0, .520833vw, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, .520833vw, 0); transform: translate3d(0, .520833vw, 0); } } .indexSolution ul li .amplify { transition: 2s; z-index: 1; position: relative; } .indexSolution ul li.swiper-slide-prev .amplify { transform: translateX(144%); transition: 2s; } .indexSolution ul li.swiper-slide-prev .text { transform: translateX(-82%); transition: 2s; } } @media(min-width:1200px) { .indexSolution ul .text { max-width: 37.5vw; } } @media(min-width:1600px) { .indexSolution { padding: 90px 0 100px; } .indexSolution .Htitle { padding: 0 0 30px; } .indexSolution .title { padding: 0 0 65px; } .indexSolution dl { padding: 0 0 70px; } .indexSolution .swiper .swiper-slide .Stitle { padding: 17px 0 0; min-height: 61px; } .indexSolution .swiper .swiper-slide .icon { height: 48px; margin: 38px 0 0; } .indexSolution .swiper .swiper-slide .img img { width: 16px; margin: 10px 0 0; } .indexSolution .swiper .swiper-slide i { width: 7px; height: 7px; } .SolutionTop::before { top: 3px; } .indexSolution ul { padding: 0 320px; width: 1920px; margin: auto; } .indexSolution ul .image { width: 487px; min-width: 487px; } .indexSolution ul .text { padding: 0px 50px 50px 90px; max-width: 720px; } .indexSolution ul .text .title { padding: 0 0 35px; } .indexSolution ul .text .SeeMore { margin: 45px 0 0; } @-webkit-keyframes float1 { 0% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } @keyframes float1 { 0% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } } } .indexNews { position: relative; } .indexNews .Htitle { color: #9D9D9D; line-height: 1; } .indexNews .title { font-size: var(--font-size60); color: #3B3B3B; } .indexNews .title span { margin: 0; } .indexNews .title span:nth-child(2) { color: #009ee7; } .indexNews .left {} .indexNews .left a { position: relative; display: block; height: 100%; } .indexNews .left a .image { /* height: 100%; */ position: relative; padding-bottom: 73%; } .indexNews .left a .image img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; } .indexNews .left .text { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(0deg, #000000a6, transparent); } .indexNews .left .Stitle { font-weight: 500; font-size: var(--font-size14); color: #FFFFFF; font-family: MONTSERRAT-REGULAR; } .indexNews .left .intro { font-weight: 500; font-size: var(--font-size22); color: #FFFFFF; line-height: 1.25; font-family: MONTSERRAT-REGULAR; } .indexNews .right { flex: 1; } .indexNews .right a { display: flex; align-items: center; position: relative; } .indexNews .right a:not(:last-child):after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(204, 204, 204, 1); } .indexNews .right a:not(:last-child)::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: var(--vi-color); transition: 1s; z-index: 1; } .indexNews .right a:hover:before { width: 100%; transition: 1s; } .indexNews .right a:first-child { padding-top: 0; } .indexNews .right a:last-child { padding-bottom: 0; } .indexNews .right a .image { position: relative; padding-bottom: 17%; } .indexNews .right a .image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } .indexNews .right a .text { flex: 1; } .indexNews .right a .text .Stitle { font-weight: 500; font-size: var(--font-size14); color: var(--vi-color); font-family: MONTSERRAT-REGULAR; } .indexNews .right a .text .intro { font-weight: 500; font-size: var(--font-size22); color: #333333; line-height: 1.25; font-family: MONTSERRAT-REGULAR; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .indexNews .right a .text .date { font-weight: 500; font-size: var(--font-size15); color: #A9A9A9; font-family: MONTSERRAT-REGULAR; } @media(max-width:768px) { .indexNews { padding: 35px 0; overflow: hidden; } .indexNews .columns { display: block; } .indexNews .left { width: 100%; min-width: 100%; margin: 0 50px 0 0; } .indexNews .title { padding: 15px 0 30px; font-weight: bold; font-size: 24px; } .indexNews .left .intro br { display: none; } .indexNews .left .text { padding: 20px 15px; background: linear-gradient(0deg, #00000085, transparent); } .indexNews .left .Stitle { padding: 0 0 5px; } .indexNews .right a { padding: 20px 0 !important; } .indexNews .right a:last-child { padding-bottom: 0 !important; } .indexNews .right a .image { min-width: 150px; width: 150px; margin: 0 0 0 15px; } .indexNews .right a .text { padding: 0 0 0 0; } .indexNews .right a .text .intro { margin: 7px 0 10px; } } @media(min-width:768px) { .indexNews { padding: 5.208333vw 0 6.25vw; } .indexNews .left { width: 41.145833vw; min-width: 41.145833vw; margin: 0 2.604167vw 0 0; } .indexNews .title { padding: 1.822917vw 0 3.385417vw; } .indexNews .left .text { position: absolute; padding: 2.604167vw 2.083333vw; } .indexNews .left .Stitle { padding: 0 0 .520833vw; } .indexNews .right a { padding: 2.395833vw 0; } .indexNews .right a .image { min-width: 11.5625vw; width: 11.5625vw; } .indexNews .right a .text { padding: 0 2.604167vw 0 0; } .indexNews .right a .text .intro { margin: .520833vw 0 1.041667vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .indexNews { padding: 100px 0 120px; } .indexNews .left { width: 790px; min-width: 790px; margin: 0 50px 0 0; } .indexNews .title { padding: 30px 0 60px; } .indexNews .left .text { position: absolute; padding: 50px 40px; } .indexNews .left .Stitle { padding: 0 0 10px; } .indexNews .right a { padding: 46px 0; } .indexNews .right a .image { min-width: 222px; width: 222px; } .indexNews .right a .text { padding: 0 50px 0 0; } .indexNews .right a .text .intro { margin: 10px 0 20px; } } .indexModule { overflow: hidden; } .indexModule ul { display: grid; } .indexModule ul li a { display: block; height: 100%; position: relative; } .indexModule ul li a .image { height: 100%; } .indexModule ul li a .image img { height: 100%; object-fit: cover; } .indexModule ul li a .text { position: absolute; display: flex; flex-direction: column; top: 0; left: 0; height: 100%; width: 100%; } .indexModule ul li:nth-child(1) a .text { background: linear-gradient(0deg, #00000070, transparent 40%); } .indexModule ul li a .Htitle { flex: 1; color: #FFFFFF; font-weight: 500; font-family: MONTSERRAT-REGULAR; } .indexModule ul li a .Stitle { font-weight: 500; font-size: var(--font-size28); color: #FFFFFF; font-family: MONTSERRAT-REGULAR; } .indexModule ul li a .intro { font-weight: 300; font-size: var(--font-size18); color: #FFFFFF; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .indexModule ul li:nth-child(1) { grid-row-start: 1; grid-row-end: 3; } .indexModule ul li:nth-child(2) .SeeMore, .indexModule ul li:nth-child(3) .SeeMore { display: none; } .indexModule ul li:nth-child(2) .text, .indexModule ul li:nth-child(3) .text {} .indexModule ul li .Htitle { font-weight: 500; font-size: var(--font-size18); } .indexModule ul li:nth-child(2) .Htitle { color: #333333; } .indexModule ul li:nth-child(2) .Stitle { color: #333333; } .indexModule ul li:nth-child(2) .intro { color: #333333; } .indexModule ul li:nth-child(4) { grid-column-start: 4; grid-column-end: 2; } .indexModule ul li:nth-child(4) .image { position: relative; } .indexModule ul li:nth-child(4) .image::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); content: ' '; display: block; } .indexModule ul li:nth-child(4) .text {} .indexModule ul li .SeeMore { border: unset; background: rgba(40, 35, 36, .8); } .indexModule ul li a:hover .SeeMore { background: var(--vi-color); } .indexModule ul li:nth-child(2) a:hover .Stitle, .indexModule ul li:nth-child(3) a:hover .Stitle { color: var(--vi-color); transition: .2s; } @media(max-width:768px) { .indexModule { padding: 35px 0; } .indexModule ul { display: flex; flex-wrap: wrap; justify-content: space-between; } .indexModule ul li a .Stitle { padding: 0 0 7px; } .indexModule ul li:nth-child(2), .indexModule ul li:nth-child(3) { width: calc(50% - 5px); } .indexModule ul li:nth-child(2) .Stitle, .indexModule ul li:nth-child(3) .Stitle { padding: 0 0 10px; font-size: 16px; font-weight: bold; } .indexModule ul li { height: auto; margin: 0 0 10px; } .indexModule ul li:nth-child(1) a .text { padding: 20px 15px; } .indexModule ul li:nth-child(1) { height: auto; min-height: 100%; } .indexModule ul li .SeeMore { margin: 15px 0 0; } .indexModule ul li a .Htitle { font-size: 12px; } .indexModule ul li:nth-child(2) .text, .indexModule ul li:nth-child(3) .text { padding: 20px 15px; } .indexModule ul li:nth-child(4) .text { padding: 20px 15px; } .indexModule ul li:nth-child(1) a .text { background: linear-gradient(0deg, #0000008c, transparent 50%); } .indexModule ul li a .intro { line-height: unset; } } @media(min-width:768px) { .indexModule { padding: 6.25vw 0 5.729167vw; } .indexModule ul { grid-template-columns: 49% 24% 24%; grid-gap: 1.241667vw; } .indexModule ul li a .Stitle { padding: 0 0 .78125vw; } .indexModule ul li:nth-child(2) .Stitle, .indexModule ul li:nth-child(3) .Stitle { padding: 0 0 .9375vw; } .indexModule ul li { height: 20.052083vw; } .indexModule ul li:nth-child(1) a .text { padding: 1.770833vw 1.5625vw; } .indexModule ul li:nth-child(1) { height: 41.145833vw; } .indexModule ul li .SeeMore { margin: 1.5625vw 0 0; } .indexModule ul li:nth-child(2) .text, .indexModule ul li:nth-child(3) .text { padding: 2.083333vw 2.083333vw 2.864583vw; } .indexModule ul li:nth-child(4) .text { padding: 1.770833vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .indexModule { padding: 120px 0 110px; } .indexModule ul { grid-template-columns: 49% 24% 24%; grid-gap: 20px; } .indexModule ul li a .Stitle { padding: 0 0 15px; } .indexModule ul li:nth-child(2) .Stitle, .indexModule ul li:nth-child(3) .Stitle { padding: 0 0 18px; } .indexModule ul li { height: 385px; } .indexModule ul li:nth-child(1) a .text { padding: 34px 30px; } .indexModule ul li:nth-child(1) { height: 790px; } .indexModule ul li .SeeMore { margin: 30px 0 0; } .indexModule ul li:nth-child(2) .text, .indexModule ul li:nth-child(3) .text { padding: 40px 40px 55px; } .indexModule ul li:nth-child(4) .text { padding: 34px; } } .Mainbottom { position: relative; } .Mainbottom .columns .input { position: relative; border-radius: 50px; overflow: hidden; } .Mainbottom .columns input { font-weight: 300; font-size: var(--font-size15); color: rgba(67, 67, 67, 1); background: #FFFFFF; } .Mainbottom .columns .input .submit { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--vi-color); cursor: pointer; } .Mainbottom .columns .input .submit img {} .Mainbottom .columns input::-webkit-input-placeholder { color: rgba(67, 67, 67, .4); } .Mainbottom .columns input::-webkit-input-placeholder { color: rgba(67, 67, 67, .4); } .Mainbottom .columns input:-moz-placeholder { color: rgba(67, 67, 67, .4); } .Mainbottom .columns input::-moz-placeholder { color: rgba(67, 67, 67, .4); } .Mainbottom .columns input:-ms-input-placeholder { color: rgba(67, 67, 67, .4); } .Mainbottom .columns .left {} .Mainbottom .columns .left dl { display: flex; align-items: center; } .Mainbottom .columns .left dl dd a { border-radius: 50px; } .Mainbottom .columns .left dl dd a:hover { background: var(--vi-color); } .Mainbottom .columns .left dl img { width: 100%; } .Mainbottom .columns .left .intro { font-weight: 500; font-size: var(--font-size18); color: #FFFFFF; font-family: MONTSERRAT-REGULAR; } .Mainbottom .columns .right { flex: 1; } .Mainbottom .columns .right ul { display: flex; justify-content: space-between; } .Mainbottom .columns .right ul li:not(:last-child) {} .Mainbottom .columns .right ul li a { font-weight: 400; font-size: var(--font-size16); color: #7B7F85; display: block; transition: .3s; } .Mainbottom .columns .right ul li a:nth-child(1) { font-size: var(--font-size20); color: #FFFFFF; line-height: 1; font-family: MONTSERRAT-REGULAR; text-transform: capitalize; } .Mainbottom .columns .right ul li a:hover { color: #FFFFFF; transition: .3s; } .Mainbottom .Copyright { text-align: center; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; } .Mainbottom .Copyright span, .Mainbottom .Copyright a { font-weight: 400; font-size: var(--font-size16); color: #FFFFFF; opacity: 0.7; } .Mainbottom .Copyright a:hover { opacity: 1; } @media(max-width:768px) { .Mainbottom { padding: 30px 0; } .Mainbottom .columns .right { display: none; } .Mainbottom .columns .left { width: 100%; text-align: center; } .Mainbottom .columns .left .logo img { height: 38px; } .Mainbottom .columns .left .intro { padding: 12px 0 16px; } .Mainbottom .columns input { padding: 0 20px; height: 37px; } .Mainbottom .columns .input .submit { width: 55px; } .Mainbottom .columns .input .submit img { width: 15px; } .Mainbottom .columns .left dl { margin: 18px 0 10px; justify-content: center; } .Mainbottom .columns .left dl dd a { width: 32px; display: block; border: 1px solid rgba(255, 255, 255, .3); margin: 0 5px 0; } .Mainbottom .columns .left dl dd a:hover { border: 1px solid rgba(255, 255, 255, 0); } .Mainbottom .Copyright { border-top: 0; display: block; } .Mainbottom .Copyright span, .Mainbottom .Copyright a { font-size: 12px; } } @media(min-width:768px) { .Mainbottom .columns { padding: 3.75vw 0 5.208333vw; } .Mainbottom .columns input { width: 18.90625vw; height: 2.239583vw; padding: 0 1.197917vw; } .Mainbottom .columns .input .submit { width: 3.541667vw; } .Mainbottom .columns .input .submit img { width: .989583vw; margin: 0 .260417vw 0 0; } .Mainbottom .columns .left .logo img { height: 2.760417vw; } .Mainbottom .columns .left { width: 18.90625vw; min-width: 18.90625vw; } .Mainbottom .columns .left dl { margin: 1.302083vw 0 0; } .Mainbottom .columns .left dl dd a { width: 2.552083vw; display: block; border: .104167vw solid rgba(255, 255, 255, .3); margin: 0 .520833vw 0 0; } .Mainbottom .columns .left dl dd a:hover { border: .104167vw solid rgba(255, 255, 255, 0); } .Mainbottom .columns .left .intro { padding: 1.041667vw 0; } .Mainbottom .columns .right { margin: 0 0 0 9.21875vw; } .Mainbottom .columns .right ul li:not(:last-child) { margin: 0 2.604167vw 0 0; } .Mainbottom .columns .right ul li a:not(:last-child) { margin: 0 0 .78125vw; } .Mainbottom .columns .right ul li a:nth-child(1) { margin: 1.302083vw 0 1.458333vw; } .Mainbottom .Copyright { padding: 2.34375vw 0 2.083333vw; } .Mainbottom .Copyright span { margin: 0 .260417vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Mainbottom .columns { padding: 72px 0 100px; } .Mainbottom .columns input { width: 363px; height: 43px; padding: 0 23px; } .Mainbottom .columns .input .submit { width: 68px; } .Mainbottom .columns .input .submit img { width: 19px; margin: 0 5px 0 0; } .Mainbottom .columns .left { width: 363px; min-width: 363px; } .Mainbottom .columns .left .logo img { height: 53px; } .Mainbottom .columns .left dl { margin: 25px 0 0; } .Mainbottom .columns .left .link { background-color: var(--vi-color); display: flex; justify-content: center; align-items: center; border-radius: 50px; color: #fff; padding: 10px 20px; width: fit-content; margin-top: 20px; border: 2px solid var(--vi-color); transition: all 0.3s; } .Mainbottom .columns .left .link:hover { background-color: transparent; } .Mainbottom .columns .left dl dd a { width: 49px; display: block; border: 2px solid rgba(255, 255, 255, .3); margin: 0 10px 0 0; } .Mainbottom .columns .left dl dd a:hover { border: 2px solid rgba(255, 255, 255, 0); } .Mainbottom .columns .left .intro { padding: 20px 0; } .Mainbottom .columns .right { margin: 0 0 0 177px; } .Mainbottom .columns .right ul li:not(:last-child) { margin: 0 50px 0 0; } .Mainbottom .columns .right ul li a:not(:last-child) { margin: 0 0 15px; } .Mainbottom .columns .right ul li a:nth-child(1) { margin: 25px 0 28px; } .Mainbottom .Copyright { padding: 45px 0 40px; } .Mainbottom .Copyright span, .Mainbottom .Copyright a { margin: 0 5px; } } .bannerInner { position: relative; z-index: 7; } .bannerInner .images video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .bannerInner .images img { animation: amplify 8s infinite; -webkit-animation: amplify 8s infinite; animation-timing-function: linear; } .bannerInner .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .bannerInner .text .title { font-size: var(--font-size64); color: #FFFFFF; } .bannerInner .text .intro { font-size: var(--font-size18); color: #FFFFFF; } .bannerInner .mouse { position: absolute; width: 100%; text-align: center; } .bannerInner .mouse .icon img { margin: auto; } .bannerInner .mouse .icon:nth-child(2) { animation: float 6s infinite; -webkit-animation: float 6s infinite; } .microinverter .bannerInner .text .title { font-size: 56px; } .microinverter .bannerInner .text .intro { font-size: 40px; margin-top: 1em; padding-top: 0; } .banner_title { font-family: Catamaran-Regular; font-weight: bold; } .module1 { margin-top: 87px; } .module1 .title { font-weight: bold; font-size: 45px; color: #333333; line-height: 1.5; text-align: center; margin-bottom: 36px; padding-bottom: 25px; position: relative; } .module1 .title::before { position: absolute; left: 50%; content: ' '; width: 100px; height: 3px; background-color: #009ee7; bottom: 0; transform: translateX(-50%); } .module1 .text_content { font-weight: 400; font-size: 18px; color: #333333; line-height: 1.7; text-align: center; } .module1 .text_content p:nth-child(2) { margin-top: 30px; } .module1 .link { text-align: center; width: 150px; height: 40px; background: #F77F30; border-radius: 20px; font-weight: 400; font-size: 14px; color: #FFFFFF; line-height: 40px; display: block; margin: 40px auto 0; } .module2 { margin-top: 100px; margin-bottom: 113px; } .module2 li { display: flex; justify-content: space-between; margin-bottom: 50px; align-items: center; } .module2 li:nth-child(2n) { flex-direction: row-reverse; } .module2 li:nth-child(2n) .info { padding-left: 1%; } .module2 .info { width: 47%; position: relative; padding-left: 15px; } .module2 li .info::before { position: absolute; left: 0; content: ' '; width: 5px; height: 45px; background-color: #009ee7; bottom: 8px; } .module2 li:nth-child(2n) .info { padding-left: 0; padding-right: 15px; } .module2 li:nth-child(2n) .info::before { left: auto; right: 0; } .module2 .info .title { font-weight: bold; font-size: 34px; color: #009ee7; font-family: Catamaran-Regular; } .module2 .info .content { white-space: pre-line; margin-top: 22px; font-weight: 400; font-size: 16px; color: #333333; line-height: 30px; } .module2 .info .content p { display: inline-block; text-align: justify; } .module2 .info .link { background: #F77F30; border-radius: 20px; font-weight: 400; font-size: 14px; color: #FFFFFF; padding: 10px 30px; display: inline-block; margin-top: 15px; } .module2 .video_warp { position: relative; padding-bottom: 26%; width: 47%; border-radius: 20px; overflow: hidden; } .module2 .video_warp video, .module2 .video_warp img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .introduce_warp { background-color: #F2F6FB; } .introduce_warp .title { font-weight: bold; font-size: 45px; } .introduce_warp .title { text-align: center; width: 70%; margin: 0 auto 28px; position: relative; line-height: 1.5; padding-bottom: 25px; padding-top: 5%; } .introduce_warp .title::before { position: absolute; left: 50%; content: ' '; width: 100px; height: 3px; background-color: #009ee7; bottom: 0; transform: translateX(-50%); } .introduce_warp .text_warp { white-space: pre-line; text-align: center; margin: 0 auto; font-weight: 400; font-size: 18px; color: #333333; line-height: 30px; margin-bottom: 60px; } .introduce ul { display: flex; justify-content: space-evenly; } .introduce ul li { display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 32%; } .introduce ul li img { max-width: 100%; height: auto; } .introduce ul li p { margin-top: 28px; font-weight: 400; font-size: 22px; color: #333333; text-align: center; } .introduce .link { background: #F77F30; border-radius: 20px; font-weight: 400; font-size: 14px; color: #FFFFFF; padding: 10px 30px; display: block; width: 152px; margin: 58px auto 70px; } .introduce.video_warp { position: relative; padding-bottom: 40%; width: 72vw; border-radius: 20px; overflow: hidden; } .introduce.video_warp video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .recommend_warp { background-color: #009ee7; padding: 0px 0 80px; margin-top: 150px; } .about_icon_warp { background-color: #1a5287; padding: 0px 0 80px; margin-top: 150px; } .recommend_warp .title { font-weight: bold; font-size: 45px; color: #FFFFFF; } .recommend_warp ul { display: flex; justify-content: space-between; align-items: start; margin-top: 50px; } .recommend_warp ul li { width: 32%; } .easy .recommend_warp ul li { width: 24%; } .recommend_warp ul .video_warp { position: relative; width: 100%; padding-bottom: 67%; border-radius: 20px; overflow: hidden; } .recommend_warp ul .video_warp img, .recommend_warp ul .video_warp video { transition: .3s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .about_icon_warp ul { flex-wrap: wrap; margin-top: 0; } .about_icon_warp ul .video_warp { display: flex; justify-content: center; align-items: center; width: 40%; padding-bottom: 40%; } .about_icon_warp ul .video_warp img { max-width: 120px; margin: 0 auto; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; } .about_icon_warp ul .content_warp { width: 100%; } .about_icon_warp ul .content_warp p { margin-top: 0; } .recommend_warp ul li p { font-weight: 400; font-size: 22px; color: #FFFFFF; line-height: 40px; padding: 0 5%; text-align: center; } .recommend_warp.recommend_product { background-color: #fff; margin-top: 0; } .recommend_warp.recommend_product .title { color: #333; } .recommend_warp.recommend_product img { transition: .3s; } .recommend_warp.recommend_product li .video_warp:hover img { transform: scale(1.1); } .recommend_warp.recommend_product li p:hover a { color: #F77F30; } .tsun { padding-top: 93px; padding-bottom: 76px; text-align: center; } .tsun .title { margin-bottom: 30px; padding-bottom: 15px; line-height: 1.5; position: relative; } .tsun .title::before { position: absolute; left: 50%; content: ' '; width: 100px; height: 3px; background-color: #009ee7; bottom: 0; transform: translateX(-50%); } .tsun .content { font-weight: 400; font-size: 18px; color: #333333; width: 75%; margin: 0 auto; line-height: 1.7; } .tsun .link { background: #F77F30; border-radius: 20px; font-weight: 400; font-size: 14px; color: #FFFFFF; padding: 10px 30px; display: block; width: 152px; margin: 46px auto 0; } @media(max-width:768px) { .bannerInner .images img { height: 250px; object-fit: cover; } .bannerInner .mouse { display: none; } .bannerInner .text .intro { padding: 10px 0 0; } } @media(min-width:768px) { .bannerInner .text .title span:nth-child(2) { color: rgba(255, 255, 255, 0); text-stroke: 1px #FFFFFF; -webkit-text-stroke: 1px #FFFFFF; font-size: var(--font-size64); } .bannerInner .text .intro { padding: 0.520833vw 0 0; } .bannerInner .mouse { bottom: 1.666667vw; } .bannerInner .mouse .icon:nth-child(1) { margin: 0 0 2.864583vw; width: auto; height: auto; display: block; } .bannerInner .mouse .icon:nth-child(2) img { width: .989583vw; } @-webkit-keyframes float { 0% { -webkit-transform: translate3d(0, -1.041667vw, 0); transform: translate3d(0, -1.041667vw, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, -1.041667vw, 0); transform: translate3d(0, -1.041667vw, 0); } } @keyframes float { 0% { -webkit-transform: translate3d(0, -1.041667vw, 0); transform: translate3d(0, -1.041667vw, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, -1.041667vw, 0); transform: translate3d(0, -1.041667vw, 0); } } } @media(min-width:1200px) {} @media(min-width:1600px) { .bannerInner .text .intro { padding: 10px 0 0; } .bannerInner .mouse { bottom: 32px; } .bannerInner .mouse .icon:nth-child(1) { margin: 0 0 55px; width: auto; height: auto; display: block; } .bannerInner .mouse .icon:nth-child(2) img { width: 19px; } @-webkit-keyframes float { 0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } } @keyframes float { 0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 50% { -webkit-transform: none; transform: none; } to { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } } } .TopColumn { position: sticky; top: -1px; z-index: 4; background: #fff; transition: 1s; border-top: 1px solid #f7f7f7; margin: -1px 0 0; } .TopColumn .swiper { width: calc(100% - 100px); margin: 0 auto; position: relative; } .TopColumn ul li { width: fit-content; } .TopColumn ul::-webkit-scrollbar { height: 2px; background-color: #DFDFDF; } .TopColumn ul::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); border-radius: 6px; background-color: #DFDFDF; } .TopColumn ul::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1); background: var(--vi-color); } .TopColumn ul li a { font-size: var(--font-size16); color: #3B3B3B; display: block; min-width: max-content; position: relative; font-family: MONTSERRAT-REGULAR; } .TopColumn ul li.on a { background: var(--vi-color); color: #FFFFFF; } .TopColumn ul li:not(:last-child) a::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: rgba(245, 247, 249, 1); } .TopColumn ul li.on a::after, .TopColumn ul li a:hover::after { display: none; } @media(max-width:768px) { .TopColumn { position: unset; border-top: 0 solid #f7f7f7; } .TopColumn ul { padding: 0 0 5px; margin: 0 0 5px; } .TopColumn ul li a { padding: 10px 25px; } } @media(min-width:768px) { .TopColumn ul li a:hover { background: var(--vi-color); color: #FFFFFF; } .TopColumn ul li a { padding: 1.563vw 2.083333vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .TopColumn ul li a { padding: 30px 40px; } .TopColumn ul li a::after { width: 2px; height: 24px; } } .Product { background: #F2F4F5; } .Product .columns { align-items: flex-start; } .Product .left { position: sticky; } .Product .left a { display: block; font-weight: 500; font-size: var(--font-size14); border-radius: 50px; } .Product .left .on a { background: var(--vi-color); color: #FFFFFF; font-family: MONTSERRAT-REGULAR; } .Product .left a:hover { background: var(--vi-color); color: #FFFFFF; } .Product .right { border-left: 1px dashed rgba(212, 215, 217, .5); flex: 1; } .Product .right dl { display: flex; flex-wrap: wrap; width: 100%; } .Product .right dl .swiper { width: 100%; } .Product .right dl:not(:last-child) {} .Product .right dl dt { font-weight: 600; font-size: var(--font-size38); color: #333333; width: 100%; } .Product .right dl dd { background: #FFFFFF; text-align: center; } .Product .right .image { display: flex; align-items: center; justify-content: center; position: relative; padding-bottom: 100%; } .Product .right .image img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .Product .right .text {} .Product .right .title { font-size: var(--font-size19); color: #3B3B3B; display: block; } .Product .right .intro { font-weight: 400; font-size: var(--font-size14); color: #3B3B3B; opacity: 0.6; } .Product .right .SeeMore { color: var(--vi-color); font-size: var(--font-size12); border: 2px solid rgba(255, 255, 255, 0); } .Product .right dd a:hover .SeeMore { color: #fff; background: var(--vi-color); } .Product .right dd a:hover .SeeMore img { filter: grayscale(100%) brightness(500%) } @media(max-width:768px) { .Product { padding: 35px 0 0; } .Product .columns { display: block; } .Product .left { min-width: 318px; width: 318px; top: 150px; display: none; } .Product .left a { width: 247px; padding: 14px 30px; margin: 0 0 20px; } .Product .right { padding: 0 0 0; border-left: 0px dashed rgba(212, 215, 217, .5); } .Product .right dl dt { margin: 0 0 20px; line-height: unset; } .Product .right dl dd { width: 100%; margin: 0 0 20px; } .Product .right dl:not(:last-child) { margin: 0 0 15px; } .Product .right dl dd:nth-child(3n + 1) { margin-right: 0; } .Product .right .image { height: 200px; } .Product .right .text { padding: 0 20px 30px; } .Product .right .title { padding: 0 0 15px; } .Product .right .SeeMore { margin: 20px auto 0; color: #fff; background: var(--vi-color); } .Product .right .SeeMore img { width: 12px; filter: grayscale(100%) brightness(500%); } } @media(min-width:768px) { .Product { padding: 4.583333vw 0; } .Product .left { min-width: 16.5625vw; width: 16.5625vw; top: 7.8125vw; } .Product .left a { width: 15.104167vw; padding: .729167vw 1.5625vw; margin: 0 0 1.041667vw; } .Product .right { padding: 0 0 0 4.947917vw; } .Product .right dl dt { margin: 0 0 1.822917vw; } .Product .right dl dd { width: calc(33.33% - .416667vw); margin: 0 .625vw .625vw 0; } .Product .right dl:not(:last-child) { margin: 0 0 3.385417vw; } .Product .right dl dd:nth-child(3n + 1) { margin-right: 0; } .Product .right .image { /* height: 14.84375vw; */ } .Product .right .text { padding: 0 2.604167vw 1.5625vw; } .Product .right .title { padding: .78125vw 0 .78125vw; } .Product .right .SeeMore { /* margin: 2.083333vw auto 0; */ } .Product .right .SeeMore img { width: 0.729vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Product { padding: 88px 0; } .Product .left { min-width: 318px; width: 318px; top: 150px; } .Product .left a { width: 290px; padding: 14px 30px; margin: 0 0 20px; } .Product .right { padding: 0 0 0 95px; } .Product .right dl dt { margin: 0 0 35px; } .Product .right dl dd { width: calc(33.33% - 8px); margin: 0 12px 12px 0; } .Product .right dl:not(:last-child) { margin: 0 0 65px; } .Product .right dl dd:nth-child(3n + 1) { margin-right: 0; } .Product .right .image { height: 285px; } .Product .right .text { padding: 0 50px 30px; } .Product .right .title { padding: 0 0 15px; } .Product .right .SeeMore { margin: 40px auto 0; } .Product .right .SeeMore img { width: 14px; } } .bannerDetails { position: relative; } .bannerDetails .text { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .bannerDetails .text .title { font-size: var(--font-size50); color: #333333; } .bannerDetails .text .title span { margin: 0; font-family: unset; font-weight: 600; } .bannerDetails .text .intro { font-weight: 400; font-size: var(--font-size18); color: #333333; line-height: 1.4; opacity: 0.8; } .bannerDetails .text .number { font-weight: 800; font-size: var(--font-size20); color: #333333; padding-bottom: 10px; } .bannerDetails .text .left { display: flex; justify-content: center; align-items: start; flex-direction: column; } .bannerDetails .text .image { flex: 1; overflow: unset; display: flex; align-items: center; justify-content: center; } .bannerDetails .text .image img { width: auto; } .bannerDetails .text .button { display: flex; width: 100%; justify-content: center; } .bannerDetails .text .button a { background: rgba(252, 108, 15, 0); border-radius: 50px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--font-size14); color: var(--vi-color); transition: .3s; } .bannerDetails .text .button a img {} .bannerDetails .text .button a:hover { color: #fff; background: var(--vi-color); transition: .3s; } .bannerDetails .text .button a:hover img { filter: grayscale(100%) brightness(500%) } @media(max-width: 768px) { .bannerDetails .images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; object-fit: cover; } .bannerDetails .text { position: unset; padding: 35px 0; } .bannerDetails .text .title { padding: 0 0 20px; } .bannerDetails .columns { display: block; } .bannerDetails .text .left { max-width: 100%; width: 100%; } .bannerDetails .text .image { padding: 30px 0 10px; margin: 0 0; overflow: hidden; } .bannerDetails .text .image img { -webkit-box-reflect: unset; } .bannerDetails .text .button { margin: 25px 0 0; } .bannerDetails .text .button a { width: 50%; height: 34px; border: 1px solid var(--vi-color); margin: 0 15px 0 0; } .bannerDetails .text .button a:nth-child(2) { width: 50%; } .bannerDetails .text .button a img { margin: 0 10px 0 0; } .bannerDetails .text .button a:nth-child(1) img { width: 15px; } .bannerDetails .text .button a:nth-child(2) img { width: 12px; } } @media(min-width:768px) { .bannerDetails .text .title { padding: 0 0 1.041667vw; } .bannerDetails .text .left { max-width: 33.291667vw; width: 33.291667vw; } .bannerDetails .text .image { padding: 0 0 0 7.8125vw; margin: 0 0 -4.427083vw; } .bannerDetails .text .image img { /* max-height: 20.833333vw; */ } .bannerDetails .text .button { margin: 2.604167vw 0 0; } .bannerDetails .text .button a { width: 9.166667vw; height: 2.96875vw; border: .104167vw solid var(--vi-color); margin: 0 .78125vw 0 0; } .bannerDetails .text .button a:nth-child(2) { width: 9.895833vw; } .bannerDetails .text .button a img { margin: 0 .677083vw 0 0; } .bannerDetails .text .button a:nth-child(1) img { width: 1.145833vw; } .bannerDetails .text .button a:nth-child(2) img { width: .989583vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .bannerDetails .text .image img { /* max-height: 400px; */ } .bannerDetails .text .title { padding: 0 0 20px; } .bannerDetails .text .left { max-width: 820px; width: 820px; } .bannerDetails .text .image { padding: 0 0 0 150px; margin: 0 0 -85px; } .bannerDetails .text .button { margin: 50px 0 0; } .bannerDetails .text .button a { width: 176px; height: 57px; border: 2px solid var(--vi-color); margin: 0 15px 0 0; } .bannerDetails .text .button a:nth-child(2) { width: 190px; } .bannerDetails .text .button a img { margin: 0 13px 0 0; } .bannerDetails .text .button a:nth-child(1) img { width: 22px; } .bannerDetails .text .button a:nth-child(2) img { width: 19px; } } .Highlights {} .Highlights .title { font-size: var(--font-size45); color: #333333; } .Highlights ul { display: flex; text-align: center; flex-wrap: wrap; } .Highlights ul li { background: #F5F7F9; } .Highlights ul li .icon img {} .Highlights ul li .intro { font-weight: 600; font-size: var(--font-size18); color: #333333; line-height: 1.3; } @media(max-width:768px) { .Highlights { padding: 35px 0 15px; } .Highlights .title { padding: 0 0 20px; } .Highlights ul li .intro br { display: none; } .Highlights ul li { width: 100%; margin: 0 0 20px 0; padding: 20px 15px; } .Highlights ul li:nth-child(3n) { margin-right: 0; } .Highlights ul li .icon img { width: 50px; margin: 0 0 10px; } } @media(min-width:768px) { .Highlights { padding: 4.166667vw 0 5.729167vw; } .Highlights .title { padding: 0 0 2.864583vw; } .Highlights ul li { width: calc(33.33% - (2.604167vw / 3)); margin: 0 1.302083vw 1.302083vw 0; padding: 1.5625vw 2.604167vw 2.604167vw; } .Highlights ul li:nth-child(3n) { margin-right: 0; } .Highlights ul li .icon img { width: 4.6875vw; margin: 0 0 1.875vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Highlights { padding: 80px 0 110px; } .Highlights .title { padding: 0 0 55px; } .Highlights ul li { width: calc(33.33% - (50px / 3)); margin: 0 25px 25px 0; padding: 30px 50px 50px; } .Highlights ul li:nth-child(3n) { margin-right: 0; } .Highlights ul li .icon img { width: 90px; margin: 0 0 36px; } } .Technical { position: relative; background: #FEFEFE; } .Technical .title { font-size: var(--font-size45); color: #333333; } .Technical .table { background: rgba(255, 255, 255, 0.05); border: 1px solid rgb(255, 255, 255, .18); background: rgb(255, 255, 255, .18); backdrop-filter: blur(10px); } .Technical table { /* width: 100% !important; */ margin: 0 auto; max-width: 100%; } .pro_div p { line-height: 2; font-size: 18px; } .Technical p { font-size: 18px; line-height: 2; } .Technical table tr td { font-size: var(--font-size16); color: #000; border: 0px solid #ccc; border-right: 1px solid rgba(0, 0, 0, .3); border-bottom: 1px solid rgba(0, 0, 0, .3); } .Technical table tr td:not(:first-child) { text-align: center; } .Technical table tr td:last-child { border-right: 0px solid rgba(255, 255, 255, .3); } .Technical table.video_table tr:nth-child(1) td { font-weight: 600; } .Technical table.video_table:first-child tr { display: flex; flex-direction: column; height: auto !important; } .Technical table.video_table:first-child tr td { width: 100% !important; height: auto !important; } .Technical table.video_table:first-child col { width: 100% !important; } .Technical table.video_table:first-child tr iframe { min-height: 200px; } @media(max-width:768px) { .Technical { padding: 35px 0 35px; } .Technical .title { padding: 0 0 20px; } .Technical .table { padding: 20px; border-radius: 10px; box-shadow: 0px 0px 43px 0px rgba(59, 59, 59, 0.1); } .Technical .table>div { overflow: auto; } .Technical table { width: 700px; } .Technical table tr:nth-child(1) td { padding: 12px 16px; } .Technical table tr td { padding: 16px 14px; text-align: left !important; } } @media(min-width:768px) { .Technical { padding: 5.208333vw 0 5.729167vw; } .Technical .title { padding: 0 0 3.90625vw; } .Technical .table { padding: 2.96875vw 4.010417vw 3.854167vw; border-radius: 1.041667vw; box-shadow: 0vw 0vw 2.239583vw 0vw rgba(59, 59, 59, 0.1); } .Technical table tr:nth-child(1) td { padding: .625vw 0; } .Technical table tr td { padding: .833333vw 0; width: auto; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Technical { padding: 50px 0 0px; } .Technical .title { padding: 0 0 75px; } .Technical .table { padding: 57px 77px 74px; border-radius: 20px; box-shadow: 0px 0px 43px 0px rgba(59, 59, 59, 0.1); } .Technical table tr:nth-child(1) td { padding: 12px 16px; } .Technical table tr td { padding: 16px 14px; text-align: left !important; } } .Product1 .right { padding: 0 0 0 0; border-left: unset; width: 100%; } .Product1 .right dl dt { font-size: var(--font-size45); line-height: 1; } .Product1 .right .title { font-size: var(--font-size22); min-height: 3em; } .Product1 .right .intro { font-size: var(--font-size16); } .Product1 .swiper-pagination-bullet-active { background: var(--vi-color); } @media(max-width:768px) { .Product1 { padding: 35px 0 30px; } .Product1 .swiper-container-horizontal>.swiper-pagination-bullets, .Product1 .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 24px; } .Product1 .right dl dd { margin: 0 20px 0 0 !important; } .Product1 .right .text { padding: 10px 20px 60px; } .Product1 .swiper-pagination-bullet { width: 8px; height: 8px; } } @media(min-width:768px) { .Product1 { padding: 4.6875vw 0 5.208333vw; } .Product1 .right .image {} .Product1 .right .title { padding: 0 0 1.302083vw; } .Product1 .right .SeeMore { /* margin: 3.125vw auto 0; */ font-size: var(--font-size13); } .Product1 .right .SeeMore img { width: .833333vw; } .Product1 .right .text { padding: 1vw 2.604167vw 2.083333vw; } .Product1 .right dl dd { width: calc(33.33% - .833333vw); margin: 0 .833333vw .833333vw 0 !important; } .Product1 .right dl dt { margin: 0 0 4.166667vw; } .Product1 .swiper-container-horizontal>.swiper-pagination-bullets, .Product1 .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 1.25vw; } .Product1 .swiper-pagination-bullet { width: 0.416667vw; height: 0.416667vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Product1 { padding: 90px 0 100px; } .Product1 .right .image {} .Product1 .right .title { padding: 0 0 25px; } .Product1 .right .SeeMore { margin: 0px auto 0; font-size: var(--font-size13); } .Product1 .right .SeeMore img { width: 16px; } .Product1 .right .text { padding: 20px 50px 40px; } .Product1 .right dl dd { width: calc(33.33% - 16px); margin: 0 16px 16px 0 !important; } .Product1 .right dl dt { margin: 0 0 80px; } .Product1 .swiper-container-horizontal>.swiper-pagination-bullets, .Product1 .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 24px; } .Product1 .swiper-pagination-bullet { width: 8px; height: 8px; } } .Solar { position: relative; } .Solar .text { position: absolute; top: 0; left: 0; width: 100%; } .Solar .text .title { font-size: var(--font-size56); color: #333333; line-height: 1.2; max-width: 60%; } .Solar .text .intro { font-size: var(--font-size18); color: #666666; line-height: 1.4; max-width: 52%; } @media(min-width:768px) { .Solar.solarwhite .text .title { color: #ffffff; } .Solar.solarwhite .text .intro { color: #ffffff; } } @media(max-width:768px) { .Solar .text { padding: 30px 0; position: unset; background: #fbfbfb; } .Solar .text .title { padding: 0 0 20px; max-width: 100%; line-height: unset; } .Solar .text .title br { display: none; } .Solar .text .intro { max-width: 100%; } } @media(min-width:768px) { .Solar .text { padding: 6.770833vw 0; } .Solar .text .title { padding: 0 0 1.041667vw; } .Solar .text .title { max-width: 100%; } } @media(min-width:1200px) { .Solar .text .title { max-width: 60%; } } @media(min-width:1600px) { .Solar .text { padding: 130px 0; } .Solar .text .title { padding: 0 0 20px; } } .features {} .features .title { font-weight: 600; font-size: var(--font-size45); color: #333333; } .features ul { display: flex; flex-wrap: wrap; } .features ul li { position: relative; width: calc(25% - 5px); margin-left: calc(20px / 3); } .features ul li:nth-child(4n+1) { margin-left: 0; } .features ul li .image { height: 100%; } .features ul li .image img { height: 100%; object-fit: cover; } .features ul li:nth-child(1) { grid-row-start: 1; grid-row-end: 3; } .features ul li .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; } .features ul li .text .icon { flex: 1; width: 100%; text-align: right; } .features ul li .text .icon img {} .features ul li .text span { font-weight: 600; font-size: var(--font-size73); color: rgba(255, 255, 255, 0); text-stroke: 1px #FFFFFF; opacity: 0.3; -webkit-text-stroke: 1px #FFFFFF; } .features ul li .text .list {} .features ul li .text .intro { font-size: var(--font-size22); color: #FFFFFF; font-family: MONTSERRAT-REGULAR; } @media(max-width:768px) { .features { padding: 35px 0; } .features .title { padding: 0 0 20px; } .features ul li { grid-row-start: unset !important; grid-row-end: unset !important; } .features ul li .image img { height: 200px; } .features ul li .text .intro { min-height: 60px; margin: 10px 0 0; } .features ul li .text .intro br { display: none; } .features ul li .text .icon { padding: 25px 35px 0; } .features ul li .text .icon img { width: 40px; } .features ul li .text .list { padding: 0 20px 20px; } } @media(min-width:768px) { .features { padding: 4.166667vw 0 5.729167vw; } .features .title { padding: 0 0 2.604167vw; } .features ul li .text .intro { min-height: 3.125vw; } .features ul li .text .icon { padding: 1.302083vw 1.822917vw 0; } .features ul li .text .icon img { width: 3.489583vw; } .features ul li .text .list { padding: 0 2.34375vw 1.5625vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .features { padding: 80px 0 110px; } .features .title { padding: 0 0 50px; } .features ul li .text .intro { min-height: 60px; } .features ul li .text .icon { padding: 25px 35px 0; } .features ul li .text .icon img { width: 67px; } .features ul li .text .list { padding: 0 45px 30px; } } .Downloads { background: #F2F4F5; } .Downloads .left dt { font-weight: 600; font-size: var(--font-size22); color: #333333; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .Downloads .left span { font-weight: 600; font-size: var(--font-size22); color: #333333; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .Downloads .left dl { display: none; } .Downloads .left dt i { font-size: var(--font-size16); color: rgba(51, 51, 51, .5); font-weight: 600; transition: .3s; } .Downloads .left .on dt i { transform: rotate(180deg); transition: .3s; } .Downloads .left dd .layui-form-radio>* { font-weight: 400; font-size: var(--font-size14); color: #333333; line-height: 1.5; padding: 5px 0; } .Downloads .left dd .layui-form-radio { margin: 0; width: 100%; } .Downloads .left dd .layui-form-radio:hover>* { color: var(--vi-color); } .Downloads .left dd .layui-icon-circle:before { content: ""; background: #DEDFE1; border-radius: 2px; display: flex; align-items: center; justify-content: center; } .Downloads .left dd .layui-form-radioed .layui-icon-circle:before { background: url('../images/55.png') rgba(0, 158, 231, 1) no-repeat center; background-size: 100% 100%; } .Downloads .left dd .layui-form-radioed.layui-form-radio>* { color: var(--vi-color); } .Downloads .layui-form-checkbox[lay-skin=primary]>i { width: 12px; height: 12px; font-size: 8px; line-height: 10px; transform: translateY(-50%); top: 46%; } .Downloads .layui-form-checked[lay-skin=primary]>i { border-color: var(--vi-color) !important; background-color: var(--vi-color); } .Downloads .layui-form-checkbox[lay-skin=primary]:hover>i { border-color: var(--vi-color); } .Downloads .layui-form-checkbox[lay-skin=primary]>div { font-weight: 400; font-size: var(--font-size14); color: #333333; line-height: 1.5; padding: 5px 0; white-space: pre-line; } .Downloads .layui-form-checkbox[lay-skin=primary]:hover>div { color: var(--vi-color); } .Downloads .right { flex: 1; } .Downloads .right ul li { background: #FFFFFF; border: 1px solid #009ee700; display: flex; justify-content: space-between; } .Downloads .right ul li a { display: flex; align-items: center; } .Downloads .right ul li a:nth-child(1) { flex: 1; } .Downloads .right ul li a .icon { display: flex; justify-content: center; height: auto; } .Downloads .right ul li a .icon img {} .Downloads .right ul li .text { flex: 1; border-left: 1px solid rgba(245, 247, 249, 1); } .Downloads .right ul li .text .date { font-weight: 400; font-size: var(--font-size12); color: #333333; opacity: 0.8; } .Downloads .right ul li .text .intro { font-size: var(--font-size18); color: #3B3B3B; margin: 5px 0 0; font-family: MONTSERRAT-REGULAR; } .Downloads .right ul li .iconButton { display: flex; justify-content: center; align-items: center; border-radius: 50px; border: 1px solid #009ee7; } .Downloads .right ul li .iconButton img {} .Downloads .right ul li:hover { box-shadow: 0px 3px 18px 0px rgba(252, 108, 15, 0.19); border: 1px solid var(--vi-color); } .Downloads .right ul li:hover .text .intro { color: var(--vi-color); } .Downloads .right ul li:hover .iconButton { background: var(--vi-color); } .Downloads .right ul li:hover .iconButton img { filter: grayscale(100%) brightness(500%) } @media(max-width:768px) { .Downloads .layui-form-checkbox[lay-skin=primary] { width: 100%; } .Downloads .layui-form-checkbox[lay-skin=primary]>i { width: 12px; height: 12px; font-size: 12px; line-height: 10px; top: 50%; } .Downloads .layui-form-checkbox[lay-skin=primary]>div { padding: 5px 0; } .Downloads { padding: 35px 0; } .Downloads .columns { display: block; } .Downloads .columns .filterBtn { background: #fff; font-size: 18px; padding: 5px 30px; display: flex; justify-content: flex-end; align-items: baseline; margin: 0 0 20px; } .Downloads .columns .filterBtn i { margin: 0 0 0 20px; font-size: 20px; } .Downloads .left { width: 100%; min-width: 100%; position: fixed; background: #ccc; bottom: 0; left: 0; z-index: 10; height: 100%; display: flex; align-items: flex-end; background: #0000004f; display: none; } .Downloads .left>div>div { max-height: 70vh; overflow: auto; } .Downloads .left>div { width: 100%; background: #fff; padding: 30px 5%; } .Downloads .left>div .title { font-size: 16px; display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding: 0 0 10px; margin: 0 0 20px; } .Downloads .left>div .title i { font-size: 20px; color: #000; font-weight: 500; } .Downloads .left dt { width: 100%; } .Downloads .left dl { padding: 15px 0 0; width: 100%; } .Downloads .left dd { margin: 6px 0 0; } .Downloads .left .list { padding: 0 0 20px; overflow: hidden; } .Downloads .left dt i { margin: 0 0 0 20px; } .Downloads .left dd .layui-icon-circle:before { width: 12px; height: 12px; } .Downloads .right ul { margin: 0 0 30px; } .Downloads .right ul li { margin: 0 0 20px; } .Downloads .right ul li a .icon { width: 55px; } .Downloads .right ul li a .icon img { width: 25px; } .Downloads .right ul li .text { padding: 15px 10px; } .Downloads .right ul li .text .intro { margin: 5px 0 0; } .Downloads .right ul li .iconButton { display: none; } } @media(min-width:768px) { .Downloads .layui-form-checkbox[lay-skin=primary]>i { width: 0.625vw; height: 0.625vw; font-size: 0.625vw; line-height: 0.520833vw; } .Downloads .layui-form-checkbox[lay-skin=primary]>div { padding: 0.260417vw 0; } .Downloads { padding: 4.6875vw 0 4.166667vw; } .Downloads .left { width: 21.354167vw; min-width: 21.354167vw; } .Downloads .left dt { width: 11.458333vw; } .Downloads .left dl { padding: .78125vw 0 0; width: 80%; } .Downloads .left dd { margin: .3125vw 0 0; } .Downloads .left .list { padding: 0 0 1.041667vw; } .Downloads .left dt i { margin: 0 0 0 1.041667vw; } .Downloads .left dd .layui-icon-circle:before { width: .625vw; height: .625vw; } .Downloads .right ul { margin: 0 0 2.916667vw; } .Downloads .right ul li { margin: 0 0 .833333vw; } .Downloads .right ul li a .icon { width: 5.520833vw; } .Downloads .right ul li a .icon img { width: 1.614583vw; } .Downloads .right ul li .text { padding: 1.041667vw 2.083333vw 1.25vw; } .Downloads .right ul li .text .intro { margin: .260417vw 0 0; } .Downloads .right ul li .iconButton { margin: 0 1.71875vw; width: 4.53125vw; height: 2.03125vw; } .Downloads .right ul li .iconButton img { width: 1.09375vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Downloads .layui-form-checkbox[lay-skin=primary]>i { width: 12px; height: 12px; font-size: 8px; line-height: 10px; } .Downloads .layui-form-checkbox[lay-skin=primary]>div { padding: 5px 0; } .Downloads { padding: 90px 0 80px; } .Downloads .left { width: 410px; min-width: 410px; } .Downloads .left dt { width: 220px; } .Downloads .left dl { padding: 15px 0 0; width: 80%; } .Downloads .left dd { margin: 6px 0 0; } .Downloads .left .list { padding: 0 0 20px; } .Downloads .left dt i { margin: 0 0 0 20px; } .Downloads .left dd .layui-icon-circle:before { width: 12px; height: 12px; } .Downloads .right ul { margin: 0 0 56px; } .Downloads .right ul li { margin: 0 0 16px; } .Downloads .right ul li a .icon { width: 106px; } .Downloads .right ul li a .icon img { width: 31px; } .Downloads .right ul li .text { padding: 20px 40px 24px; } .Downloads .right ul li .text .intro { margin: 5px 0 0; } .Downloads .right ul li .iconButton { margin: 0 33px; width: 87px; height: 39px; } .Downloads .right ul li .iconButton img { width: 21px; } } .VideoCenter { border-top: 1px solid rgba(242, 244, 245, 1); overflow: hidden; } .VideoCenter .Top dl { display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 1px; margin: 0 0 1px; } .VideoCenter .Top dl dt { font-size: var(--font-size18); color: #333333; font-family: MONTSERRAT-REGULAR; } .VideoCenter .Top dl dd {} .VideoCenter .Top dl a { display: block; min-width: max-content; } .VideoCenter .Top dl .layui-anim.layui-icon { display: none; } .VideoCenter .Top dl .layui-form-radio { padding: 0; margin: 0; line-height: 1.8; } .VideoCenter .Top dl .layui-form-radio>* { border-radius: 50px; margin: 0; font-weight: 400; font-size: var(--font-size16); color: #666666; border: 1px solid rgba(140, 140, 140, .3); } .VideoCenter .Top dl .layui-form-radio.layui-form-radioed>*, .VideoCenter .Top dl dd:hover .layui-form-radio>* { background: var(--vi-color); color: #FFFFFF; border-radius: 50px; border: 1px solid rgba(140, 140, 140, 0); } .VideoCenter ul { display: grid; } /* .VideoCenter ul li:nth-child(1) { grid-column-start: 1; grid-column-end: 3; } */ .VideoCenter ul li a { position: relative; display: block; } .VideoCenter ul li .image img { object-fit: cover; } .VideoCenter ul li .text { width: 100%; display: flex; justify-content: space-between; } .VideoCenter ul li .text .intro { font-size: var(--font-size18); color: #3B3B3B; } .VideoCenter ul li .text .icon, .VideoCenter ul li .text .icon { background: #009ee7; box-shadow: 0px 2px 17px 0px rgba(0, 158, 231, 0.5); border: 0px solid #ffffff; border-radius: 50%; position: relative; z-index: 1; } .VideoCenter ul li .text, .VideoCenter ul li .text { align-items: center; } .VideoCenter ul li .text .icon, .VideoCenter ul li .text .icon { background: rgba(252, 108, 15, 0); border: 1px solid #ffffff; box-shadow: unset; } .VideoCenter ul li .text, .VideoCenter ul li .text { position: absolute; bottom: 0; left: 0; } .VideoCenter ul li .text .intro, .VideoCenter ul li .text .intro { color: #FFFFFF; margin: 0; } .VideoCenter ul li a:hover .icon, .VideoCenter ul li a:hover .icon { background: #009ee7; box-shadow: 0px 2px 17px 0px rgba(0, 158, 231, 0.5); border: 0px solid #ffffff; } @media(max-width: 768px) { .VideoCenter { padding: 35px 0; } .VideoCenter .Top dl { flex-wrap: unset; overflow: auto; } .VideoCenter .Top dl dt { margin: 0 0 0; min-width: max-content; } .VideoCenter .Top dl dd { margin: 0 0 0 10px; min-width: max-content; } .VideoCenter .Top dl .layui-form-radio>* { padding: 2px 20px; } .VideoCenter ul { display: block; margin: 0 0; } .VideoCenter ul li { margin: 20px 0 0; } .VideoCenter ul li .text .icon { width: 40px; min-width: 40px; height: 40px; margin: -20px 22px 0 0; } .VideoCenter ul li .text .icon, .VideoCenter ul li .text .icon { margin: 0; } .VideoCenter ul li .text, .VideoCenter ul li .text { padding: 20px; background: linear-gradient(0deg, black, transparent); } .VideoCenter ul li .text .intro br { display: none; } .VideoCenter ul li .text .intro { padding: 0 35px 0 0; margin: 15px 0; } .VideoCenter ul li .image img { height: 200px; } } @media(min-width:768px) { .VideoCenter { padding: 4.375vw 0 3.438vw; } .VideoCenter .Top dl dt { margin: 0 0 1.042vw; } .VideoCenter .Top dl dd { margin: 0 0 1.042vw 1.042vw; } .VideoCenter .Top dl .layui-form-radio>* { padding: .46875vw 1.25vw; } .VideoCenter ul { grid-template-columns: 27.344vw 27.344vw 27.344vw; grid-gap: 0.521vw; margin: 1.563vw 0 0; } .VideoCenter ul li .text .icon { width: 2.656vw; min-width: 2.656vw; height: 2.656vw; margin: -1.328vw 1.146vw 0 0; } .VideoCenter ul li .text .icon, .VideoCenter ul li .text .icon { margin: 0; } .VideoCenter ul li .text, .VideoCenter ul li .text { padding: 1.563vw 2.083vw; } .VideoCenter ul li .text .intro { padding: 0 1.823vw 0 0; margin: 0.781vw 0; } .VideoCenter ul li .image img { height: 31.719vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .VideoCenter { padding: 84px 0 66px; } .VideoCenter .Top dl dt { margin: 0 0 20px; } .VideoCenter .Top dl dd { margin: 0 0 20px 20px; } .VideoCenter .Top dl .layui-form-radio>* { padding: 9px 24px; } .VideoCenter ul { grid-template-columns: auto auto auto; grid-gap: 10px; margin: 30px 0 0; } .VideoCenter ul li .text .icon { width: 51px; min-width: 51px; height: 51px; margin: -25.5px 22px 0 0; } .VideoCenter ul li .text .icon, .VideoCenter ul li .text .icon { margin: 0; } .VideoCenter ul li .text, .VideoCenter ul li .text { padding: 30px 40px; } .VideoCenter ul li .text .intro { padding: 0 35px 0 0; margin: 15px 0; } .VideoCenter ul li .image img { /* height: 609px; */ } } .Balcony { position: relative; overflow: hidden; } .Balcony ul.swiper1 li { position: relative; } .Balcony ul.swiper1 li .title { position: absolute; font-size: var(--font-size90); line-height: 1.1; color: white; background: linear-gradient(180deg, white 25%, #ffffff00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: fadeInUp 1s; -webkit-animation: fadeInUp 1s; animation-timing-function: linear; display: none; } .Balcony ul.swiper1 li.on .title { display: block; } .Balcony .text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .Balcony .text .auto_1600 { height: 100%; } .Balcony ul.swiper2 { height: 100%; } .Balcony ul.swiper2 .image img { height: 100%; object-fit: contain; } .Balcony ul.swiper2 li { background: #fff; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0); cursor: pointer; background: rgb(255 255 255 / 75%); backdrop-filter: blur(16px); } .Balcony ul.swiper2 li a { display: flex; align-items: center; } .Balcony ul.swiper2 li .title { font-size: var(--font-size18); color: #333333; line-height: unset; font-weight: 500; font-family: MONTSERRAT-REGULAR; margin-left: -26px; } .Balcony ul.swiper2 li.on { border: 1px solid var(--vi-color); background: rgb(255 255 255 / 100%); } .Balcony ul.swiper2 li:hover .title, .Balcony ul.swiper2 li.on .title { color: var(--vi-color); } @media(max-width:768px) { .Balcony ul.swiper1 li .title { position: unset; color: #000; -webkit-text-fill-color: unset; padding: 20px 5% 0; text-align: center; font-size: 20px; animation: fadeInUp .5s; -webkit-animation: fadeInUp .5s; animation-timing-function: ease; } .Balcony .text { padding: 20px 0 35px; position: unset; } .Balcony ul.swiper2 { width: auto; padding: 0 50px 0 0; } .Balcony ul.swiper2 .image { width: 70px; min-width: 70px; margin: 0 15px 0 0; height: 60px; } .Balcony ul.swiper2 li { padding: 10px 20px; border-radius: 10px; border: 1px solid rgb(212 212 212); min-height: 60px; height: auto; } } @media(min-width:768px) { .Balcony ul.swiper2 li:hover { border: 1px solid var(--vi-color); } .Balcony ul.swiper1 li .title { top: 4.0625vw; left: 36.458333vw; } .Balcony .text { padding: 4.166667vw 0; } .Balcony ul.swiper2 { width: 19.270833vw; } .Balcony ul.swiper2 .image { width: 6.25vw; min-width: 6.25vw; margin: 0 1.041667vw 0 0; height: 3.125vw; } .Balcony ul.swiper2 li { padding: 1.302083vw 1.041667vw; border-radius: 1.041667vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Balcony ul.swiper1 li .title { top: 78px; left: 700px; } .Balcony .text { padding: 80px 0; } .Balcony ul.swiper2 { width: 370px; } .Balcony ul.swiper2 .image { width: 120px; min-width: 120px; margin: 0 20px 0 0; height: 60px; } .Balcony ul.swiper2 li { padding: 25px 20px; border-radius: 20px; } } .features2 ul li:nth-child(3) { grid-row-start: 2; } .features2 ul li:nth-child(4) { grid-row-start: 1; grid-row-end: 3; } .features3 ul li:nth-child(1) { grid-row-start: unset; grid-row-end: unset; } .VideoCenter .layui-flow-more { width: 100%; grid-column-start: 1; grid-column-end: 4; padding: auto; font-size: var(--font-size16); } .VideoCenter .layui-flow-more>* { font-size: var(--font-size14); } .VideoCenter .layui-flow-more a { line-height: 3; } .VideoCenter .layui-flow-more a cite { background: #009ee7; color: #fff; border-radius: 50px; } .VideoCenter .layui-flow-more a i { font-size: unset; line-height: 1; } @media(max-width:768px) { .VideoCenter .layui-flow-more { margin: 15px 0 0; } .VideoCenter .layui-flow-more a cite { padding: 0 35px; line-height: 2.7; } .VideoCenter .layui-flow-more a i { width: 25px; } } @media(min-width:768px) { .VideoCenter .layui-flow-more { margin: 1.563vw 0 0; } .VideoCenter .layui-flow-more a cite { padding: 0 1.823vw; } .VideoCenter .layui-flow-more a i { width: 1.719vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .VideoCenter .layui-flow-more { margin: 30px 0 0; } .VideoCenter .layui-flow-more a cite { padding: 0 35px; } .VideoCenter .layui-flow-more a i { width: 33px; } } .FAQS { background: #F2F4F5; } .FAQS ul { display: flex; flex-wrap: wrap; } .FAQS ul li { background: url('../images/60.png') no-repeat center; background-size: 100% 100%; position: relative; } .FAQS ul .title { font-size: var(--font-size20); color: #333333; line-height: 1.5; display: flex; align-items: flex-start; justify-content: space-between; position: relative; } .FAQS ul .title i { font-size: var(--font-size16); } .FAQS ul .intro { font-weight: 400; font-size: var(--font-size17); color: #666666; line-height: 1.2; } .FAQS ul li>div:nth-child(2) { display: flex; } .FAQS ul li>div:nth-child(2)>span { color: #3B3B3B; font-weight: 600; display: block; min-width: max-content; font-size: var(--font-size17); } .FAQS ul li .icon { position: absolute; } .FAQS ul li:hover { background: url('../images/61.png') no-repeat center; background-size: 100% 100%; } .FAQS ul li:hover .title { color: var(--vi-color); } @media(max-width:768px) { .FAQS { padding: 35px 0; } .FAQS ul { margin: 0 0 10px; } .FAQS ul li { padding: 30px 20px; width: 100%; margin: 0 0 20px 0; } .FAQS ul .title { margin: 0; padding: 0 0 0 40px; line-height: unset; align-items: center; } .FAQS ul li>div:nth-child(2) { margin: 10px 0 0; } .FAQS ul li:nth-child(2n) { margin-right: 0; } .FAQS ul li>div:nth-child(2) { display: block; } .FAQS ul li>div:nth-child(2)>span { margin: 0 0 8px 0; } .FAQS ul .intro { line-height: unset; } .FAQS ul li .icon { top: 24px; left: 10px; width: 40px; height: 40px; } .FAQS ul li .icon img { width: 59px; } } @media(min-width:768px) { .FAQS { padding: 4.25vw 0 4.01vw; } .FAQS ul li { padding: 1.302083vw 2.604167vw 1.041667vw 2.1875vw; width: calc(50% - (4.01vw / 2)); } .FAQS ul .title { margin: 0 0; padding: 0 0 0 2.083vw; } .FAQS ul li>div:nth-child(2) { margin: 2.083333vw 0 0; } .FAQS ul .title i { margin: .364583vw 0 0; } .FAQS ul li:nth-child(2n) { margin-right: 0; } .FAQS ul li>div:nth-child(2)>span { margin: 0 .729167vw 0 0; } .FAQS ul li .icon { top: 8px; left: 0vw; width: 60px; height: 60px; } .FAQS ul li .icon img { width: 3.125vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .FAQS { padding: 120px 0 77px; } .FAQS ul li { padding: 25px 50px 20px 42px; width: calc(50% - (77px / 2)); } .FAQS ul .title { margin: 0 0; padding: 0 0 0 40px; } .FAQS ul li>div:nth-child(2) { margin: 40px 0 0; } .FAQS ul .title i { margin: 7px 0 0; } .FAQS ul li:nth-child(2n) { margin-right: 0; } .FAQS ul li>div:nth-child(2)>span { margin: 0 14px 0 0; } .FAQS ul li .icon { top: 10px; left: 10px; width: 60px; height: 60px; } .FAQS ul li .icon img { width: 60px; } } .Service .Network { position: relative; padding: 4.739583vw 0; } .Service .Network .prompt { font-size: var(--font-size16); position: absolute; } .Service .Network .columns { justify-content: space-between; align-items: center; } .Service .Network .list {} .Service .Network .list dl { background: #fff; animation: fadeInUp .5s; -webkit-animation: fadeInUp 1s; animation-timing-function: linear; display: none; box-sizing: content-box; } .Service .Network .list dl.on { display: block; text-transform: capitalize; } .Service .Network .list dl dt { font-weight: 600; font-size: var(--font-size28); color: #3B3B3B; } .Service .Network .list dl dd {} .Service .Network .list dl dd>div:nth-child(1) { display: flex; align-items: center; } .Service .Network .list dl dd img {} .Service .Network .list dl dd span { font-size: var(--font-size18); color: #3B3B3B; display: inline-block; } .Service .Network .list dl dd .intro { font-weight: 400; font-size: var(--font-size16); color: #3B3B3B; opacity: 0.6; } .Service .Network ul li .title { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--font-size14); color: #3B3B3B; display: none; min-width: max-content; } .Service .Network ul li { position: absolute; z-index: 2; cursor: pointer; } .Service .Network ul li .dian { position: relative; } .Service .Network ul li i { background: #FFFFFF; border-radius: 50%; position: relative; z-index: 3; display: block; } .Service .Network ul li span:nth-child(1) { background: #009ee7; border-radius: 50%; position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); } .Service .Network ul li span:nth-child(2), .Service .Network ul li span:nth-child(3), .Service .Network ul li span:nth-child(4) { content: ''; z-index: 10; position: absolute; left: 50%; top: 50%; -webkit-border-radius: 100%; border-radius: 100%; border: 1px solid #009ee7; opacity: 0.3; -webkit-animation: scale1 3s linear infinite; animation: scale1 3s linear infinite; -webkit-animation-delay: .8s; transform: translate(-50%, -50%); animation-delay: 0s; display: none; } .Service .Network ul li span:nth-child(3) { animation-delay: 1s; } .Service .Network ul li span:nth-child(4) { animation-delay: 2s; } .Service .Network ul li.on span { display: block !important; } .Service .Network ul li.on span:nth-child(1) { display: none; } .Service .Network ul li.on .title { color: var(--vi-color); display: block; } .Service .Network .images { position: relative; overflow: hidden; } .Service .Network .images .image img { width: 49.479167vw; } .Service .botton dd { cursor: pointer; } .Service .botton dd>div:nth-child(1) { display: flex; align-items: center; } .Service .botton dd span:nth-child(1) { border-radius: 50%; border: 1px solid #999999; display: inline-block; } .Service .botton dd span:nth-child(2) { height: 1px; display: inline-block; background: linear-gradient(45deg, rgba(178, 178, 178, .8) 0%, transparent 65%); } .Service .botton dd .index { font-size: var(--font-size24); color: #999999; line-height: 1; font-weight: 600; } .Service .botton dd .title { font-weight: 400; font-size: var(--font-size19); color: #999999; } .Service .botton dd.on .title, .Service .botton dd.on .index { color: var(--vi-color); } .Service .botton dd.on span:nth-child(1) { border: unset; background: var(--vi-color); } .Service .botton dd.on span:nth-child(2) { background: linear-gradient(45deg, var(--vi-color), transparent); } @media(max-width:768px) { .Service .Network { display: flex; flex-direction: column-reverse; padding: 30px 0; } .Service .Network .prompt { font-size: 14px; position: unset; padding: 20px; } .Service .Network .images { position: relative; margin: 25px 0 10px; } .Service .Network .list { position: unset; } .Service .Network .list dl { max-width: 100%; padding: 20px; min-height: 300px; } .Service .Network .list dl dt { padding: 0 0; } .Service .Network .list dl dd { padding: 20px 0 0; } .Service .Network .list dl dd img { width: 16px; margin: 0 9px 0 0; } .Service .Network .list dl dd .intro { line-height: unset; padding: 8px 0 0; } .Service .Network ul li i { width: 4px; height: 4px; } .Service .Network ul li .title { padding: 0 20px 0 0; transform: translateX(-100%) translateY(-50%); opacity: 0; } .Service .Network ul li.on .title { opacity: 1; padding: 0 40px 0; } .Service .Network ul li span:nth-child(1) { width: 10px; height: 10px; } .Service .Network ul li span:nth-child(2), .Service .Network ul li span:nth-child(3), .Service .Network ul li span:nth-child(4) { width: 5px; height: 5px; } @keyframes scale1 { 0% { width: 5px; height: 5px; background: rgba(0, 158, 231, 0.5); opacity: 0.3; } 70% { opacity: 0.3; } 100% { width: 35px; height: 35px; background: rgba(252, 108, 15, 0); opacity: 0; } } @-webkit-keyframes scale1 { 0% { width: 5px; height: 5px; background: rgba(0, 158, 231, 0.5); opacity: 0.3; } 70% { opacity: 0.3; } 100% { width: 35px; height: 35px; background: rgba(252, 108, 15, 0); opacity: 0; } } .Service .botton { padding: 35px 0 35px; } .Service .botton dd span:nth-child(1) { min-width: 13px; width: 13px; height: 13px; margin: 0 8px 0 0; } .Service .botton dd span:nth-child(2) { width: 266px; } .Service .botton dd .index { padding: 15px 0 10px; } .Service .Network .columns { display: block; } .Service .Network .images .image img { width: 100%; } } @media(min-width:768px) { .Service .Network .prompt { bottom: 3.125vw; right: 7.8125vw; } .Service .Network .list dl { max-width: 28.646vw; padding: 2.604vw 2.604vw 3.125vw 2.083vw; width: 28.646vw; min-height: 17.708333vw; } .Service .Network .list dl dt { padding: 0 0 0.781vw; } .Service .Network .list dl dd { padding: 1.823vw 0 0; } .Service .Network .list dl dd img { width: 0.833vw; margin: 0 0.469vw 0 0; } .Service .Network .list dl dd .intro { line-height: 1.1; padding: 0.26vw 0 0; } .Service .Network ul li i { width: 0.208vw; height: 0.208vw; } .Service .Network ul li .title { padding: 0 0 0 1.042vw; } .Service .Network ul li:nth-child(6) .title { right: 0; } .Service .Network ul li.on .title { padding: 0vw 0 0 2.865vw; } .Service .Network ul li:nth-child(6).on .title { padding: 0vw 2.865vw 0 0; } .Service .Network ul li span:nth-child(1) { width: 0.885vw; height: 0.885vw; } .Service .Network ul li span:nth-child(2), .Service .Network ul li span:nth-child(3), .Service .Network ul li span:nth-child(4) { width: 0.26vw; height: 0.26vw; } @keyframes scale1 { 0% { width: 0.26vw; height: 0.26vw; background: rgba(0, 158, 231, 0.5); opacity: 0.3; } 70% { opacity: 0.3; } 100% { width: 5.729vw; height: 5.729vw; background: rgba(252, 108, 15, 0); opacity: 0; } } @-webkit-keyframes scale1 { 0% { width: 0.26vw; height: 0.26vw; background: rgba(0, 158, 231, 0.5); opacity: 0.3; } 70% { opacity: 0.3; } 100% { width: 5.729vw; height: 5.729vw; background: rgba(252, 108, 15, 0); opacity: 0; } } .Service .botton { padding: 2.865vw 0 7.5vw; } .Service .botton dd span:nth-child(1) { min-width: 0.677vw; width: 0.677vw; height: 0.677vw; margin: 0 0.417vw 0 0; } .Service .botton dd span:nth-child(2) { width: 13.854vw; } .Service .botton dd .index { padding: 1.563vw 0 1.042vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Service .Network .prompt { bottom: 60px; right: 150px; } .Service .Network .list dl { max-width: 550px; padding: 50px 50px 60px 40px; min-height: 340px; } .Service .Network .list dl dt { padding: 0 0 15px; } .Service .Network .list dl dd { padding: 35px 0 0; } .Service .Network .list dl dd img { width: 16px; margin: 0 9px 0 0; } .Service .Network .list dl dd .intro { line-height: 1.1; padding: 5px 0 0; } .Service .Network ul li i { width: 4px; height: 4px; } .Service .Network ul li .title { padding: 0 0 0 20px; } .Service .Network ul li.on .title { padding: 0px 0 0 55px; } .Service .Network ul li:nth-child(6).on .title { padding: 0px 55px 0 0; } .Service .Network ul li span:nth-child(1) { width: 17px; height: 17px; } .Service .Network ul li span:nth-child(2), .Service .Network ul li span:nth-child(3), .Service .Network ul li span:nth-child(4) { width: 5px; height: 5px; } @keyframes scale1 { 0% { width: 5px; height: 5px; background: rgba(0, 158, 231, 0.5); opacity: 0.3; } 70% { opacity: 0.3; } 100% { width: 110px; height: 110px; background: rgba(252, 108, 15, 0); opacity: 0; } } @-webkit-keyframes scale1 { 0% { width: 5px; height: 5px; background: rgba(0, 158, 231, 0.5); opacity: 0.3; } 70% { opacity: 0.3; } 100% { width: 110px; height: 110px; background: rgba(252, 108, 15, 0); opacity: 0; } } .Service .botton { padding: 55px 0 144px; } .Service .botton dd span:nth-child(1) { min-width: 13px; width: 13px; height: 13px; margin: 0 8px 0 0; } .Service .botton dd span:nth-child(2) { width: 266px; } .Service .botton dd .index { padding: 30px 0 20px; } } .ContactUs {} .ContactUs .Top { position: relative; } .ContactUs .Top .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ContactUs .Top .text .title { font-weight: 600; font-size: var(--font-size28); color: #ffffff; line-height: 2; } .ContactUs .Top .text dl dd>div:nth-child(1) { display: flex; align-items: center; } .ContactUs .Top .text dl dd img { filter: grayscale(100%) brightness(500%); } .ContactUs .Top .text dl dd { display: flex; max-width: 60%; align-items: baseline; flex-wrap: wrap; } .ContactUs .Top .text dl dd span { font-size: var(--font-size18); color: #ffffff; } .ContactUs .Top .text dl dd .intro { font-size: var(--font-size16); color: #ffffff; opacity: 0.6; flex: 1; display: flex; align-items: center; font-family: MONTSERRAT-REGULAR; } .ContactUs ul { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 1; } .ContactUs ul li { position: relative; } .ContactUs ul li .icon img {} .ContactUs ul li .title { font-size: var(--font-size28); color: #3B3B3B; line-height: 1.5; } .ContactUs ul li dd { display: flex; align-items: baseline; } .ContactUs ul li dd>div:nth-child(1) { display: flex; align-items: center; } .ContactUs ul li dd span { font-size: var(--font-size18); color: #3B3B3B; } .ContactUs ul li dd .intro { font-size: var(--font-size16); color: #3B3B3B; opacity: 0.6; font-family: MONTSERRAT-REGULAR; } @media(max-width: 768px) { .ContactUs { padding: 35px 0 15px; background: #F2F4F5; } .ContactUs .Top { margin: 0 0 20px; } .ContactUs .Top .text { padding: 30px 0 0; position: unset; } .ContactUs .Top .text .title { padding: 0 0 20px; color: #333; } .ContactUs .Top .text dl dd img { width: 13px; margin: 0 9px 0 0; filter: unset; } .ContactUs .Top .text dl dd { padding: 0 0 20px; max-width: 100%; align-items: unset; } .ContactUs .Top .text dl dd span { color: #333; } .ContactUs .Top .text dl dd:first-child { padding: 0 0 10px; display: block; } .ContactUs .Top .text dl dd:first-child .intro { padding: 10px 0; } .ContactUs .Top .text dl dd .intro { margin: 0 0 0 10px; color: #333; line-height: 1.6; font-size: 14px; } .ContactUs ul li { padding: 20px; width: 100%; margin: 0 0 24px; } .ContactUs ul li .icon { text-align: right; margin: 0 0 -30px; } .ContactUs ul li .icon img { width: 28px; } .ContactUs ul li .title { padding: 15px 0 0px; line-height: unset; } .ContactUs ul li dd:first-child { display: block; } .ContactUs ul li dd { padding: 15px 0 0; align-items: unset; } .ContactUs ul li dd img { width: 13px; margin: 0 9px 0 0; } .ContactUs ul li dd .intro { margin: 0 0 0 10px; font-size: 14px; } .ContactUs ul li dd:first-child .intro { margin: 10px 0 0; } } .ContactUs .Top .text .desc { color: #fff; } @media(min-width:768px) { .ContactUs { padding: 4.688vw 0; background: #F2F4F5; } .ContactUs .Top { margin: 0 0 1.979vw; } .ContactUs .Top .text { padding: 2.688vw 5.417vw; } .ContactUs .Top .text .title {} .ContactUs .Top .text .desc { padding: 0 0 1.604vw; font-size: var(--font-size18); } .ContactUs .Top .text dl dd img { width: 0.833vw; margin: 0 0.469vw 0 0; } .ContactUs .Top .text dl dd { padding: 0 0 1.042vw; } .ContactUs .Top .text dl dd:first-child { padding: 0 0 0.521vw; } .ContactUs .Top .text dl dd .intro { margin: 0 0 0 0.521vw; } .ContactUs ul li { padding: 3.125vw 2.083vw 3.125vw 3.125vw; width: calc(50% - 0.625vw); margin: 0 0 1.25vw; } .ContactUs ul li .icon img { width: 2.5vw; } .ContactUs ul li .title { /* padding: 0.781vw 0 3.125vw; min-height: 7.292vw; */ } .ContactUs ul li .smtitle { font-size: var(--font-size16); } .ContactUs ul li dd { padding: 1.146vw 0 0; } .ContactUs ul li dd img { width: 0.833vw; margin: 0 0.469vw 0 0; } .ContactUs ul li dd .intro { margin: 0 0 0 0.521vw; min-height: 1.25vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .ContactUs { padding: 90px 0; background: #F2F4F5; } .ContactUs .Top { margin: 0 0 38px; } .ContactUs .Top .text { padding: 45px 104px; } .ContactUs .Top .text .title { padding: 0 0 50px; } .ContactUs .Top .text dl dd img { width: 16px; margin: 0 9px 0 0; } .ContactUs .Top .text dl dd { padding: 0 0 20px; } .ContactUs .Top .text dl dd:first-child { padding: 0 0 10px; } .ContactUs .Top .text dl dd .intro { margin: 0 0 0 10px; } .ContactUs ul li { padding: 60px 40px 60px 60px; width: calc(50% - 12px); margin: 0 0 24px; } .ContactUs ul li .icon img { width: 48px; } .ContactUs ul li .title { /* padding: 15px 0 60px; */ /* min-height: 140px; */ } .ContactUs ul li dd { padding: 22px 0 0; } .ContactUs ul li dd img { width: 16px; margin: 0 9px 0 0; } .ContactUs ul li dd .intro { margin: 0 0 0 10px; min-height: 24px; } } .Development { padding: 100px 0 130px; } .Development ul li { display: flex; align-items: center; } .Development ul li:last-child { margin-bottom: 0; } .Development ul li:nth-child(2n) { flex-direction: row-reverse; } .Development ul li .image {} .Development ul li .title { font-size: var(--font-size36); color: #333333; } .Development ul li .intro { font-weight: 400; font-size: var(--font-size16); color: #666666; line-height: 1.5; text-align: justify; } @media(max-width:768px) { .Development { padding: 35px 0 } .Development ul li { margin: 0 0 35px 0; display: block; } .Development ul li .title { padding: 0 0 20px; } .Development ul li .image { width: auto; min-width: 100%; margin: 0 0 20px 0; } .Development ul li:nth-child(2n) .image { margin: 0 0 20px 0; } } @media(min-width:768px) { .Development { padding: 5.208vw 0 6.771vw; } .Development ul li { margin: 0 0 3.854vw 0; } .Development ul li .title { padding: 0 0 1.927vw; } .Development ul li .image { width: 51.667vw; min-width: 51.667vw; margin: 0 4.896vw 0 0; } .Development ul li:nth-child(2n) .image { margin: 0 0 0 4.896vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Development { padding: 100px 0 130px; } .Development ul li { margin: 0 0 74px 0; } .Development ul li .title { padding: 0 0 37px; } .Development ul li .image { width: 992px; min-width: 992px; margin: 0 94px 0 0; } .Development ul li:nth-child(2n) .image { margin: 0 0 0 94px; } } .Activities .Top { position: relative; } .Activities .Top li a { display: flex; align-items: center; } .Activities .Top .image {} .Activities .Top .date { font-size: var(--font-size13); color: #666666; display: flex; align-items: center; } .Activities .Top .date img {} .Activities .Top .title { font-size: var(--font-size30); color: #333333; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .Activities .Top .intro { font-weight: 500; font-size: var(--font-size18); color: #666666; line-height: 1.4; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .Activities .Top .SeeMore { background: var(--vi-color); border: 2px solid rgba(255, 255, 255, 0); font-size: var(--font-size14); } .Activities .Top .SeeMore img { filter: grayscale(100%) brightness(500%); } .Activities .Top .SeeMore:hover { border: 2px solid var(--vi-color); background: white; color: var(--vi-color); } .Activities .Top .SeeMore:hover img { filter: unset; } .Activities .swiper-pagination { width: auto; } .Activities .swiper-pagination .swiper-pagination-bullet { background: #CED1D8; border-radius: 50%; opacity: 1; } .Activities .swiper-pagination .swiper-pagination-bullet-active { background: var(--vi-color); border-radius: 50px; } .Activities .Top a:hover .title { color: var(--vi-color); } .Activities .list ul { display: flex; flex-wrap: wrap; } .Activities .list ul li { background: rgba(250, 250, 250, 1); } .Activities .list ul li .text {} .Activities .list ul li .date { font-size: var(--font-size15); color: #666666; display: flex; align-items: center; } .Activities .list ul li .date img {} .Activities .list ul li .text .title { font-size: var(--font-size22); color: #333333; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: MONTSERRAT-REGULAR; font-weight: 500; } .Activities .list ul li .text i { font-size: var(--font-size18); font-weight: 600; display: block; transform: rotate(180deg); width: max-content; } .Activities .list ul li:hover .text .title { color: var(--vi-color); } @media(max-width:768px) { .Activities .Top { padding: 35px 0; } .Activities .Top li a { display: block; } .Activities .Top .image { width: auto; min-width: auto; margin: 0 0 0 0px; padding: 0 0 35px; } .Activities .Top .date img { width: 12px; margin: 0 6px 0 0; } .Activities .Top .title { margin: 10px 0 20px; } .Activities .Top .SeeMore { margin: 20px 0; } .Activities .Top .SeeMore img { width: 14px; } .Activities .Top .SeeMore:hover { border: 2px solid var(--vi-color); } .Activities .swiper-pagination { left: 0; bottom: 0; width: 100%; } .Activities .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 7px; } .Activities .swiper-pagination .swiper-pagination-bullet-active { width: 41px; } .Activities .list { padding: 35px 0; } .Activities .list ul { padding: 0 0 10px; } .Activities .list ul li .text { padding: 20px; } .Activities .list ul li { width: 100%; margin: 0 0 20px 0; } .Activities .list ul li:nth-child(3n) { margin-right: 0; } .Activities .list ul li .date img { width: 15px; margin: 0 7px 0 0; } .Activities .list ul li .text .title { margin: 15px 0; } .Activities .list ul li .image { position: relative; padding-bottom: 56%; } .Activities .list ul li .image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } } @media(min-width:768px) { .Activities .Top { padding: 4.167vw 0; } .Activities .Top .image { width: 41.667vw; min-width: 41.667vw; margin: 0 0 0 6.771vw; } .Activities .Top .date img { width: 0.729vw; margin: 0 0.313vw 0 0; } .Activities .Top .title { margin: 0.521vw 0 1.563vw; } .Activities .Top .SeeMore { margin: 3.438vw 0; } .Activities .Top .SeeMore img { width: 1.042vw; } .Activities .Top .SeeMore:hover { border: 0.104vw solid var(--vi-color); } .Activities .swiper-pagination { width: auto; left: 31.146vw; bottom: 6.406vw; } .Activities .swiper-pagination .swiper-pagination-bullet { width: 0.313vw; height: 0.313vw; margin: 0 0.365vw; } .Activities .swiper-pagination .swiper-pagination-bullet-active { width: 2.135vw; } .Activities .list { padding: 3.646vw 0 3.438vw; } .Activities .list ul { padding: 0 0 2.604vw; } .Activities .list ul li .text { padding: 2.188vw 1.667vw; } .Activities .list ul li { width: calc(33.33% - 1.042vw); margin: 0 1.042vw 1.771vw 0; } .Activities .list ul li:nth-child(3n) { margin-right: 0; } .Activities .list ul li .date img { width: 0.781vw; margin: 0 0.365vw 0 0; } .Activities .list ul li .text .title { margin: 1.146vw 0 1.667vw; } .Activities .list ul li .image { position: relative; padding-bottom: 56%; } .Activities .list ul li .image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Activities .Top { padding: 80px 0; } .Activities .Top .image { width: 800px; min-width: 800px; margin: 0 0 0 130px; } .Activities .Top .date img { width: 14px; margin: 0 6px 0 0; } .Activities .Top .title { margin: 10px 0 30px; } .Activities .Top .SeeMore { margin: 66px 0; } .Activities .Top .SeeMore img { width: 20px; } .Activities .Top .SeeMore:hover { border: 2px solid var(--vi-color); } .Activities .swiper-pagination { width: auto; left: 598px; bottom: 123px; } .Activities .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 7px; } .Activities .swiper-pagination .swiper-pagination-bullet-active { width: 41px; } .Activities .list { padding: 70px 0 66px; } .Activities .list ul { padding: 0 0 50px; } .Activities .list ul li .text { padding: 42px 32px; } .Activities .list ul li { width: calc(33.33% - 20px); margin: 0 20px 34px 0; } .Activities .list ul li:nth-child(3n) { margin-right: 0; } .Activities .list ul li .date img { width: 15px; margin: 0 7px 0 0; } .Activities .list ul li .text .title { margin: 22px 0 32px; } .Activities .list ul li .image { position: relative; padding-bottom: 56%; } .Activities .list ul li .image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } } .NewsDetails { position: relative; background: #F5F5F7; } .NewsDetails .auto_1440 { position: relative; z-index: 1; } .NewsDetails .bgimage img { height: auto; z-index: 0; } .NewsDetails .top { display: flex; align-items: center; } .NewsDetails .top a { display: flex; align-items: center; font-size: var(--font-size14); color: #4C505F; } .NewsDetails .top a img {} .NewsDetails .top a i { font-size: var(--font-size14); } .NewsDetails .top a:not(:first-child):hover { color: var(--vi-color); } .new_warp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; } .new_warp .left { flex: 0 0 25%; max-width: 25%; margin: 4.167vw 0 0; position: sticky; top: 90px; padding: 1% 0%; border-bottom: 1px solid #cdcdcd; } .new_warp .left .title { font-size: var(--font-size24); position: relative; cursor: pointer; background-color: #009ee7; padding: 3% 4%; color: #fff; } .new_warp .left .title i { position: absolute; right: 3%; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 24px; transition: .3s; } .new_warp .left ul { margin-top: 15px; } .new_warp .left ul li { font-size: 16px; color: #333; padding: 5px; margin-bottom: 5px; padding-left: 20px; position: relative; } .new_warp .left ul li a::before { content: ' '; display: block; width: 5px; height: 5px; border-radius: 50%; top: 50%; left: 3px; transform: translateY(-50%); background-color: #333; position: absolute; } .new_warp .left ul li a:hover { text-decoration: underline; } .new_warp .left ul li a.active { color: var(--vi-color); } .new_warp .left ul li a.active::before { background-color: var(--vi-color); } .DetailsPage { background: #FFFFFF; flex: 0 0 73.3333333333%; max-width: 73.3333333333%; } .DetailsPage .title { font-size: var(--font-size46); color: #333333; line-height: 1.3; } .DetailsPage .columns { justify-content: space-between; align-items: center; } .DetailsPage .columns .date { display: flex; align-items: center; } .DetailsPage .columns .date span:nth-child(1) { font-weight: 400; font-size: var(--font-size12); color: #FFFFFF; background: var(--vi-color); display: block; } .DetailsPage .columns .date span:nth-child(2) { font-weight: 600; font-size: var(--font-size12); color: #8E8E8E; display: block; } .DetailsPage .columns .detailShare { display: flex; align-items: center; } .DetailsPage .columns .detailShare span { font-weight: 600; font-size: var(--font-size14); color: #333333; } .DetailsPage .columns .detailShare a { top: 0; font-size: var(--font-size14); transition: 0s; color: #000; } .DetailsPage .columns .detailShare a:hover { background: var(--vi-color); color: #FFFFFF; } .DetailsPage .intro { font-weight: 300; font-size: var(--font-size17); color: #757575; line-height: 1.55; /* border-bottom: 1px solid rgba(125, 132, 136, .2); */ } .DetailsPage .intro a[href] { color: #009ee7; } .DetailsPage .intro a:hover { text-decoration: underline; } .DetailsPage .bottom { display: flex; } .DetailsPage .bottom>div { display: block; background: rgba(245, 245, 247, 1); color: #333333; font-family: MONTSERRAT-REGULAR; font-weight: 400; } .DetailsPage .bottom>div:not(:last-child) {} .DetailsPage .bottom>div:not(:last-child) span { font-weight: 400; font-size: var(--font-size12); color: #FFFFFF; background: var(--vi-color); display: inline-block; } .DetailsPage .bottom>div:not(:last-child) div { font-size: var(--font-size18); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .DetailsPage .bottom>div:last-child, .DetailsPage .bottom>div:last-child a { flex: 1; display: flex; align-items: center; justify-content: center; font-size: var(--font-size18); color: #333333; line-height: 1.45; } .DetailsPage .bottom>div:last-child img {} .DetailsPage .bottom>div:hover { color: var(--vi-color); } @media(max-width:768px) { .NewsDetails { padding: 35px 0; overflow: hidden; } .NewsDetails .top { display: none; } .NewsDetails .top a i { margin: 0 10px; } .NewsDetails .top a img { width: 15px; } .DetailsPage { margin: 0 0 0; padding: 20px 10px; } .DetailsPage .columns { display: block; } .DetailsPage .columns .detailShare { margin: 10px 0 0; } .DetailsPage .title { padding: 0 0 17px; } .DetailsPage .columns .detailShare a { margin: 0 0 0 14px; width: 34px; height: 34px; line-height: 34px; } .DetailsPage .intro { padding: 20px 0 20px; } .DetailsPage .bottom { padding: 20px 0 0; display: block; } .DetailsPage .bottom>div { border-radius: 6px; padding: 15px; } .DetailsPage .columns .date span:nth-child(1) { border-radius: 2px; padding: 2px 8px; margin: 0 13px 0 0; } .DetailsPage .bottom>div:not(:last-child) { margin: 0 0 10px; width: auto; } .DetailsPage .bottom>div:not(:last-child) span { border-radius: 2px; padding: 2px 7px; margin: 0 13px 0 0; } .DetailsPage .bottom>div:not(:last-child) div { padding: 10px 0 0px; } .DetailsPage .bottom>div:last-child img { width: 11px; margin: 0 15px 0 0; } .DetailsPage .bottom>div:last-child span br { display: none; } } @media(min-width:768px) { .NewsDetails { padding: 1.073vw 0 4.427vw; overflow: hidden; } .NewsDetails .top a i { margin: 0 0.521vw; } .NewsDetails .top a img { width: 0.781vw; } .DetailsPage { margin: 4.167vw 0 0; padding: 2.167vw; } .DetailsPage .title { padding: 0 0 0.885vw; } .DetailsPage .columns .detailShare a { margin: 0 0 0 0.729vw; width: 1.771vw; height: 1.771vw; line-height: 1.771vw; } .DetailsPage .intro { padding: 4.063vw 0 4.688vw; } .DetailsPage .bottom { padding: 3.438vw 0 1.042vw; } .DetailsPage .bottom>div { border-radius: 0.625vw; padding: 1.771vw 2.344vw 2.344vw; } .DetailsPage .columns .date span:nth-child(1) { border-radius: 0.104vw; padding: 0.104vw .416667vw; margin: 0 0.677vw 0 0; } .DetailsPage .bottom>div:not(:last-child) { margin: 0 1.302vw 0 0; width: 25.99vw; } .DetailsPage .bottom>div:not(:last-child) span { border-radius: 0.104vw; padding: 0.104vw 0.365vw; margin: 0 0.677vw 0 0; } .DetailsPage .bottom>div:not(:last-child) div { padding: 1.042vw 0 0vw; } .DetailsPage .bottom>div:last-child img { width: 0.833vw; margin: 0 1.146vw 0 0; } } @media(min-width:1200px) {} @media(min-width:1600px) { .NewsDetails { /* padding: 185px 0 85px; */ overflow: hidden; } .NewsDetails .top a i { margin: 0 10px; } .NewsDetails .top a img { width: 15px; } .DetailsPage { margin: 80px 0 0; padding: 80px; } .DetailsPage .title { padding: 0 0 17px; } .DetailsPage .columns .detailShare a { margin: 0 0 0 14px; width: 34px; height: 34px; line-height: 34px; } .DetailsPage .intro { padding: 78px 0 40px; } .DetailsPage .bottom { padding: 66px 0 20px; } .DetailsPage .bottom>div { border-radius: 12px; padding: 34px 45px 45px; } .DetailsPage .columns .date span:nth-child(1) { border-radius: 2px; padding: 2px 8px; margin: 0 13px 0 0; } .DetailsPage .bottom>div:not(:last-child) { margin: 0 25px 0 0; width: 499px; } .DetailsPage .bottom>div:not(:last-child) span { border-radius: 2px; padding: 2px 7px; margin: 0 13px 0 0; } .DetailsPage .bottom>div:not(:last-child) div { padding: 20px 0 0px; } .DetailsPage .bottom>div:last-child img { width: 16px; margin: 0 22px 0 0; } } .talents { overflow: hidden; } .talents .top { display: flex; align-items: center; justify-content: space-between; } .talents .title { font-size: var(--font-size56); color: #333333; } .talents .navigation { display: flex; align-items: center; } .talents .navigation a { border-radius: 50px; display: flex; align-items: center; justify-content: center; color: #cccccc; } .talents .navigation a i { font-size: var(--font-size14); font-weight: 600; } .talents .navigation a:nth-child(2) { transform: rotate(180deg); } .talents .navigation a:hover { color: var(--vi-color); } .talents ul {} .talents ul li { position: relative; width: 100%; height: auto; } .talents ul .image {} .talents ul .image img { height: 100%; object-fit: cover; } .talents ul .swiper-slide-next .image { transition: 1s; } .talents ul .intro { font-size: var(--font-size22); color: #333333; position: absolute; bottom: 0; left: 0; } .talents ul .swiper-slide-next .intro { display: block; } .talents ul .swiper-slide-active .intro { width: 100%; color: #fff; display: flex; align-items: flex-end; background: linear-gradient(0deg, rgb(0 0 0 / 60%), transparent); } @media(max-width:768px) { .talents { padding: 35px 0; } .talents .top { margin: 0 0 20px; } .talents .navigation { display: none; } .talents .navigation a { width: 67px; height: 37px; border: 2px solid #cccccc; margin: 0 0 0 7px; } .talents .navigation a:hover { border: 2px solid var(--vi-color); } .talents ul { margin: 0 0 0; padding: 0 0 0; } .talents ul .image { height: auto; } .talents ul .swiper-slide-next .image { height: auto; } .talents ul .intro { padding: 0 5px 63px; } .talents ul .swiper-slide-active .intro { padding: 20px; min-height: unset; } .talents .swiper-pagination { position: unset; display: flex; justify-content: center; margin: 20px 0 0; } .talents .swiper-pagination-bullet { width: 6px; height: 6px; } .talents .swiper-pagination-bullet-active { width: 41px; background: var(--vi-color); border-radius: 50px; } } @media(min-width:768px) { .talents { padding: 4.688vw 0 5.208vw; } .talents .top { margin: 0 0 2.344vw; } .talents .navigation a { width: 3.49vw; height: 1.927vw; border: 0.104vw solid #cccccc; margin: 0 0 0 0.365vw; } .talents .navigation a:hover { border: 0.104vw solid var(--vi-color); } .talents ul { margin: 0 -7.813vw 0 0; padding: 0 32.396vw 0 0; } .talents ul .image { height: 27.344vw; } .talents ul .swiper-slide-next .image { height: 21.927vw; } .talents ul .intro { padding: 0 0.26vw 3.281vw; } .talents ul .swiper-slide-active .intro { padding: 1.563vw 2.604vw; min-height: 9.844vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .talents { padding: 90px 0 100px; } .talents .top { margin: 0 0 45px; } .talents .navigation a { width: 67px; height: 37px; border: 2px solid #cccccc; margin: 0 0 0 7px; } .talents .navigation a:hover { border: 2px solid var(--vi-color); } .talents ul { margin: 0 -150px 0 0; padding: 0 622px 0 0; } .talents ul .image { height: 525px; } .talents ul .swiper-slide-next .image { height: 421px; } .talents ul .intro { padding: 0 5px 63px; } .talents ul .swiper-slide-active .intro { padding: 30px 50px; min-height: 189px; } } .label { position: relative; } .label .images .image { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 1s; z-index: -1; } .label .images .image.on { visibility: unset; transition: .5s; opacity: 1; } .label .images .image img { height: 100%; object-fit: cover; } .label ul { display: flex; } .label ul li { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .label ul li .icon img {} .label ul li .title { font-weight: 300; font-size: var(--font-size20); color: #ffffff; margin-top: 15px; } .label ul li:hover { background: rgba(0, 158, 231, .9); } @media(max-width:768px) { .label ul { display: block; padding: 35px 0; } .label ul li { padding: 20px 0; border-bottom: 1px solid #cfcfcf4a; } .label ul li .icon img { height: 35px; margin: 0 0 15px; } } @media(min-width:768px) { .label ul { height: 40.625vw; } .label ul li .icon img { height: auto; margin: 0 0 0.781vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .label ul { height: 780px; } .label ul li .icon img { height: auto; margin: 0 0 15px; } } .JoinUs {} .JoinUs .title { font-size: var(--font-size56); } .JoinUs .columns {} .JoinUs .select input { background: var(--vi-color); border-radius: 50px; border: 1px solid var(--vi-color); font-weight: 400; font-size: var(--font-size16); color: #FFFFFF; } .JoinUs .layui-form-select .layui-edge { width: auto; height: auto; border-width: 0; font-size: var(--font-size12); transform: translateY(-25%); color: #FFFFFF; font-weight: 600; } .JoinUs .layui-form-selected .layui-edge { transform: translateY(-25%) rotate(180deg); margin: 0; } .JoinUs .select input::-webkit-input-placeholder { color: #ffffff; } .JoinUs .select input::-webkit-input-placeholder { color: #ffffff; } .JoinUs .select input:-moz-placeholder { color: #ffffff; } .JoinUs .select input::-moz-placeholder { color: #ffffff; } .JoinUs .select input:-ms-input-placeholder { color: #ffffff; } .JoinUs .layui-form-select dl { top: 110%; } .JoinUs .layui-form-select dl dd { font-size: var(--font-size14); line-height: 3; } .JoinUs .search { position: relative; } .JoinUs .search input { font-size: var(--font-size14); color: #666; background: #F5F5F5; border-radius: 50px; } .JoinUs .search input::-webkit-input-placeholder { color: #666; } .JoinUs .search input::-webkit-input-placeholder { color: #666; } .JoinUs .search input:-moz-placeholder { color: #666; } .JoinUs .search input::-moz-placeholder { color: #666; } .JoinUs .search input:-ms-input-placeholder { color: #666; } .JoinUs .searchBtn { position: absolute; font-size: var(--font-size19); font-weight: 600; top: 50%; transform: translateY(-50%); background: #F5F5F5; } .JoinUs ul li .top { display: flex; align-items: center; border: 1px solid #E5E5E5; cursor: pointer; } .JoinUs ul li .top span:nth-child(1) { font-size: var(--font-size20); color: #333333; font-weight: 600; display: block; flex: 1; } .JoinUs ul li .top span:nth-child(2) { font-size: var(--font-size14); color: #858585; display: block; } .JoinUs ul li .top span:nth-child(3) { display: flex; align-items: center; flex: 1; color: rgba(51, 51, 51, 1); } .JoinUs ul li .top span:nth-child(3) img { font-size: var(--font-size14); color: #333; } .JoinUs ul li .top span:nth-child(4) { font-size: var(--font-size20); color: rgba(82, 82, 82, 1); font-weight: 600; transition: .5s; } .JoinUs ul li .intro { font-size: var(--font-size16); color: rgba(51, 51, 51, .6); line-height: 1.25; background: rgba(249, 249, 249, 1); display: none; } .JoinUs ul li .intro b { color: #171A20; } .JoinUs ul li .intro a.youxiang { font-family: MONTSERRAT-REGULAR; display: inline-flex; align-items: center; justify-content: center; background: rgba(251, 108, 15, 0); border-radius: 50px; border: 1px solid var(--vi-color); color: var(--vi-color); transition: .2s; } .JoinUs ul li .intro a.youxiang img {} .JoinUs ul li .intro a.youxiang:hover { border: 1px solid #FB6C0F00; color: rgb(255, 255, 255); background: var(--vi-color); transition: .2s; } .JoinUs ul li .intro a.youxiang:hover img { filter: grayscale(100%) brightness(500%); } .JoinUs ul li.on .top { background: rgba(242, 244, 245, 1); border: 1px solid rgba(242, 244, 245, 1); } .JoinUs ul li.on .top span:last-child { color: var(--vi-color); transform: rotate(45deg); transition: .5s; } @media(max-width:768px) { .JoinUs { padding: 35px 0; } .JoinUs .columns { padding: 20px 0; display: block; } .JoinUs .select input { min-width: auto; line-height: 40px; height: 40px; padding: 0 20px; } .JoinUs .layui-form-select .layui-edge { right: 20px; } .JoinUs .search { margin: 15px 0 0; } .JoinUs .search input { width: 100%; height: 40px; padding: 0 25px; } .JoinUs .searchBtn { right: 24px; padding: 10px 0 10px 20px; } .JoinUs ul { padding: 0 0 10px; } .JoinUs ul li { margin: 0 0 20px; } .JoinUs ul li .top { padding: 20px; flex-wrap: wrap; } .JoinUs ul li .top span:nth-child(1) { min-width: auto; padding: 0 50px 0 0; } .JoinUs ul li .top span:nth-child(2) { min-width: auto; padding: 10px 0; width: 100%; display: block; } .JoinUs ul li .top span:nth-child(3) img { width: 11px; margin: 0 10px 0 0; } .JoinUs ul li .intro { padding: 20px; } .JoinUs ul li .intro a.youxiang { height: 40px; line-height: 40px; padding: 0 5px; margin: 20px 0 0; font-size: 12px; width: calc(100% + 20px); margin: 20px -10px 0; } .JoinUs ul li .intro a.youxiang img { width: 14px; margin: 0 10px 0 0; } } @media(min-width:768px) { .JoinUs { padding: 5.208vw 0 3.958vw; } .JoinUs .columns { padding: 2.916667vw 0 1.563vw; } .JoinUs .select input { min-width: 12.396vw; line-height: 3.125vw; height: 3.125vw; padding: 0 1.042vw; } .JoinUs .layui-form-select .layui-edge { right: 1.042vw; } .JoinUs .search { margin: 0 0 0 0.781vw; } .JoinUs .search input { width: 22.292vw; height: 3.125vw; padding: 0 1.302vw; } .JoinUs .searchBtn { right: 1.25vw; padding: 0.521vw 0 0.521vw 1.042vw; } .JoinUs ul { padding: 0 0 2.344vw; } .JoinUs ul li { margin: 0 0 0.521vw; } .JoinUs ul li .top { padding: 1.354vw 1.979vw; } .JoinUs ul li:hover .top { background: rgba(242, 244, 245, 1); border: 1px solid rgba(242, 244, 245, 1); } .JoinUs ul li .top span:nth-child(1) { min-width: 20.833vw; padding: 0 2.604vw 0 0; } .JoinUs ul li .top span:nth-child(2) { min-width: 21.354vw; padding: 0 2.604vw 0 0; } .JoinUs ul li .top span:nth-child(3) img { width: 0.885vw; margin: 0 0.521vw 0 0; } .JoinUs ul li .intro { padding: 2.604vw 6.51vw 2.969vw 2.344vw; } .JoinUs ul li .intro a.youxiang { height: 2.448vw; line-height: 2.448vw; padding: 0 1.146vw 0 1.563vw; margin: 2.604vw 0 0; } .JoinUs ul li .intro a.youxiang img { width: 0.938vw; margin: 0 0.729vw 0 0; } } @media(min-width:1200px) {} @media(min-width:1600px) { .JoinUs { padding: 100px 0 76px; } .JoinUs .columns { padding: 56px 0 30px; } .JoinUs .select input { min-width: 238px; line-height: 60px; height: 60px; padding: 0 20px; } .JoinUs .layui-form-select .layui-edge { right: 20px; } .JoinUs .search { margin: 0 0 0 15px; } .JoinUs .search input { width: 428px; height: 60px; padding: 0 25px; } .JoinUs .searchBtn { right: 24px; padding: 10px 0 10px 20px; } .JoinUs ul { padding: 0 0 45px; } .JoinUs ul li { margin: 0 0 10px; } .JoinUs ul li .top { padding: 26px 38px; } .JoinUs ul li .top span:nth-child(1) { min-width: 400px; padding: 0 50px 0 0; } .JoinUs ul li .top span:nth-child(2) { min-width: 410px; padding: 0 50px 0 0; } .JoinUs ul li .top span:nth-child(3) img { width: 17px; margin: 0 10px 0 0; } .JoinUs ul li .intro { padding: 50px 125px 57px 45px; } .JoinUs ul li .intro a.youxiang { height: 47px; line-height: 47px; padding: 0 22px 0 30px; margin: 50px 0 0; } .JoinUs ul li .intro a.youxiang img { width: 18px; margin: 0 14px 0 0; } } .leader { border-top: 1px solid rgba(242, 244, 245, 1); } .leader .top { display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .leader .top .title, .Capable ul li .title { font-size: var(--font-size56); color: #1B1F26; line-height: 1.1; text-align: center; position: relative; padding-bottom: 20px; } .leader .top .title::before, .Capable ul li .title::before { position: absolute; content: ' '; max-width: 200px; width: 20%; height: 4px; background-color: #009ee7; bottom: 0; left: 50%; transform: translateX(-50%); } .leader .top .intro { font-weight: 400; font-size: var(--font-size20); color: #7A7A7A; line-height: 1.3; margin-top: 20px; } .leader ul { display: flex; } .leader ul li { position: relative; height: 100%; } .leader ul li:last-child { margin-right: 0; } .leader ul li:nth-child(1) {} .leader ul li:nth-child(3) {} .leader ul li .text { position: absolute; bottom: 0; left: 0; width: 100%; } .leader ul li .text .title { font-size: var(--font-size20); color: #FFFFFF; line-height: unset; font-family: MONTSERRAT-REGULAR; font-weight: 400; } .leader ul li .text .intro { font-weight: 400; font-size: var(--font-size16); color: #FFFFFF; line-height: 1.3; display: none; } .leader ul li:hover .text { background: var(--vi-color); transition: .5s; } @media(max-width:768px) { .leader { padding: 30px 0 15px; } .leader .top { display: block; } .leader .top .title { max-width: 100%; width: 100%; padding: 0 0 15px; line-height: unset; } .leader ul li .text .title { font-size: 18px; } .leader .top .intro { max-width: 100%; width: 100%; } .leader ul { padding: 35px 0 0; display: block; } .leader ul li { width: 100%; margin: 0 0 20px 0; } .leader ul li .image img { object-fit: cover; } .leader ul li:nth-child(1) { padding: 0 0 0; } .leader ul li:nth-child(3) { padding: 0 0 0; } .leader ul li .text { padding: 30px 20px; } .leader ul li .text .intro { padding: 20px 0 10px; } } @media(min-width:768px) { .leader { padding: 5.729vw 0; } .leader .top .title { max-width: 100%; width: 100%; } .leader .top .intro { max-width: 100%; width: 100%; } .leader ul { padding: 5.208vw 0 0; } .leader ul li { width: calc(33.33% - 2.083vw); margin: 0 3.125vw 0 0; } .leader ul li:nth-child(1) { padding: 5.781vw 0 0; } .leader ul li:nth-child(3) { padding: 6.406vw 0 0; } .leader ul li .text { padding: 3.385vw 2.344vw 2.083vw; } .leader ul li .text .intro { padding: 1.042vw 0 0.521vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .leader { padding: 110px 0; } .leader .top .title { max-width: 100%; width: 100%; text-align: center; } .leader .top .intro { max-width: 100%; width: 100%; } .leader ul { padding: 100px 0 0; } .leader ul li { width: calc(33.33% - 40px); margin: 0 60px 0 0; } .leader ul li:nth-child(1) { padding: 111px 0 0; } .leader ul li:nth-child(3) { padding: 123px 0 0; } .leader ul li .text { padding: 65px 45px 40px; } .leader ul li .text .intro { padding: 20px 0 10px; } } .Capable { background: rgba(247, 249, 250, 1); overflow: hidden; } .Capable ul {} .Capable ul li { display: flex; } .Capable ul li .text { width: 50%; display: flex; flex-direction: column; justify-content: center; } .Capable ul li .image { width: 50%; } .Capable ul li .image img { height: 100%; object-fit: cover; } .Capable ul li:nth-child(2n + 1) { flex-direction: row-reverse; } .Capable ul li:nth-child(2n + 1) .text {} .Capable ul li .title { font-size: var(--font-size38); color: #3B3B3B; line-height: 1.15; } .Capable ul li .intro { font-weight: 400; font-size: var(--font-size16); color: #7A7A7A; line-height: 1.35; } @media(max-width:768px) { .Capable ul { margin: 0; } .Capable ul li { display: none; } .Capable ul li .text { padding: 20px; } .Capable ul li:nth-child(2n + 1) .text { padding: 20px; } .Capable ul li .intro { padding: 35px 0 0; } } @media(min-width:768px) { .Capable ul { margin: 0 -8.333vw; } .Capable ul li .text { padding: 5.208vw 8.333vw 5.208vw 5.208vw; } .Capable ul li:nth-child(2n + 1) .text { padding: 5.208vw 5.208vw 5.208vw 8.333vw; } .Capable ul li .intro { padding: 1.823vw 0 0; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Capable ul { margin: 0 -160px; } .Capable ul li .text { padding: 100px 160px 100px 100px; } .Capable ul li:nth-child(2n + 1) .text { padding: 100px 100px 100px 160px; } .Capable ul li .intro { padding: 35px 0 0; } } .Global { position: relative; overflow: hidden; } .Global .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .Global .text .auto_1600 { height: 100%; } .Global .columns { flex-direction: column; height: 100%; } .Global .title { font-size: var(--font-size56); color: #333333; font-weight: 400; font-family: MONTSERRAT-REGULAR; } .Global .intro { font-weight: 400; font-size: var(--font-size16); color: #7A7A7A; flex: 1; } .Global .intro { font-weight: 400; font-size: var(--font-size16); color: #7A7A7A; } .Global .date .years { display: flex; align-items: flex-end; } .Global .date .years span:nth-child(1) { color: #009ee7; line-height: .8; display: inline-block; font-weight: 600; } .Global .date .years span:nth-child(2) { font-weight: 600; font-size: var(--font-size19); color: #009ee7; } .Global .date .Htitle { font-weight: 400; font-size: var(--font-size14); color: #333333; } @media(max-width:768px) { .Global .text { position: unset; } .Global .images { position: relative; } .Global .columns { padding: 35px 0; } .Global .title { padding: 0 0 20px; line-height: unset; } .Global .intro { max-width: 100%; } .Global .date .years { padding: 15px 0; } .Global .date .years span:nth-child(1) { font-size: 65px; } .Global .date .Htitle { padding: 0 15px; } } @media(min-width:768px) { .Global .columns { padding: 4.688vw 0 4.167vw; } .Global .title { padding: 0 0 1.563vw; } .Global .intro { max-width: 62.5vw; } .Global .date .years { padding: 0 0 0.781vw; } .Global .date .years span:nth-child(1) { font-size: 10.156vw; } .Global .date .Htitle { padding: 0 1.302vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Global .columns { padding: 90px 0 80px; } .Global .title { padding: 0 0 30px; } .Global .intro { max-width: 1200px; } .Global .date .years { padding: 0 0 15px; } .Global .date .years span:nth-child(1) { font-size: 195px; } .Global .date .Htitle { padding: 0 25px; } } .Global ul li .title { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--font-size14); color: #333333; min-width: max-content; } .Global ul li { position: absolute; z-index: 2; cursor: pointer; } .Global ul li .dian { position: relative; } .Global ul li i { background: #009ee7; border-radius: 50%; position: relative; z-index: 3; display: block; } .Global ul li span:nth-child(1) { background: #009ee7; border-radius: 50%; position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%); } .Global ul li span:nth-child(2), .Global ul li span:nth-child(3), .Global ul li span:nth-child(4) { content: ''; z-index: 10; position: absolute; left: 50%; top: 50%; -webkit-border-radius: 100%; border-radius: 100%; border: 1px solid #009ee7; opacity: 0.3; -webkit-animation: scale2 3s linear infinite; animation: scale2 3s linear infinite; -webkit-animation-delay: .8s; transform: translate(-50%, -50%); animation-delay: 0s; } .Global ul li span:nth-child(3) { animation-delay: 1s; } .Global ul li span:nth-child(4) { animation-delay: 2s; } .Global ul li.on .title { color: var(--vi-color); } .Global .contact dl { position: absolute; z-index: 2; background: #fff; transform: translateX(-50%); opacity: 0; transition: .3s; visibility: hidden; } .Global .contact dl.on { opacity: 1; transition: .3s; visibility: unset; } .Global .contact dl dd { display: flex; align-items: center; } .Global .contact dl dd>div:nth-child(1) { display: flex; align-items: center; } @media(max-width:768px) { .Global .list dl { max-width: 550px; padding: 50px 50px 60px 40px; } .Global .list dl dt { padding: 0 0 15px; } .Global .list dl dd { padding: 35px 0 0; } .Global .list dl dd img { width: 16px; margin: 0 9px 0 0; } .Global .list dl dd .intro { line-height: 1.1; padding: 5px 0 0; } .Global ul li i { width: 2px; height: 2px; } .Global ul li .title { padding: 0 20px 0 0; left: 0; top: 50%; zoom: .8; transform: translateX(-100%) translateY(-50%); } .Global ul li span:nth-child(1) { width: 1px; height: 1px; } .Global ul li span:nth-child(2), .Global ul li span:nth-child(3), .Global ul li span:nth-child(4) { width: 1px; height: 1px; -webkit-animation: scale2 2s linear infinite; animation: scale2 2s linear infinite; } .Global ul li span:nth-child(4) { display: none; } @keyframes scale2 { 0% { width: 2px; height: 2px; background: rgba(0, 158, 231, 0.5); opacity: .6; } 30% { opacity: .6; } 100% { width: 15px; height: 15px; background: rgba(252, 108, 15, 0); opacity: 0; } } @-webkit-keyframes scale2 { 0% { width: 2px; height: 2px; background: rgba(0, 158, 231, 0.5); opacity: .6; } 30% { opacity: .6; } 100% { width: 15px; height: 15px; background: rgba(252, 108, 15, 0); opacity: 0; } } .Global .contact dl { transform: unset; position: unset; padding: 0 5%; margin: 20px 0 0; width: 100%; display: none; } .Global .contact dl.on { display: block; } .Global .contact dl dd img { width: 13px; margin: 0 8px 0 0; } .Global .contact dl dd .intro { margin: 0 0 0 8px; } .Global .contact dl dd { padding: 7px 0; } } @media(min-width:768px) { .Global .list dl { max-width: 28.646vw; padding: 2.604vw 2.604vw 3.125vw 2.083vw; } .Global .list dl dt { padding: 0 0 0.781vw; } .Global .list dl dd { padding: 1.823vw 0 0; } .Global .list dl dd img { width: 0.833vw; margin: 0 0.469vw 0 0; } .Global .list dl dd .intro { line-height: 1.1; padding: 0.26vw 0 0; } .Global ul li i { width: 0.208vw; height: 0.208vw; } .Global ul li .title { padding: 1.042vw 0 0; } .Global ul li span:nth-child(1) { width: 0.208vw; height: 0.208vw; } .Global ul li span:nth-child(2), .Global ul li span:nth-child(3), .Global ul li span:nth-child(4) { width: 0.26vw; height: 0.26vw; } @keyframes scale2 { 0% { width: 0.26vw; height: 0.26vw; background: rgba(0, 158, 231, 0.5); opacity: .6; } 30% { opacity: .6; } 100% { width: 3.125vw; height: 3.125vw; background: rgba(252, 108, 15, 0); opacity: 0; } } @-webkit-keyframes scale2 { 0% { width: 0.26vw; height: 0.26vw; background: rgba(0, 158, 231, 0.5); opacity: .6; } 30% { opacity: .6; } 100% { width: 3.125vw; height: 3.125vw; background: rgba(252, 108, 15, 0); opacity: 0; } } .Global .contact dl { width: 26.041667vw; padding: 1.041667vw 1.5625vw; margin: 2.604167vw 0 0; } .Global .contact dl dd { padding: 0.364583vw 0; } .Global .contact dl dd img { width: 0.833333vw; margin: 0 0.520833vw 0 0; } .Global .contact dl dd .intro { margin: 0 0 0 0.520833vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Global .list dl { max-width: 550px; padding: 50px 50px 60px 40px; } .Global .list dl dt { padding: 0 0 15px; } .Global .list dl dd { padding: 35px 0 0; } .Global .list dl dd img { width: 16px; margin: 0 9px 0 0; } .Global .list dl dd .intro { line-height: 1.1; padding: 5px 0 0; } .Global ul li i { width: 4px; height: 4px; } .Global ul li .title { padding: 20px 0 0; } .Global ul li span:nth-child(1) { width: 4px; height: 4px; } .Global ul li span:nth-child(2), .Global ul li span:nth-child(3), .Global ul li span:nth-child(4) { width: 5px; height: 5px; } @keyframes scale2 { 0% { width: 5px; height: 5px; background: rgba(0, 158, 231, 0.5); opacity: .6; } 30% { opacity: .6; } 100% { width: 60px; height: 60px; background: rgba(252, 108, 15, 0); opacity: 0; } } @-webkit-keyframes scale2 { 0% { width: 5px; height: 5px; background: rgba(0, 158, 231, 0.5); opacity: .6; } 30% { opacity: .6; } 100% { width: 60px; height: 60px; background: rgba(252, 108, 15, 0); opacity: 0; } } .Global .contact dl { width: 500px; padding: 20px 30px; margin: 50px 0 0; } .Global .contact dl dd { padding: 7px 0; } .Global .contact dl dd img { width: 16px; margin: 0 10px 0 0; } .Global .contact dl dd .intro { margin: 0 0 0 10px; } } .Milestones { overflow: hidden; position: relative; } .Milestones .title { font-size: var(--font-size56); color: #333333; } .Milestones .intro { font-weight: 400; font-size: var(--font-size16); color: #7A7A7A; } .Milestones ul {} .Milestones ul li { height: auto; background: #FFFFFF; } .Milestones ul li .logo { text-align: right; } .Milestones ul li .title { font-size: var(--font-size60); color: #333333; line-height: .8; } .Milestones ul li .Htitle { font-weight: 600; font-size: var(--font-size18); color: #333333; position: relative; } .Milestones ul li .intro { font-size: var(--font-size16); color: #7A7A7A; } .Milestones ul li .Htitle::after { content: ''; position: absolute; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%); } .Milestones dl { overflow: unset; } .Milestones dl dd { flex: 1; } .Milestones dl .Stitle { font-weight: 400; font-size: var(--font-size20); color: #333333; display: inline-block; } .Milestones dl dd:not(:first-child) .Stitle { transform: translateX(-45%); } .Milestones dl .dian span { display: block; position: relative; } .Milestones dl .dian span:nth-child(2) { background: #009ee7; border-radius: 50%; position: relative; display: block; } .Milestones dl .on .dian span:nth-child(2)::after, .Milestones dl .on .dian span:nth-child(2)::before { content: ''; background: rgba(0, 158, 231, 1); opacity: 0.3; position: absolute; top: 0; left: 0; border-radius: 50%; -webkit-animation: scale3 3s linear infinite; animation: scale3 3s linear infinite; } .Milestones dl .on .dian span:nth-child(2)::before { -webkit-animation-delay: 1.5s; } .Milestones .swiper-pagination-progressbar { width: 100%; position: unset; background: rgba(225, 230, 225, 1); height: 1px; } .Milestones .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { width: 100%; background: #009ee7; transform: translate3d(0px, 0px, 0px) scaleX(0) scaleY(1); } .Milestones dl .swiper-pagination span { width: 100%; background: #009ee7; display: block; height: 100%; transition-duration: 300ms; position: absolute; left: 0; top: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .Milestones .list { position: relative; } .Milestones .list .swiper-button-next, .Milestones .list .swiper-button-prev { background: unset; width: auto; bottom: 0px; height: auto; top: unset; font-size: var(--font-size18); transform: translateY(40%); color: rgba(0, 158, 231, 1); font-weight: 600; } .Milestones .list .swiper-button-next { right: 0; } .Milestones .list .swiper-button-prev { left: 0; } @keyframes scale3 { 0% { transform: scale(1); } 100% { transform: scale(4); opacity: 0; } } @-webkit-keyframes scale3 { 0% { transform: scale(1); } 100% { transform: scale(4); opacity: 0; } } @media(max-width:768px) { .Milestones { padding: 35px 0; } .Milestones .title { padding: 0 0 15px; } .Milestones .intro { padding: 0 0 30px; } .Milestones ul { margin: 0 0 0; padding: 0 0 0; } #swiper_img .swiper-slide { width: 100%; } .Milestones ul li { width: 100%; padding: 20px; } .Milestones ul li .logo img { width: 50px; } .Milestones ul li .title { padding: 0 0 20px 20px; } .Milestones ul li .Htitle { padding: 0 0 0 20px; margin: 0 0 10px; } .Milestones ul li .intro { padding: 0 0 0 20px; } .Milestones ul li .intro br { display: none; } .Milestones ul li .Htitle::after { width: 8px; height: 8px; border: 2px solid #009ee7; } .Milestones dl { padding: 25px 0 0; width: 100%; } .Milestones dl dd { width: 33.33%; flex: none; } .Milestones dl dd .dian { display: flex; justify-content: center; } .Milestones dl .Stitle { padding: 0 0 20px; display: block; transform: unset; text-align: center; margin: auto; } .Milestones dl .on .Stitle { font-weight: 600; } .Milestones dl dd:not(:first-child) .Stitle { display: block; transform: unset; text-align: center; margin: auto; } .Milestones dl .dian span:nth-child(2) { width: 3px; height: 3px; margin: -2px 0 0; } .Milestones dl .on .dian span:nth-child(2) { width: 6px; height: 6px; margin: -3.5px 0 0; } .Milestones dl .on .dian span:nth-child(2)::after, .Milestones dl .on .dian span:nth-child(2)::before { width: 6px; height: 6px; } .Milestones .swiper-pagination-progressbar { margin: -3px 0 0; } .Milestones dl .swiper-pagination span { display: none; } } @media(min-width:768px) { .Milestones { padding: 5.208vw 0 6.25vw; } .Milestones .title { padding: 0 0 1.302vw; } .Milestones .intro { padding: 0 0 3.646vw; } .Milestones ul { margin: 0 -8.333vw 0 0; padding: 0 19.375vw 0 0; } #swiper_img .swiper-slide { width: 35.573vw; } .Milestones ul li { width: 35.573vw; padding: 1.563vw 2.292vw 4.167vw 3.385vw; } .Milestones ul li .logo img { width: 3.594vw; } .Milestones ul li .title { padding: 0.469vw 0 2.865vw 1.042vw; } .Milestones ul li .Htitle { padding: 0 0 0 1.042vw; margin: 0 0 0.521vw; } .Milestones ul li .intro { padding: 0 0 0 1.042vw; } .Milestones ul li .Htitle::after { width: 0.417vw; height: 0.417vw; border: 0.104vw solid #009ee7; } .Milestones dl { padding: 3.906vw 0 0; margin: 0 2.604vw; } .Milestones dl .Stitle { padding: 0 0 1.042vw; } .Milestones dl .dian span:nth-child(2) { width: 0.156vw; height: 0.156vw; margin: -0.104vw 0 0; } .Milestones dl .on .dian span:nth-child(2) { width: 0.313vw; height: 0.313vw; margin: -0.182vw 0 0; } .Milestones dl .on .dian span:nth-child(2)::after, .Milestones dl .on .dian span:nth-child(2)::before { width: 0.313vw; height: 0.313vw; } .Milestones .swiper-pagination-progressbar { margin: -0.156vw 0 0; } } @media(min-width:1200px) {} @media(min-width:1600px) { .Milestones { padding: 100px 0 120px; } .Milestones .title { padding: 0 0 25px; } .Milestones .intro { padding: 0 0 70px; } .Milestones ul { margin: 0 -160px 0 0; padding: 0 372px 0 0; } #swiper_img .swiper-slide { width: 683px; } .Milestones ul li { width: 683px; padding: 30px 44px 80px 65px; } .Milestones ul li .logo img { width: 31px; } .Milestones ul li .title { padding: 9px 0 55px 20px; } .Milestones ul li .Htitle { padding: 0 0 0 20px; margin: 0 0 10px; } .Milestones ul li .intro { padding: 0 0 0 20px; } .Milestones ul li .Htitle::after { width: 8px; height: 8px; border: 2px solid #009ee7; } .Milestones dl { padding: 75px 0 0; margin: 0 50px; } .Milestones dl .Stitle { padding: 0 0 20px; } .Milestones dl .dian span:nth-child(2) { width: 3px; height: 3px; margin: -2px 0 0; } .Milestones dl .on .dian span:nth-child(2) { width: 6px; height: 6px; margin: -3.5px 0 0; } .Milestones dl .on .dian span:nth-child(2)::after, .Milestones dl .on .dian span:nth-child(2)::before { width: 6px; height: 6px; } .Milestones .swiper-pagination-progressbar { margin: -3px 0 0; } } .monitoring { overflow: hidden; } .monitoring .top { display: flex; justify-content: center; } .monitoring .top .list { background: #F2F4F5; text-align: center; cursor: pointer; } .monitoring .top .list .image { margin: auto; } .monitoring .top .list .image img { width: auto; } .monitoring .top .list .title { font-size: var(--font-size16); color: #333333; line-height: unset; } .monitoring .top .list.on, .monitoring .top .list:hover { background: #009ee7; } .monitoring .top .list.on .title, .monitoring .top .list:hover .title { color: #fff; } .monitoring ul li { position: relative; } .monitoring ul li .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: fadeInUp 2s; -webkit-animation: fadeInUp 2s; animation-timing-function: linear; } .monitoring ul li .text {} .monitoring ul li .text .icon {} .monitoring ul li .content .img { flex: 1; text-align: center; } .monitoring ul li:nth-child(1) .content .img img {} .monitoring ul li:nth-child(2) .content .img img {} .monitoring ul li .title { font-weight: 500; font-size: var(--font-size56); color: #FFFFFF; font-family: MONTSERRAT-REGULAR; } .monitoring ul li .intro { font-weight: 400; font-size: var(--font-size20); color: #FFFFFF; line-height: 1.45; opacity: 0.8; } .monitoring ul li .content a { border: 1px solid #FFFFFF; display: inline-block; } .monitoring ul li .content a img {} .monitoring ul li .content a:hover { border: 1px solid var(--vi-color); } .monitoring ul li .switchRight { position: absolute; top: 50%; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1; cursor: pointer; transition: .3s; } .monitoring ul li .switchRight:hover { box-shadow: 0 0 20px 0px #ef803a; transition: .3s; } .monitoring ul li .switchRight .iconImg1 { background: #FFFFFF; border: 1px solid #373737; } .monitoring ul li .switchRight .iconImg1 img {} .monitoring ul li .switchRight .iconImg2 img {} .monitoring ul li .content, .monitoring ul li .list2 { display: none; position: relative; } .monitoring ul li .list2>.image img, .monitoring ul li>.image img { position: absolute; height: 100%; object-fit: cover; } .monitoring ul li .content.on, .monitoring ul li .list2.on { display: block; } @media(max-width:768px) { .monitoring .top { width: 90%; padding: 15px 0; margin: 20px auto; justify-content: unset; overflow: auto; } .monitoring .top .list { min-width: 80%; height: auto; padding: 20px; margin: 0 20px 0 0; } .monitoring .top .list .image { width: auto; } .monitoring .top .list .image img { height: 40px; } .monitoring .top .list .title { padding: 15px 0 0; } .monitoring ul li .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .monitoring ul li .content { padding: 35px 0; position: unset; } .monitoring ul li .content .columns { display: block; } .monitoring ul li:nth-child(2) .content { padding: 35px 0; } .monitoring ul li .text { max-width: 100%; width: 100%; margin: 0 0 0 0; padding: 0 0 0; } .monitoring ul li .text .icon { margin: 0 0 25px; } .monitoring ul li .text .icon img { width: 40px; } .monitoring ul li .content .img { padding: 30px 0 0; } .monitoring ul li:nth-child(1) .content .img img { width: auto; } .monitoring ul li:nth-child(2) .content .img img { width: 60%; } .monitoring ul li .title { padding: 0 0 20px; } .monitoring ul li .intro { padding: 0 0 35px; } .monitoring ul li .content a { margin: 0 10px 0 0; } .monitoring ul li .content a img { width: 120px; } .monitoring ul li .switchRight { top: 65%; right: -69px; width: 138px; height: 138px; padding: 0 70px 0 10px; } .monitoring ul li .switchRight .iconImg1 { border-radius: 6px; margin: 0 0 10px; } .monitoring ul li .switchRight .iconImg1 img { width: 31px; } .monitoring ul li .switchRight .iconImg2 img { width: 16px; } } @media(min-width:768px) { .monitoring .top { padding: 3.646vw 0 2.604vw; } .monitoring .top .list { width: 21.198vw; height: 11.875vw; padding: 1.823vw 1.302vw 1.302vw; margin: 0 0.573vw; } .monitoring .top .list .image { width: 9.375vw; } .monitoring .top .list .image img { height: 5.729vw; } .monitoring .top .list .title { padding: 0.781vw 0 0; } .monitoring ul li .content { padding: 8.333vw 0 8.073vw; } .monitoring ul li:nth-child(2) .content { padding: 5.208vw 0; } .monitoring ul li .text { max-width: 36.458vw; width: 36.458vw; margin: 0 5.208vw 0 0; padding: 1.563vw 0 0; } .monitoring ul li .text .icon { margin: 0 0 2.344vw; } .monitoring ul li .text .icon img { width: 3.802vw; } .monitoring ul li:nth-child(1) .content .img img { width: 32.969vw; } .monitoring ul li:nth-child(2) .content .img img { width: 21.198vw; } .monitoring ul li .title { padding: 0 0 1.563vw; } .monitoring ul li .intro { padding: 0 0 4.948vw; } .monitoring ul li .content a { margin: 0 0.521vw 0 0; width: 7.135vw; } .monitoring ul li .content a img { width: 7.135vw; } .monitoring ul li .switchRight { top: 50%; right: -5.99vw; width: 12.396vw; height: 12.396vw; padding: 0 5.99vw 0 1.042vw; } .monitoring ul li .switchRight .iconImg1 { border-radius: 0.573vw; margin: 0 0 0.938vw; } .monitoring ul li .switchRight .iconImg1 img { width: 2.656vw; } .monitoring ul li .switchRight .iconImg2 img { width: 0.938vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .monitoring .top { padding: 70px 0 50px; } .monitoring .top .list { width: 407px; height: 228px; padding: 35px 25px 25px; margin: 0 11px; } .monitoring .top .list .image { width: 180px; } .monitoring .top .list .image img { height: 110px; } .monitoring .top .list .title { padding: 15px 0 0; } .monitoring ul li .content { padding: 160px 0 155px; } .monitoring ul li:nth-child(2) .content { padding: 100px 0; } .monitoring ul li .text { max-width: 700px; width: 700px; margin: 0 100px 0 0; padding: 30px 0 0; } .monitoring ul li .text .icon { margin: 0 0 45px; } .monitoring ul li .text .icon img { width: 73px; } .monitoring ul li:nth-child(1) .content .img img { width: 633px; } .monitoring ul li:nth-child(2) .content .img img { width: 407px; } .monitoring ul li .title { padding: 0 0 30px; } .monitoring ul li .intro { padding: 0 0 95px; } .monitoring ul li .content a { margin: 0 10px 0 0; width: 137px; } .monitoring ul li .content a img { width: 137px; } .monitoring ul li .switchRight { top: 50%; right: -115px; width: 238px; height: 238px; padding: 0 115px 0 20px; } .monitoring ul li .switchRight .iconImg1 { border-radius: 11px; margin: 0 0 18px; } .monitoring ul li .switchRight .iconImg1 img { width: 51px; } .monitoring ul li .switchRight .iconImg2 img { width: 18px; } } @media(min-width:768px) {} @media(min-width:1200px) {} @media(min-width:1600px) {} @media(min-width:768px) {} @media(min-width:1200px) {} @media(min-width:1600px) {} @media(min-width:768px) {} @media(min-width:1200px) {} @media(min-width:1600px) {} .module_HL1GBCD1 .layui-laypage { display: flex; align-items: center; justify-content: center; margin: 0; } .module_HL1GBCD1 .layui-laypage a, .module_HL1GBCD1 .layui-laypage span { padding: 0; font-size: var(--font-size13); color: #353535; display: flex; align-items: center; justify-content: center; background: #f2f4f5; border: unset; } .module_HL1GBCD1 .layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: var(--vi-color); } .module_HL1GBCD1 .layui-laypage a:hover { background-color: var(--vi-color); color: #fff; } .JoinUs .module_HL1GBCD1 .layui-laypage a, .JoinUs .module_HL1GBCD1 .layui-laypage span { background: #ffffff; } @media(max-width:768px) { .module_HL1GBCD1 .layui-laypage a, .module_HL1GBCD1 .layui-laypage span { display: none; } .module_HL1GBCD1 .loadMore { text-align: center; } .module_HL1GBCD1 .loadMore a { background: #009ee7; color: #fff; display: inline-block; margin: auto; padding: 7px 30px; font-size: 14px; border-radius: 50px; } } @media(min-width:768px) { .module_HL1GBCD1 .layui-laypage a, .module_HL1GBCD1 .layui-laypage span { margin: 0 0.365vw; width: 2.5vw; height: 2.5vw; } } @media(min-width:1200px) {} @media(min-width:1600px) { .module_HL1GBCD1 .layui-laypage a, .module_HL1GBCD1 .layui-laypage span { margin: 0 7px; width: 48px; height: 48px; } } @media(max-width:992px) { .new_warp { flex-direction: column; } .new_warp .left { position: relative; top: 0; flex: 0 0 100%; max-width: 100%; width: 100%; } .DetailsPage { flex: 0 0 100%; max-width: 100%; } } @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @media(max-width:992px) {} @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes incline { 0% { opacity: .5; transform: rotate(15deg) translateY(100%); } to { opacity: 1; transform: rotate(0deg) translateY(0%); } } @keyframes incline { 0% { opacity: .5; transform: rotate(15deg) translateY(100%); } to { opacity: 1; transform: rotate(0deg) translateY(0%); } } .incline { overflow: hidden; } .incline>span { transform-origin: left; display: block; max-width: max-content; margin: auto; font-family: MONTSERRAT-REGULAR; font-weight: 500; } .incline h1, .incline a>span { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; transform-origin: left; display: block; max-width: max-content; margin: auto; font-family: MONTSERRAT-REGULAR; font-weight: 500; } .incline h1 { font-size: var(--font-size64); display: inline-block; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate { -webkit-animation-name: rotate; animation-name: rotate } @media(max-width:768px) { .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList .mThreeNav dl dt { font-size: 12px; padding: 15px 55px; position: relative; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList .mThreeNav dl:not(:last-child) { border-bottom: 1px solid #EBEBEB; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .mThreeNav dd { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .mThreeNav dd a { display: block; padding: 15px 15px 15px 15px; border-top: 1px solid #EBEBEB; text-align: center; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .mThreeNav dd a p { margin-top: 10px; } } @media(min-width:992px) { .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav { display: block; width: 22.395833vw; border-radius: 0.885417vw 0 0 0.885417vw; padding: 1.822917vw 0vw 1.354167vw; max-height: 35.9375vw; overflow: auto; box-sizing: content-box; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav::-webkit-scrollbar { width: 0.104167vw; background-color: rgba(246, 246, 246, 1); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0.104167vw rgba(0, 0, 0, 0.1); border-radius: 0.3125vw; background-color: rgba(246, 246, 246, 1); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav::-webkit-scrollbar-thumb { border-radius: 0.104167vw; -webkit-box-shadow: inset 0 0 0.104167vw rgba(0, 0, 0, .1); background: var(--vi-color); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavList { max-width: 100%; padding: 0 0 0.260417vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavList a { color: rgba(51, 51, 51, .5); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav .subNavList>a { text-align: left; padding: 1.041667vw 2.604167vw 1.041667vw 2.864583vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav .subNavList>a:hover, .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav .subNavList.cur1>a { background: var(--vi-color); color: #ffffff; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox { background: #fff; flex: 1; margin: 0.364583vw 0 0; border-radius: 0 0.885417vw 0.885417vw 0; padding: 2.864583vw 0vw 1.5625vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl { display: flex; flex-wrap: wrap; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dt { width: 100%; font-weight: 500; font-size: var(--font-size16); color: #333333; margin: 0 0 1.302083vw; font-family: MONTSERRAT-MEDIUM; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav { margin: 0 0.78125vw 0 3.125vw; padding: 0 2.864583vw 0 0; max-height: 34.375vw; overflow: auto !important; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar { width: 0.104167vw; background-color: rgba(246, 246, 246, 1); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0.104167vw rgba(0, 0, 0, 0.1); border-radius: 0.3125vw; background-color: rgba(246, 246, 246, 1); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar-thumb { border-radius: 0.104167vw; -webkit-box-shadow: inset 0 0 0.104167vw rgba(0, 0, 0, .1); background: var(--vi-color); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd { width: calc(33.33% - 1.041667vw); margin: 0 1.5625vw 1.5625vw 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd:nth-child(3n+1) { margin-right: 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a { padding: 1.041667vw 0 .78125vw; font-size: var(--font-size14); color: #333333; text-align: center; display: block; font-family: MONTSERRAT-MEDIUM; word-wrap: break-word; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a .h1 { font-size: var(--font-size14); font-weight: unset; display: block; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a div .h2 { font-size: var(--font-size14); font-weight: unset; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a div { display: block; text-overflow: ellipsis; overflow: hidden; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a div:nth-child(2) { padding: 0.364583vw 0 0; opacity: .3; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a img { /* height: 7.8125vw; */ max-height: 180px; object-fit: contain; margin: auto; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a:nth-child(1) { background: #F6F6F6; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd:hover a div:nth-child(1) { color: var(--vi-color); } .header_bg .header { margin: 0 !important; } } @media(min-width:1200px) {} @media(min-width:1600px) { .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav { width: 430px; border-radius: 17px 0 0 17px; padding: 35px 0px 26px; max-height: 690px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavList { padding: 0 0 5px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .subNav .subNavList>a { padding: 20px 50px 20px 55px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox { margin: 7px 0 0; border-radius: 0 17px 17px 0; padding: 55px 0px 30px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dt { margin: 0 0 25px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav { margin: 0 15px 0 60px; padding: 0 55px 0 0; max-height: 660px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar { width: 2px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd { width: calc(33.33% - 20px); margin: 0 30px 30px 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a { padding: 20px 20px 15px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(2) .subNavMain .subNavBox .threeNavBox .threeNav dl dd a img { height: 150px; } } @media(min-width:992px) { .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .subNav { display: block; width: 22.395833vw; border-radius: 0.885417vw 0 0 0.885417vw; padding: 1.822917vw 0vw 1.354167vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavList { max-width: 100%; padding: 0 0 0.260417vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavList a { color: rgba(51, 51, 51, .5); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .subNav .subNavList>a { text-align: left; padding: 1.041667vw 2.604167vw 1.041667vw 2.864583vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .subNav .subNavList>a:hover, .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .subNav .subNavList.cur1>a { background: var(--vi-color); color: #ffffff; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox { background: #fff; flex: 1; margin: 0.364583vw 0 0; border-radius: 0 0.885417vw 0.885417vw 0; padding: 2.864583vw 0vw 1.5625vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a { display: flex; padding: 0vw 3.125vw; margin: 0 0 1.041667vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .image { width: 13.020833vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .image img { height: 13.020833vw; object-fit: cover; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text { flex: 1; padding: 0 5.208333vw 0 2.083333vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .title { font-size: var(--font-size20); line-height: 2; padding: 0.78125vw 0 0.520833vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .intro { line-height: 1.5; font-size: var(--font-size16); font-family: MONTSERRAT-REGULAR; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .SeeMore { line-height: 1; background: var(--vi-color); transition: .3s; margin: 0 0 0 auto; margin: 1.5625vw 0 0 auto; border-color: #009ee7; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .SeeMore img { width: 0.729167vw; filter: grayscale(100%) brightness(500%); } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .SeeMore:hover { background: transparent; border-color: #009ee7; color: #009ee7; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .SeeMore:hover img { filter: unset; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a:hover { background: #e3e3e700; } } @media(min-width:1600px) { .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .subNav { width: 430px; border-radius: 17px 0 0 17px; padding: 35px 0px 26px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavList { padding: 0 0 5px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .subNav .subNavList>a { padding: 20px 50px 20px 55px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox { background: #fff; flex: 1; margin: 0.364583vw 0 0; border-radius: 0 0.885417vw 0.885417vw 0; padding: 2.864583vw 0vw 1.5625vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a { padding: 0vw 60px; margin: 0 0 20px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .image { width: 250px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .image img { height: 250px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text { padding: 0 100px 0 40px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .title { padding: 15px 0 10px; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .SeeMore { margin: 30px 0 0 auto; } .module_hEWu4upOZcr0 .header .navBox .navList .list:nth-child(3) .subNavMain .subNavBox .threeNavBox .threeNav>a .text .SeeMore img { width: 14px; } } .error { overflow: hidden; padding: 35 0 100px; } .error .bgimage img { height: auto; } .error .title { font-size: var(--font-size48); text-align: center; line-height: unset; font-family: MONTSERRAT-REGULAR; font-weight: 500; } .error .intro { font-size: var(--font-size20); text-align: center; opacity: .5; padding: 20px 0; } .error .meddium { display: flex; align-items: center; font-size: var(--font-size20); justify-content: center; margin: 0 0 40px; } .error .meddium a { color: var(--vi-color); margin: 0 5px; background-image: linear-gradient(to right, currentColor 50%, hsla(230deg, 13%, 9%, .08) 50%); background-position: 100% 100%; background-repeat: no-repeat; background-size: 200% 1px; text-decoration: none; transition: background-position .2s; } .error .meddium a:hover { background-position: 0 100%; } .fof__animation svg { display: block; max-width: 520px; margin-left: auto; margin-right: auto } #i-fof-browser { transform-origin: 260px 304px; animation: i-fof-browser 4s infinite } #i-fof-shadow { transform-origin: 282px 410px; animation: i-fof-shadow 4s infinite } @keyframes i-fof-browser { 0%, 100% { transform: translateY(0) scale(1) } 50% { transform: translateY(-10%) scale(.9) } } @keyframes i-fof-shadow { 0%, 100% { transform: scale(1) } 50% { transform: scale(.8) } } @media(max-width:768px) { .error { padding: 35px 0; } .error .intro { padding: 12px 0; } .error .meddium { margin: 0 0 25px; } } @media(min-width:768px) { .error { padding: 9.375vw 0 5.208333vw; } .error .intro { padding: 1.041667vw 0; } .error .meddium { margin: 0 0 2.083333vw; } .error .meddium a { margin: 0 0.260417vw; } .fof__animation svg { max-width: 27.083333vw; } } @media(min-width:1600px) { .error { padding: 180px 0 100px; } .error .intro { padding: 20px 0; } .error .meddium { margin: 0 0 40px; } .error .meddium a { margin: 0 5px; } .fof__animation svg { max-width: 520px; } } .PrivacyPolicy { font-size: var(--font-size18); } @media(max-width:768px) { .PrivacyPolicy { padding: 35px 0; } } @media(min-width:768px) { .PrivacyPolicy { padding: 5.208333vw 0; } } @media(min-width:1600px) { .PrivacyPolicy { padding: 100px 0; } } .tabulation { background: #F2F4F5; } .tabulation .top {} .tabulation .top .title { font-size: var(--font-size56); color: #333333; font-family: MONTSERRAT-REGULAR; font-weight: 500; } .tabulation .top .intro { font-weight: 200; font-size: var(--font-size16); color: #959595; line-height: 1.3; } .tabulation .list dt { display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px; } .tabulation .list dt .smalltitle { font-weight: 500; font-size: var(--font-size21); color: #FFFFFF; background: var(--vi-color); border-radius: 50px; display: inline-block; text-align: center; padding: 16px 20px; min-width: 230px; border: 1px solid var(--vi-color); } .tabulation .list dl .text {} .tabulation .list dl { display: flex; flex-wrap: wrap; } .tabulation .list dl dd { background: #FFFFFF; text-align: center; } .tabulation .list dl dd:nth-child(5n) { margin-right: 0; } .tabulation .list dl dd .image { display: flex; align-items: center; justify-content: center; position: relative; padding-bottom: 100%; } .tabulation .list dl dd .image img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .tabulation .list dl dd .title { font-size: var(--font-size19); color: #3B3B3B; display: block; text-overflow: ellipsis; overflow: hidden; } .tabulation .list dl dd .intro { font-weight: 400; font-size: var(--font-size14); color: #3B3B3B; opacity: 0.6; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .tabulation .list dl dd .SeeMore { font-weight: 500; font-size: var(--font-size12); color: var(--vi-color); } .tabulation .list dl dd .SeeMore img {} .tabulation .list dl dd:hover .SeeMore { background: var(--vi-color); color: #fff; } .tabulation .list dl dd:hover .SeeMore img { filter: grayscale(100%) brightness(500%) } .tabulation .list:last-child dl { padding: 0 !important; } @media(max-width:768px) { .tabulation:last-child { padding: 0 0 35px; } .tabulation .top { padding: 35px 0 25px; } .tabulation .top .intro { padding: 15px 0 0; font-size: 14px; line-height: unset; } .tabulation .list dt { padding: 10px 20px; margin: 0 0 20px; font-size: 14px; min-width: 180px; } .tabulation .list dl .text { padding: 0 20px; } .tabulation .list dl { padding: 0 0 15px; } .tabulation .list dl dd { width: 100%; margin: 0 0 20px 0; } .tabulation .list dl dd .image img { height: 200px; padding: 20px; position: a; } .tabulation .list dl dd .title { /* margin: 0 0 15px; */ } .tabulation .list dl dd .SeeMore { margin: 15px auto 20px; padding: 7px 0; border: 1px solid rgba(255, 255, 255, .8); } .tabulation .list dl dd .SeeMore img { width: 14px; } .tabulation .list dl dd:hover .SeeMore { border: 1px solid rgba(255, 255, 255, 0); } } @media(min-width:768px) { .tabulation:last-child { padding: 0 0 4.6875vw; } .tabulation .top { padding: 4.6875vw 0 3.645833vw; } .tabulation .top .intro { padding: 1.822917vw 0 0; } .tabulation .list dt { padding: 0.833333vw 1.041667vw; margin: 0 0 2.083333vw; min-width: 11.979167vw; } .tabulation .list dl .text { padding: 0 1.041667vw; } .tabulation .list dl { padding: 0 0 4.166667vw; } .tabulation .list dl dd { width: calc(25% - (2.083333vw / 4)); margin: 0 0.520833vw 0.520833vw 0; } /* .tabulation .list dl dd { width: calc(20% - (2.083333vw / 5)); margin: 0 0.520833vw 0.520833vw 0; } */ /* .tabulation .list dl dd .image img { height: 11.979167vw; padding: 1.041667vw; } */ .tabulation .list dl dd .title { /* margin: 0 0 0.78125vw; */ } .tabulation .list dl dd .SeeMore { margin: 0.9375vw auto 1.25vw; padding: 0.625vw 0.520833vw 0.625vw 0; } .tabulation .list dl dd .SeeMore img { width: 0.729167vw; } .tabulation .list dl dd:hover .SeeMore { border: 0.104167vw solid rgba(255, 255, 255, 0); } } .tabulation .list dt { display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px; } .tabulation .list dt .smalltitle { padding: 16px 20px; min-width: 230px; border: 1px solid var(--vi-color); } .tabulation .list dt .link { padding: 16px 20px; font-size: var(--font-size21); display: flex; align-items: center; } .tabulation .list dt .link i { position: relative; width: 15px; height: 15px; display: inline-block; margin-right: 10px; } .tabulation .list dt .link i::before { content: ' '; width: 15px; height: 2px; display: inline-block; position: absolute; background-color: #333; top: 7px; } .tabulation .list dt .link i::after { content: ' '; width: 15px; height: 2px; display: inline-block; position: absolute; background-color: #333; transform: rotate(90deg); top: 7px; } .tabulation .list dt .link:hover { color: var(--vi-color); } .tabulation .list dt .smalltitle { color: #fff; } .tabulation .list dt .smalltitle:hover { background-color: #fff; color: var(--vi-color); } @media(min-width:1600px) { .tabulation:last-child { padding: 0 0 90px; } .tabulation .top { padding: 90px 0 70px; } .tabulation .top .intro { padding: 35px 0 0; } .tabulation .list dl .text { padding: 0 20px; } .tabulation .list dl { padding: 0 0 80px; } /* .tabulation .list dl dd { width: calc(20% - (40px / 5)); margin: 0 10px 10px 0; } */ .tabulation .list dl dd { width: calc(24% -(-20px / 4)); margin: 0 10px 10px 0; } .tabulation .list dl dd .image, .image_warp { position: relative; /* padding-bottom: 50%; */ } .tabulation .list dl dd .image img, .image_warp img { padding: 20px; position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; } .image_warp img { padding: 20px; position: absolute; width: 100% !important; height: 100% !important; left: 0; top: 0; /* object-fit: cover !important; */ object-fit: contain !important; } .tabulation .list dl dd .title { margin: 0 0 15px; } .tabulation .list dl dd .SeeMore { margin: 18px auto 24px; padding: 12px 10px 12px 0; } .tabulation .list dl dd .SeeMore img { width: 14px; } .tabulation .list dl dd:hover .SeeMore { border: 2px solid rgba(255, 255, 255, 0); } } .FAQS .problem { display: flex; } .FAQS .problem ul {} .FAQS .problem ul li { width: 100%; background: url('../images/103.png') no-repeat center; background-size: 100% 100%; } .FAQS .problem ul li:hover { background: url('../images/104.png') no-repeat center; background-size: 100% 100%; } @media(max-width:768px) { .FAQS .problem { display: block; } .FAQS .problem ul li { width: 100%; background: url('../images/60.png') no-repeat center; background-size: 100% 100%; } .FAQS .problem ul li:hover { background: url('../images/61.png') no-repeat center; background-size: 100% 100%; } } @media(min-width:768px) { .FAQS .problem ul { margin: 0 0 0.520833vw; } .Downloads .problem .left { width: 22.916667vw; min-width: 22.916667vw; } } @media(min-width:1600px) { .FAQS .problem ul { margin: 0 0 10px; } .Downloads .problem .left { width: 440px; min-width: 440px; } } .OnlineMessage {} .OnlineMessage .title { font-size: var(--font-size45); text-align: center; } .FAQS .problem>.title { font-size: var(--font-size45); text-align: center; margin-bottom: 20px; } .OnlineMessage .intro { font-weight: 300; font-size: var(--font-size16); color: #333333; opacity: 0.6; text-align: center; } .OnlineMessage ul { margin: auto; } .OnlineMessage ul li { display: flex; justify-content: space-between; } .OnlineMessage ul li>div {} .OnlineMessage ul li.textarea>div { width: 100%; } .OnlineMessage ul li input, .OnlineMessage ul li textarea { background: #EFF0F3; border-radius: 10px; border: 1px solid #EAECEF; font-weight: 300; font-size: var(--font-size16); color: #333; } .OnlineMessage ul li input::-webkit-input-placeholder { color: #BCBCBC; } .OnlineMessage ul li input::-webkit-input-placeholder { color: #BCBCBC; } .OnlineMessage ul li input:-moz-placeholder { color: #BCBCBC; } .OnlineMessage ul li input::-moz-placeholder { color: #BCBCBC; } .OnlineMessage ul li input:-ms-input-placeholder { color: #BCBCBC; } .OnlineMessage ul li textarea::-webkit-input-placeholder { color: #BCBCBC; } .OnlineMessage ul li textarea::-webkit-input-placeholder { color: #BCBCBC; } .OnlineMessage ul li textarea:-moz-placeholder { color: #BCBCBC; } .OnlineMessage ul li textarea::-moz-placeholder { color: #BCBCBC; } .OnlineMessage ul li textarea:-ms-input-placeholder { color: #BCBCBC; } .OnlineMessage ul li .layui-input:focus, .OnlineMessage ul li .layui-textarea:focus { border-color: var(--vi-color) !important; box-shadow: 0 0 0 0 rgba(22, 183, 119, 0) } .OnlineMessage ul li .layui-input:hover, .OnlineMessage ul li .layui-textarea:hover { border-color: var(--vi-color) !important; } .OnlineMessage ul li textarea {} .OnlineMessage ul li span { display: block; font-weight: 600; font-size: var(--font-size18); color: #333333; line-height: 1; } .OnlineMessage ul li input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #EFF0F3 inset !important; -webkit-box-flex-color: #333; } .OnlineMessage .button { background: var(--vi-color); border-radius: 50px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: var(--font-size16); color: #FFFFFF; cursor: pointer; } .OnlineMessage .button:hover { opacity: .8; } @media(max-width:768px) { .OnlineMessage { padding: 35px 0; } .OnlineMessage .title { padding: 0 0 15px; } .OnlineMessage .intro { padding: 0 0 0px; font-size: 14px; } .OnlineMessage ul { max-width: 100%; } .OnlineMessage ul li { display: block; margin: 0 0; } .OnlineMessage ul li>div { width: 100%; margin: 20px 0 0; } .OnlineMessage ul li input, .OnlineMessage ul li textarea { height: 42px; border-radius: 6px; padding: 0 20px; } .OnlineMessage ul li textarea { height: 120px; padding: 20px; } .OnlineMessage ul li span { padding: 0 0 10px; } .OnlineMessage .button { width: 160px; height: 35px; margin: 25px auto 0; } } @media(min-width:768px) { .OnlineMessage { padding: 3.802083vw 0 3.489583vw; } .OnlineMessage .title { padding: 0 0 1.041667vw; } .OnlineMessage .intro { padding: 0 0 2.083333vw; } .OnlineMessage ul { max-width: 68.645833vw; } .OnlineMessage ul li { margin: 1.822917vw 0 0; } .OnlineMessage ul li>div { width: calc(50% - 1.041667vw); } .OnlineMessage ul li input, .OnlineMessage ul li textarea { height: 3.333333vw; border-radius: 0.520833vw; padding: 0 1.041667vw; } .OnlineMessage ul li textarea { height: 7.864583vw; padding: 1.041667vw; } .OnlineMessage ul li span { padding: 0 0 0.885417vw; } .OnlineMessage .button { width: 9.895833vw; height: 2.864583vw; margin: 2.083333vw auto 0; } } @media(min-width:1600px) { .OnlineMessage { padding: 73px 0 67px; } .OnlineMessage .title { padding: 0 0 20px; } .OnlineMessage .intro { padding: 0 0 40px; } .OnlineMessage ul { max-width: 1318px; } .OnlineMessage ul li { margin: 35px 0 0; } .OnlineMessage ul li>div { width: calc(50% - 20px); } .OnlineMessage ul li input, .OnlineMessage ul li textarea { height: 64px; border-radius: 10px; padding: 0 20px; } .OnlineMessage ul li textarea { height: 151px; padding: 20px; } .OnlineMessage ul li span { padding: 0 0 17px; } .OnlineMessage .button { width: 190px; height: 55px; margin: 40px auto 0; } } html { --vi-color: #009ee7; --title-color: #272727; --text-color: #4c505f; --content-Wdith-1200: 77.0833vw; --bigTitle-fontSize-1200: 2.3958vw; --bigTitle-lineheight-1200: 2.9167vw; --smallTitle-fontsize-1200: 1.5625vw; --smallTitle-lineheight-1200: 1.8229vw; --padding-1200: 5.7292vw 0vw; --text-fontsize-1200: 0.9375vw; --text-lineheight-1200: 1.4583vw; --content-Wdith-768: 81.25vw; --bigTitle-fontSize-768: 2.875vw; --bigTitle-lineheight-768: 3.5vw; --smallTitle-fontsize-768: 1.875vw; --smallTitle-lineheight-768: 2.1875vw; --padding-768: 6.875vw 0vw; --text-fontsize-768: 1.125vw; --text-lineheight-768: 1.75vw; --content-Wdith: 100%; --bigTitle-fontSize: 22px; --bigTitle-lineheight: 30px; --smallTitle-fontsize: 16px; --smallTitle-lineheight: 23px; --text-fontsize: 14px; --text-lineheight: 24px; --padding: 35px 0px; } .module_hEWu4upOZcr0 .header .langBox { position: relative; padding: 0 .677083vw 0 0; } .module_hEWu4upOZcr0 .header .langBox::after { position: absolute; top: calc(50% - 1px); right: 0; content: ''; border-top: 6px solid rgba(251, 125, 32, .7); border-right: 4px solid #00000000; border-bottom: 4px solid #00000000; border-left: 4px solid #00000000; } .module_hEWu4upOZcr0 .header .langBox .iconfont { font-size: var(--font-size20); color: #009ee7; display: flex; align-items: center; cursor: pointer; text-transform: capitalize; } .module_hEWu4upOZcr0 .header .langBox .iconfont span { font-size: var(--font-size14); margin: 0 0 0 4px; font: var(--font-size14) HarmonyOS Sans SC, OPPOSans, PingFang SC, Source Han Sans, Microsoft YaHei; font-weight: bold; color: #e0e1e4; font-weight: bold; } .module_hEWu4upOZcr0 .header .langBox .Lhide { background-color: #fff; border-radius: 5px; position: absolute; top: 2.083333vw; right: 0%; -webkit-box-shadow: 0 5px 5px #0000000d; box-shadow: 0 5px 5px #0000000d; display: none; padding: .520833vw 0; z-index: 1; /* width: 400px; */ /* max-height: 300px; */ /* overflow-y: auto; */ } .module_hEWu4upOZcr0 .header .langBox .Lhide a { padding: 0 .520833vw; line-height: 2; display: block; color: rgba(51, 51, 51, 1); margin-left: 0; /* width:31%; */ display: inline-block; text-align: center; text-transform: capitalize; } .module_hEWu4upOZcr0 .header .langBox .Lhide a:hover { background: #e3e3e7; } @media (min-width: 1260px) { .module_hEWu4upOZcr0 .header .langBox .Lhide { top: calc(100% + 12px); } } @media (max-width: 992px) { .module_hEWu4upOZcr0 .header .langBox .iconfont { font-size: 16px; padding: 0 12px 0 0; color: #333 } .module_hEWu4upOZcr0 .header .langBox .Lhide { top: 46px; padding: 5px 0; } .module_hEWu4upOZcr0 .header .langBox .Lhide a { padding: 0 10px; } } body { padding-top: 60px !important; position: relative; -webkit-transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); left: 0px; } .module_hEWu4upOZcr0 { position: relative; z-index: 99; } .module_hEWu4upOZcr0 .header { background: #ffffff; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); height: 60px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; width: 100%; top: 0px; left: 0px; -webkit-transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: left .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); left: 0px; z-index: 4; transition: 1s; } .module_hEWu4upOZcr0 .header .commonMain { max-width: var(--content-Wdith); width: 100%; margin: 0px auto; padding: 0px 20px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: content-box; } .module_hEWu4upOZcr0 .header .navBox { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .module_hEWu4upOZcr0 .header .navBox .navList { background: #FAFAFA; display: none; position: fixed; width: 260px; right: -260px; top: 0px; bottom: 0px; padding: 50px 0px 0px; overflow-y: auto; -webkit-transition: right .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: right .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: right .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: right .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .module_hEWu4upOZcr0 .header .navBox .navList .list { border-top: 1px solid #eff1f3; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a { padding: 0px 25px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; line-height: 50px; font-size: 14px; position: relative; color: #fff; font-weight: 500; font-family: MONTSERRAT-REGULAR; } .cete_r .h3 a{ font-size: 13px !important; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 100%; border: 1px solid #D8D8D8; margin-right: 15px; } .module_hEWu4upOZcr0 .header .navBox .navList .list.cur { background: #fff; } .module_hEWu4upOZcr0 .header .navBox .navList .list.cur .h3 a::before { background: #666; border-color: #666; } .module_hEWu4upOZcr0 .header .navBox .navList .closeNavText a { visibility: hidden; } .module_hEWu4upOZcr0 .header .haderOther { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .module_hEWu4upOZcr0 .header .haderOther .login { margin-left: 15px; } .module_hEWu4upOZcr0 .header .haderOther .login .loginBtn { display: block; width: 21px; color: var(--vi-color); font-size: 21px; } .module_hEWu4upOZcr0 .header .haderOther .login .user { display: none; font-size: 14px; } .module_hEWu4upOZcr0 .header .haderOther .searchBox { margin-left: 15px; position: relative; } .module_hEWu4upOZcr0 .header .haderOther .searchBox .searchBtn { display: block; width: 21px; color: #333; font-size: 21px; } .module_hEWu4upOZcr0 .header .haderOther .navbtn { width: 26px; color: var(--vi-color); position: relative; cursor: pointer; margin-left: 15px; font-size: 26px; } .module_hEWu4upOZcr0 .header .searchformMain { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; display: none; z-index: 99; } .module_hEWu4upOZcr0 .header .searchformMain .searchform { background: #fff; padding: 10px 0px 30px; position: relative; z-index: 99; -webkit-transition: opacity .8s cubic-bezier(.2, 1, .3, 1), -webkit-transform .8s cubic-bezier(.2, 1, .3, 1); transition: opacity .8s cubic-bezier(.2, 1, .3, 1), -webkit-transform .8s cubic-bezier(.2, 1, .3, 1); -o-transition: opacity .8s cubic-bezier(.2, 1, .3, 1), -o-transform .8s cubic-bezier(.2, 1, .3, 1); -moz-transition: transform .8s cubic-bezier(.2, 1, .3, 1), opacity .8s cubic-bezier(.2, 1, .3, 1), -moz-transform .8s cubic-bezier(.2, 1, .3, 1); transition: transform .8s cubic-bezier(.2, 1, .3, 1), opacity .8s cubic-bezier(.2, 1, .3, 1); transition: transform .8s cubic-bezier(.2, 1, .3, 1), opacity .8s cubic-bezier(.2, 1, .3, 1), -webkit-transform .8s cubic-bezier(.2, 1, .3, 1), -moz-transform .8s cubic-bezier(.2, 1, .3, 1), -o-transform .8s cubic-bezier(.2, 1, .3, 1); opacity: 0; -webkit-transform: translate3d(0px, -100%, 1px); -moz-transform: translate3d(0px, -100%, 1px); transform: translate3d(0px, -100%, 1px); } .module_hEWu4upOZcr0 .header .searchformMain .searchform form { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1080px; margin: 0px auto; border-bottom: 2px solid #595959; width: 100%; padding: 20px 0px; position: relative; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form input { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0px 15px; font-size: 14px; color: #333; line-height: inherit; vertical-align: middle; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form button { left: 0px; font-size: 20px; height: 100%; top: 0px; background: none; border: none; cursor: pointer; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form .closeSearch { cursor: pointer; right: 0px; top: 0px; height: 100%; font-size: 20px; color: #333; } .module_hEWu4upOZcr0 .header .searchformMain .search_mask { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .module_hEWu4upOZcr0 .header .searchformMain.admission .searchform { -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); opacity: 1; } .module_hEWu4upOZcr0 .admissionheader { left: -260px; } .module_hEWu4upOZcr0 .admissionheader .navBox .navList { right: 0px; } .hideScroll { overflow: hidden; } .admissionBody { left: -260px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavBtn { position: absolute; right: 0px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -webkit-justify-content: right; -moz-box-pack: right; -ms-flex-pack: right; justify-content: right; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 50px; top: 0px; right: 0px; padding-right: 25px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavBtn i { width: 12px; height: 12px; display: block; position: relative; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavBtn i::after { content: ''; width: 100%; height: 2px; background: #474747; position: absolute; left: 0px; top: 50%; margin-top: -1px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavBtn i::before { content: ''; width: 2px; height: 100%; background: #474747; position: absolute; left: 50%; top: 0px; margin-left: -1px; -webkit-transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .threeNavBox { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList { position: relative; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList>a { padding: 15px 25px; border-top: 1px solid #EBEBEB; background: #f6f6f6; display: block; font-family: MONTSERRAT-REGULAR; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList>a::before { margin-right: 10px; font-family: 'commoniconFont'; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList .mThreeNav { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list.active h3 { background: #ebebeb; } .module_hEWu4upOZcr0 .header .navBox .navList .list.active h3 a::before { background: #666; border-color: #666; } .module_hEWu4upOZcr0 .header .navBox .navList .list.active .subNavBtn i::before { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .threeNavBtn { position: absolute; right: 0px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -webkit-justify-content: right; -moz-box-pack: right; -ms-flex-pack: right; justify-content: right; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; width: 40%; height: 45px; top: 0px; right: 0px; padding-right: 25px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .threeNavBtn i { width: 12px; height: 12px; display: block; position: relative; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .threeNavBtn i::after { content: ''; width: 100%; height: 2px; background: #474747; position: absolute; left: 0px; top: 50%; margin-top: -1px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .threeNavBtn i::before { content: ''; width: 2px; height: 100%; background: #474747; position: absolute; left: 50%; top: 0px; margin-left: -1px; -webkit-transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: all .4s cubic-bezier(0.4, 0.01, 0.165, 0.99); } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .mThreeNav a { display: block; padding: 15px 50px; border-top: 1px solid #EBEBEB; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList .mThreeNav a::before { margin-right: 10px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList.active1>.threeNavBtn i::before { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNavList.active1 .mThreeNav .on .threeNavBtn i::before { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } @media (min-width:768px) { .module_hEWu4upOZcr0 .header .searchformMain .searchform { padding: 0.625vw 0vw 3.125vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form { padding: 2.8125vw 0vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form input { margin: 0vw 1.875vw; font-size: 1.125vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form button { font-size: 1.5vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form .closeSearch { font-size: 1.5vw; } .module_hEWu4upOZcr0 .header .searchformMain .search_mask { background: rgba(0, 0, 0, 0); } } @media (min-width:992px) { body { padding-top: 0vw !important; } .module_hEWu4upOZcr0 .header { height: 9.1875vw; position: fixed; background: #ffffff00; box-shadow: 0vw 0vw 0vw rgba(0, 0, 0, 0.1); } @-webkit-keyframes FadeDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); opacity: 1; } } @keyframes FadeDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); opacity: 1; } } .module_hEWu4upOZcr0 .header .commonMain { padding: 0vw 4.375vw 0 3.645833vw; align-items: flex-end; } .module_hEWu4upOZcr0 .header .haderOther .navbtn { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList { padding: 0vw; width: auto; right: 0vw; margin-right: 5%; background: none; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 0vw; position: unset; overflow: visible; top: 0vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list { margin-left: 2.645833vw; padding: 0vw; border-top: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a { line-height: 2.96875vw; font-size: .833333vw; padding: 0vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a::before { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a::after { bottom: 0vw; width: 0vw; height: 0.1042vw; background: var(--vi-color); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); content: ''; position: absolute; -webkit-transition: .6s ease; -o-transition: .6s ease; -moz-transition: .6s ease; transition: .6s ease; } .module_hEWu4upOZcr0 .header .navBox .navList .list.cur { background: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list:hover .h3 a { color: var(--vi-color); } .module_hEWu4upOZcr0 .header .navBox .navList .list:hover .h3 a::after { width: 100%; } .module_hEWu4upOZcr0 .header .navBox .navList .list:first-child { margin-left: 0vw; } .module_hEWu4upOZcr0 .header .navBox .navList .closeNavText { display: none; } .module_hEWu4upOZcr0 .header .haderOther .login { margin-left: 3.125vw; } .module_hEWu4upOZcr0 .header .haderOther .searchBox { margin-left: 1.5625vw; } .module_hEWu4upOZcr0 .header .haderOther .login .user { font-size: 0.8854vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform { padding: 0.5208vw 0vw 2.6042vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form { padding: 2.3438vw 0vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form input { margin: 0vw 1.5625vw; font-size: 0.9375vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form button { font-size: 1.25vw; } .module_hEWu4upOZcr0 .header .searchformMain .searchform form .closeSearch { font-size: 1.25vw; } .module_hEWu4upOZcr0 .header .haderOther .login .loginBtn { width: 1.0938vw; font-size: 1.0938vw; } .module_hEWu4upOZcr0 .header .haderOther .login .user { font-size: 0.7292vw; } .module_hEWu4upOZcr0 .header .haderOther .searchBox { margin-left: 0.7813vw; } .module_hEWu4upOZcr0 .header .haderOther .searchBox .searchBtn { width: 1.0938vw; font-size: 1.0938vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavBtn { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain { position: absolute; min-width: 100%; left: 0; overflow: hidden; max-height: 0vw; display: block; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; overflow: hidden; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .subNavList>a { display: block; background: none; border: none; font-size: 0.8333vw; padding: 0vw .9375vw; position: relative; text-align: center; line-height: 1.4; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .subNavList>a:hover { color: var(--vi-color); } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .threeNavBtn { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .mThreeNav { display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox { display: block; padding: 1.5625vw 0vw; position: relative; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox::before { content: ''; width: 0.0521vw; height: 100%; position: absolute; left: 0vw; top: 0vw; background: #eae9f1; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav { min-width: 13.5417vw; display: none; max-height: 31.25vw; overflow: auto; margin: 0 1.041667vw 0 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar { width: 2px; height: 16px; background-color: #DFDFDF; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); border-radius: 6px; background-color: #DFDFDF; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav::-webkit-scrollbar-thumb { border-radius: 2px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1); background: var(--vi-color); } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav>a { display: block; line-height: 2.0833vw; padding: 0vw 2.0833vw; font-size: 0.8333vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav>a:hover { background: #e3e3e7; } .module_hEWu4upOZcr0 .header .navBox .navList .list:hover .subNavMain { max-height: 52.0833vw; -webkit-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; transition: all .8s ease-in-out; left: 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList>a::before { display: none; } } .module_hEWu4upOZcr0 .header.on .logo img { filter: unset; } .module_hEWu4upOZcr0 .header .logo img { height: 36px; } @media(min-width:992px) { .module_hEWu4upOZcr0 .header .logo img { height: 2.604167vw; width: auto; } .white .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a, .white .module_hEWu4upOZcr0 .header .haderOther .searchBox .searchBtn, .white .module_hEWu4upOZcr0 .header .langBox .iconfont, .white .header .topRight a, .white .header .linkRight a, .white .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a span { color: #ffffff; } .white .module_hEWu4upOZcr0 .header .langBox::after { border-top: .3125vw solid #ffffff; } .white .module_hEWu4upOZcr0 .header .navBox { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px); } .white .header .linkRight a img { filter: unset; } .module_hEWu4upOZcr0 .header.on { background: #ffffff; } .module_hEWu4upOZcr0 .header.on .navBox .navList .list h3 a, .module_hEWu4upOZcr0 .header.on .haderOther .searchBox .searchBtn, .module_hEWu4upOZcr0 .header.on .langBox .iconfont { color: #333333; } .module_hEWu4upOZcr0 .header.on { background: #ffffff; } .CPDetails .module_hEWu4upOZcr0 .header .navBox { background: rgba(255, 255, 255, 0.15); } .XWDetails .module_hEWu4upOZcr0 .header .navBox { background: rgba(255, 255, 255, 1); } .header.on .topRight { display: none; } .module_hEWu4upOZcr0 .header.on { height: 4.166667vw; } .module_hEWu4upOZcr0 .header.on .logo a { zoom: .7; } } .module_hEWu4upOZcr0 .header .logo a { display: block; position: relative; } .module_hEWu4upOZcr0 .header .logo svg { position: absolute; } .module_hEWu4upOZcr0.on .header .logo svg path { animation: opacity_ .7s; -webkit-animation: opacity_ .7s; animation-timing-function: linear; animation-fill-mode: forwards; opacity: 0; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(2) { animation-delay: 0; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(3) { animation-delay: 0.1s; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(4) { animation-delay: .2s; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(5) { animation-delay: .3s; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(6) { animation-delay: .4s; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(7) { animation-delay: .5s; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(8) { animation-delay: .6s; } .module_hEWu4upOZcr0 .header .logo svg path:nth-child(9) { animation-delay: .7s; } @-webkit-keyframes opacity_ { 0% { opacity: 0; } to { opacity: 1; } } @keyframes opacity_ { 0% { opacity: 0; } to { opacity: 1; } } .header .columns { flex-wrap: wrap; flex: 1; } .header .topRight { width: 100%; display: flex; align-items: center; justify-content: right; } .header .topRight>div { display: flex; align-items: center; } .header .topRight a { font-weight: bold; font-size: var(--font-size16); opacity: 0.7; display: block; color: #fff; } .header .topRight>div a { font-weight: bold; } .header .topRight>div a:hover { opacity: 1; } .header .linkRight1 {} .header .linkRight2 { position: relative; } .header .linkRight2::before { position: absolute; left: 0; content: ''; width: 1px; background: #6D9FCA; opacity: 0.2; } .header .linkRight a { display: flex; align-items: center; font-weight: 500; font-size: var(--font-size14); color: #333; justify-content: center; border-radius: 50px; font-family: MONTSERRAT-REGULAR; } .header .linkRight a img { filter: grayscale(100%) brightness(33%); } .header .linkRight a:hover, .header .linkRight1 a { background: #009ee7; color: #fff; } .header .linkRight1 a img { filter: unset; } .header .linkRight a:hover img { filter: unset; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a span { font-weight: 400; font-size: var(--font-size12); color: #fff; opacity: 0.2; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .subNavList>a img { display: block; } @media(max-width:992px) { .module_hEWu4upOZcr0 .header .navBox .navList .list { position: relative; } .module_hEWu4upOZcr0 .header .langBox .iconfont span { color: #000; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a { color: #000; } .module_hEWu4upOZcr0 .header .navBox { backdrop-filter: initial !important; } .module_hEWu4upOZcr0 .header .logo img { filter: unset; } .module_hEWu4upOZcr0 .header .logo img.pc { display: none } .module_hEWu4upOZcr0 .header .logo img.move { display: block } .header .columns { flex-wrap: unset; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList>a img { width: 30px; } .module_hEWu4upOZcr0 .header .logo svg { display: none; } .module_hEWu4upOZcr0 .header { transition: .4s; } .header .topRight>div { display: none; } .header .topRight .langBox { display: block; } .module_hEWu4upOZcr0 .header .navBox { width: auto; } .module_hEWu4upOZcr0 .header .langBox::after { display: none; } } @media(max-width:992px) { .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a span { font-size: 14px; margin: 0 5px 0 0; display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList>a { display: flex; align-items: center; line-height: unset; padding: 15px 45px 15px 25px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList>a img { width: 25px; margin: 0 10px 0 0; } .header .linkRight { padding: 10px 0 0 0; } .header .linkRight a img { height: 14px; margin: 0 10px 0 0; filter: unset; } .header .linkRight1 a img { height: 15px; } .header .linkRight a { width: 55%; justify-content: center; margin: auto; font-size: 13px !important; padding: 6px; background: #009ee7; color: #fff; } } @media(min-width:992px) { .module_hEWu4upOZcr0 .header .logo { /* width: 7.447917vw; */ line-height: 60px; } .module_hEWu4upOZcr0 .header .logo a { /* width: 7.447917vw; */ } .module_hEWu4upOZcr0 .header .navBox { backdrop-filter: blur(16px); border-radius: 50px; margin: 0 0 0 22px; justify-content: right; } .module_hEWu4upOZcr0 .header .logo svg { width: 4.010417vw; top: -1.692708vw; right: -0.260417vw; } .header .topRight { margin: 0 0 0.729vw; padding: 0 .572917vw 0 0; } .header .topRight>div { margin: 0 1.822917vw 0 0; } .header .topRight>div a { margin: 0 0 0 2.34375vw; } .module_hEWu4upOZcr0 .header .navBox { margin: 0 0 0 1.145833vw; } .header .linkRight1 { font-size: 14px !important; padding: 0 3.5vw 0 2.5vw; } .header .linkRight2 { padding: 0 1.5vw; } .header .linkRight2::before { top: .46875vw; width: .052083vw; height: 1.197917vw; } .header .linkRight a { width: 8.8125vw; height: 3.03125vw; } .header .linkRight a img { margin: 0 .364583vw 0 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a span { padding: 0 .416667vw 0 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .subNavList>a img { height: 2.604167vw; margin: 0 auto .9375vw; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav { padding: 1.145833vw 0vw 1.354167vw; margin: .364583vw 0 0; border-radius: .885417vw; background: #FFFFFF; display: flex; justify-content: center; width: 100%; flex-wrap: wrap; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList { padding: .520833vw 0; max-width: 18.229vw; } .header .linkRight a img { height: .9375vw; } .header .linkRight1 a img { height: .989583vw; } .module_hEWu4upOZcr0 .header .langBox::after { border-top: .3125vw solid rgba(251, 125, 32, .7); border-right: .208333vw solid #00000000; border-bottom: .208333vw solid #00000000; border-left: .208333vw solid #00000000; } } @media(max-width:992px) { .module2 li { flex-direction: column-reverse; } .module2 li:nth-child(2n) { flex-direction: column-reverse; } .module2 li>div.info, .module2 li>div.video_warp { width: 100%; } .module2 .video_warp { padding-bottom: 56%; } .microinverter .bannerInner .text .title, .recommend_warp .title { font-size: 30px; } .microinverter .bannerInner .text .intro { font-size: 24px; } .recommend_warp ul li p { font-size: 18px; line-height: 1.8; } .module2 .info .title { margin-top: 20px; } } @media(max-width:750px) { .module1 .title { font-size: 30px; } .module2 .info .title { font-size: 28px; } .introduce_warp .title { font-size: 30px; } .leader .information { flex-direction: column; } .leader .information .left_img { width: 80%; padding-bottom: 80%; } .leader .information .information_info { width: 100% !important; } } @media(max-width:450px) { .microinverter .bannerInner .text .title, .recommend_warp .title { font-size: 22px; } .introduce_warp .title { font-size: 22px; } .module1 .title { font-size: 22px; } .module2 .info .title { font-size: 28px; } .introduce_warp .title { font-size: 30px; } .microinverter .bannerInner .text .intro { font-size: 16px; } .module1 .text_content { font-size: 16px; } .introduce ul li p, .recommend_warp ul li p, .tsun .content { font-size: 16px; } .recommend_warp ul { flex-wrap: wrap; flex-direction: column; } .recommend_warp ul li { width: 100%; max-width: 100%; } } @media(min-width:1200px) { .module_hEWu4upOZcr0 .header .langBox::after { top: calc(50% - 1px); } } @media(min-width:1600px) { /* .module_hEWu4upOZcr0 .header .logo { width: 143px; } */ .module_hEWu4upOZcr0 .header .logo a { /* width: 143px; */ } .module_hEWu4upOZcr0 .header .logo svg { width: 77px; top: -32.5px; right: -5px; } .header .columns { flex-wrap: wrap; flex: 1; } .header .topRight { margin: 0 0 14px; padding: 0 11px 0 0; } .header .topRight>div { display: flex; margin: 0 35px 0 0; } .header .topRight>div a { margin: 0 0 0 45px; } .module_hEWu4upOZcr0 .header .navBox { margin: 0 0 0 22px; } .header .linkRight1 { padding: 0 10px 0 70px; } .header .linkRight2 { padding: 0 60px; } .header .linkRight2::before { top: 9px; height: 23px; } .header .linkRight a { width: 150px; height: 39px; font-size: 14px !important; border-radius: 50px; } .header .linkRight a img { margin: 0 7px 0 0; } .module_hEWu4upOZcr0 .header .navBox .navList .list .h3 a span { padding: 0 8px 0 0; display: none; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .subNavList>a img { height: 50px; margin: 0 auto 18px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav { padding: 22px 0px 26px; margin: 7px 0 0; border-radius: 17px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavList { padding: 10px 0; max-width: 350px; } .header .linkRight a img { height: 18px; } .header .linkRight1 a img { height: 18px; } .module_hEWu4upOZcr0 .header .langBox::after { top: calc(50% - 2px); border-top: 6px solid rgba(251, 125, 32, .7); border-right: 4px solid #00000000; border-bottom: 4px solid #00000000; border-left: 4px solid #00000000; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .threeNavBox .threeNav { max-height: 600px; overflow: auto; margin: 0 20px 0 0; } } @media(min-width: 1600px) { html { --content-Wdith: 1750px; } .module_hEWu4upOZcr0 .header .navBox .navList .list { margin-left: 70px; } .module_hEWu4upOZcr0 .header .navBox .navList .list h3 a { font-size: 16px; line-height: 57px; } .module_hEWu4upOZcr0 .header .navBox .navList .list .subNavMain .subNavBox .subNav .subNavList>a { font-size: 16px; padding: 0vw 40px; } .module_hEWu4upOZcr0 .header .logo img { height: 50px; } } blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } a:active, a:hover { outline: 0 } img { display: inline-block; border: none; vertical-align: middle } li { list-style: none } table { border-collapse: collapse; border-spacing: 0; max-width: 100%; } h1, h2, h3, h4 { font-weight: 700 } h5, h6 { font-weight: 500; font-size: 100% } button, input, select, textarea { font-size: 100% } button, input, optgroup, option, select, textarea { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0 } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word } body { line-height: 1.6; color: #333; color: rgba(0, 0, 0, .85); font: var(--font-size14) HarmonyOS Sans SC, OPPOSans, PingFang SC, Source Han Sans, Microsoft YaHei; } hr { height: 0; line-height: 0; margin: 10px 0; padding: 0; border: none; border-bottom: 1px solid #eee; clear: both; overflow: hidden; background: 0 0 } a { color: #333; text-decoration: none } a cite { font-style: normal; *cursor: pointer } .layui-border-box, .layui-border-box * { box-sizing: border-box } .layui-box, .layui-box * { box-sizing: content-box } .layui-clear { clear: both; *zoom: 1 } .layui-clear:after { content: '\20'; clear: both; *zoom: 1; display: block; height: 0 } .layui-clear-space { word-spacing: -5px } .layui-inline { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle } .layui-edge { position: relative; display: inline-block; vertical-align: middle; width: 0; height: 0; border-width: 6px; border-style: dashed; border-color: transparent; overflow: hidden } .layui-edge-top { top: -4px; border-bottom-color: #999; border-bottom-style: solid } .layui-edge-right { border-left-color: #999; border-left-style: solid } .layui-edge-bottom { top: 2px; border-top-color: #999; border-top-style: solid } .layui-edge-left { border-right-color: #999; border-right-style: solid } .layui-elip { text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .layui-disabled, .layui-icon, .layui-unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } .layui-disabled, .layui-disabled:hover { color: #d2d2d2 !important; cursor: not-allowed !important } .layui-circle { border-radius: 100% } .layui-show { display: block !important } .layui-hide { display: none !important } .layui-show-v { visibility: visible !important } .layui-hide-v { visibility: hidden !important } @font-face { font-family: layui-icon; src: url(../font/iconfont.eot); src: url(../font/iconfont.woff2) format('woff2'), url(../font/iconfont.woff) format('woff'), url(../font/iconfont.ttf) format('truetype'), url(../font/font/iconfont.svg) format('svg'); font-display: fallback; } .layui-icon { font-family: layui-icon !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .layui-icon-leaf:before { content: "\e701" } .layui-icon-folder:before { content: "\eabe" } .layui-icon-folder-open:before { content: "\eac1" } .layui-icon-gitee:before { content: "\e69b" } .layui-icon-github:before { content: "\e6a7" } .layui-icon-disabled:before { content: "\e6cc" } .layui-icon-moon:before { content: "\e6c2" } .layui-icon-error:before { content: "\e693" } .layui-icon-success:before { content: "\e697" } .layui-icon-question:before { content: "\e699" } .layui-icon-lock:before { content: "\e69a" } .layui-icon-eye:before { content: "\e695" } .layui-icon-eye-invisible:before { content: "\e696" } .layui-icon-backspace:before { content: "\e694" } .layui-icon-tips-fill:before { content: "\eb2e" } .layui-icon-test:before { content: "\e692" } .layui-icon-clear:before { content: "\e788" } .layui-icon-heart-fill:before { content: "\e68f" } .layui-icon-light:before { content: "\e748" } .layui-icon-music:before { content: "\e690" } .layui-icon-time:before { content: "\e68d" } .layui-icon-ie:before { content: "\e7bb" } .layui-icon-firefox:before { content: "\e686" } .layui-icon-at:before { content: "\e687" } .layui-icon-bluetooth:before { content: "\e689" } .layui-icon-chrome:before { content: "\e68a" } .layui-icon-edge:before { content: "\e68b" } .layui-icon-heart:before { content: "\e68c" } .layui-icon-key:before { content: "\e683" } .layui-icon-android:before { content: "\e684" } .layui-icon-mike:before { content: "\e6dc" } .layui-icon-mute:before { content: "\e685" } .layui-icon-gift:before { content: "\e627" } .layui-icon-windows:before { content: "\e67f" } .layui-icon-ios:before { content: "\e680" } .layui-icon-logout:before { content: "\e682" } .layui-icon-wifi:before { content: "\e7e0" } .layui-icon-rss:before { content: "\e808" } .layui-icon-email:before { content: "\e618" } .layui-icon-reduce-circle:before { content: "\e616" } .layui-icon-transfer:before { content: "\e691" } .layui-icon-service:before { content: "\e626" } .layui-icon-addition:before { content: "\e624" } .layui-icon-subtraction:before { content: "\e67e" } .layui-icon-slider:before { content: "\e714" } .layui-icon-print:before { content: "\e66d" } .layui-icon-export:before { content: "\e67d" } .layui-icon-cols:before { content: "\e610" } .layui-icon-screen-full:before { content: "\e622" } .layui-icon-screen-restore:before { content: "\e758" } .layui-icon-rate-half:before { content: "\e6c9" } .layui-icon-rate-solid:before { content: "\e67a" } .layui-icon-rate:before { content: "\e67b" } .layui-icon-cellphone:before { content: "\e678" } .layui-icon-vercode:before { content: "\e679" } .layui-icon-login-weibo:before { content: "\e675" } .layui-icon-login-qq:before { content: "\e676" } .layui-icon-login-wechat:before { content: "\e677" } .layui-icon-username:before { content: "\e66f" } .layui-icon-password:before { content: "\e673" } .layui-icon-refresh-3:before { content: "\e9aa" } .layui-icon-auz:before { content: "\e672" } .layui-icon-shrink-right:before { content: "\e668" } .layui-icon-spread-left:before { content: "\e66b" } .layui-icon-snowflake:before { content: "\e6b1" } .layui-icon-tips:before { content: "\e702" } .layui-icon-note:before { content: "\e66e" } .layui-icon-senior:before { content: "\e674" } .layui-icon-refresh-1:before { content: "\e666" } .layui-icon-refresh:before { content: "\e669" } .layui-icon-flag:before { content: "\e66c" } .layui-icon-theme:before { content: "\e66a" } .layui-icon-notice:before { content: "\e667" } .layui-icon-console:before { content: "\e665" } .layui-icon-website:before { content: "\e7ae" } .layui-icon-face-surprised:before { content: "\e664" } .layui-icon-set:before { content: "\e716" } .layui-icon-template:before { content: "\e663" } .layui-icon-app:before { content: "\e653" } .layui-icon-template-1:before { content: "\e656" } .layui-icon-home:before { content: "\e68e" } .layui-icon-female:before { content: "\e661" } .layui-icon-male:before { content: "\e662" } .layui-icon-tread:before { content: "\e6c5" } .layui-icon-praise:before { content: "\e6c6" } .layui-icon-rmb:before { content: "\e65e" } .layui-icon-more:before { content: "\e65f" } .layui-icon-camera:before { content: "\e660" } .layui-icon-cart-simple:before { content: "\e698" } .layui-icon-face-cry:before { content: "\e69c" } .layui-icon-face-smile:before { content: "\e6af" } .layui-icon-survey:before { content: "\e6b2" } .layui-icon-read:before { content: "\e705" } .layui-icon-location:before { content: "\e715" } .layui-icon-dollar:before { content: "\e659" } .layui-icon-diamond:before { content: "\e735" } .layui-icon-return:before { content: "\e65c" } .layui-icon-camera-fill:before { content: "\e65d" } .layui-icon-fire:before { content: "\e756" } .layui-icon-more-vertical:before { content: "\e671" } .layui-icon-cart:before { content: "\e657" } .layui-icon-star-fill:before { content: "\e658" } .layui-icon-prev:before { content: "\e65a" } .layui-icon-next:before { content: "\e65b" } .layui-icon-upload:before { content: "\e67c" } .layui-icon-upload-drag:before { content: "\e681" } .layui-icon-user:before { content: "\e770" } .layui-icon-file-b:before { content: "\e655" } .layui-icon-component:before { content: "\e857" } .layui-icon-find-fill:before { content: "\e670" } .layui-icon-loading:before { content: "\e63d" } .layui-icon-loading-1:before { content: "\e63e" } .layui-icon-add-1:before { content: "\e654" } .layui-icon-pause:before { content: "\e651" } .layui-icon-play:before { content: "\e652" } .layui-icon-video:before { content: "\e6ed" } .layui-icon-headset:before { content: "\e6fc" } .layui-icon-voice:before { content: "\e688" } .layui-icon-speaker:before { content: "\e645" } .layui-icon-fonts-del:before { content: "\e64f" } .layui-icon-fonts-html:before { content: "\e64b" } .layui-icon-fonts-code:before { content: "\e64e" } .layui-icon-fonts-strong:before { content: "\e62b" } .layui-icon-unlink:before { content: "\e64d" } .layui-icon-picture:before { content: "\e64a" } .layui-icon-link:before { content: "\e64c" } .layui-icon-face-smile-b:before { content: "\e650" } .layui-icon-align-center:before { content: "\e647" } .layui-icon-align-right:before { content: "\e648" } .layui-icon-align-left:before { content: "\e649" } .layui-icon-fonts-u:before { content: "\e646" } .layui-icon-fonts-i:before { content: "\e644" } .layui-icon-tabs:before { content: "\e62a" } .layui-icon-circle:before { content: "\e63f" } .layui-icon-radio:before { content: "\e643" } .layui-icon-share:before { content: "\e641" } .layui-icon-edit:before { content: "\e642" } .layui-icon-delete:before { content: "\e640" } .layui-icon-engine:before { content: "\e628" } .layui-icon-chart-screen:before { content: "\e629" } .layui-icon-chart:before { content: "\e62c" } .layui-icon-table:before { content: "\e62d" } .layui-icon-tree:before { content: "\e62e" } .layui-icon-upload-circle:before { content: "\e62f" } .layui-icon-templeate-1:before { content: "\e630" } .layui-icon-util:before { content: "\e631" } .layui-icon-layouts:before { content: "\e632" } .layui-icon-prev-circle:before { content: "\e633" } .layui-icon-carousel:before { content: "\e634" } .layui-icon-code-circle:before { content: "\e635" } .layui-icon-water:before { content: "\e636" } .layui-icon-date:before { content: "\e637" } .layui-icon-layer:before { content: "\e638" } .layui-icon-fonts-clear:before { content: "\e639" } .layui-icon-dialogue:before { content: "\e63a" } .layui-icon-cellphone-fine:before { content: "\e63b" } .layui-icon-form:before { content: "\e63c" } .layui-icon-file:before { content: "\e621" } .layui-icon-triangle-r:before { content: "\e623" } .layui-icon-triangle-d:before { content: "\e625" } .layui-icon-set-sm:before { content: "\e620" } .layui-icon-add-circle:before { content: "\e61f" } .layui-icon-layim-download:before { content: "\e61e" } .layui-icon-layim-uploadfile:before { content: "\e61d" } .layui-icon-404:before { content: "\e61c" } .layui-icon-about:before { content: "\e60b" } .layui-icon-layim-theme:before { content: "\e61b" } .layui-icon-down:before { content: "\e61a" } .layui-icon-up:before { content: "\e619" } .layui-icon-circle-dot:before { content: "\e617" } .layui-icon-set-fill:before { content: "\e614" } .layui-icon-search:before { content: "\e615" } .layui-icon-friends:before { content: "\e612" } .layui-icon-group:before { content: "\e613" } .layui-icon-reply-fill:before { content: "\e611" } .layui-icon-menu-fill:before { content: "\e60f" } .layui-icon-face-smile-fine:before { content: "\e60c" } .layui-icon-picture-fine:before { content: "\e60d" } .layui-icon-log:before { content: "\e60e" } .layui-icon-list:before { content: "\e60a" } .layui-icon-release:before { content: "\e609" } .layui-icon-add-circle-fine:before { content: "\e608" } .layui-icon-ok:before { content: "\e605" } .layui-icon-help:before { content: "\e607" } .layui-icon-chat:before { content: "\e606" } .layui-icon-top:before { content: "\e604" } .layui-icon-right:before { content: "\e602" } .layui-icon-left:before { content: "\e603" } .layui-icon-star:before { content: "\e600" } .layui-icon-download-circle:before { content: "\e601" } .layui-icon-close:before { content: "\1006" } .layui-icon-close-fill:before { content: "\1007" } .layui-icon-ok-circle:before { content: "\1005" } .layui-main { position: relative; width: 1160px; margin: 0 auto } .layui-header { position: relative; z-index: 1000; height: 60px } .layui-header a:hover { transition: all .5s; -webkit-transition: all .5s } .layui-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 999; width: 200px; overflow-x: hidden } .layui-side-scroll { position: relative; width: 220px; height: 100%; overflow-x: hidden } .layui-body { position: relative; left: 200px; right: 0; top: 0; bottom: 0; z-index: 900; width: auto; box-sizing: border-box } .layui-layout-body { overflow-x: hidden } .layui-layout-admin .layui-header { position: fixed; top: 0; left: 0; right: 0; background-color: #23292e } .layui-layout-admin .layui-side { top: 60px; width: 200px; overflow-x: hidden } .layui-layout-admin .layui-body { position: absolute; top: 60px; padding-bottom: 44px } .layui-layout-admin .layui-main { width: auto; margin: 0 15px } .layui-layout-admin .layui-footer { position: fixed; left: 200px; right: 0; bottom: 0; z-index: 990; height: 44px; line-height: 44px; padding: 0 15px; box-shadow: -1px 0 4px rgb(0 0 0 / 12%); background-color: #fafafa } .layui-layout-admin .layui-logo { position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #16baaa; font-size: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%) } .layui-layout-admin .layui-header .layui-nav { background: 0 0 } .layui-layout-left { position: absolute !important; left: 200px; top: 0 } .layui-layout-right { position: absolute !important; right: 0; top: 0 } .layui-container { position: relative; margin: 0 auto; box-sizing: border-box } .layui-fluid { position: relative; margin: 0 auto; padding: 0 15px } .layui-row:after, .layui-row:before { content: ""; display: block; clear: both } .layui-col-lg1, .layui-col-lg10, .layui-col-lg11, .layui-col-lg12, .layui-col-lg2, .layui-col-lg3, .layui-col-lg4, .layui-col-lg5, .layui-col-lg6, .layui-col-lg7, .layui-col-lg8, .layui-col-lg9, .layui-col-md1, .layui-col-md10, .layui-col-md11, .layui-col-md12, .layui-col-md2, .layui-col-md3, .layui-col-md4, .layui-col-md5, .layui-col-md6, .layui-col-md7, .layui-col-md8, .layui-col-md9, .layui-col-sm1, .layui-col-sm10, .layui-col-sm11, .layui-col-sm12, .layui-col-sm2, .layui-col-sm3, .layui-col-sm4, .layui-col-sm5, .layui-col-sm6, .layui-col-sm7, .layui-col-sm8, .layui-col-sm9, .layui-col-xl1, .layui-col-xl10, .layui-col-xl11, .layui-col-xl12, .layui-col-xl2, .layui-col-xl3, .layui-col-xl4, .layui-col-xl5, .layui-col-xl6, .layui-col-xl7, .layui-col-xl8, .layui-col-xl9, .layui-col-xs1, .layui-col-xs10, .layui-col-xs11, .layui-col-xs12, .layui-col-xs2, .layui-col-xs3, .layui-col-xs4, .layui-col-xs5, .layui-col-xs6, .layui-col-xs7, .layui-col-xs8, .layui-col-xs9 { position: relative; display: block; box-sizing: border-box } .layui-col-xs1, .layui-col-xs10, .layui-col-xs11, .layui-col-xs12, .layui-col-xs2, .layui-col-xs3, .layui-col-xs4, .layui-col-xs5, .layui-col-xs6, .layui-col-xs7, .layui-col-xs8, .layui-col-xs9 { float: left } .layui-col-xs1 { width: 8.33333333% } .layui-col-xs2 { width: 16.66666667% } .layui-col-xs3 { width: 25% } .layui-col-xs4 { width: 33.33333333% } .layui-col-xs5 { width: 41.66666667% } .layui-col-xs6 { width: 50% } .layui-col-xs7 { width: 58.33333333% } .layui-col-xs8 { width: 66.66666667% } .layui-col-xs9 { width: 75% } .layui-col-xs10 { width: 83.33333333% } .layui-col-xs11 { width: 91.66666667% } .layui-col-xs12 { width: 100% } .layui-col-xs-offset1 { margin-left: 8.33333333% } .layui-col-xs-offset2 { margin-left: 16.66666667% } .layui-col-xs-offset3 { margin-left: 25% } .layui-col-xs-offset4 { margin-left: 33.33333333% } .layui-col-xs-offset5 { margin-left: 41.66666667% } .layui-col-xs-offset6 { margin-left: 50% } .layui-col-xs-offset7 { margin-left: 58.33333333% } .layui-col-xs-offset8 { margin-left: 66.66666667% } .layui-col-xs-offset9 { margin-left: 75% } .layui-col-xs-offset10 { margin-left: 83.33333333% } .layui-col-xs-offset11 { margin-left: 91.66666667% } .layui-col-xs-offset12 { margin-left: 100% } @media screen and (max-width:767.98px) { .layui-container { padding: 0 15px } .layui-hide-xs { display: none !important } .layui-show-xs-block { display: block !important } .layui-show-xs-inline { display: inline !important } .layui-show-xs-inline-block { display: inline-block !important } } @media screen and (min-width:768px) { .layui-container { width: 720px } .layui-hide-sm { display: none !important } .layui-show-sm-block { display: block !important } .layui-show-sm-inline { display: inline !important } .layui-show-sm-inline-block { display: inline-block !important } .layui-col-sm1, .layui-col-sm10, .layui-col-sm11, .layui-col-sm12, .layui-col-sm2, .layui-col-sm3, .layui-col-sm4, .layui-col-sm5, .layui-col-sm6, .layui-col-sm7, .layui-col-sm8, .layui-col-sm9 { float: left } .layui-col-sm1 { width: 8.33333333% } .layui-col-sm2 { width: 16.66666667% } .layui-col-sm3 { width: 25% } .layui-col-sm4 { width: 33.33333333% } .layui-col-sm5 { width: 41.66666667% } .layui-col-sm6 { width: 50% } .layui-col-sm7 { width: 58.33333333% } .layui-col-sm8 { width: 66.66666667% } .layui-col-sm9 { width: 75% } .layui-col-sm10 { width: 83.33333333% } .layui-col-sm11 { width: 91.66666667% } .layui-col-sm12 { width: 100% } .layui-col-sm-offset1 { margin-left: 8.33333333% } .layui-col-sm-offset2 { margin-left: 16.66666667% } .layui-col-sm-offset3 { margin-left: 25% } .layui-col-sm-offset4 { margin-left: 33.33333333% } .layui-col-sm-offset5 { margin-left: 41.66666667% } .layui-col-sm-offset6 { margin-left: 50% } .layui-col-sm-offset7 { margin-left: 58.33333333% } .layui-col-sm-offset8 { margin-left: 66.66666667% } .layui-col-sm-offset9 { margin-left: 75% } .layui-col-sm-offset10 { margin-left: 83.33333333% } .layui-col-sm-offset11 { margin-left: 91.66666667% } .layui-col-sm-offset12 { margin-left: 100% } } @media screen and (min-width:992px) { .layui-container { width: 960px } .layui-hide-md { display: none !important } .layui-show-md-block { display: block !important } .layui-show-md-inline { display: inline !important } .layui-show-md-inline-block { display: inline-block !important } .layui-col-md1, .layui-col-md10, .layui-col-md11, .layui-col-md12, .layui-col-md2, .layui-col-md3, .layui-col-md4, .layui-col-md5, .layui-col-md6, .layui-col-md7, .layui-col-md8, .layui-col-md9 { float: left } .layui-col-md1 { width: 8.33333333% } .layui-col-md2 { width: 16.66666667% } .layui-col-md3 { width: 25% } .layui-col-md4 { width: 33.33333333% } .layui-col-md5 { width: 41.66666667% } .layui-col-md6 { width: 50% } .layui-col-md7 { width: 58.33333333% } .layui-col-md8 { width: 66.66666667% } .layui-col-md9 { width: 75% } .layui-col-md10 { width: 83.33333333% } .layui-col-md11 { width: 91.66666667% } .layui-col-md12 { width: 100% } .layui-col-md-offset1 { margin-left: 8.33333333% } .layui-col-md-offset2 { margin-left: 16.66666667% } .layui-col-md-offset3 { margin-left: 25% } .layui-col-md-offset4 { margin-left: 33.33333333% } .layui-col-md-offset5 { margin-left: 41.66666667% } .layui-col-md-offset6 { margin-left: 50% } .layui-col-md-offset7 { margin-left: 58.33333333% } .layui-col-md-offset8 { margin-left: 66.66666667% } .layui-col-md-offset9 { margin-left: 75% } .layui-col-md-offset10 { margin-left: 83.33333333% } .layui-col-md-offset11 { margin-left: 91.66666667% } .layui-col-md-offset12 { margin-left: 100% } } @media screen and (min-width:1200px) { .layui-container { width: 1150px } .layui-hide-lg { display: none !important } .layui-show-lg-block { display: block !important } .layui-show-lg-inline { display: inline !important } .layui-show-lg-inline-block { display: inline-block !important } .layui-col-lg1, .layui-col-lg10, .layui-col-lg11, .layui-col-lg12, .layui-col-lg2, .layui-col-lg3, .layui-col-lg4, .layui-col-lg5, .layui-col-lg6, .layui-col-lg7, .layui-col-lg8, .layui-col-lg9 { float: left } .layui-col-lg1 { width: 8.33333333% } .layui-col-lg2 { width: 16.66666667% } .layui-col-lg3 { width: 25% } .layui-col-lg4 { width: 33.33333333% } .layui-col-lg5 { width: 41.66666667% } .layui-col-lg6 { width: 50% } .layui-col-lg7 { width: 58.33333333% } .layui-col-lg8 { width: 66.66666667% } .layui-col-lg9 { width: 75% } .layui-col-lg10 { width: 83.33333333% } .layui-col-lg11 { width: 91.66666667% } .layui-col-lg12 { width: 100% } .layui-col-lg-offset1 { margin-left: 8.33333333% } .layui-col-lg-offset2 { margin-left: 16.66666667% } .layui-col-lg-offset3 { margin-left: 25% } .layui-col-lg-offset4 { margin-left: 33.33333333% } .layui-col-lg-offset5 { margin-left: 41.66666667% } .layui-col-lg-offset6 { margin-left: 50% } .layui-col-lg-offset7 { margin-left: 58.33333333% } .layui-col-lg-offset8 { margin-left: 66.66666667% } .layui-col-lg-offset9 { margin-left: 75% } .layui-col-lg-offset10 { margin-left: 83.33333333% } .layui-col-lg-offset11 { margin-left: 91.66666667% } .layui-col-lg-offset12 { margin-left: 100% } } @media screen and (min-width:1400px) { .layui-container { width: 1330px } .layui-hide-xl { display: none !important } .layui-show-xl-block { display: block !important } .layui-show-xl-inline { display: inline !important } .layui-show-xl-inline-block { display: inline-block !important } .layui-col-xl1, .layui-col-xl10, .layui-col-xl11, .layui-col-xl12, .layui-col-xl2, .layui-col-xl3, .layui-col-xl4, .layui-col-xl5, .layui-col-xl6, .layui-col-xl7, .layui-col-xl8, .layui-col-xl9 { float: left } .layui-col-xl1 { width: 8.33333333% } .layui-col-xl2 { width: 16.66666667% } .layui-col-xl3 { width: 25% } .layui-col-xl4 { width: 33.33333333% } .layui-col-xl5 { width: 41.66666667% } .layui-col-xl6 { width: 50% } .layui-col-xl7 { width: 58.33333333% } .layui-col-xl8 { width: 66.66666667% } .layui-col-xl9 { width: 75% } .layui-col-xl10 { width: 83.33333333% } .layui-col-xl11 { width: 91.66666667% } .layui-col-xl12 { width: 100% } .layui-col-xl-offset1 { margin-left: 8.33333333% } .layui-col-xl-offset2 { margin-left: 16.66666667% } .layui-col-xl-offset3 { margin-left: 25% } .layui-col-xl-offset4 { margin-left: 33.33333333% } .layui-col-xl-offset5 { margin-left: 41.66666667% } .layui-col-xl-offset6 { margin-left: 50% } .layui-col-xl-offset7 { margin-left: 58.33333333% } .layui-col-xl-offset8 { margin-left: 66.66666667% } .layui-col-xl-offset9 { margin-left: 75% } .layui-col-xl-offset10 { margin-left: 83.33333333% } .layui-col-xl-offset11 { margin-left: 91.66666667% } .layui-col-xl-offset12 { margin-left: 100% } } .layui-col-space1 { margin: -.5px } .layui-col-space1>* { padding: .5px } .layui-col-space2 { margin: -1px } .layui-col-space2>* { padding: 1px } .layui-col-space4 { margin: -2px } .layui-col-space4>* { padding: 2px } .layui-col-space5 { margin: -2.5px } .layui-col-space5>* { padding: 2.5px } .layui-col-space6 { margin: -3px } .layui-col-space6>* { padding: 3px } .layui-col-space8 { margin: -4px } .layui-col-space8>* { padding: 4px } .layui-col-space10 { margin: -5px } .layui-col-space10>* { padding: 5px } .layui-col-space12 { margin: -6px } .layui-col-space12>* { padding: 6px } .layui-col-space14 { margin: -7px } .layui-col-space14>* { padding: 7px } .layui-col-space15 { margin: -7.5px } .layui-col-space15>* { padding: 7.5px } .layui-col-space16 { margin: -8px } .layui-col-space16>* { padding: 8px } .layui-col-space18 { margin: -9px } .layui-col-space18>* { padding: 9px } .layui-col-space20 { margin: -10px } .layui-col-space20>* { padding: 10px } .layui-col-space22 { margin: -11px } .layui-col-space22>* { padding: 11px } .layui-col-space24 { margin: -12px } .layui-col-space24>* { padding: 12px } .layui-col-space25 { margin: -12.5px } .layui-col-space25>* { padding: 12.5px } .layui-col-space26 { margin: -13px } .layui-col-space26>* { padding: 13px } .layui-col-space28 { margin: -14px } .layui-col-space28>* { padding: 14px } .layui-col-space30 { margin: -15px } .layui-col-space30>* { padding: 15px } .layui-col-space32 { margin: -16px } .layui-col-space32>* { padding: 16px } .layui-padding-1 { padding: 4px !important } .layui-padding-2 { padding: 8px !important } .layui-padding-3 { padding: 16px !important } .layui-padding-4 { padding: 32px !important } .layui-padding-5 { padding: 48px !important } .layui-margin-1 { margin: 4px !important } .layui-margin-2 { margin: 8px !important } .layui-margin-3 { margin: 16px !important } .layui-margin-4 { margin: 32px !important } .layui-margin-5 { margin: 48px !important } .layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button { outline: 0; -webkit-appearance: none; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box } .layui-elem-quote { margin-bottom: 10px; padding: 15px; line-height: 1.8; border-left: 5px solid #16b777; border-radius: 0 2px 2px 0; background-color: #fafafa } .layui-quote-nm { border-style: solid; border-width: 1px; border-left-width: 5px; background: 0 0 } .layui-elem-field { margin-bottom: 10px; padding: 0; border-width: 1px; border-style: solid } .layui-elem-field legend { margin-left: 20px; padding: 0 10px; font-size: 20px } .layui-field-title { margin: 16px 0; border-width: 0; border-top-width: 1px } .layui-field-box { padding: 15px } .layui-field-title .layui-field-box { padding: 10px 0 } .layui-progress { position: relative; height: 6px; border-radius: 20px; background-color: #eee } .layui-progress-bar { position: absolute; left: 0; top: 0; width: 0; max-width: 100%; height: 6px; border-radius: 20px; text-align: right; background-color: #16b777; transition: all .3s; -webkit-transition: all .3s } .layui-progress-big, .layui-progress-big .layui-progress-bar { height: 18px; line-height: 18px } .layui-progress-text { position: relative; top: -20px; line-height: 18px; font-size: 12px; color: #5f5f5f } .layui-progress-big .layui-progress-text { position: static; padding: 0 10px; color: #fff } .layui-collapse { border-width: 1px; border-style: solid; border-radius: 2px } .layui-colla-content, .layui-colla-item { border-top-width: 1px; border-top-style: solid } .layui-colla-item:first-child { border-top: none } .layui-colla-title { position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden } .layui-colla-content { display: none; padding: 10px 15px; line-height: 1.6; color: #5f5f5f } .layui-colla-icon { position: absolute; left: 15px; top: 0; font-size: 14px } .layui-card { margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) } .layui-card:last-child { margin-bottom: 0 } .layui-card-header { position: relative; height: 42px; line-height: 42px; padding: 0 15px; border-bottom: 1px solid #f8f8f8; color: #333; border-radius: 2px 2px 0 0; font-size: 14px } .layui-card-body { position: relative; padding: 10px 15px; line-height: 24px } .layui-card-body[pad15] { padding: 15px } .layui-card-body[pad20] { padding: 20px } .layui-card-body .layui-table { margin: 5px 0 } .layui-card .layui-tab { margin: 0 } .layui-panel { position: relative; border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); background-color: #fff; color: #5f5f5f } .layui-panel-window { position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #eee; background-color: #fff } .layui-auxiliar-moving { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: 0 0; z-index: 9999999999 } .layui-scrollbar-hide { overflow: hidden !important } .layui-bg-red { background-color: #ff5722 !important; color: #fff !important } .layui-bg-orange { background-color: #ffb800 !important; color: #fff !important } .layui-bg-green { background-color: #16baaa !important; color: #fff !important } .layui-bg-cyan { background-color: #2f4056 !important; color: #fff !important } .layui-bg-blue { background-color: #1e9fff !important; color: #fff !important } .layui-bg-purple { background-color: #a233c6 !important; color: #fff !important } .layui-bg-black { background-color: #2f363c !important; color: #fff !important } .layui-bg-gray { background-color: #fafafa !important; color: #5f5f5f !important } .layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-input-split, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea { border-color: #eee } .layui-border { border-width: 1px; border-style: solid; color: #5f5f5f !important } .layui-border-red { border-width: 1px; border-style: solid; border-color: #ff5722 !important; color: #ff5722 !important } .layui-border-orange { border-width: 1px; border-style: solid; border-color: #ffb800 !important; color: #ffb800 !important } .layui-border-green { border-width: 1px; border-style: solid; border-color: #16baaa !important; color: #16baaa !important } .layui-border-cyan { border-width: 1px; border-style: solid; border-color: #2f4056 !important; color: #2f4056 !important } .layui-border-blue { border-width: 1px; border-style: solid; border-color: #1e9fff !important; color: #1e9fff !important } .layui-border-purple { border-width: 1px; border-style: solid; border-color: #a233c6 !important; color: #a233c6 !important } .layui-border-black { border-width: 1px; border-style: solid; border-color: #2f363c !important; color: #2f363c !important } hr.layui-border-black, hr.layui-border-blue, hr.layui-border-cyan, hr.layui-border-green, hr.layui-border-orange, hr.layui-border-purple, hr.layui-border-red { border-width: 0 0 1px } .layui-timeline-item:before { background-color: #eee } .layui-text { line-height: 1.8; font-size: 14px } .layui-text h1, .layui-text h2, .layui-text h3, .layui-text h4, .layui-text h5, .layui-text h6 { color: #3a3a3a } .layui-text h1 { font-size: 32px } .layui-text h2 { font-size: 24px } .layui-text h3 { font-size: 18px } .layui-text h4 { font-size: 16px } .layui-text h5 { font-size: 14px } .layui-text h6 { font-size: 13px } .layui-text ol, .layui-text ul { padding-left: 15px } .layui-text ul li { margin-top: 5px; list-style-type: disc } .layui-text ol li { margin-top: 5px; list-style-type: decimal } .layui-text-em, .layui-word-aux { color: #999 !important; padding-left: 5px !important; padding-right: 5px !important } .layui-text p { margin: 15px 0 } .layui-text p:first-child { margin-top: 0 } .layui-text p:last-child { margin-bottom: 0 } .layui-text a:not(.layui-btn) { color: #01aaed } .layui-text a:not(.layui-btn):hover { text-decoration: underline } .layui-text blockquote:not(.layui-elem-quote) { padding: 5px 15px; border-left: 5px solid #eee } .layui-text pre>code:not(.layui-code) { padding: 15px; font-family: "Courier New", Consolas, "Lucida Console" } .layui-font-12 { font-size: 12px !important } .layui-font-13 { font-size: 13px !important } .layui-font-14 { font-size: 14px !important } .layui-font-16 { font-size: 16px !important } .layui-font-18 { font-size: 18px !important } .layui-font-20 { font-size: 20px !important } .layui-font-22 { font-size: 22px !important } .layui-font-24 { font-size: 24px !important } .layui-font-26 { font-size: 26px !important } .layui-font-28 { font-size: 28px !important } .layui-font-30 { font-size: 30px !important } .layui-font-32 { font-size: 32px !important } .layui-font-red { color: #ff5722 !important } .layui-font-orange { color: #ffb800 !important } .layui-font-green { color: #16baaa !important } .layui-font-cyan { color: #2f4056 !important } .layui-font-blue { color: #01aaed !important } .layui-font-purple { color: #a233c6 !important } .layui-font-black { color: #000 !important } .layui-font-gray { color: #c2c2c2 !important } .layui-btn { display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; border: 1px solid transparent; padding: 0 18px; background-color: #16baaa; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } .layui-btn:hover { opacity: .8; filter: alpha(opacity=80); color: #fff } .layui-btn:active { opacity: 1; filter: alpha(opacity=100) } .layui-btn+.layui-btn { margin-left: 10px } .layui-btn-container { word-spacing: -5px } .layui-btn-container .layui-btn { margin-right: 10px; margin-bottom: 10px; word-spacing: normal } .layui-btn-container .layui-btn+.layui-btn { margin-left: 0 } .layui-table .layui-btn-container .layui-btn { margin-bottom: 9px } .layui-btn-radius { border-radius: 100px } .layui-btn .layui-icon { padding: 0 2px; vertical-align: middle\0; vertical-align: bottom } .layui-btn-primary { border-color: #d2d2d2; background: 0 0; color: #5f5f5f } .layui-btn-primary:hover { border-color: #16baaa; color: #333 } .layui-btn-normal { background-color: #1e9fff } .layui-btn-warm { background-color: #ffb800 } .layui-btn-danger { background-color: #ff5722 } .layui-btn-checked { background-color: #16b777 } .layui-btn-disabled, .layui-btn-disabled:active, .layui-btn-disabled:hover { border-color: #eee !important; background-color: #fbfbfb !important; color: #d2d2d2 !important; cursor: not-allowed !important; opacity: 1 } .layui-btn-lg { height: 44px; line-height: 44px; padding: 0 25px; font-size: 16px } .layui-btn-sm { height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px } .layui-btn-xs { height: 22px; line-height: 22px; padding: 0 5px; font-size: 12px } .layui-btn-xs i { font-size: 12px !important } .layui-btn-group { display: inline-block; vertical-align: middle; font-size: 0 } .layui-btn-group .layui-btn { margin-left: 0 !important; margin-right: 0 !important; border-left: 1px solid rgba(255, 255, 255, .5); border-radius: 0 } .layui-btn-group .layui-btn-primary { border-left: none } .layui-btn-group .layui-btn-primary:hover { border-color: #d2d2d2; color: #16baaa } .layui-btn-group .layui-btn:first-child { border-left: none; border-radius: 2px 0 0 2px } .layui-btn-group .layui-btn-primary:first-child { border-left: 1px solid #d2d2d2 } .layui-btn-group .layui-btn:last-child { border-radius: 0 2px 2px 0 } .layui-btn-group .layui-btn+.layui-btn { margin-left: 0 } .layui-btn-group+.layui-btn-group { margin-left: 10px } .layui-btn-fluid { width: 100% } .layui-input, .layui-select, .layui-textarea { height: 38px; line-height: 1.3; line-height: 38px\9; border-width: 1px; border-style: solid; background-color: #fff; color: rgba(0, 0, 0, .85); border-radius: 2px } .layui-input::-webkit-input-placeholder, .layui-select::-webkit-input-placeholder, .layui-textarea::-webkit-input-placeholder { line-height: 1.3 } .layui-input, .layui-textarea { display: block; width: 100%; padding-left: 10px } .layui-input:hover, .layui-textarea:hover { border-color: #d2d2d2 !important } .layui-input:focus, .layui-textarea:focus { border-color: var(--vi-color) !important; box-shadow: 0 0 0 3px rgba(22, 183, 119, .08) } .layui-textarea { position: relative; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical } .layui-input[disabled], .layui-textarea[disabled] { background-color: #fafafa } .layui-select { padding: 0 10px } .layui-form input[type=checkbox], .layui-form input[type=radio], .layui-form select { display: none } .layui-form [lay-ignore] { display: initial } .layui-form-item { position: relative; margin-bottom: 15px; clear: both; *zoom: 1 } .layui-form-item:after { content: '\20'; clear: both; *zoom: 1; display: block; height: 0 } .layui-form-label { position: relative; float: left; display: block; padding: 9px 15px; width: 80px; font-weight: 400; line-height: 20px; text-align: right } .layui-form-label-col { display: block; float: none; padding: 9px 0; line-height: 20px; text-align: left } .layui-form-item .layui-inline { margin-bottom: 5px; margin-right: 10px } .layui-input-block, .layui-input-inline { position: relative } .layui-input-block { margin-left: 110px; min-height: 36px } .layui-input-inline { display: inline-block; vertical-align: middle } .layui-form-item .layui-input-inline { float: left; width: 190px; margin-right: 10px } .layui-form-text .layui-input-inline { width: auto } .layui-form-mid { position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px } .layui-form-danger+.layui-form-select .layui-input, .layui-form-danger:focus { border-color: #ff5722 !important; box-shadow: 0 0 0 3px rgba(255, 87, 34, .08) } .layui-input-prefix, .layui-input-split, .layui-input-suffix, .layui-input-suffix .layui-input-affix { position: absolute; right: 0; top: 0; padding: 0 10px; width: 35px; height: 100%; text-align: center; transition: all .3s; box-sizing: border-box } .layui-input-prefix { left: 0; border-radius: 2px 0 0 2px } .layui-input-suffix { right: 0; border-radius: 0 2px 2px 0 } .layui-input-split { border-width: 1px; border-style: solid } .layui-input-prefix .layui-icon, .layui-input-split .layui-icon, .layui-input-suffix .layui-icon { position: relative; font-size: 16px; color: #5f5f5f; transition: all .3s } .layui-input-group { position: relative; display: table; box-sizing: border-box } .layui-input-group>* { display: table-cell; vertical-align: middle; position: relative } .layui-input-group .layui-input { padding-right: 15px } .layui-input-group>.layui-input-prefix { width: auto; border-right: 0 } .layui-input-group>.layui-input-suffix { width: auto; border-left: 0 } .layui-input-group .layui-input-split { white-space: nowrap } .layui-input-wrap { position: relative; line-height: 38px } .layui-input-wrap .layui-input { padding-right: 35px } .layui-input-wrap .layui-input::-ms-clear, .layui-input-wrap .layui-input::-ms-reveal { display: none } .layui-input-wrap .layui-input-prefix+.layui-input, .layui-input-wrap .layui-input-prefix~* .layui-input { padding-left: 35px } .layui-input-wrap .layui-input-split+.layui-input, .layui-input-wrap .layui-input-split~* .layui-input { padding-left: 45px } .layui-input-wrap .layui-input-prefix~.layui-form-select { position: static } .layui-input-wrap .layui-input-prefix, .layui-input-wrap .layui-input-split, .layui-input-wrap .layui-input-suffix { pointer-events: none } .layui-input-wrap .layui-input:hover+.layui-input-split { border-color: #d2d2d2 } .layui-input-wrap .layui-input:focus+.layui-input-split { border-color: #16b777 } .layui-input-wrap .layui-input.layui-form-danger:focus+.layui-input-split { border-color: #ff5722 } .layui-input-wrap .layui-input-prefix.layui-input-split { border-width: 0; border-right-width: 1px } .layui-input-affix { line-height: 38px } .layui-input-suffix .layui-input-affix { right: auto; left: -35px } .layui-input-affix .layui-icon { color: rgba(0, 0, 0, .8); pointer-events: auto !important; cursor: pointer } .layui-input-affix .layui-icon-clear { color: rgba(0, 0, 0, .3) } .layui-input-affix .layui-icon:hover { color: rgba(0, 0, 0, .6) } .layui-input-wrap .layui-input-number { width: 24px; padding: 0 } .layui-input-wrap .layui-input-number .layui-icon { position: absolute; right: 0; width: 100%; height: 50%; line-height: normal; font-size: 12px } .layui-input-wrap .layui-input-number .layui-icon:before { position: absolute; left: 50%; top: 50%; margin-top: -6px; margin-left: -6px } .layui-input-wrap .layui-input-number .layui-icon-up { top: 0; border-bottom: 1px solid #eee } .layui-input-wrap .layui-input-number .layui-icon-down { bottom: 0 } .layui-input-wrap .layui-input-number .layui-icon:hover { font-weight: 700 } .layui-input-wrap .layui-input[type=number]::-webkit-inner-spin-button, .layui-input-wrap .layui-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none !important } .layui-input-wrap .layui-input[type=number] { -moz-appearance: textfield } .layui-input-wrap .layui-input[type=number].layui-input-number-out-of-range { color: #ff5722 } .layui-form-select { position: relative; color: #5f5f5f } .layui-form-select .layui-input { padding-right: 30px; cursor: pointer } .layui-form-select .layui-edge { position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s } .layui-form-select dl { display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #eee; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box } .layui-form-select dl dd, .layui-form-select dl dt { padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .layui-form-select dl dt { font-size: 12px; color: #999 } .layui-form-select dl dd { cursor: pointer } .layui-form-select dl dd:hover { background-color: #f8f8f8; -webkit-transition: .5s all; transition: .5s all } .layui-form-select .layui-select-group dd { padding-left: 20px } .layui-form-select dl dd.layui-select-tips { padding-left: 10px !important; color: #999 } .layui-form-select dl dd.layui-this { background-color: #f8f8f8; color: var(--vi-color); font-weight: 700 } .layui-form-select dl dd.layui-disabled { background-color: #fff } .layui-form-selected dl { display: block } .layui-form-selected .layui-edge { margin-top: -9px; -webkit-transform: rotate(180deg); transform: rotate(180deg) } .layui-form-selected .layui-edge { margin-top: -3px\0 } :root .layui-form-selected .layui-edge { margin-top: -9px\0/IE9 } .layui-form-selectup dl { top: auto; bottom: 42px } .layui-select-none { margin: 5px 0; text-align: center; color: #999 } .layui-select-disabled .layui-disabled { border-color: #eee !important } .layui-select-disabled .layui-edge { border-top-color: #d2d2d2 } .layui-form-checkbox { position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box } .layui-form-checkbox>* { display: inline-block; vertical-align: middle } .layui-form-checkbox>div { padding: 0 11px; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .layui-form-checkbox>div>.layui-icon { line-height: normal } .layui-form-checkbox:hover>div { background-color: #c2c2c2 } .layui-form-checkbox>i { position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255, 255, 255, 0); font-size: 20px; text-align: center; box-sizing: border-box } .layui-form-checkbox:hover>i { border-color: #c2c2c2; color: #c2c2c2 } .layui-form-checked, .layui-form-checked:hover { border-color: #16b777 } .layui-form-checked:hover>div, .layui-form-checked>div { background-color: #16b777 } .layui-form-checked:hover>i, .layui-form-checked>i { color: #16b777 } .layui-form-item .layui-form-checkbox { margin-top: 4px } .layui-form-checkbox.layui-checkbox-disabled>div { background-color: #eee !important } .layui-form [lay-checkbox] { display: none } .layui-form-checkbox[lay-skin=primary] { height: auto !important; line-height: normal !important; min-width: 18px; min-height: 18px; border: none !important; margin-right: 0; padding-left: 24px; padding-right: 0; background: 0 0 } .layui-form-checkbox[lay-skin=primary]>div { margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: 0 0; color: #5f5f5f } .layui-form-checkbox[lay-skin=primary]>i { right: auto; left: 0; width: 16px; height: 16px; line-height: 14px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear } .layui-form-checkbox[lay-skin=primary]:hover>i { border-color: #16b777; color: #fff } .layui-form-checked[lay-skin=primary]>i { border-color: #16b777 !important; background-color: #16b777; color: #fff } .layui-checkbox-disabled[lay-skin=primary]>div { background: 0 0 !important } .layui-form-checked.layui-checkbox-disabled[lay-skin=primary]>i { background: #eee !important; border-color: #eee !important } .layui-checkbox-disabled[lay-skin=primary]:hover>i { border-color: #d2d2d2 } .layui-form-item .layui-form-checkbox[lay-skin=primary] { margin-top: 10px } .layui-form-checkbox[lay-skin=primary]>.layui-icon-indeterminate { border-color: #16b777 } .layui-form-checkbox[lay-skin=primary]>.layui-icon-indeterminate:before { content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777 } .layui-form-switch { position: relative; display: inline-block; vertical-align: middle; height: 24px; line-height: 22px; min-width: 44px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; box-sizing: border-box; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear } .layui-form-switch>i { position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear } .layui-form-switch>div { position: relative; top: 0; margin-left: 21px; padding: 0 !important; text-align: center !important; color: #999 !important; font-style: normal !important; font-size: 12px } .layui-form-onswitch { border-color: #16b777; background-color: #16b777 } .layui-form-onswitch>i { left: 100%; margin-left: -21px; background-color: #fff } .layui-form-onswitch>div { margin-left: 0; margin-right: 21px; color: #fff !important } .layui-checkbox-disabled { border-color: #eee !important } .layui-checkbox-disabled>div { color: #c2c2c2 !important } .layui-checkbox-disabled>i { border-color: #eee !important } .layui-checkbox-disabled:hover>i { color: #fff !important } .layui-form-radio { display: inline-block; vertical-align: middle; line-height: 28px; margin: 6px 10px 0 0; padding-right: 10px; cursor: pointer; font-size: 0 } .layui-form-radio>* { display: inline-block; vertical-align: middle; font-size: 14px } .layui-form-radio>i { margin-right: 8px; font-size: 22px; color: #c2c2c2 } .layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i { color: #16b777 } .layui-radio-disabled>i { color: #eee !important } .layui-radio-disabled>* { color: #c2c2c2 !important } .layui-form [lay-radio] { display: none } .layui-form-pane .layui-form-label { width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box } .layui-form-pane .layui-input-inline { margin-left: -1px } .layui-form-pane .layui-input-block { margin-left: 110px; left: -1px } .layui-form-pane .layui-input { border-radius: 0 2px 2px 0 } .layui-form-pane .layui-form-text .layui-form-label { float: none; width: 100%; border-radius: 2px; box-sizing: border-box; text-align: left } .layui-form-pane .layui-form-text .layui-input-inline { display: block; margin: 0; top: -1px; clear: both } .layui-form-pane .layui-form-text .layui-input-block { margin: 0; left: 0; top: -1px } .layui-form-pane .layui-form-text .layui-textarea { min-height: 100px; border-radius: 0 0 2px 2px } .layui-form-pane .layui-form-checkbox { margin: 4px 0 4px 10px } .layui-form-pane .layui-form-radio, .layui-form-pane .layui-form-switch { margin-top: 6px; margin-left: 10px } .layui-form-pane .layui-form-item[pane] { position: relative; border-width: 1px; border-style: solid } .layui-form-pane .layui-form-item[pane] .layui-form-label { position: absolute; left: 0; top: 0; height: 100%; border-width: 0; border-right-width: 1px } .layui-form-pane .layui-form-item[pane] .layui-input-inline { margin-left: 110px } @media screen and (max-width:450px) { .layui-form-item .layui-form-label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .layui-form-item .layui-inline { display: block; margin-right: 0; margin-bottom: 20px; clear: both } .layui-form-item .layui-inline:after { content: '\20'; clear: both; display: block; height: 0 } .layui-form-item .layui-input-inline { display: block; float: none; left: -3px; width: auto !important; margin: 0 0 10px 112px } .layui-form-item .layui-input-inline+.layui-form-mid { margin-left: 110px; top: -5px; padding: 0 } .layui-form-item .layui-form-checkbox { margin-right: 5px; margin-bottom: 5px } } .layui-laypage { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 10px 0; font-size: 0 } .layui-laypage>a:first-child, .layui-laypage>a:first-child em { border-radius: 2px 0 0 2px } .layui-laypage>a:last-child, .layui-laypage>a:last-child em { border-radius: 0 2px 2px 0 } .layui-laypage>:first-child { margin-left: 0 !important } .layui-laypage>:last-child { margin-right: 0 !important } .layui-laypage a, .layui-laypage button, .layui-laypage input, .layui-laypage select, .layui-laypage span { border: 1px solid #eee } .layui-laypage a, .layui-laypage span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 0 15px; height: 28px; line-height: 28px; margin: 0 -1px 5px 0; background-color: #fff; color: #333; font-size: 12px } .layui-laypage a[data-page] { color: #333 } .layui-laypage a { text-decoration: none !important; cursor: pointer } .layui-laypage a:hover { color: #16baaa } .layui-laypage em { font-style: normal } .layui-laypage .layui-laypage-spr { color: #999; font-weight: 700 } .layui-laypage .layui-laypage-curr { position: relative } .layui-laypage .layui-laypage-curr em { position: relative; color: #fff } .layui-laypage .layui-laypage-curr .layui-laypage-em { position: absolute; left: -1px; top: -1px; padding: 1px; width: 100%; height: 100%; background-color: #16baaa } .layui-laypage-em { border-radius: 2px } .layui-laypage-next em, .layui-laypage-prev em { font-family: Sim sun; font-size: 16px } .layui-laypage .layui-laypage-count, .layui-laypage .layui-laypage-limits, .layui-laypage .layui-laypage-refresh, .layui-laypage .layui-laypage-skip { margin-left: 10px; margin-right: 10px; padding: 0; border: none } .layui-laypage .layui-laypage-limits, .layui-laypage .layui-laypage-refresh { vertical-align: top } .layui-laypage .layui-laypage-refresh i { font-size: 18px; cursor: pointer } .layui-laypage select { height: 22px; padding: 3px; border-radius: 2px; cursor: pointer } .layui-laypage .layui-laypage-skip { height: 30px; line-height: 30px; color: #999 } .layui-laypage button, .layui-laypage input { height: 30px; line-height: 30px; border-radius: 2px; vertical-align: top; background-color: #fff; box-sizing: border-box } .layui-laypage input { display: inline-block; width: 40px; margin: 0 10px; padding: 0 3px; text-align: center } .layui-laypage input:focus, .layui-laypage select:focus { border-color: #16baaa !important } .layui-laypage button { margin-left: 10px; padding: 0 10px; cursor: pointer } .layui-flow-more { margin: 10px 0; text-align: center; color: #999; font-size: 14px; clear: both } .layui-flow-more a { height: 32px; line-height: 32px } .layui-flow-more a * { display: inline-block; vertical-align: top } .layui-flow-more a cite { padding: 0 20px; border-radius: 3px; background-color: #eee; color: #333; font-style: normal } .layui-flow-more a cite:hover { opacity: .8 } .layui-flow-more a i { font-size: 30px; color: #737383 } .layui-table { width: 100%; margin: 10px 0; background-color: #fff; color: #5f5f5f } .layui-table tr { transition: all .3s; -webkit-transition: all .3s } .layui-table th { text-align: left; font-weight: 600 } .layui-table-mend { background-color: #fff } .layui-table-click, .layui-table-hover, .layui-table[lay-even] tbody tr:nth-child(even) { background-color: #f8f8f8 } .layui-table-checked { background-color: #dbfbf0 } .layui-table-checked.layui-table-click, .layui-table-checked.layui-table-hover { background-color: #abf8dd } .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-mend, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] { border-width: 1px; border-style: solid; border-color: #eee } .layui-table td, .layui-table th { position: relative; padding: 9px 15px; min-height: 20px; line-height: 20px; font-size: 14px } .layui-table[lay-skin=line] td, .layui-table[lay-skin=line] th { border-width: 0; border-bottom-width: 1px } .layui-table[lay-skin=row] td, .layui-table[lay-skin=row] th { border-width: 0; border-right-width: 1px } .layui-table[lay-skin=nob] td, .layui-table[lay-skin=nob] th { border: none } .layui-table img { max-width: 100px } .layui-table[lay-size=lg] td, .layui-table[lay-size=lg] th { padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px } .layui-table-view .layui-table[lay-size=lg] .layui-table-cell { height: 50px; line-height: 40px } .layui-table[lay-size=sm] td, .layui-table[lay-size=sm] th { padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; font-size: 12px } .layui-table-view .layui-table[lay-size=sm] .layui-table-cell { height: 30px; line-height: 20px; padding-top: 5px; padding-left: 11px; padding-right: 11px } .layui-table[lay-data], .layui-table[lay-options] { display: none } .layui-table-box { position: relative; overflow: hidden } .layui-table-view { clear: both } .layui-table-view .layui-table { position: relative; width: auto; margin: 0; border: 0; border-collapse: separate } .layui-table-view .layui-table[lay-skin=line] { border-width: 0; border-right-width: 1px } .layui-table-view .layui-table[lay-skin=row] { border-width: 0; border-bottom-width: 1px } .layui-table-view .layui-table td, .layui-table-view .layui-table th { padding: 0; border-top: none; border-left: none } .layui-table-view .layui-table th [lay-event], .layui-table-view .layui-table th.layui-unselect .layui-table-cell span { cursor: pointer } .layui-table-view .layui-table td, .layui-table-view .layui-table th span { cursor: default } .layui-table-view .layui-table td[data-edit] { cursor: text } .layui-table-view .layui-table td[data-edit]:hover:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #16b777; pointer-events: none; content: "" } .layui-table-view .layui-form-checkbox[lay-skin=primary] i { width: 18px; height: 18px; line-height: 16px } .layui-table-view .layui-form-radio { line-height: 0; padding: 0 } .layui-table-view .layui-form-radio>i { margin: 0; font-size: 20px } .layui-table-init { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 199 } .layui-table-init .layui-icon { position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; font-size: 30px; color: #c2c2c2 } .layui-table-header { border-width: 0; border-bottom-width: 1px; overflow: hidden } .layui-table-header .layui-table { margin-bottom: -1px } .layui-table-column { position: relative; width: 100%; min-height: 41px; padding: 8px 16px; border-width: 0; border-bottom-width: 1px } .layui-table-column .layui-btn-container { margin-bottom: -8px } .layui-table-column .layui-btn-container .layui-btn { margin-right: 8px; margin-bottom: 8px } .layui-table-tool .layui-inline[lay-event] { position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all } .layui-table-tool .layui-inline[lay-event]:hover { border: 1px solid #999 } .layui-table-tool-temp { padding-right: 120px } .layui-table-tool-self { position: absolute; right: 17px; top: 10px } .layui-table-tool .layui-table-tool-self .layui-inline[lay-event] { margin: 0 0 0 10px } .layui-table-tool-panel { position: absolute; top: 29px; left: -1px; z-index: 399; padding: 5px 0 !important; min-width: 150px; min-height: 40px; border: 1px solid #d2d2d2; text-align: left; overflow-y: auto; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .12) } .layui-table-tool-panel li { padding: 0 10px; margin: 0 !important; line-height: 30px; list-style-type: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: .5s all; transition: .5s all } .layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] { width: 100% } .layui-table-tool-panel li:hover { background-color: #f8f8f8 } .layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] { padding-left: 28px } .layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] i { position: absolute; left: 0; top: 0 } .layui-table-tool-panel li .layui-form-checkbox[lay-skin=primary] span { padding: 0 } .layui-table-tool .layui-table-tool-self .layui-table-tool-panel { left: auto; right: -1px } .layui-table-col-set { position: absolute; right: 0; top: 0; width: 20px; height: 100%; border-width: 0; border-left-width: 1px; background-color: #fff } .layui-table-sort { width: 10px; height: 20px; margin-left: 5px; cursor: pointer !important } .layui-table-sort .layui-edge { position: absolute; left: 5px; border-width: 5px } .layui-table-sort .layui-table-sort-asc { top: 3px; border-top: none; border-bottom-style: solid; border-bottom-color: #b2b2b2 } .layui-table-sort .layui-table-sort-asc:hover { border-bottom-color: #5f5f5f } .layui-table-sort .layui-table-sort-desc { bottom: 5px; border-bottom: none; border-top-style: solid; border-top-color: #b2b2b2 } .layui-table-sort .layui-table-sort-desc:hover { border-top-color: #5f5f5f } .layui-table-sort[lay-sort=asc] .layui-table-sort-asc { border-bottom-color: #000 } .layui-table-sort[lay-sort=desc] .layui-table-sort-desc { border-top-color: #000 } .layui-table-cell { height: 38px; line-height: 28px; padding: 6px 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box } .layui-table-cell .layui-form-checkbox[lay-skin=primary] { top: -1px; padding: 0 } .layui-table-cell .layui-form-checkbox[lay-skin=primary]>div { padding-left: 24px } .layui-table-cell .layui-table-link { color: #01aaed } .layui-table-cell .layui-btn { vertical-align: inherit } .layui-table-cell[align=center] { -webkit-box-pack: center } .layui-table-cell[align=right] { -webkit-box-pack: end } .laytable-cell-checkbox, .laytable-cell-numbers, .laytable-cell-radio, .laytable-cell-space { text-align: center; -webkit-box-pack: center } .layui-table-body { position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px } .layui-table-body .layui-none { line-height: 26px; padding: 30px 15px; text-align: center; color: #999 } .layui-table-fixed { position: absolute; left: 0; top: 0; z-index: 101 } .layui-table-fixed .layui-table-body { overflow: hidden } .layui-table-fixed-l { box-shadow: 1px 0 8px rgba(0, 0, 0, .08) } .layui-table-fixed-r { left: auto; right: -1px; border-width: 0; border-left-width: 1px; box-shadow: -1px 0 8px rgba(0, 0, 0, .08) } .layui-table-fixed-r .layui-table-header { position: relative; overflow: visible } .layui-table-mend { position: absolute; right: -49px; top: 0; height: 100%; width: 50px; border-width: 0; border-left-width: 1px } .layui-table-tool { position: relative; width: 100%; min-height: 50px; line-height: 30px; padding: 10px 15px; border-width: 0; border-bottom-width: 1px } .layui-table-tool .layui-btn-container { margin-bottom: -10px } .layui-table-total { margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden } .layui-table-page { border-width: 0; border-top-width: 1px; margin-bottom: -1px; white-space: nowrap; overflow: hidden } .layui-table-page>div { height: 26px } .layui-table-page .layui-laypage { margin: 0 } .layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span { height: 26px; line-height: 26px; margin-bottom: 10px; border: none; background: 0 0 } .layui-table-page .layui-laypage a, .layui-table-page .layui-laypage span.layui-laypage-curr { padding: 0 12px } .layui-table-page .layui-laypage span { margin-left: 0; padding: 0 } .layui-table-page .layui-laypage .layui-laypage-prev { margin-left: -11px !important } .layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em { left: 0; top: 0; padding: 0 } .layui-table-page .layui-laypage button, .layui-table-page .layui-laypage input { height: 26px; line-height: 26px } .layui-table-page .layui-laypage input { width: 40px } .layui-table-page .layui-laypage button { padding: 0 10px } .layui-table-page select { height: 18px } .layui-table-pagebar { float: right; line-height: 23px } .layui-table-pagebar .layui-btn-sm { margin-top: -1px } .layui-table-pagebar .layui-btn-xs { margin-top: 2px } .layui-table-view select[lay-ignore] { display: inline-block } .layui-table-patch .layui-table-cell { padding: 0; width: 30px } .layui-table-edit { position: absolute; left: 0; top: 0; z-index: 189; min-width: 100%; min-height: 100%; padding: 5px 14px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0, 0, 0, .15); background-color: #fff } .layui-table-edit:focus { border-color: #16b777 !important } input.layui-input.layui-table-edit { height: 100% } select.layui-table-edit { padding: 0 0 0 10px; border-color: #d2d2d2 } .layui-table-view .layui-form-checkbox, .layui-table-view .layui-form-radio, .layui-table-view .layui-form-switch { top: 0; margin: 0 } .layui-table-view .layui-form-checkbox { top: -1px; height: 26px; line-height: 26px } .layui-table-view .layui-form-checkbox i { height: 26px } .layui-table-grid .layui-table-cell { overflow: visible } .layui-table-grid-down { position: absolute; top: 0; right: 0; width: 24px; height: 100%; padding: 5px 0; border-width: 0; border-left-width: 1px; text-align: center; background-color: #fff; color: #999; cursor: pointer } .layui-table-grid-down .layui-icon { position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; font-size: 14px } .layui-table-grid-down:hover { background-color: #fbfbfb } .layui-table-expanded { height: 95px } .layui-table-expanded .layui-table-cell, .layui-table-view .layui-table[lay-size=lg] .layui-table-expanded .layui-table-cell, .layui-table-view .layui-table[lay-size=sm] .layui-table-expanded .layui-table-cell { height: auto; max-height: 94px; white-space: normal; text-overflow: clip } .layui-table-cell-c { position: absolute; bottom: -10px; right: 50%; margin-right: -9px; width: 20px; height: 20px; line-height: 18px; cursor: pointer; text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 50%; z-index: 1000; transition: .3s all; font-size: 14px } .layui-table-cell-c:hover { border-color: #16b777 } .layui-table-expanded td:hover .layui-table-cell { overflow: auto } .layui-table-main>.layui-table>tbody>tr:last-child>td>.layui-table-cell-c { bottom: 0 } body .layui-table-tips .layui-layer-content { background: 0 0; padding: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .12) } .layui-table-tips-main { margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5f5f5f } .layui-table-tips-c { position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5f5f5f; border-radius: 50%; color: #fff } .layui-table-tips-c:hover { background-color: #777 } .layui-table-tips-c:before { position: relative; right: -2px } .layui-table-tree-nodeIcon { max-width: 20px } .layui-table-tree-nodeIcon>* { width: 100% } .layui-table-tree-flexIcon, .layui-table-tree-nodeIcon { margin-right: 2px } .layui-table-tree-flexIcon { cursor: pointer } .layui-upload-file { display: none !important; opacity: .01; filter: Alpha(opacity=1) } .layui-upload-list { margin: 11px 0 } .layui-upload-choose { max-width: 200px; padding: 0 10px; color: #999; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .layui-upload-drag { position: relative; display: inline-block; padding: 30px; border: 1px dashed #e2e2e2; background-color: #fff; text-align: center; cursor: pointer; color: #999 } .layui-upload-drag .layui-icon { font-size: 50px; color: #16baaa } .layui-upload-drag[lay-over] { border-color: #16baaa } .layui-upload-form { display: inline-block } .layui-upload-iframe { position: absolute; width: 0; height: 0; border: 0; visibility: hidden } .layui-upload-wrap { position: relative; display: inline-block; vertical-align: middle } .layui-upload-wrap .layui-upload-file { display: block !important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer } .layui-btn-container .layui-upload-choose { padding-left: 0 } .layui-menu { position: relative; margin: 5px 0; background-color: #fff; box-sizing: border-box } .layui-menu * { box-sizing: border-box } .layui-menu li, .layui-menu-body-title, .layui-menu-body-title a { padding: 5px 15px; color: initial } .layui-menu li { position: relative; margin: 0 0 1px; line-height: 26px; color: rgba(0, 0, 0, .8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s } .layui-menu li:hover { background-color: #f8f8f8 } .layui-menu li.layui-disabled, .layui-menu li.layui-disabled * { background: 0 0 !important; color: #d2d2d2 !important; cursor: not-allowed !important } .layui-menu-item-parent:hover>.layui-menu-body-panel { display: block; animation-name: layui-fadein; animation-duration: .3s; animation-fill-mode: both; animation-delay: .2s } .layui-menu-item-group>.layui-menu-body-title, .layui-menu-item-parent>.layui-menu-body-title { padding-right: 38px } .layui-menu .layui-menu-item-divider:hover, .layui-menu .layui-menu-item-group:hover, .layui-menu .layui-menu-item-none:hover { background: 0 0; cursor: default } .layui-menu .layui-menu-item-group>ul { margin: 5px 0 -5px } .layui-menu .layui-menu-item-group>.layui-menu-body-title { color: rgba(0, 0, 0, .35); user-select: none } .layui-menu .layui-menu-item-none { color: rgba(0, 0, 0, .35); cursor: default } .layui-menu .layui-menu-item-none { text-align: center } .layui-menu .layui-menu-item-divider { margin: 5px 0; padding: 0; height: 0; line-height: 0; border-bottom: 1px solid #eee; overflow: hidden } .layui-menu .layui-menu-item-down:hover, .layui-menu .layui-menu-item-up:hover { cursor: pointer } .layui-menu .layui-menu-item-up>.layui-menu-body-title { color: rgba(0, 0, 0, .8) } .layui-menu .layui-menu-item-up>ul { visibility: hidden; height: 0; overflow: hidden } .layui-menu .layui-menu-item-down>.layui-menu-body-title>.layui-icon-down { transform: rotate(180deg) } .layui-menu .layui-menu-item-up>.layui-menu-body-title>.layui-icon-up { transform: rotate(-180deg) } .layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon, .layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon { color: #000 } .layui-menu .layui-menu-item-down>ul { visibility: visible; height: auto } .layui-menu .layui-menu-item-checked, .layui-menu .layui-menu-item-checked2 { background-color: #f8f8f8 !important; color: #16b777 } .layui-menu .layui-menu-item-checked a, .layui-menu .layui-menu-item-checked2 a { color: #16b777 } .layui-menu .layui-menu-item-checked:after { position: absolute; right: -1px; top: 0; bottom: 0; border-right: 3px solid #16b777; content: "" } .layui-menu-body-title { position: relative; margin: -5px -15px; overflow: hidden; text-overflow: ellipsis } .layui-menu-body-title a { display: block; margin: -5px -15px; color: rgba(0, 0, 0, .8) } .layui-menu-body-title a:hover { transition: all .3s } .layui-menu-body-title>.layui-icon { position: absolute; right: 15px; top: 50%; margin-top: -6px; line-height: normal; font-size: 14px; transition: all .2s; -webkit-transition: all .2s } .layui-menu-body-title>.layui-icon:hover { transition: all .3s } .layui-menu-body-title>.layui-icon-right { right: 14px } .layui-menu-body-panel { display: none; position: absolute; top: -7px; left: 100%; z-index: 1000; margin-left: 13px; padding: 5px 0 } .layui-menu-body-panel:before { content: ""; position: absolute; width: 20px; left: -16px; top: 0; bottom: 0 } .layui-menu-body-panel-left { left: auto; right: 100%; margin: 0 13px 0 } .layui-menu-body-panel-left:before { left: auto; right: -16px } .layui-menu-lg li { line-height: 32px } .layui-menu-lg .layui-menu-body-title a:hover, .layui-menu-lg li:hover { background: 0 0; color: #16b777 } .layui-menu-lg li .layui-menu-body-panel { margin-left: 14px } .layui-menu-lg li .layui-menu-body-panel-left { margin: 0 15px 0 } .layui-dropdown { position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px } .layui-dropdown:before { content: ""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px } .layui-dropdown-shade { top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto } .layui-nav { position: relative; padding: 0 15px; background-color: #2f363c; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box } .layui-nav * { font-size: 14px } .layui-nav .layui-nav-item { position: relative; display: inline-block; *display: inline; *zoom: 1; margin-top: 0; list-style: none; vertical-align: middle; line-height: 60px } .layui-nav .layui-nav-item a { display: block; padding: 0 20px; color: #fff; color: rgba(255, 255, 255, .7); transition: all .3s; -webkit-transition: all .3s } .layui-nav .layui-this:after, .layui-nav-bar { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 3px; background-color: #16b777; transition: all .2s; -webkit-transition: all .2s; pointer-events: none } .layui-nav-bar { z-index: 1000 } .layui-nav[lay-bar=disabled] .layui-nav-bar { display: none } .layui-nav .layui-nav-item a:hover, .layui-nav .layui-this a { color: #fff; text-decoration: none } .layui-nav .layui-this:after { top: auto; bottom: 0; width: 100% } .layui-nav-img { width: 30px; height: 30px; margin-right: 10px; border-radius: 50% } .layui-nav .layui-nav-more { position: absolute; top: 0; right: 3px; left: auto !important; margin-top: 0; font-size: 12px; cursor: pointer; transition: all .2s; -webkit-transition: all .2s } .layui-nav .layui-nav-mored, .layui-nav-itemed>a .layui-nav-more { transform: rotate(180deg) } .layui-nav-child { display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); border: 1px solid #eee; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap; box-sizing: border-box } .layui-nav .layui-nav-child a { color: #5f5f5f; color: rgba(0, 0, 0, .8) } .layui-nav .layui-nav-child a:hover { background-color: #f8f8f8; color: rgba(0, 0, 0, .8) } .layui-nav-child dd { margin: 1px 0; position: relative } .layui-nav-child dd.layui-this { background-color: #f8f8f8; color: #000 } .layui-nav-child dd.layui-this:after { display: none } .layui-nav-child-r { left: auto; right: 0 } .layui-nav-child-c { text-align: center } .layui-nav.layui-nav-tree { width: 200px; padding: 0 } .layui-nav-tree .layui-nav-item { display: block; width: 100%; line-height: 40px } .layui-nav-tree .layui-nav-item a { position: relative; height: 40px; line-height: 40px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .layui-nav-tree .layui-nav-item>a { padding-top: 5px; padding-bottom: 5px } .layui-nav-tree .layui-nav-more { right: 15px } .layui-nav-tree .layui-nav-item>a .layui-nav-more { padding: 5px 0 } .layui-nav-tree .layui-nav-bar { width: 5px; height: 0 } .layui-side .layui-nav-tree .layui-nav-bar { width: 2px } .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover { background-color: #16baaa; color: #fff } .layui-nav-tree .layui-this:after { display: none } .layui-nav-itemed>a, .layui-nav-tree .layui-nav-title a, .layui-nav-tree .layui-nav-title a:hover { color: #fff !important } .layui-nav-tree .layui-nav-bar { background-color: #16baaa } .layui-nav-tree .layui-nav-child { position: relative; z-index: 0; top: 0; border: none; background-color: rgba(0, 0, 0, .3); box-shadow: none } .layui-nav-tree .layui-nav-child dd { margin: 0 } .layui-nav-tree .layui-nav-child a { color: #fff; color: rgba(255, 255, 255, .7) } .layui-nav-tree .layui-nav-child a:hover { background: 0 0; color: #fff } .layui-nav-itemed>.layui-nav-child, .layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child { display: block } .layui-nav-side { position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999 } .layui-nav-tree.layui-bg-gray a, .layui-nav.layui-bg-gray .layui-nav-item a { color: #373737; color: rgba(0, 0, 0, .8) } .layui-nav-tree.layui-bg-gray .layui-nav-itemed>a { color: #000 !important } .layui-nav.layui-bg-gray .layui-this a { color: #16b777 } .layui-nav-tree.layui-bg-gray .layui-nav-child { padding-left: 11px; background: 0 0 } .layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this, .layui-nav-tree.layui-bg-gray .layui-nav-child dd.layui-this a, .layui-nav-tree.layui-bg-gray .layui-this, .layui-nav-tree.layui-bg-gray .layui-this>a { background: 0 0 !important; color: #16b777 !important; font-weight: 700 } .layui-nav-tree.layui-bg-gray .layui-nav-bar { background-color: #16b777 } .layui-breadcrumb { visibility: hidden; font-size: 0 } .layui-breadcrumb>* { font-size: 14px } .layui-breadcrumb a { color: #999 !important } .layui-breadcrumb a:hover { color: #16b777 !important } .layui-breadcrumb a cite { color: #5f5f5f; font-style: normal } .layui-breadcrumb span[lay-separator] { margin: 0 10px; color: #999 } .layui-tab { margin: 10px 0; text-align: left !important } .layui-tab[overflow]>.layui-tab-title { overflow: hidden } .layui-tab .layui-tab-title { position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s } .layui-tab .layui-tab-title li { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s } .layui-tab .layui-tab-title li { position: relative; line-height: 40px; min-width: 65px; margin: 0; padding: 0 15px; text-align: center; cursor: pointer } .layui-tab .layui-tab-title li a { display: block; padding: 0 15px; margin: 0 -15px } .layui-tab-title .layui-this { color: #000 } .layui-tab-title .layui-this:after { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 41px; border-width: 1px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none } .layui-tab-bar { position: absolute; right: 0; top: 0; z-index: 10; width: 30px; height: 39px; line-height: 39px; border-width: 1px; border-style: solid; border-radius: 2px; text-align: center; background-color: #fff; cursor: pointer } .layui-tab-bar .layui-icon { position: relative; display: inline-block; top: 3px; transition: all .3s; -webkit-transition: all .3s } .layui-tab-item { display: none } .layui-tab-more { padding-right: 30px; height: auto !important; white-space: normal !important } .layui-tab-more li.layui-this:after { border-bottom-color: #eee; border-radius: 2px } .layui-tab-more .layui-tab-bar .layui-icon { top: -2px; top: 3px\0; -webkit-transform: rotate(180deg); transform: rotate(180deg) } :root .layui-tab-more .layui-tab-bar .layui-icon { top: -2px\0/IE9 } .layui-tab-content { padding: 15px 0 } .layui-tab-title li .layui-tab-close { position: relative; display: inline-block; width: 18px; height: 18px; line-height: 20px; margin-left: 8px; top: 1px; text-align: center; font-size: 14px; color: #c2c2c2; transition: all .2s; -webkit-transition: all .2s } .layui-tab-title li .layui-tab-close:hover { border-radius: 2px; background-color: #ff5722; color: #fff } .layui-tab-brief>.layui-tab-title .layui-this { color: #16baaa } .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after { border: none; border-radius: 0; border-bottom: 2px solid #16b777 } .layui-tab-brief[overflow]>.layui-tab-title .layui-this:after { top: -1px } .layui-tab-card { border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1) } .layui-tab-card>.layui-tab-title { background-color: #fafafa } .layui-tab-card>.layui-tab-title li { margin-right: -1px; margin-left: -1px } .layui-tab-card>.layui-tab-title .layui-this { background-color: #fff } .layui-tab-card>.layui-tab-title .layui-this:after { border-top: none; border-width: 1px; border-bottom-color: #fff } .layui-tab-card>.layui-tab-title .layui-tab-bar { height: 40px; line-height: 40px; border-radius: 0; border-top: none; border-right: none } .layui-tab-card>.layui-tab-more .layui-this { background: 0 0; color: #16b777 } .layui-tab-card>.layui-tab-more .layui-this:after { border: none } .layui-timeline { padding-left: 5px } .layui-timeline-item { position: relative; padding-bottom: 20px } .layui-timeline-axis { position: absolute; left: -5px; top: 0; z-index: 10; width: 20px; height: 20px; line-height: 20px; background-color: #fff; color: #16b777; border-radius: 50%; text-align: center; cursor: pointer } .layui-timeline-axis:hover { color: #ff5722 } .layui-timeline-item:before { content: ""; position: absolute; left: 5px; top: 0; z-index: 0; width: 1px; height: 100% } .layui-timeline-item:first-child:before { display: block } .layui-timeline-item:last-child:before { display: none } .layui-timeline-content { padding-left: 25px } .layui-timeline-title { position: relative; margin-bottom: 10px; line-height: 22px } .layui-badge, .layui-badge-dot, .layui-badge-rim { position: relative; display: inline-block; padding: 0 6px; font-size: 12px; text-align: center; background-color: #ff5722; color: #fff; border-radius: 2px } .layui-badge { height: 18px; line-height: 18px } .layui-badge-dot { width: 8px; height: 8px; padding: 0; border-radius: 50% } .layui-badge-rim { height: 18px; line-height: 18px; border-width: 1px; border-style: solid; background-color: #fff; color: #5f5f5f } .layui-btn .layui-badge, .layui-btn .layui-badge-dot { margin-left: 5px } .layui-nav .layui-badge, .layui-nav .layui-badge-dot { position: absolute; top: 50%; margin: -5px 6px 0 } .layui-nav .layui-badge { margin-top: -10px } .layui-tab-title .layui-badge, .layui-tab-title .layui-badge-dot { left: 5px; top: -2px } .layui-carousel { position: relative; left: 0; top: 0; background-color: #f8f8f8 } .layui-carousel>[carousel-item] { position: relative; width: 100%; height: 100%; overflow: hidden } .layui-carousel>[carousel-item]:before { position: absolute; content: '\e63d'; left: 50%; top: 50%; width: 100px; line-height: 20px; margin: -10px 0 0 -50px; text-align: center; color: #c2c2c2; font-family: layui-icon !important; font-size: 30px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .layui-carousel>[carousel-item]>* { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #f8f8f8; transition-duration: .3s; -webkit-transition-duration: .3s } .layui-carousel-updown>* { -webkit-transition: .3s ease-in-out up; transition: .3s ease-in-out up } .layui-carousel-arrow { display: none\0; opacity: 0; position: absolute; left: 10px; top: 50%; margin-top: -18px; width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 20px; border: none 0; border-radius: 50%; background-color: rgba(0, 0, 0, .2); color: #fff; -webkit-transition-duration: .3s; transition-duration: .3s; cursor: pointer } .layui-carousel-arrow[lay-type=add] { left: auto !important; right: 10px } .layui-carousel[lay-arrow=always] .layui-carousel-arrow { opacity: 1; left: 20px } .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] { right: 20px } .layui-carousel[lay-arrow=none] .layui-carousel-arrow { display: none } .layui-carousel-arrow:hover, .layui-carousel-ind ul:hover { background-color: rgba(0, 0, 0, .35) } .layui-carousel:hover .layui-carousel-arrow { display: block\0; opacity: 1; left: 20px } .layui-carousel:hover .layui-carousel-arrow[lay-type=add] { right: 20px } .layui-carousel-ind { position: relative; top: -35px; width: 100%; line-height: 0 !important; text-align: center; font-size: 0 } .layui-carousel[lay-indicator=outside] { margin-bottom: 30px } .layui-carousel[lay-indicator=outside] .layui-carousel-ind { top: 10px } .layui-carousel[lay-indicator=outside] .layui-carousel-ind ul { background-color: rgba(0, 0, 0, .5) } .layui-carousel[lay-indicator=none] .layui-carousel-ind { display: none } .layui-carousel-ind ul { display: inline-block; padding: 5px; background-color: rgba(0, 0, 0, .2); border-radius: 10px; -webkit-transition-duration: .3s; transition-duration: .3s } .layui-carousel-ind ul li { display: inline-block; width: 10px; height: 10px; margin: 0 3px; font-size: 14px; background-color: #eee; background-color: rgba(255, 255, 255, .5); border-radius: 50%; cursor: pointer; -webkit-transition-duration: .3s; transition-duration: .3s } .layui-carousel-ind ul li:hover { background-color: rgba(255, 255, 255, .7) } .layui-carousel-ind ul li.layui-this { background-color: #fff } .layui-carousel>[carousel-item]>.layui-carousel-next, .layui-carousel>[carousel-item]>.layui-carousel-prev, .layui-carousel>[carousel-item]>.layui-this { display: block } .layui-carousel>[carousel-item]>.layui-this { left: 0 } .layui-carousel>[carousel-item]>.layui-carousel-prev { left: -100% } .layui-carousel>[carousel-item]>.layui-carousel-next { left: 100% } .layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left, .layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right { left: 0 } .layui-carousel>[carousel-item]>.layui-this.layui-carousel-left { left: -100% } .layui-carousel>[carousel-item]>.layui-this.layui-carousel-right { left: 100% } .layui-carousel[lay-anim=updown] .layui-carousel-arrow { left: 50% !important; top: 20px; margin: 0 0 0 -18px } .layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add] { top: auto !important; bottom: 20px } .layui-carousel[lay-anim=updown] .layui-carousel-ind { position: absolute; top: 50%; right: 20px; width: auto; height: auto } .layui-carousel[lay-anim=updown] .layui-carousel-ind ul { padding: 3px 5px } .layui-carousel[lay-anim=updown] .layui-carousel-ind li { display: block; margin: 6px 0 } .layui-carousel[lay-anim=updown]>[carousel-item]>* { left: 0 !important } .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this { top: 0 } .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev { top: -100% } .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next { top: 100% } .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left, .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right { top: 0 } .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left { top: -100% } .layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right { top: 100% } .layui-carousel[lay-anim=fade]>[carousel-item]>* { left: 0 !important } .layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next, .layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev { opacity: 0 } .layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left, .layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right { opacity: 1 } .layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left, .layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right { opacity: 0 } .layui-fixbar { position: fixed; right: 16px; bottom: 16px; z-index: 999999 } .layui-fixbar li { width: 50px; height: 50px; line-height: 50px; margin-bottom: 1px; text-align: center; cursor: pointer; font-size: 30px; background-color: #9f9f9f; color: #fff; border-radius: 2px; opacity: .95 } .layui-fixbar li:hover { opacity: .85 } .layui-fixbar li:active { opacity: 1 } .layui-fixbar .layui-fixbar-top { display: none; font-size: 40px } body .layui-util-face { border: none; background: 0 0 } body .layui-util-face .layui-layer-content { padding: 0; background-color: #fff; color: #5f5f5f; box-shadow: none } .layui-util-face .layui-layer-TipsG { display: none } .layui-util-face ul { position: relative; width: 372px; padding: 10px; border: 1px solid #d9d9d9; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .2) } .layui-util-face ul li { cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center } .layui-util-face ul li:hover { position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec } .layui-code { display: block; position: relative; padding: 15px; line-height: 20px; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333; font-family: "Courier New", Consolas, "Lucida Console"; font-size: 12px } .layui-transfer-box, .layui-transfer-header, .layui-transfer-search { border-width: 0; border-style: solid; border-color: #eee } .layui-transfer-box { position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color: #fff } .layui-transfer-box .layui-form-checkbox { width: 100%; margin: 0 !important } .layui-transfer-header { height: 38px; line-height: 38px; padding: 0 11px; border-bottom-width: 1px } .layui-transfer-search { position: relative; padding: 11px; border-bottom-width: 1px } .layui-transfer-search .layui-input { height: 32px; padding-left: 30px; font-size: 12px } .layui-transfer-search .layui-icon-search { position: absolute; left: 20px; top: 50%; line-height: normal; margin-top: -8px; color: #5f5f5f } .layui-transfer-active { margin: 0 15px; display: inline-block; vertical-align: middle } .layui-transfer-active .layui-btn { display: block; margin: 0; padding: 0 15px; background-color: #16b777; border-color: #16b777; color: #fff } .layui-transfer-active .layui-btn-disabled { background-color: #fbfbfb; border-color: #eee; color: #d2d2d2 } .layui-transfer-active .layui-btn:first-child { margin-bottom: 15px } .layui-transfer-active .layui-btn .layui-icon { margin: 0; font-size: 14px !important } .layui-transfer-data { padding: 5px 0; overflow: auto } .layui-transfer-data li { height: 32px; line-height: 32px; margin-top: 0 !important; padding: 0 11px; list-style-type: none !important } .layui-transfer-data li:hover { background-color: #f8f8f8; transition: .5s all } .layui-transfer-data .layui-none { padding: 15px 11px; text-align: center; color: #999 } .layui-rate, .layui-rate * { display: inline-block; vertical-align: middle } .layui-rate { padding: 11px 6px 11px 0; font-size: 0 } .layui-rate li { margin-top: 0 !important } .layui-rate li i.layui-icon { font-size: 20px; color: #ffb800 } .layui-rate li i.layui-icon { margin-right: 5px; transition: all .3s; -webkit-transition: all .3s } .layui-rate li i:hover { cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12) } .layui-rate[readonly] li i:hover { cursor: default; transform: scale(1) } .layui-colorpicker { width: 38px; height: 38px; border: 1px solid #eee; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer; transition: all .3s; -webkit-transition: all .3s; box-sizing: border-box } .layui-colorpicker:hover { border-color: #d2d2d2 } .layui-colorpicker.layui-colorpicker-lg { width: 44px; height: 44px; line-height: 30px } .layui-colorpicker.layui-colorpicker-sm { width: 30px; height: 30px; line-height: 20px; padding: 3px } .layui-colorpicker.layui-colorpicker-xs { width: 22px; height: 22px; line-height: 16px; padding: 1px } .layui-colorpicker-trigger-bgcolor { display: block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); border-radius: 2px } .layui-colorpicker-trigger-span { display: block; height: 100%; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .15); border-radius: 2px; text-align: center } .layui-colorpicker-trigger-i { display: inline-block; color: #fff; font-size: 12px } .layui-colorpicker-trigger-i.layui-icon-close { color: #999 } .layui-colorpicker-main { position: absolute; left: -999999px; top: -999999px; z-index: 77777777; width: 280px; margin: 5px 0; padding: 7px; background: #fff; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12) } .layui-colorpicker-main-wrapper { height: 180px; position: relative } .layui-colorpicker-basis { width: 260px; height: 100%; position: relative } .layui-colorpicker-basis-white { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0)) } .layui-colorpicker-basis-black { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent) } .layui-colorpicker-basis-cursor { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; position: absolute; top: -3px; right: -3px; cursor: pointer } .layui-colorpicker-side { position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red) } .layui-colorpicker-side-slider { width: 100%; height: 5px; box-shadow: 0 0 1px #888; box-sizing: border-box; background: #fff; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0 } .layui-colorpicker-main-alpha { display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) } .layui-colorpicker-alpha-bgcolor { height: 100%; position: relative } .layui-colorpicker-alpha-slider { width: 5px; height: 100%; box-shadow: 0 0 1px #888; box-sizing: border-box; background: #fff; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; top: 0 } .layui-colorpicker-main-pre { padding-top: 7px; font-size: 0 } .layui-colorpicker-pre { width: 20px; height: 20px; border-radius: 2px; display: inline-block; margin-left: 6px; margin-bottom: 7px; cursor: pointer } .layui-colorpicker-pre:nth-child(11n+1) { margin-left: 0 } .layui-colorpicker-pre-isalpha { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==) } .layui-colorpicker-pre.layui-this { box-shadow: 0 0 3px 2px rgba(0, 0, 0, .15) } .layui-colorpicker-pre>div { height: 100%; border-radius: 2px } .layui-colorpicker-main-input { text-align: right; padding-top: 7px } .layui-colorpicker-main-input .layui-btn-container .layui-btn { margin: 0 0 0 10px } .layui-colorpicker-main-input div.layui-inline { float: left; margin-right: 10px; font-size: 14px } .layui-colorpicker-main-input input.layui-input { width: 150px; height: 30px; color: #5f5f5f } .layui-slider { height: 4px; background: #eee; border-radius: 3px; position: relative; cursor: pointer } .layui-slider-bar { border-radius: 3px; position: absolute; height: 100% } .layui-slider-step { position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .layui-slider-wrap { width: 36px; height: 36px; position: absolute; top: -16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; text-align: center } .layui-slider-wrap-btn { width: 12px; height: 12px; border-radius: 50%; background: #fff; display: inline-block; vertical-align: middle; cursor: pointer; transition: .3s } .layui-slider-wrap:after { content: ""; height: 100%; display: inline-block; vertical-align: middle } .layui-slider-wrap-btn.layui-slider-hover, .layui-slider-wrap-btn:hover { transform: scale(1.2) } .layui-slider-wrap-btn.layui-disabled:hover { transform: scale(1) !important } .layui-slider-tips { position: absolute; top: -42px; z-index: 77777777; white-space: nowrap; display: none; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px } .layui-slider-tips:after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent } .layui-slider-input { width: 70px; height: 32px; border: 1px solid #eee; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -14px; box-sizing: border-box } .layui-slider-input-btn { position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #eee } .layui-slider-input-btn i { cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center; color: #999 } .layui-slider-input-btn i:first-child { top: 0; border-bottom: 1px solid #eee } .layui-slider-input-txt { height: 100%; font-size: 14px } .layui-slider-input-txt input { height: 100%; border: none; padding-right: 21px } .layui-slider-input-btn i:hover { color: #16baaa } .layui-slider-vertical { width: 4px; margin-left: 33px } .layui-slider-vertical .layui-slider-bar { width: 4px } .layui-slider-vertical .layui-slider-step { top: auto; left: 0; -webkit-transform: translateY(50%); transform: translateY(50%) } .layui-slider-vertical .layui-slider-wrap { top: auto; left: -16px; -webkit-transform: translateY(50%); transform: translateY(50%) } .layui-slider-vertical .layui-slider-tips { top: auto; left: 2px } @media \0screen { .layui-slider-wrap-btn { margin-left: -20px } .layui-slider-vertical .layui-slider-wrap-btn { margin-left: 0; margin-bottom: -20px } .layui-slider-vertical .layui-slider-tips { margin-left: -8px } .layui-slider>span { margin-left: 8px } } .layui-tree { line-height: 22px } .layui-tree .layui-form-checkbox { margin: 0 !important } .layui-tree-set { width: 100%; position: relative } .layui-tree-pack { display: none; padding-left: 20px; position: relative } .layui-tree-line .layui-tree-pack { padding-left: 27px } .layui-tree-line .layui-tree-set .layui-tree-set:after { content: ""; position: absolute; top: 14px; left: -9px; width: 17px; height: 0; border-top: 1px dotted #c0c4cc } .layui-tree-entry { position: relative; padding: 3px 0; height: 26px; white-space: nowrap } .layui-tree-entry:hover { background-color: #eee } .layui-tree-line .layui-tree-entry:hover { background-color: rgba(0, 0, 0, 0) } .layui-tree-line .layui-tree-entry:hover .layui-tree-txt { color: #999; text-decoration: underline; transition: .3s } .layui-tree-main { display: inline-block; vertical-align: middle; cursor: pointer; padding-right: 10px } .layui-tree-line .layui-tree-set:before { content: ""; position: absolute; top: 0; left: -9px; width: 0; height: 100%; border-left: 1px dotted #c0c4cc } .layui-tree-line .layui-tree-set.layui-tree-setLineShort:before { height: 13px } .layui-tree-line .layui-tree-set.layui-tree-setHide:before { height: 0 } .layui-tree-iconClick { display: inline-block; vertical-align: middle; position: relative; height: 20px; line-height: 20px; margin: 0 10px; color: #c0c4cc } .layui-tree-icon { height: 14px; line-height: 12px; width: 14px; text-align: center; border: 1px solid #c0c4cc } .layui-tree-iconClick .layui-icon { font-size: 18px } .layui-tree-icon .layui-icon { font-size: 12px; color: #5f5f5f } .layui-tree-iconArrow { padding: 0 5px } .layui-tree-iconArrow:after { content: ""; position: absolute; left: 4px; top: 3px; z-index: 100; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #c0c4cc; transition: .5s } .layui-tree-spread>.layui-tree-entry .layui-tree-iconClick>.layui-tree-iconArrow:after { transform: rotate(90deg) translate(3px, 4px) } .layui-tree-txt { display: inline-block; vertical-align: middle; color: #555 } .layui-tree-search { margin-bottom: 15px; color: #5f5f5f } .layui-tree-btnGroup { visibility: hidden; display: inline-block; vertical-align: middle; position: relative } .layui-tree-btnGroup .layui-icon { display: inline-block; vertical-align: middle; padding: 0 2px; cursor: pointer } .layui-tree-btnGroup .layui-icon:hover { color: #999; transition: .3s } .layui-tree-entry:hover .layui-tree-btnGroup { visibility: visible } .layui-tree-editInput { position: relative; display: inline-block; vertical-align: middle; height: 20px; line-height: 20px; padding: 0; border: none; background-color: rgba(0, 0, 0, .05) } .layui-tree-emptyText { text-align: center; color: #999 } .layui-anim { -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; animation-duration: .3s; animation-fill-mode: both } .layui-anim.layui-icon { display: inline-block } .layui-anim-loop { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .layui-trans, .layui-trans a { transition: all .2s; -webkit-transition: all .2s } @-webkit-keyframes layui-rotate { from { -webkit-transform: rotate(0) } to { -webkit-transform: rotate(360deg) } } @keyframes layui-rotate { from { transform: rotate(0) } to { transform: rotate(360deg) } } .layui-anim-rotate { -webkit-animation-name: layui-rotate; animation-name: layui-rotate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: linear; animation-timing-function: linear } @-webkit-keyframes layui-up { from { -webkit-transform: translate3d(0, 100%, 0); opacity: .3 } to { -webkit-transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes layui-up { from { transform: translate3d(0, 100%, 0); opacity: .3 } to { transform: translate3d(0, 0, 0); opacity: 1 } } .layui-anim-up { -webkit-animation-name: layui-up; animation-name: layui-up } @-webkit-keyframes layui-upbit { from { -webkit-transform: translate3d(0, 15px, 0); opacity: .3 } to { -webkit-transform: translate3d(0, 0, 0); opacity: 1 } } @keyframes layui-upbit { from { transform: translate3d(0, 15px, 0); opacity: .3 } to { transform: translate3d(0, 0, 0); opacity: 1 } } .layui-anim-upbit { -webkit-animation-name: layui-upbit; animation-name: layui-upbit } @keyframes layui-down { 0% { opacity: .3; transform: translate3d(0, -100%, 0) } 100% { opacity: 1; transform: translate3d(0, 0, 0) } } .layui-anim-down { animation-name: layui-down } @keyframes layui-downbit { 0% { opacity: .3; transform: translate3d(0, -5px, 0) } 100% { opacity: 1; transform: translate3d(0, 0, 0) } } .layui-anim-downbit { animation-name: layui-downbit } @-webkit-keyframes layui-scale { 0% { opacity: .3; -webkit-transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1) } } @keyframes layui-scale { 0% { opacity: .3; -ms-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -ms-transform: scale(1); transform: scale(1) } } .layui-anim-scale { -webkit-animation-name: layui-scale; animation-name: layui-scale } @-webkit-keyframes layui-scale-spring { 0% { opacity: .5; -webkit-transform: scale(.5) } 80% { opacity: .8; -webkit-transform: scale(1.1) } 100% { opacity: 1; -webkit-transform: scale(1) } } @keyframes layui-scale-spring { 0% { opacity: .5; transform: scale(.5) } 80% { opacity: .8; transform: scale(1.1) } 100% { opacity: 1; transform: scale(1) } } .layui-anim-scaleSpring { -webkit-animation-name: layui-scale-spring; animation-name: layui-scale-spring } @keyframes layui-scalesmall { 0% { opacity: .3; transform: scale(1.5) } 100% { opacity: 1; transform: scale(1) } } .layui-anim-scalesmall { animation-name: layui-scalesmall } @keyframes layui-scalesmall-spring { 0% { opacity: .3; transform: scale(1.5) } 80% { opacity: .8; transform: scale(.9) } 100% { opacity: 1; transform: scale(1) } } .layui-anim-scalesmall-spring { animation-name: layui-scalesmall-spring } @-webkit-keyframes layui-fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes layui-fadein { 0% { opacity: 0 } 100% { opacity: 1 } } .layui-anim-fadein { -webkit-animation-name: layui-fadein; animation-name: layui-fadein } @-webkit-keyframes layui-fadeout { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes layui-fadeout { 0% { opacity: 1 } 100% { opacity: 0 } } .layui-anim-fadeout { -webkit-animation-name: layui-fadeout; animation-name: layui-fadeout } html #layuicss-skincodecss { display: none; position: absolute; width: 1989px } .layui-code-wrap { font-size: 13px; font-family: "Courier New", Consolas, "Lucida Console" } .layui-code-view { display: block; position: relative; padding: 0 !important; border: 1px solid #eee; border-left-width: 6px; background-color: #fff; color: #333 } .layui-code-view pre { margin: 0 !important } .layui-code-header { position: relative; z-index: 3; padding: 0 11px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; background-color: #fafafa; font-size: 12px } .layui-code-header>.layui-code-header-about { position: absolute; right: 11px; top: 0; color: #b7b7b7 } .layui-code-header-about>a { padding-left: 10px } .layui-code-wrap { position: relative; display: block; z-index: 1; margin: 0 !important; padding: 11px 0 !important; overflow-x: hidden; overflow-y: auto } .layui-code-line { position: relative; line-height: 19px; margin: 0 !important } .layui-code-line-number { position: absolute; left: 0; top: 0; padding: 0 8px; min-width: 45px; height: 100%; text-align: right; user-select: none; white-space: nowrap; overflow: hidden } .layui-code-line-content { padding: 0 11px; word-wrap: break-word; white-space: pre-wrap } .layui-code-ln-mode>.layui-code-wrap>.layui-code-line { padding-left: 45px } .layui-code-ln-side { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; width: 45px; border-right: 1px solid #eee; border-color: rgb(126 122 122 / 15%); background-color: #fafafa; pointer-events: none } .layui-code-nowrap>.layui-code-wrap { overflow: auto } .layui-code-nowrap>.layui-code-wrap>.layui-code-line>.layui-code-line-content { white-space: pre; word-wrap: normal } .layui-code-nowrap>.layui-code-ln-side { border-right-width: 0 !important; background: 0 0 !important } .layui-code-fixbar { position: absolute; top: 8px; right: 11px; padding-right: 45px; z-index: 5 } .layui-code-fixbar>span { position: absolute; right: 0; top: 0; padding: 0 8px; color: #777; transition: all .3s } .layui-code-fixbar>span:hover { color: #16b777 } .layui-code-copy { display: none; cursor: pointer } .layui-code-preview>.layui-code-view>.layui-code-fixbar .layui-code-copy { display: none !important } .layui-code-view:hover>.layui-code-fixbar .layui-code-copy { display: block } .layui-code-view:hover>.layui-code-fixbar .layui-code-lang-marker { display: none } .layui-code-theme-dark, .layui-code-theme-dark>.layui-code-header { border-color: rgb(126 122 122 / 15%); background-color: #1f1f1f } .layui-code-theme-dark { border-width: 1px; color: #ccc } .layui-code-theme-dark>.layui-code-ln-side { border-right-color: #2a2a2a; background: 0 0; color: #6e7681 } .layui-code textarea { display: none } .layui-code-preview>.layui-code, .layui-code-preview>.layui-code-view { margin: 0 } .layui-code-preview>.layui-tab { position: relative; z-index: 1; margin-bottom: 0 } .layui-code-preview>.layui-tab>.layui-tab-title { border-width: 0 } .layui-code-preview .layui-code-item { display: none } .layui-code-item-preview { position: relative; padding: 16px } .layui-code-item-preview>iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none } .layui-code-tools { position: absolute; right: 11px; top: 8px; line-height: normal } .layui-code-tools>i { display: inline-block; margin-left: 6px; padding: 3px; cursor: pointer } .layui-code-tools>i.layui-icon-file-b { color: #999 } .layui-code-tools>i:hover { color: #16b777 } .layui-code-full { position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff } .layui-code-full .layui-code-item { width: 100% !important; border-width: 0 !important; border-top-width: 1px !important } .layui-code-full .layui-code-item, .layui-code-full .layui-code-view, .layui-code-full .layui-code-wrap { height: calc(100vh - 51px) !important; box-sizing: border-box } .layui-code-full .layui-code-item-preview { overflow: auto } .layui-code-view.layui-code-hl { line-height: 20px !important; border-left-width: 1px } .layui-code-view.layui-code-hl>.layui-code-ln-side { background-color: transparent } .layui-code-theme-dark.layui-code-hl, .layui-code-theme-dark.layui-code-hl>.layui-code-ln-side { border-color: rgb(126 122 122 / 15%) } html #layuicss-laydate { display: none; position: absolute; width: 1989px } .layui-laydate * { margin: 0; padding: 0 } .layui-laydate, .layui-laydate * { box-sizing: border-box } .layui-laydate { position: absolute; z-index: 99999999; margin: 5px 0; border-radius: 2px; font-size: 14px; line-height: normal; -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .layui-laydate-main { width: 272px } .layui-laydate-content td, .layui-laydate-header *, .layui-laydate-list li { transition-duration: .3s; -webkit-transition-duration: .3s } .layui-laydate-shade { top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto } @keyframes laydate-downbit { 0% { opacity: .3; transform: translate3d(0, -5px, 0) } 100% { opacity: 1; transform: translate3d(0, 0, 0) } } .layui-laydate { animation-name: laydate-downbit } .layui-laydate-static { position: relative; z-index: 0; display: inline-block; margin: 0; -webkit-animation: none; animation: none } .laydate-ym-show .laydate-next-m, .laydate-ym-show .laydate-prev-m { display: none !important } .laydate-ym-show .laydate-next-y, .laydate-ym-show .laydate-prev-y { display: inline-block !important } .laydate-ym-show .laydate-set-ym span[lay-type=month] { display: none !important } .laydate-time-show .laydate-set-ym span[lay-type=month], .laydate-time-show .laydate-set-ym span[lay-type=year], .laydate-time-show .layui-laydate-header .layui-icon { display: none !important } .layui-laydate-header { position: relative; line-height: 30px; padding: 10px 70px 5px } .layui-laydate-header * { display: inline-block; vertical-align: bottom } .layui-laydate-header i { position: absolute; top: 10px; padding: 0 5px; color: #999; font-size: 18px; cursor: pointer } .layui-laydate-header i.laydate-prev-y { left: 15px } .layui-laydate-header i.laydate-prev-m { left: 45px } .layui-laydate-header i.laydate-next-y { right: 15px } .layui-laydate-header i.laydate-next-m { right: 45px } .laydate-set-ym { width: 100%; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .laydate-set-ym span { padding: 0 10px; cursor: pointer } .laydate-time-text { cursor: default !important } .layui-laydate-content { position: relative; padding: 10px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } .layui-laydate-content table { border-collapse: collapse; border-spacing: 0 } .layui-laydate-content td, .layui-laydate-content th { width: 36px; height: 30px; padding: 0; text-align: center } .layui-laydate-content th { font-weight: 400 } .layui-laydate-content td { position: relative; cursor: pointer } .laydate-day-mark { position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden } .laydate-day-mark::after { position: absolute; content: ''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50% } .laydate-day-holidays:before { position: absolute; left: 0; top: 0; font-size: 12px; transform: scale(.7) } .laydate-day-holidays:before { content: '\4F11'; color: #ff5722 } .laydate-day-holidays[type=work]:before { content: '\73ED'; color: inherit } .layui-laydate .layui-this .laydate-day-holidays:before { color: #fff } .layui-laydate-footer { position: relative; height: 46px; line-height: 26px; padding: 10px } .layui-laydate-footer span { display: inline-block; vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #c9c9c9; border-radius: 2px; background-color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s } .layui-laydate-footer span:hover { color: #16b777 } .layui-laydate-footer span.layui-laydate-preview { cursor: default; border-color: transparent !important } .layui-laydate-footer span.layui-laydate-preview:hover { color: #777 } .layui-laydate-footer span:first-child.layui-laydate-preview { padding-left: 0 } .laydate-footer-btns { position: absolute; right: 10px; top: 10px } .laydate-footer-btns span { margin: 0 0 0 -1px; border-radius: 0 } .laydate-footer-btns span:first-child { border-radius: 2px 0 0 2px } .laydate-footer-btns span:last-child { border-radius: 0 2px 2px 0 } .layui-laydate-shortcut { width: 80px; padding: 6px 0; display: inline-block; vertical-align: top; overflow: auto; max-height: 276px; text-align: center } .layui-laydate-shortcut+.layui-laydate-main { display: inline-block; border-left: 1px solid #e2e2e2 } .layui-laydate-shortcut>li { padding: 5px 8px; cursor: pointer; line-height: 18px } .layui-laydate .layui-laydate-list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff } .layui-laydate .layui-laydate-list>li { position: relative; display: inline-block; width: 33.3%; height: 36px; line-height: 36px; margin: 3px 0; vertical-align: middle; text-align: center; cursor: pointer; list-style: none } .layui-laydate .laydate-month-list>li { width: 25%; margin: 17px 0 } .layui-laydate .laydate-time-list>li { height: 100%; margin: 0; line-height: normal; cursor: default } .layui-laydate .laydate-time-list p { position: relative; top: -4px; margin: 0; line-height: 29px } .layui-laydate .laydate-time-list ol { height: 181px; overflow: hidden } .layui-laydate .laydate-time-list>li:hover ol { overflow-y: auto } .layui-laydate .laydate-time-list ol li { width: 130%; padding-left: 33px; height: 30px; line-height: 30px; text-align: left; cursor: pointer } .layui-laydate-hint { position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #ff5722 } .layui-laydate-range { width: 546px } .layui-laydate-range .layui-laydate-main { display: inline-block; vertical-align: middle; max-width: 50% } .layui-laydate-range .laydate-main-list-1 .layui-laydate-content, .layui-laydate-range .laydate-main-list-1 .layui-laydate-header { border-left: 1px solid #e2e2e2 } .layui-laydate-range.layui-laydate-linkage .laydate-main-list-0 .laydate-next-m, .layui-laydate-range.layui-laydate-linkage .laydate-main-list-0 .laydate-next-y, .layui-laydate-range.layui-laydate-linkage .laydate-main-list-1 .laydate-prev-m, .layui-laydate-range.layui-laydate-linkage .laydate-main-list-1 .laydate-prev-y { display: none } .layui-laydate, .layui-laydate-hint { border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); background-color: #fff; color: #777 } .layui-laydate-header { border-bottom: 1px solid #e2e2e2 } .layui-laydate-header i:hover, .layui-laydate-header span:hover { color: #16b777 } .layui-laydate-content { border-top: none 0; border-bottom: none 0 } .layui-laydate-content th { color: #333 } .layui-laydate-content td { color: #777 } .layui-laydate-content td.laydate-day-now { color: #16b777 } .layui-laydate-content td.laydate-day-now:after { content: ''; position: absolute; width: 100%; height: 30px; left: 0; top: 0; border: 1px solid #16b777; box-sizing: border-box } .layui-laydate-linkage .layui-laydate-content td.laydate-selected>div { background-color: #00f7de } .layui-laydate-linkage .laydate-selected:hover>div { background-color: #00f7de !important } .layui-laydate-content td.laydate-selected:after, .layui-laydate-content td:hover:after { content: none } .layui-laydate-content td>div:hover, .layui-laydate-list li:hover, .layui-laydate-shortcut>li:hover { background-color: #eee; color: #333 } .laydate-time-list li ol { margin: 0; padding: 0; border: 1px solid #e2e2e2; border-left-width: 0 } .laydate-time-list li:first-child ol { border-left-width: 1px } .laydate-time-list>li:hover { background: 0 0 } .layui-laydate-content .laydate-day-next, .layui-laydate-content .laydate-day-prev { color: #d2d2d2 } .layui-laydate-linkage .laydate-selected.laydate-day-next>div, .layui-laydate-linkage .laydate-selected.laydate-day-prev>div { background-color: #f8f8f8 !important } .layui-laydate-footer { border-top: 1px solid #e2e2e2 } .layui-laydate-hint { color: #ff5722 } .laydate-day-mark::after { background-color: #16b777 } .layui-laydate-content td.layui-this .laydate-day-mark::after { display: none } .layui-laydate-footer span[lay-type=date] { color: #16b777 } .layui-laydate .layui-this, .layui-laydate .layui-this>div { background-color: #16baaa !important; color: #fff !important } .layui-laydate .laydate-disabled, .layui-laydate .laydate-disabled:hover { background: 0 0 !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none } .layui-laydate-content td>div { padding: 7px 0; height: 100% } .laydate-theme-molv { border: none } .laydate-theme-molv.layui-laydate-range { width: 548px } .laydate-theme-molv .layui-laydate-main { width: 274px } .laydate-theme-molv .layui-laydate-header { border: none; background-color: #16baaa } .laydate-theme-molv .layui-laydate-header i, .laydate-theme-molv .layui-laydate-header span { color: #f6f6f6 } .laydate-theme-molv .layui-laydate-header i:hover, .laydate-theme-molv .layui-laydate-header span:hover { color: #fff } .laydate-theme-molv .layui-laydate-content { border: 1px solid #e2e2e2; border-top: none; border-bottom: none } .laydate-theme-molv .laydate-main-list-1 .layui-laydate-content { border-left: none } .laydate-theme-molv .layui-laydate-footer { border: 1px solid #e2e2e2 } .laydate-theme-grid .laydate-month-list>li, .laydate-theme-grid .laydate-year-list>li, .laydate-theme-grid .layui-laydate-content td, .laydate-theme-grid .layui-laydate-content thead { border: 1px solid #e2e2e2 } .layui-laydate-linkage.laydate-theme-grid .laydate-selected, .layui-laydate-linkage.laydate-theme-grid .laydate-selected:hover { background-color: #f2f2f2 !important; color: #16baaa !important } .layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-next, .layui-laydate-linkage.laydate-theme-grid .laydate-selected.laydate-day-prev { color: #d2d2d2 !important } .laydate-theme-grid .laydate-month-list, .laydate-theme-grid .laydate-year-list { margin: 1px 0 0 1px } .laydate-theme-grid .laydate-month-list>li, .laydate-theme-grid .laydate-year-list>li { margin: 0 -1px -1px 0 } .laydate-theme-grid .laydate-year-list>li { height: 43px; line-height: 43px } .laydate-theme-grid .laydate-month-list>li { height: 71px; line-height: 71px } .laydate-theme-grid .layui-laydate-content td>div { height: 29px; margin-top: -1px } .laydate-theme-circle .layui-laydate-content td.layui-this>div, .laydate-theme-circle .layui-laydate-content td>div { width: 28px; height: 28px; line-height: 28px; border-radius: 14px; margin: 0 4px; padding: 0 } .layui-laydate.laydate-theme-circle .layui-laydate-content table td.layui-this { background-color: transparent !important } .laydate-theme-grid.laydate-theme-circle .layui-laydate-content td>div { margin: 0 3.5px } .laydate-theme-fullpanel .layui-laydate-main { width: 526px } .laydate-theme-fullpanel .layui-laydate-list { width: 252px; left: 272px } .laydate-theme-fullpanel .laydate-set-ym span { display: none } .laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type=month], .laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type=year], .laydate-theme-fullpanel .laydate-time-show .layui-laydate-header .layui-icon { display: inline-block !important } .laydate-theme-fullpanel .laydate-btns-time { display: none } html #layuicss-layer { display: none; position: absolute; width: 1989px } .layui-layer, .layui-layer-shade { position: fixed; _position: absolute; pointer-events: auto } .layui-layer-shade { top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px") } .layui-layer { -webkit-overflow-scrolling: touch } .layui-layer { top: 150px; left: 0; margin: 0; padding: 0; background-color: #fff; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0, 0, 0, .3) } .layui-layer-close { position: absolute } .layui-layer-content { position: relative } .layui-layer-border { border: 1px solid #b2b2b2; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) } .layui-layer-btn a, .layui-layer-setwin span { display: inline-block; vertical-align: middle; *display: inline; *zoom: 1 } .layui-layer-move { display: none; position: fixed; *position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: move; opacity: 0; filter: alpha(opacity=0); background-color: #fff; z-index: 2147483647 } .layui-layer-resize { position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize } .layer-anim { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .3s; animation-duration: .3s } @-webkit-keyframes layer-bounceIn { 0% { opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @keyframes layer-bounceIn { 0% { opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5) } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } .layer-anim-00 { -webkit-animation-name: layer-bounceIn; animation-name: layer-bounceIn } @-webkit-keyframes layer-zoomInDown { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } @keyframes layer-zoomInDown { 0% { opacity: 0; -webkit-transform: scale(.1) translateY(-2000px); -ms-transform: scale(.1) translateY(-2000px); transform: scale(.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 60% { opacity: 1; -webkit-transform: scale(.475) translateY(60px); -ms-transform: scale(.475) translateY(60px); transform: scale(.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } .layer-anim-01 { -webkit-animation-name: layer-zoomInDown; animation-name: layer-zoomInDown } @-webkit-keyframes layer-fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes layer-fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .layer-anim-02 { -webkit-animation-name: layer-fadeInUpBig; animation-name: layer-fadeInUpBig } @-webkit-keyframes layer-zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } @keyframes layer-zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(.1) translateX(-2000px); -ms-transform: scale(.1) translateX(-2000px); transform: scale(.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 60% { opacity: 1; -webkit-transform: scale(.475) translateX(48px); -ms-transform: scale(.475) translateX(48px); transform: scale(.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } .layer-anim-03 { -webkit-animation-name: layer-zoomInLeft; animation-name: layer-zoomInLeft } @-webkit-keyframes layer-rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } @keyframes layer-rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0) } } .layer-anim-04 { -webkit-animation-name: layer-rollIn; animation-name: layer-rollIn } @keyframes layer-fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } .layer-anim-05 { -webkit-animation-name: layer-fadeIn; animation-name: layer-fadeIn } @-webkit-keyframes layer-shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px) } } @keyframes layer-shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px) } } .layer-anim-06 { -webkit-animation-name: layer-shake; animation-name: layer-shake } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes layer-slide-down { from { transform: translate3d(0, -100%, 0) } to { transform: translate3d(0, 0, 0) } } @keyframes layer-slide-down-out { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(0, -100%, 0) } } .layer-anim-slide-down { animation-name: layer-slide-down } .layer-anim-slide-down-out { animation-name: layer-slide-down-out } @keyframes layer-slide-left { from { transform: translate3d(100%, 0, 0) } to { transform: translate3d(0, 0, 0) } } @keyframes layer-slide-left-out { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(100%, 0, 0) } } .layer-anim-slide-left { animation-name: layer-slide-left } .layer-anim-slide-left-out { animation-name: layer-slide-left-out } @keyframes layer-slide-up { from { transform: translate3d(0, 100%, 0) } to { transform: translate3d(0, 0, 0) } } @keyframes layer-slide-up-out { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(0, 100%, 0) } } .layer-anim-slide-up { animation-name: layer-slide-up } .layer-anim-slide-up-out { animation-name: layer-slide-up-out } @keyframes layer-slide-right { from { transform: translate3d(-100%, 0, 0) } to { transform: translate3d(0, 0, 0) } } @keyframes layer-slide-right-out { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-100%, 0, 0) } } .layer-anim-slide-right { animation-name: layer-slide-right } .layer-anim-slide-right-out { animation-name: layer-slide-right-out } .layui-layer-title { padding: 0 81px 0 16px; height: 50px; line-height: 50px; border-bottom: 1px solid #f0f0f0; font-size: 14px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0 } .layui-layer-setwin { position: absolute; right: 15px; *right: 0; top: 16px; font-size: 0; line-height: initial } .layui-layer-setwin span { position: relative; width: 16px; height: 16px; line-height: 18px; margin-left: 10px; text-align: center; font-size: 16px; cursor: pointer; color: #000; _overflow: hidden; box-sizing: border-box } .layui-layer-setwin .layui-layer-min:before { content: ''; position: absolute; width: 12px; border-bottom: 1px solid #2e2d3c; left: 50%; top: 50%; margin: -.5px 0 0 -6px; cursor: pointer; _overflow: hidden } .layui-layer-setwin .layui-layer-min:hover:before { background-color: #2d93ca } .layui-layer-setwin .layui-layer-max:after, .layui-layer-setwin .layui-layer-max:before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 9px; height: 9px; margin: -5px 0 0 -5px; border: 1px solid #2e2d3c } .layui-layer-setwin .layui-layer-max:hover:after, .layui-layer-setwin .layui-layer-max:hover:before { border-color: #2d93ca } .layui-layer-setwin .layui-layer-min:hover:before { background-color: #2d93ca } .layui-layer-setwin .layui-layer-maxmin:after, .layui-layer-setwin .layui-layer-maxmin:before { width: 7px; height: 7px; margin: -3px 0 0 -3px; background-color: #fff } .layui-layer-setwin .layui-layer-maxmin:after { z-index: 0; margin: -5px 0 0 -1px } .layui-layer-setwin .layui-layer-close { cursor: pointer } .layui-layer-setwin .layui-layer-close:hover { opacity: .7 } .layui-layer-setwin .layui-layer-close2 { position: absolute; right: -28px; top: -28px; color: #fff; background-color: #787878; padding: 3px; border: 3px solid; width: 28px; height: 28px; font-size: 16px; font-weight: bolder; border-radius: 50%; margin-left: 0; *right: -18px; _display: none } .layui-layer-setwin .layui-layer-close2:hover { opacity: unset; background-color: #3888f6 } .layui-layer-btn { text-align: right; padding: 0 15px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none } .layui-layer-btn a { height: 30px; line-height: 30px; margin: 5px 5px 0; padding: 0 16px; border: 1px solid #dedede; background-color: #fff; color: #333; border-radius: 2px; font-weight: 400; cursor: pointer; text-decoration: none; box-sizing: border-box } .layui-layer-btn a:hover { opacity: .9; text-decoration: none } .layui-layer-btn a:active { opacity: .8 } .layui-layer-btn .layui-layer-btn0 { border-color: transparent; background-color: #1e9fff; color: #fff } .layui-layer-btn-l { text-align: left } .layui-layer-btn-c { text-align: center } .layui-layer-dialog { min-width: 240px } .layui-layer-dialog .layui-layer-content { position: relative; padding: 16px; line-height: 24px; word-break: break-all; overflow: hidden; font-size: 14px; overflow-x: hidden; overflow-y: auto } .layui-layer-dialog .layui-layer-content .layui-layer-face { position: absolute; top: 18px; left: 16px; color: #959595; font-size: 32px; _left: -40px } .layui-layer-dialog .layui-layer-content .layui-icon-tips { color: #f39b12 } .layui-layer-dialog .layui-layer-content .layui-icon-success { color: #16b777 } .layui-layer-dialog .layui-layer-content .layui-icon-error { top: 19px; color: #ff5722 } .layui-layer-dialog .layui-layer-content .layui-icon-question { color: #ffb800 } .layui-layer-dialog .layui-layer-content .layui-icon-lock { color: #787878 } .layui-layer-dialog .layui-layer-content .layui-icon-face-cry { color: #ff5722 } .layui-layer-dialog .layui-layer-content .layui-icon-face-smile { color: #16b777 } .layui-layer-rim { border: 6px solid #8d8d8d; border: 6px solid rgba(0, 0, 0, .3); border-radius: 5px; box-shadow: none } .layui-layer-msg { min-width: 180px; border: 1px solid #d3d4d3; box-shadow: none } .layui-layer-hui { min-width: 100px; background-color: #000; filter: alpha(opacity=60); background-color: rgba(0, 0, 0, .6); color: #fff; border: none } .layui-layer-hui .layui-layer-close { color: #fff } .layui-layer-hui .layui-layer-content { padding: 11px 24px; text-align: center } .layui-layer-dialog .layui-layer-padding { padding: 18px 24px 18px 58px; text-align: left } .layui-layer-page .layui-layer-content { position: relative; overflow: auto } .layui-layer-iframe .layui-layer-btn, .layui-layer-page .layui-layer-btn { padding-top: 10px } .layui-layer-nobg { background: 0 0 } .layui-layer-iframe iframe { display: block; width: 100% } .layui-layer-loading { border-radius: 100%; background: 0 0; box-shadow: none; border: none } .layui-layer-loading .layui-layer-content { width: 76px; height: 38px; line-height: 38px; text-align: center } .layui-layer-loading-icon { font-size: 38px; color: #959595 } .layui-layer-loading2 { text-align: center } .layui-layer-loading-2 { position: relative; height: 38px } .layui-layer-loading-2:after, .layui-layer-loading-2:before { content: ''; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 3px solid #d2d2d2; box-sizing: border-box } .layui-layer-loading-2:after { border-color: transparent; border-left-color: #1e9fff } .layui-layer-tips { background: 0 0; box-shadow: none; border: none } .layui-layer-tips .layui-layer-content { position: relative; line-height: 22px; min-width: 12px; padding: 8px 15px; font-size: 12px; _float: left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .2); background-color: #000; color: #fff } .layui-layer-tips .layui-layer-close { right: -2px; top: -1px } .layui-layer-tips i.layui-layer-TipsG { position: absolute; width: 0; height: 0; border-width: 8px; border-color: transparent; border-style: dashed; *overflow: hidden } .layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT { left: 5px; border-right-style: solid; border-right-color: #000 } .layui-layer-tips i.layui-layer-TipsT { bottom: -8px } .layui-layer-tips i.layui-layer-TipsB { top: -8px } .layui-layer-tips i.layui-layer-TipsL, .layui-layer-tips i.layui-layer-TipsR { top: 5px; border-bottom-style: solid; border-bottom-color: #000 } .layui-layer-tips i.layui-layer-TipsR { left: -8px } .layui-layer-tips i.layui-layer-TipsL { right: -8px } .layui-layer-lan .layui-layer-title { background: #4476a7; color: #fff; border: none } .layui-layer-lan .layui-layer-btn { padding: 5px 10px 10px; border-top: 1px solid #e9e7e7 } .layui-layer-lan .layui-layer-btn a { background: #fff; border-color: #e9e7e7; color: #333 } .layui-layer-lan .layui-layer-btn .layui-layer-btn1 { background: #c9c5c5 } .layui-layer-molv .layui-layer-title { background: #009f95; color: #fff; border: none } .layui-layer-molv .layui-layer-btn a { background: #009f95; border-color: #009f95 } .layui-layer-molv .layui-layer-btn .layui-layer-btn1 { background: #92b8b1 } .layui-layer-lan .layui-layer-setwin .layui-icon, .layui-layer-molv .layui-layer-setwin .layui-icon { color: #fff } .layui-layer-win10 { border: 1px solid #aaa; box-shadow: 1px 1px 6px rgba(0, 0, 0, .3); border-radius: none } .layui-layer-win10 .layui-layer-title { height: 32px; line-height: 32px; padding-left: 8px; border-bottom: none; font-size: 12px } .layui-layer-win10 .layui-layer-setwin { right: 0; top: 0 } .layui-layer-win10 .layui-layer-setwin span { margin-left: 0; width: 32px; height: 32px; padding: 8px } .layui-layer-win10.layui-layer-page .layui-layer-setwin span { width: 38px } .layui-layer-win10 .layui-layer-setwin span:hover { background-color: #e5e5e5 } .layui-layer-win10 .layui-layer-setwin span.layui-icon-close:hover { background-color: #e81123; color: #fff } .layui-layer-win10.layui-layer-dialog .layui-layer-content { padding: 8px 16px 32px; color: #0033bc } .layui-layer-win10.layui-layer-dialog .layui-layer-padding { padding-top: 18px; padding-left: 58px } .layui-layer-win10 .layui-layer-btn { padding: 5px 5px 10px; border-top: 1px solid #dfdfdf; background-color: #f0f0f0 } .layui-layer-win10 .layui-layer-btn a { height: 20px; line-height: 18px; background-color: #e1e1e1; border-color: #adadad; color: #000; font-size: 12px; transition: all .3s } .layui-layer-win10 .layui-layer-btn a:hover { border-color: #2a8edd; background-color: #e5f1fb } .layui-layer-win10 .layui-layer-btn .layui-layer-btn0 { border-color: #0078d7 } .layui-layer-prompt .layui-layer-input { display: block; width: 260px; height: 36px; margin: 0 auto; line-height: 30px; padding-left: 10px; border: 1px solid #e6e6e6; color: #333 } .layui-layer-prompt textarea.layui-layer-input { width: 300px; height: 100px; line-height: 20px; padding: 6px 10px } .layui-layer-prompt .layui-layer-content { padding: 16px } .layui-layer-prompt .layui-layer-btn { padding-top: 0 } .layui-layer-tab { box-shadow: 1px 1px 50px rgba(0, 0, 0, .4) } .layui-layer-tab .layui-layer-title { padding-left: 0; overflow: visible } .layui-layer-tab .layui-layer-title span { position: relative; display: inline-block; vertical-align: top; border-left: 1px solid transparent; border-right: 1px solid transparent; min-width: 80px; max-width: 300px; padding: 0 16px; text-align: center; cursor: default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer } .layui-layer-tab .layui-layer-title span.layui-this { height: 51px; border-left-color: #eee; border-right-color: #eee; background-color: #fff; z-index: 10 } .layui-layer-tab .layui-layer-title span:first-child { border-left-color: transparent } .layui-layer-tabmain { line-height: 24px; clear: both } .layui-layer-tabmain .layui-layer-tabli { display: none } .layui-layer-tabmain .layui-layer-tabli.layui-this { display: block } .layui-layer-photos { background: 0 0; box-shadow: none } .layui-layer-photos .layui-layer-content { overflow: visible; text-align: center } .layui-layer-photos .layer-layer-photos-main img { position: relative; width: 100%; display: inline-block; *display: inline; *zoom: 1; vertical-align: top } .layui-layer-photos-next, .layui-layer-photos-prev { position: fixed; top: 50%; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; cursor: pointer; font-size: 52px; color: #717171 } .layui-layer-photos-prev { left: 32px } .layui-layer-photos-next { right: 32px } .layui-layer-photos-next:hover, .layui-layer-photos-prev:hover { color: #959595 } .layui-layer-photos-toolbar { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 52px; line-height: 52px; background-color: #000\9; filter: Alpha(opacity=60); background-color: rgba(0, 0, 0, .32); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 0 } .layui-layer-photos-toolbar>* { display: inline-block; vertical-align: top; padding: 0 16px; font-size: 12px; color: #fff; *display: inline; *zoom: 1 } .layui-layer-photos-toolbar * { font-size: 12px } .layui-layer-photos-header { top: 0; bottom: auto } .layui-layer-photos-header>span { cursor: pointer } .layui-layer-photos-header>span:hover { background-color: rgba(51, 51, 51, .32) } .layui-layer-photos-header .layui-icon { font-size: 18px } .layui-layer-photos-footer>h3 { max-width: 65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap } .layui-layer-photos-footer a:hover { text-decoration: underline } .layui-layer-photos-footer em { font-style: normal } @-webkit-keyframes layer-bounceOut { 100% { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7) } 30% { -webkit-transform: scale(1.05); transform: scale(1.05) } 0% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes layer-bounceOut { 100% { opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7) } 30% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05) } 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } .layer-anim-close { -webkit-animation-name: layer-bounceOut; animation-name: layer-bounceOut; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s } @media screen and (max-width:1100px) { .layui-layer-iframe { overflow-y: auto; -webkit-overflow-scrolling: touch } } .search-ipt { border: 0; background: transparent; border-radius: 0; -webkit-appearance: none; } .web-search { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; visibility: hidden; } .js .web-search { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100vh; opacity: 0; visibility: hidden; top: 175px; bottom: 0; height: auto; } .js .web-search::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); background-color: #fff\9; -webkit-transform: scale(1, 0.1); -ms-transform: scale(1, 0.1); -o-transform: scale(1, 0.1); transform: scale(1, 0.1); } .web-search .btn--search-close { display: inline-block; font-size: 2em; position: absolute; top: 1.25em; right: 1.25em; display: none; background: url(../images/search_btn_close.png) no-repeat center 0; width: 50px; height: 50px; cursor: pointer; } .web-search .btn--search-close:hover { background-position: center -50px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .js .btn--search-close { display: block; } .web-search .search-ipt { font-family: inherit; line-height: 1; display: inline-block; box-sizing: border-box; width: 75%; padding: 0.05em 0; color: #333; border-bottom: 3px solid; font-size: 20px; line-height: 10px } .web-search .search-ipt::-webkit-input-placeholder { color: #888; font-weight: bold; } .web-search .search-ipt::-moz-placeholder { opacity: 1; color: #888; font-weight: bold; } .web-search .search-ipt:-ms-input-placeholder { color: #888; font-weight: bold; } .web-search .search-ipt::-webkit-search-cancel-button, .web-search .search-ipt::-webkit-search-decoration { -webkit-appearance: none; } .web-search .search-ipt::-ms-clear { display: none; } .web-search .search-attr { font-size: 90%; display: block; width: 75%; margin: 0 auto; padding: 0.85em 0; text-align: right; color: #333; } .js .container { position: relative; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .container.other .privacy-main { padding-top: 140px; } .js .main-wrap--move { height: 100vh; } .js .web-search { pointer-events: none; } .js .search--open { pointer-events: auto; opacity: 1; visibility: visible; } .js .web-search::before { opacity: 0.3; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .js .search--open::before { opacity: 1; } .web-search .btn--search-close { opacity: 0; -webkit-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .search--open .btn--search-close { opacity: 1; -webkit-transition: transform .3s ease; -o-transition: transform .3s ease; transition: transform .3s ease; } .search__suggestion, .web-search .search-attr { opacity: 0; -moz-transform: translate3d(0, 30px, 0); -webkit-transform: translate3d(0, 30px, 0); -ms-transform: translate3d(0, 30px, 0); -o-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); -moz-transition: opacity 0.8s, transform 0.8s; -webkit-transition: opacity 0.8s, transform 0.8s; -ms-transition: opacity 0.8s, transform 0.8s; -o-transition: opacity 0.8s, transform 0.8s; transition: opacity 0.8s, transform 0.8s; } .search--open .search-attr { opacity: 1; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); font-size: 20px; } .js .web-search .search-ipt { font-size: 60px; font-weight: bold; border-bottom-width: 1px; padding: 15px 0; -moz-transform: scale3d(0, 1, 1); -webkit-transform: scale3d(0, 1, 1); -ms-transform: scale3d(0, 1, 1); -o-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -moz-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -moz-transition: transform .3s; -webkit-transition: transform .3s; -ms-transition: transform .3s; -o-transition: transform .3s; transition: transform .3s; opacity: 0; text-transform: uppercase; } .js .web-search .search-ipt, .web-search .search-attr { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .js .search--open .search-ipt { -moz-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; -moz-transition-duration: 0.4s; -webkit-transition-duration: 0.4s; -ms-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; } .js .search--open .search-btn { display: none !important; } .js .fixed-body .web-search { top: 71px; } .js .search--open::before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .web-search .search-attr { padding-bottom: 0; } .js .web-search { width: 70%; height: auto; left: 15%; top: 50%; bottom: auto; padding: 35px 0; margin: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); border-radius: 8px; z-index: 100001; overflow: hidden; } .js .fixed-body .web-search { top: 50%; } .main-wrap--move:after { content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); position: fixed; left: 0; top: 0; z-index: 100000; } .margin-auto { display: flex; max-width: 1480px; margin: 0 auto; width: 90%; text-transform: capitalize; } .dh-title-index-about { background: #F3F3F3; width: 100%; height: 50px; } .dh-title-index-about .dh-text { flex-wrap: wrap; display: flex; align-items: center; height: 50px; font-family: 'Poppins'; font-weight: 400; font-size: 16px; color: #000000; } .dh-title-index-about .dh-text span { color: rgba(16, 82, 238, 1); margin-right: 15px; } .dh-title-index-about .dh-text i { font-family: 'Arial'; font-weight: 400; font-size: 16px; color: #CCCCCC; padding: 0 6px; box-sizing: border-box; margin-top: 2px; } .dh-title-index-about .dh-text b { color: rgba(16, 82, 238, 1); } .dh-title-index-about .dh-text a { text-transform: uppercase; font-weight: normal; display: flex; align-items: center; font-size: var(--font-size14); color: #4C505F; } .dh-title-index-about .dh-text a:last-child i { display: none; } .sidebar { position: fixed; top: 50%; transform: translateY(-50%); right: 0; margin: 20px; z-index: 99; border-radius: 50%; } .sidebar.active { display: block; } .sidebar ul li { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 8px; background: #009ee7; border-radius: 25%; } .sidebar ul li span { display: block; width: 50px; height: 50px; } .sidebar ul li .sidebar_item_con { display: none; position: absolute; top: 0; right: 100%; } .sidebar ul li .sidebar_item_con .sidebar_item_txt { margin-right: 4px; background-color: #FFEC37; padding: 0 8px; text-align: right; height: 50px; font-size: 16px; color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; } .sidebar ul .slide:hover .sidebar_item_con { display: block; } .sidebar ul .slide img { max-width: 150px; max-height: 100%; height: auto; width: auto; } .sidebar ul .slide:hover .sidebar_item_con { display: block; } .search-product-detail .fl-rich-textqq .sep-datalistqq>li .thumbqq { position: relative; display: block; max-width: 400px; padding: 5px; border: 1px solid #eee; background-color: #fff; margin: 0 20px 0 0; float: left; width: 40%; padding-bottom: 11%; } .leader .information { border-radius: 20px; box-shadow: 0px 0px 43px 0px rgb(59 59 59 / 10%); } .leader .information { display: flex; justify-content: space-between; align-items: center; margin-top: 5%; } .leader .information .left_img { width: 30%; position: relative; padding-bottom: 30%; border-radius: 20px; overflow: hidden; } .leader .information .left_img img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; } .leader .information .information_info { width: 70%; padding: 3%; font-size: 18px; line-height: 1.5; color: #666; } .leader .information .information_info .name { margin: 15px 0 5px; color: #009ee7; font-size: 22px; } .leader .information .information_info .position { font-size: 18px; color: #818080; } @media (max-width:992px) { .white .btn--search { display: inline-block; width: 50px; height: 60px; vertical-align: middle; cursor: pointer; margin-right: 0; background: url(../images/search-button.png) no-repeat center; } .js .web-search { width: 100%; left: 0%; top: 60px; transform: translateY(0); padding: 25px 0; } .js .web-search .search-ipt { font-size: 16px; width: 90%; padding: 5px 0; } .search--open .search-attr { display: none; } .web-search .btn--search-close { font-size: 1em; height: 44px; width: 40px; top: -10px; right: 0.25em; } } .accordion__item { margin-bottom: 4px; } .accordion__header { background-color: #009ee7; color: #fff; padding: 13px 18px; font-size: 25px; border: 0; } .accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; } .accordion__panel { display: none; } .accordion__item--is-open .accordion__header { background-color: #009ee7; color: #fff; font-size: 25px; } .icon { height: 40px; width: 40px; display: inline-block; color: inherit; fill: currentColor; line-height: 1; flex-shrink: 0; max-width: initial; } .accordion[data-animation=on] .accordion__icon-plus .icon__group { transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1); } .accordion[data-animation=on] .accordion__icon-plus .icon__group>* { transition: transform .3s, stroke-dashoffset .3s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .accordion__icon-plus .icon__group>* { transform-origin: 50% 50%; width: 16px; height: 2px; background-color: #fff; display: block; position: absolute; } .accordion__icon-plus .icon__group { transform: rotate(-90deg); } .accordion__header .icon .icon__group { stroke-width: 2px; width: 100%; height: 43%; } .accordion__icon-plus .icon__group>:first-child { transform: rotate(-90deg); transition: transform .3s, stroke-dashoffset .3s; } .accordion__icon-plus .icon__group { will-change: transform; transform-origin: 50% 50%; } .accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group>:first-child { transform: rotate(0); } .product-intro { position: relative; overflow: hidden; } .page_title { font-size: var(--font-size36); margin-bottom: 18px; } .cloud-zoom-lens { border: 1px solid #eee; cursor: move; } .cloud-zoom-title { position: absolute !important; background-color: #000; color: #fff; padding: 3px; width: 100%; text-align: center; font-weight: bold; font-size: 10px; top: 0px; } .cloud-zoom-big { overflow: hidden; padding: 0px; } .cloud-zoom-loading { color: white; background: #222; padding: 3px; border: 1px solid #000; } .product-view .swiper-slide { padding-bottom: 1px; } .product-view .image-additional-wrap { position: relative; } .product-view .swiper-button-next {} .product-view .product-image.zoom_remove:after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0; z-index: 999; } .product-view { position: relative; width: 37.6%; float: left; } .product-view .product-image { position: relative; border: 1px solid #ddd; } .product-view .product-image img { position: relative; width: 100%; } .product-view .image-additional { position: relative; margin: 20px 15px; overflow: hidden; } .product-view .image-additional li { position: relative; width: 100%; width: 33.3333%; float: left; overflow: visible; } .product-view .image-additional li.single { display: none; } .product-view .image-additional li img { display: block; position: relative; width: 100%; margin: 0 auto; border: 1px solid #c0c0c0; padding: 1px; } .product-view .image-additional li a { display: block; position: relative; padding: 0 15%; } .product-view .image-additional li.current img { border: 2px solid #009ee7; padding: 0; } .product-view .image-additional img.popup { display: none; } .ad_prompt { position: absolute; display: block; top: 50%; left: 0; width: 100%; line-height: 40px; margin: -20px 0 0; text-align: center; color: #ff6f00; font-size: 20px; -webkit-animation: twinkling 1s infinite ease-in-out; animation: twinkling 1s infinite ease-in-out; display: none; } .product-view .image-additional.swiper-container-horizontal>.swiper-pagination-bullets { display: none; } .product-view .swiper-button-next, .product-view .swiper-button-prev { width: 30px; height: 30px; margin-top: -15px; opacity: 1; line-height: 30px; font-size: 28px; background: none; -webkit-transform: scale(.6, 1); -ms-transform: scale(.6, 1); -o-transform: scale(.6, 1); transform: scale(.6, 1); font-weight: bold; } .product-view .swiper-button-prev, .product-view .swiper-container-rtl .swiper-button-next { left: -10px; } .product-view .swiper-button-next, .product-view .swiper-container-rtl .swiper-button-prev { right: -10px; } /*product summary*/ .product-summary { position: relative; width: 57%; float: right; padding: 0 0 10px; color: #666; font-size: 13px; } .product-summary .product-meta { line-height: 1.8; font-size: var(--font-size24); } .product-summary .product-meta h3 { margin: 0 0 5px; font-size: 14px; } .product-summary .product-meta li { width: 100%; display: table; padding: 2px 0; } .product-summary .product-meta li em { display: table-cell; width: 40%; color: #aaa; } .product-summary .product-meta li .item-val { display: table-cell; -ms-word-break: break-all; word-break: break-all; word-wrap: break-word; } .product-btn-wrap { position: relative; padding-top: 30px; } .product-btn-wrap .email, .product-btn-wrap .button, .product-btn-wrap .buy { position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; line-height: 28px; padding: .1em 1em; font-size: var(--font-size20); border-radius: 3px; background: #009ee7; border: 2px solid #009ee7; color: #fff; margin: 0 15px 10px 0; } .product-btn-wrap .email:before, .product-btn-wrap .button:before { padding-right: 8px; } .product-btn-wrap a:hover { background-color: #fff !important; border-color: #009ee7 !important; color: #009ee7 !important; } .product-summary .share-this { margin: 30px 0 0; text-align: right; } /* product detail */ .product-detail { position: relative; overflow: visible; margin: 30px 0 0; } .detail-tabs { position: relative; } .detail-tabs .title { position: relative; display: inline-block; font-weight: normal; vertical-align: top; line-height: 26px; padding: 1px 20px; cursor: pointer; margin: 0 5px 0 0; font-size: 16px; background-color: #ddd; border: 1px solid #ddd; color: #fff; } .detail-tabs .title.current { background: #000; border-color: #000; color: #fff; } .product-detail .tab-panel-content { padding: 10px 0; display: block; overflow: hidden } .product-detail .disabled { display: none; } @media only screen and (max-width:480px) { .product-intro { overflow: visible; } .product-view { width: auto; margin-left: -10px; margin-right: -10px; } .product-view .image-additional li a { margin-left: 0; margin-right: 0; } .product-view .image-additional li a:before, .product-view .image-additional li a:after { display: none; } .product-view .swiper-button-prev, .product-view .swiper-button-next { width: 27px; height: 40px; line-height: 40px; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; font-size: 18px; opacity: .8; } .product-view .swiper-button-prev { left: 0; border-radius: 0 3px 3px 0; padding-right: 2px; } .product-view .swiper-button-next { right: 0; border-radius: 3px 0 0 3px; padding-left: 2px; } .product-view .swiper-button-prev:before, .product-view .swiper-button-next:before { display: inline-block; -webkit-transform: scale(.7, 1); -ms-transform: scale(.7, 1); -o-transform: scale(.7, 1); transform: scale(.7, 1); } .product-btn-wrap .email, .product-btn-wrap .pdf, .product-btn-wrap .buy { padding-top: 6px; padding-bottom: 6px; } .goods-may-like .title { text-transform: none; } .page_title { font-weight: normal; font-size: 20px; margin-bottom: 10px; } .product-summary { padding-top: 0; } .product-summary .page_title { font-size: 24px; } .product-summary .product-meta { font-size: 14px; } .product-summary .product-meta p { font-size: 15px; } .product-summary .product-meta h3 { line-height: 1.3; font-size: 16px; } .product-summary .product-meta li { font-size: 13px; } .product-summary .share-this { text-align: left; margin: 20px 0 0; } .product-btn-wrap { padding-top: 30px; } .product-btn-wrap .email, .product-btn-wrap .pdf, .product-btn-wrap .buy { font-size: 14px; padding: 2px 10px; } .product-detail { margin-top: 40px; } .detail-tabs .title { font-size: 14px; padding: 1px 15px; } } .product_case { margin-top: 50px; } .product_case .describe { font-size: 18px; line-height: 2; color: #333; text-align: center; } .product_case ul { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px; text-align: center; } .product_case ul li { margin-bottom: 40px; width: 48%; padding: 4% 0% 1%; display: flex; flex-direction: column; align-items: center; background-color: #fafafa; border-radius: 30px; } .product_case ul li .title { font-weight: 800; font-size: var(--font-size45) } .product_case ul li .desc { font-size: var(--font-size18); margin: 4% auto; } .product_case ul li a { padding: 1.5% 4%; border: 5px; background-color: #009ee7; color: #fff; border-radius: 5px; font-size: 16px; transition: .2s; } .product_case ul li a:hover { background-color: #333; } .product_case ul li .image { position: relative; width: 100%; padding-bottom: 70%; margin-top: 30px; } .product_case ul li .image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } @media only screen and (max-width:768px) { #authentication ul li img { object-fit: contain; } } .t_alert { position: fixed; width: 100%; height: 100%; background: rgb(0 0 0 / 38%); z-index: 111; display: none; } .t_alert span { position: absolute; right: 10%; top: 10%; width: 30px; height: 30px; background: url(../images/fancy_close.png) no-repeat center center; cursor: pointer; z-index: 1; } .t_alert .bg { position: absolute; width: 80%; height: 80%; left: 10%; top: 10%; background-size: contain; background-position: center; text-align: center; background-color: rgb(222 222 222 / 54%); border-radius: 22px; } .t_alert .bg img { max-width: 100%; max-height: 100%; } .clearfix span { font-size: var(--font-size18); margin: 30px 3px 30px; display: inline-block; position: relative; font-weight: 600; padding: 0 25px; cursor: pointer; width: fit-content; text-align: center; } .clearfix .swiper-notification { display: none; } .clearfix span::after { content: ''; display: inline-block; border-bottom: 3px solid; width: 0%; position: absolute; left: 0; bottom: -10px; transition: all .7s ease; } .clearfix span:hover::after { width: 100%; } .clearfix .active { color: var(--vi-color); } .clearfix .active::after { background-color: var(--vi-color); width: 100%; } @media (max-width: 1600px) { .Mainbottom .columns .left .link { background-color: var(--vi-color); display: flex; justify-content: center; align-items: center; border-radius: 50px; color: #fff; padding: 10px 20px; width: fit-content; margin-top: 20px; border: 2px solid var(--vi-color); transition: all 0.3s; } } .css_ios { display: none; } @media (max-width: 950px) { .css_ios { display: block; } .css_pc { display: none !important; } .Mainbottom .columns .left .link { display: flex; justify-content: center; align-items: center; border-radius: 50px; color: #fff; padding: 10px 20px; width: fit-content; margin: 20px auto; border: 2px solid var(--vi-color); transition: all 0.3s; } .features ul li { width: 100%; margin: 15px 0 0 !important; } } .banner .image img { /* min-height: 230px; */ height: auto; object-fit: cover; } @keyframes bulbFlicker { 0% { opacity: 1; text-shadow: 0 0 10px rgba(241, 87, 41, 0.35), 0 0 20px rgba(241, 87, 41, 0.15); } 8% { opacity: 0.75; text-shadow: 0 0 6px rgba(241, 87, 41, 0.25); } 12% { opacity: 0.25; text-shadow: none; } 16% { opacity: 0.9; text-shadow: 0 0 8px rgba(241, 87, 41, 0.3); } 22% { opacity: 0.4; text-shadow: none; } 28% { opacity: 1; text-shadow: 0 0 12px rgba(241, 87, 41, 0.4), 0 0 24px rgba(241, 87, 41, 0.2); } 52% { opacity: 0.85; text-shadow: 0 0 6px rgba(241, 87, 41, 0.25); } 58% { opacity: 0.3; text-shadow: none; } 63% { opacity: 1; text-shadow: 0 0 12px rgba(241, 87, 41, 0.4), 0 0 26px rgba(241, 87, 41, 0.22); } 78% { opacity: 0.7; text-shadow: 0 0 5px rgba(241, 87, 41, 0.2); } 86% { opacity: 1; text-shadow: 0 0 14px rgba(241, 87, 41, 0.45), 0 0 28px rgba(241, 87, 41, 0.24); } 100% { opacity: 1; text-shadow: 0 0 10px rgba(241, 87, 41, 0.35), 0 0 20px rgba(241, 87, 41, 0.15); } } .blink-text { animation: bulbFlicker 2.2s infinite; will-change: opacity, text-shadow; } .swiper1 ul { display: flex; justify-content: space-between; } .swiper1 li { width: 32%; } #authentication .swiper1 li img { /* width: 100%; position: relative; */ object-fit: contain; } .indexNews .left .text:hover .intro { color: var(--vi-color); } .indexNews .right a .text:hover .intro { color: var(--vi-color); } .richtext p { font-size: 16px !important; } .navList a { font-size: 16px !important; } .module_hEWu4upOZcr0 .header .navBox { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(16px); } #flow-Video .image { position: relative; padding-top: 55%; } #flow-Video .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bannerDetails .images .image { position: relative; } .bannerDetails .images .image::before { background: #0e0e0e61; content: ''; width: 100%; height: 100%; position: absolute; top: 0; } .intro { font-size: 18px; } #thumbSwiper .dfing { margin-top: 10px; background-color: #0000000f; } .comering { justify-content: center; text-align: center; flex-wrap: wrap; } .product-views .flexSpaceBe { justify-content: space-around; } .max-width-adaptive-lg ul li { font-size: 18px; } .accordion__item--is-open .icon__group p { transform: rotate(-90deg) !important; } .perunsg .Product1 .right .image { padding-bottom: 100% !important; } .Product1 .right .image { padding-bottom: 49% !important; } .enring { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .aboust_tis { text-align: center; } .abouts_s { width: 55%; word-break: break-all; margin-right: 5%; } .abouts_i { width: 40%; } .abouts_ss { font-size: 25px; font-weight: bold; } .abouts_tilte { font-size: 40px; text-align: center; text-transform: capitalize; } .aboust_w { display: flex; flex-wrap: wrap; justify-content: space-between; } .abouts_link { width: 10%; height: 2px; margin: 0 auto; background-color: #009ee7; } .aboust_ul { display: flex; justify-content: space-between; } .aboust_litile { font-size: 20px; text-transform: uppercase; } @media (max-width:992px) { .abouts_s{ width: 99%;} } @media (min-width:1300px) { .white .module_hEWu4upOZcr0 .header .navBox{ padding-left: 3%;} } @media (min-width:1500px) { .module_hEWu4upOZcr0 .header .commonMain{ padding: 0vw 6.375vw 0 8.375vw !important; } .navList a{ font-size: 16px !important;} } @media (min-width:1620px) { .module_hEWu4upOZcr0 .header .commonMain{ padding: 0vw 8.375vw 0 8.375vw !important; } .navList a{ font-size: 16px !important;} } @media (min-width:2500px) { .module_hEWu4upOZcr0 .header .commonMain{ width: 62% !important; } .module_hEWu4upOZcr0 .header .commonMain{ padding: 0vw 8.375vw 0 8.375vw !important; } .navList a{ font-size: 16px !important;} } @media (min-width:3000px) { .module_hEWu4upOZcr0 .header .commonMain{ width: 41% !important; } .module_hEWu4upOZcr0 .header .commonMain{ padding: 0vw 8.375vw 0 8.375vw !important; } .navList a{ font-size: 16px !important;} } .header .linkRight a{ font-size: 13px !important;} .dh-title-index-about a:last-child{ color: var(--vi-color) !important;} .accordion__panel tr td{ background-color: #f2f2f2 !important; }