@charset "UTF-8"; html { font-size: 16px } body { font-size: 16px } .inline__block { display: inline-block } #CMD sup { position: relative; top: 0; font-size: .6em; vertical-align: super; line-height: 0!important; background-color: rgba(0, 0, 0, 0)!important } #CMD sup a { color: inherit!important } #CMD sup.sign-deg { top: 0; font-size: 1em; vertical-align: baseline } #CMD sup.sign-cr, #CMD sup.sign-tm { top: .1em; font-size: 1.3em; vertical-align: baseline } #CMD .sections-wdcontent .content__title sup, #CMD .wd__content .content__title sup { position: relative; vertical-align: super; font-size: .6em; line-height: 0 } #CMD .sections-wdcontent .content__info sup.sign-deg, #CMD .wd__content .content__info sup.sign-deg { top: -.1em } #CMD .sections-wdcontent .content__info sup.sign-cr, #CMD .wd__content .content__info sup.sign-cr { font-size: 1.4em } #CMD .sections-wdcontent .content__info sup.sign-tm, #CMD .wd__content .content__info sup.sign-tm { top: 0; font-size: 1em } #CMD .sections-wdcontent .content__info sup.footnote-num *, #CMD .wd__content .content__info sup.footnote-num * { font-size: 1.1em } #CMD .footnote li sup.sign-cr, #CMD .footnote li sup.sign-tm { top: .1em; font-size: 1.3em; vertical-align: baseline } #CMD [class*=text__tt] sup { position: relative; top: 0; font-size: .6em; background-color: rgba(0, 0, 0, 0); vertical-align: super; line-height: 0!important } #CMD [class*=text__tt] sup.sign-cr { top: 0; font-size: .6em } #CMD [class*=text__tt] sup.sign-tm { top: 0; font-size: 1em; vertical-align: baseline } #CMD [class*=text__tt] sup.sign-star { top: -.83em; font-size: .5em } #CMD .wd__feature__list .wd__feature__data sup * { font-size: inherit!important } #CMD .wd__feature__list .wd__feature__data sup.sign-deg { top: -1em; font-size: .5em } #CMD .wd__feature__list .wd__feature__data sup.sign-cr { top: -.7em; font-size: .5em } #CMD .wd__feature__list .wd__feature__data sup.sign-tm { top: 0; font-size: 1em } #CMD .wd__feature__list .wd__feature__data sup.sign-star { top: -.83em; font-size: .5em } #CMD .wd__feature__list .wd__feature__data sup.sign-xe { top: -.1em; font-size: .6em } #CMD .wd__feature__list .wd__feature__data sup.footnote-num { top: -.4em; font-size: .8em } #CMD .wd__feature__list .wd__feature__data sup.footnote-num a { line-height: 0 } #CMD .wd__feature__list .wd__feature__describe sup, #CMD .wd__feature__list .wd__feature__describe__top sup { position: relative; top: 0; font-size: .6em; background-color: rgba(0, 0, 0, 0); vertical-align: super; line-height: 0!important } #CMD .wd__feature__list .wd__feature__describe sup *, #CMD .wd__feature__list .wd__feature__describe__top sup * { font-size: inherit!important } #CMD .wd__feature__list .wd__feature__describe sup.sign-deg, #CMD .wd__feature__list .wd__feature__describe__top sup.sign-deg { top: 0; font-size: 1em; vertical-align: baseline } #CMD .wd__feature__list .wd__feature__describe sup.sign-cr, #CMD .wd__feature__list .wd__feature__describe__top sup.sign-cr { top: 0; font-size: .6em } #CMD .wd__feature__list .wd__feature__describe sup.sign-tm, #CMD .wd__feature__list .wd__feature__describe__top sup.sign-tm { top: 0; vertical-align: baseline; font-size: 1em!important } #CMD .wd__feature__list .wd__feature__describe sup.footnote-num, #CMD .wd__feature__list .wd__feature__describe__top sup.footnote-num { top: 0; font-size: .8em } #CMD .wd__feature__list .wd__feature__describe sup.footnote-num a, #CMD .wd__feature__list .wd__feature__describe__top sup.footnote-num a { line-height: 0 } #CMD .ksp__layout sup { position: relative; vertical-align: super; top: 0; font-size: .6em; line-height: 0 } #CMD .ksp__layout .wd__content .content__info sup, #CMD .ksp__layout .wd__content .content__title sup { position: relative; vertical-align: super; top: 0; font-size: .6em; line-height: 0 } #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup, #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe sup, #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top sup { position: relative; vertical-align: super; top: 0; font-size: .6em; line-height: unset } #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup.sign-deg, #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe sup.sign-deg, #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-deg { font-size: 1em!important; vertical-align: super } #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__data sup.sign-tm, #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe sup.sign-tm, #CMD .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-tm { top: 0; vertical-align: baseline; font-size: 1em!important } #CMD .wdblockimg .footnote-num, #CMD .wdblockimg .footnote-num * { top: 0; font-size: .6em!important; vertical-align: super } .odin ol li, .odin ul li { margin: 0 } @media all and (min-width:1280px) { .wd__section .large__text-center { text-align: center } .wd__section .large__text-center.wd__content { margin-right: auto; margin-left: auto } .wd__section .large__text-center.wd__content .content__comment, .wd__section .large__text-center.wd__content .content__info, .wd__section .large__text-center.wd__content .content__link, .wd__section .large__text-center.wd__content .content__slogan, .wd__section .large__text-center.wd__content .content__title { margin-right: auto; margin-left: auto; text-align: center } .wd__section .large__text-center.wd__content .content__slogan::after { margin-right: auto; margin-left: auto } .wd__section .large__text-center.wd__content .content__title::after { margin: 0 auto; text-align: center } .wd__section .large__text-left.wd__content { text-align: left } .wd__section .large__text-left.wd__content .content__comment, .wd__section .large__text-left.wd__content .content__info, .wd__section .large__text-left.wd__content .content__link, .wd__section .large__text-left.wd__content .content__slogan, .wd__section .large__text-left.wd__content .content__title { margin-left: 0; text-align: left } .wd__section .large__text-left.wd__content .content__slogan::after { left: 0; margin-left: 0 } .wd__section .large__text-left.wd__content .content__title::after { margin-left: 0; text-align: left } .wd__section .large__text-left.wd__feature__list { text-align: left } .wd__section .large__text-left.wd__feature__list .wd__feature { margin-right: 58px; margin-left: 0; text-align: left } .wd__section .large__text-right.wd__content { text-align: right } .wd__section .large__text-right.wd__content .content__slogan::after { right: 0; margin-right: 0 } .wd__section .large__text-right.wd__feature__list { text-align: right } .wd__section .large__text-right.wd__feature__list .wd__feature { margin-right: 0; margin-left: 58px; text-align: right } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__section .medium__text-left.wd__content { left: 0; text-align: left } .wd__section .medium__text-left.wd__content .content__comment, .wd__section .medium__text-left.wd__content .content__info, .wd__section .medium__text-left.wd__content .content__link, .wd__section .medium__text-left.wd__content .content__slogan, .wd__section .medium__text-left.wd__content .content__title { margin-left: 0; text-align: left } .wd__section .medium__text-left.wd__content .content__slogan::after { margin-left: 0 } .wd__section .medium__text-left.wd__feature__list { text-align: left } .wd__section .medium__text-left.wd__feature__list .wd__feature { margin-right: 50px; margin-left: 0 } .wd__section .medium__text-center.wd__content { left: 0; margin-right: auto; margin-left: auto; text-align: center } .wd__section .medium__text-center.wd__content .content__comment, .wd__section .medium__text-center.wd__content .content__info, .wd__section .medium__text-center.wd__content .content__link, .wd__section .medium__text-center.wd__content .content__slogan, .wd__section .medium__text-center.wd__content .content__title { margin-right: auto; margin-left: auto; text-align: center } .wd__section .medium__text-center.wd__content .content__slogan::after { margin-right: auto; margin-left: auto } .wd__section .medium__text-center.wd__feature__list { text-align: center } .wd__section .medium__text-center.wd__feature__list .wd__feature { margin-right: 30px; margin-left: 30px } .wd__section .medium__text-center.wd__feature__list .wd__feature .wd__feature__data, .wd__section .medium__text-center.wd__feature__list .wd__feature .wd__feature__describe, .wd__section .medium__text-center.wd__feature__list .wd__feature .wd__feature__describe__top { text-align: center } } @media all and (max-width:730.5px) { .wd__section .small__text-left.wd__content { left: 0; text-align: left } .wd__section .small__text-left.wd__content .content__comment, .wd__section .small__text-left.wd__content .content__info, .wd__section .small__text-left.wd__content .content__link, .wd__section .small__text-left.wd__content .content__slogan, .wd__section .small__text-left.wd__content .content__title { margin-left: 0; text-align: left } .wd__section .small__text-left.wd__content .content__slogan::after { margin-left: 0 } .wd__section .small__text-left.wd__feature__list { text-align: center } .wd__section .small__text-left.wd__feature__list .wd__feature__list .wd__feature { margin-right: 20px; margin-left: 0 } .wd__section .small__text-center { text-align: center } .wd__section .small__text-center.wd__content { left: 0; margin-right: auto; margin-left: auto; text-align: center } .wd__section .small__text-center.wd__content .content__comment, .wd__section .small__text-center.wd__content .content__info, .wd__section .small__text-center.wd__content .content__link, .wd__section .small__text-center.wd__content .content__slogan, .wd__section .small__text-center.wd__content .content__title { margin-right: auto; margin-left: auto; text-align: center } .wd__section .small__text-center.wd__content .content__slogan::after { margin-right: auto; margin-left: auto } .wd__section .small__text-center.wd__feature__list { text-align: center } .wd__section .small__text-center.wd__feature__list .wd__feature { margin-right: 14px; margin-left: 14px } } #CMD .wd__section.text-black { background-color: #fff } #CMD .wd__section.text-black .wd__content .content__comment, #CMD .wd__section.text-black .wd__content .content__info, #CMD .wd__section.text-black .wd__content .content__title { color: #000 } #CMD .wd__section.text-black .wd__feature__list .wd__feature .wd__feature__data, #CMD .wd__section.text-black .wd__feature__list .wd__feature .wd__feature__data *, #CMD .wd__section.text-black .wd__feature__list .wd__feature .wd__feature__describe, #CMD .wd__section.text-black .wd__feature__list .wd__feature .wd__feature__describe *, #CMD .wd__section.text-black .wd__feature__list .wd__feature .wd__feature__describe__top, #CMD .wd__section.text-black .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #000 } #CMD .wd__section .section_content .wd__content.theme-dark .content__comment { color: #999 } #CMD .wd__section .section_content .wd__content.theme-dark .content__info, #CMD .wd__section .section_content .wd__content.theme-dark .content__title { color: #fff } #CMD .wd__section .section_content .wd__content.theme-dark .wd__feature__list .wd__feature .wd__feature__describe, #CMD .wd__section .section_content .wd__content.theme-dark .wd__feature__list .wd__feature .wd__feature__describe span, #CMD .wd__section .section_content .wd__content.theme-dark .wd__feature__list .wd__feature .wd__feature__describe__top, #CMD .wd__section .section_content .wd__content.theme-dark .wd__feature__list .wd__feature .wd__feature__describe__top span { color: #fff } #CMD .wd__section .section_content .wd__feature__list.theme-dark .wd__feature .wd__feature__describe, #CMD .wd__section .section_content .wd__feature__list.theme-dark .wd__feature .wd__feature__describe span, #CMD .wd__section .section_content .wd__feature__list.theme-dark .wd__feature .wd__feature__describe__top, #CMD .wd__section .section_content .wd__feature__list.theme-dark .wd__feature .wd__feature__describe__top span { color: #fff } .modal-button-container.bg-gray .modal-button-text { color: #6f6f6f } .modal-button-container.bg-gray .modal-button .modal-button-end-cap, .modal-button-container.bg-gray .modal-button .modal-button-scaler, .modal-button-container.bg-gray .modal-button .modal-button-start-cap { background: #6f6f6f } .modal-button-container.bg-white .modal-button.old__browser .modal-button-copy, .modal-button-container.bg-white .modal-button.old__browser .modal-button-end-cap, .modal-button-container.bg-white .modal-button.old__browser .modal-button-start-cap { background: #fff } .modal-button-container.bg-white .modal-button.old__browser .modal-button-copy { color: #333 } .modal-button-container.bg-white .modal-button.old__browser .pluscircle-icon { /* background-image: url(../images/icon_modalbtn_gray.png)!important */ } .modal-button-container.bg-white .modal-button .modal-button-copy { color: #333 } .modal-button-container.bg-white .modal-button .modal-button-end-cap, .modal-button-container.bg-white .modal-button .modal-button-scaler, .modal-button-container.bg-white .modal-button .modal-button-start-cap { background: #fff } .modal-button-container.bg-white .modal-button .pluscircle-icon svg path { fill: #333 } .text-left { text-align: left } .text-right { text-align: right } .text-center { text-align: center } .text-justify { text-align: justify } .text-nowrap { white-space: nowrap } .text-lowercase { text-transform: lowercase } .text-uppercase { text-transform: uppercase } .text-capitalize { text-transform: capitalize } .d-none { display: none; position: absolute!important; overflow: hidden; padding: 0!important; width: 1px!important; height: 1px!important; border: 0!important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px) } .screen-reader-only { position: absolute; overflow: hidden; width: 1px; white-space: nowrap; clip: rect(0 0 0 0) } .visuallyhidden { position: absolute; overflow: hidden; top: 0; padding: 0; width: 1px; height: 1px; font-size: unset; border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0 0 99.9% 99.9%); clip-path: inset(0 0 99.9% 99.9%) } #CMD button, #CMD input, #CMD select, #CMD textarea { -webkit-appearance: normal; -moz-appearance: normal; appearance: normal; outline: initial; outline-color: initial; outline-style: initial; outline-width: initial } .js-focus-visible #CMD :focus:not(.focus-visible) { outline: 0 } #overviewContentInsertWrapper a:focus-visible, #overviewContentInsertWrapper button:focus-visible, #overviewContentInsertWrapper div:focus-visible, #overviewContentInsertWrapper h1:focus-visible, #overviewContentInsertWrapper h2:focus-visible, #overviewContentInsertWrapper h3:focus-visible, #overviewContentInsertWrapper h4:focus-visible, #overviewContentInsertWrapper image:focus-visible, #overviewContentInsertWrapper input:focus-visible, #overviewContentInsertWrapper li:focus-visible, #overviewContentInsertWrapper nav:focus-visible, #overviewContentInsertWrapper ol:focus-visible, #overviewContentInsertWrapper p:focus-visible, #overviewContentInsertWrapper select:focus-visible, #overviewContentInsertWrapper span:focus-visible, #overviewContentInsertWrapper svg:focus-visible, #overviewContentInsertWrapper textarea:focus-visible, #overviewContentInsertWrapper ul:focus-visible { outline: 2px solid #248dff } html { overflow-x: hidden; width: 100%; font-size: 16px } html.stop-scrolling { overflow-y: hidden } .inline__block { display: inline-block } html.event-official body, html.event-simple body { margin: 0 } body { background-attachment: scroll!important; -moz-osx-font-smoothing: grayscale } #CMD { -webkit-transition-duration: .7s; -khtml-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s; -webkit-transition-property: opacity; -khtml-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -khtml-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -moz-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -ms-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -o-transition-timing-function: cubic-bezier(.25, .46, .33, .98); transition-timing-function: cubic-bezier(.25, .46, .33, .98); position: relative; overflow-x: hidden; margin-bottom: 0; width: 100%; text-align: center; -webkit-tap-highlight-color: transparent } #CMD * { box-sizing: border-box } section { position: relative; margin-right: auto; margin-left: auto; width: 100% } section .img { display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover } section .wd__feature .img__icon { background-size: contain } .section__pdc, .section__wdvideos, .wd__section { max-width: 2560px } .section__content { margin-right: auto; margin-left: auto; width: 100%; height: 100% } .progressive-image { background-image: none!important; mask: none!important; -webkit-mask-image: none!important } .section__pdc, .section__wdvideos { font-size: 0 } @media all and (min-width:1px) { .grace-show { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; transition: opacity .8s linear } .grace-show.show { -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; transform: translate3d(0, 0, 0); will-change: opacity } .grace-show.animated { transform: none; transition: none } } .in.moving__element { will-change: transform, opacity } .wd__animation__easeout { -webkit-transition-duration: .5s, .5s; -khtml-transition-duration: .5s, .5s; -moz-transition-duration: .5s, .5s; -ms-transition-duration: .5s, .5s; -o-transition-duration: .5s, .5s; transition-duration: .5s, .5s; -webkit-transition-property: opacity, -webkit-transform; -khtml-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -webkit-transform; -ms-transition-property: opacity, -webkit-transform; -o-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -webkit-transition-timing-function: cubic-bezier(0, 0, .58, 1); -khtml-transition-timing-function: cubic-bezier(0, 0, .58, 1); -moz-transition-timing-function: cubic-bezier(0, 0, .58, 1); -ms-transition-timing-function: cubic-bezier(0, 0, .58, 1); -o-transition-timing-function: cubic-bezier(0, 0, .58, 1); transition-timing-function: cubic-bezier(0, 0, .58, 1); -moz-transition-duration: .5s; -moz-transition-property: all } @keyframes ripple { 0% { opacity: 0 } 10% { opacity: 0 } 50% { opacity: 1 } 90% { opacity: 0 } 100% { opacity: 0 } } .text__animation>a, .text__animation>div, .text__animation>figure, .text__animation>h1, .text__animation>h2, .text__animation>h3, .text__animation>h4, .text__animation>img, .text__animation>span { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1) } .wd__content.text__animation>a, .wd__content.text__animation>div, .wd__content.text__animation>figure, .wd__content.text__animation>h1, .wd__content.text__animation>h2, .wd__content.text__animation>h3, .wd__content.text__animation>h4, .wd__content.text__animation>img, .wd__content.text__animation>span { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1) } .wd__content.text__animation.text-showed .content__comment, .wd__content.text__animation.text-showed .content__info, .wd__content.text__animation.text-showed .content__link, .wd__content.text__animation.text-showed .content__slogan, .wd__content.text__animation.text-showed .content__title, .wd__content.text__animation.text-showed .wd__feature__list { transform: none } .wd__content.wd__content-horz.text__animation { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1) } .wd__content.wd__content-horz.text__animation>a, .wd__content.wd__content-horz.text__animation>div, .wd__content.wd__content-horz.text__animation>figure, .wd__content.wd__content-horz.text__animation>h1, .wd__content.wd__content-horz.text__animation>h2, .wd__content.wd__content-horz.text__animation>h3, .wd__content.wd__content-horz.text__animation>h4, .wd__content.wd__content-horz.text__animation>img, .wd__content.wd__content-horz.text__animation>span { opacity: 1; transform: unset; transition: unset } .outer-view { opacity: 1; transition: opacity 0 linear } .outer-view.is-hide { opacity: 0 } .block__scroll .block__scroll-item { opacity: 0; transform: translateY(100px) } @media all and (max-width:730.5px) { .block__scroll .block__scroll-item { transform: translateY(60px); transform-origin: top } } .block__scroll .scroll-trigger-end { position: absolute; bottom: 0 } @media all and (max-width:730.5px) { .block__scroll.block__scroll__small-noscroll .block__scroll-item { opacity: 1!important; transform: none!important } .block__scroll.block__scroll__small-noscroll .scroll-trigger-end { position: relative!important; bottom: 0 } } .wd__section .slick-dots { margin-right: auto; margin-left: auto } #main-zone #overview-top-nav .inner { padding: 0 } #product-footer-zone { margin-top: 0!important } #main-zone>.container { padding: 0!important; width: 100%!important; max-width: 100%!important } #main-zone>.container .overview-wrapper { width: 100%!important } #ctl00_ContentPlaceHolder1_ctl00_span_model_name img { max-width: 100% } #special-sectionOverview { margin-top: 0 } @media all and (min-width:769px) { #CMD .outer-view { margin-top: 0 } } @media (max-width:959px) and (min-width:731px) { #af-header, #af-header .af-inner, body #asus-api-footer { min-width: 100%; width: 100% } #main-zone>.container { width: 100%!important; min-width: 100%!important; max-width: 100%!important } } @media all and (max-width:730.5px) { #special-sectionOverview { margin-top: 0 } #CMD { margin-top: 0!important } #main-zone, #main-zone-3, #main-zone-4, #main-zone-5, #main-zone-6 { padding-right: 0!important; padding-left: 0!important } } #overview-top-nav .inner .nav>li.has-submenu>a { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFIGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDUtMjFUMTQ6MTk6MzgrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA1LTIxVDE0OjIyOjAyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA1LTIxVDE0OjIyOjAyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmU2ZmNmNTc0LWE0YWUtNDZkMC05MzUyLTZiMjViMjdlYmQyMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDplNmZjZjU3NC1hNGFlLTQ2ZDAtOTM1Mi02YjI1YjI3ZWJkMjMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplNmZjZjU3NC1hNGFlLTQ2ZDAtOTM1Mi02YjI1YjI3ZWJkMjMiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU2ZmNmNTc0LWE0YWUtNDZkMC05MzUyLTZiMjViMjdlYmQyMyIgc3RFdnQ6d2hlbj0iMjAxOS0wNS0yMVQxNDoxOTozOCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+moGVIwAAAJVJREFUGJVtkCELAkEQRt95cF3kmpisZn+Zf8FusVttJi1mu2CziFgMolguCM8yh8t6AwvLvvcNO1OodNQAeAGfHPQ65ClwAXZA9UfV9EzUp7/aqGXqpPJQvYY4V49xX6lFHqjVUwjLpME53hZpoFQPAdbZF8bqLdisDfTVRt2rVTZTO9dD3aoUsdYRcAearh0DdbD3FwUC138WqUD3AAAAAElFTkSuQmCC) } #overview-top-nav.to-submenu .inner .features-menu .close-btn { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzYwLCAyMDIwLzAyLzEzLTAxOjA3OjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDYtMTdUMTQ6MzQ6MzQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA2LTE3VDE0OjM0OjUzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA2LTE3VDE0OjM0OjUzKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMwNWI5NTg0LTQyZjAtNDVlYy1iMjIxLWY4ODAxZjQxODcwNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMDViOTU4NC00MmYwLTQ1ZWMtYjIyMS1mODgwMWY0MTg3MDQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozMDViOTU4NC00MmYwLTQ1ZWMtYjIyMS1mODgwMWY0MTg3MDQiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjMwNWI5NTg0LTQyZjAtNDVlYy1iMjIxLWY4ODAxZjQxODcwNCIgc3RFdnQ6d2hlbj0iMjAyMC0wNi0xN1QxNDozNDozNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Lv/Y4AAAAJJJREFUKJF1kcENhEAIRR9TgSVYgi1YCIlW5iYUoiXYwbZgCXthNkgYToT/PhAQM/sCM7Cr6ocizGwDDuBuwOT1w4URDDA3YAWeypTgB1jFhQU4w7S9N4iwqt4SumUTGQaQqBSmFwzQUrclTZi89o+40pZ27gYIJ5cBvHp+ZpNUcN+5ul4bwQCev/7UgKuCB6brB24YT+NnPIKZAAAAAElFTkSuQmCC) } @media (max-width:768px) and (min-width:720px) { #rog_black_style .page-title { background: #222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABWCAYAAAAjbNN8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF52lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA1LTExVDE1OjI5OjUyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphYmYzM2VmNi05ODYwLTQ2ZGItODU2NC1kMzU1ODE4Y2FkMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NThERTEwNzlFRTZCMTFFNjkzNkNFQjU4RTUwM0REQzkiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OERFMTA3OUVFNkIxMUU2OTM2Q0VCNThFNTAzRERDOSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4REUxMDc2RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4REUxMDc3RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5Ii8+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFiZjMzZWY2LTk4NjAtNDZkYi04NTY0LWQzNTU4MThjYWQxOCIgc3RFdnQ6d2hlbj0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzXgSYAAAJqSURBVHic7dzRbdNQGIbhN4gBvAEdwUzQdAPYIEwATEA2KJ2AjJANajYwG3gEbxAuTi5ycWpO8UnPl1/fI1WqHFv6pVc+SWPXm9PptAUGTNK71gPYMgcS50DiHEicA4lzIHEOJM6BxDmQOAcS50DiHEicA4lzIHEOJM6BxDmQuGiBtsCp4GffZrzXixioxP01h6jpfesBrughs+0R6N94jlUiBxoy2+bCYz8Bv4Cuzij/ZQQeoi1xtXylbRxIZ/rOgfKm1gOcjZGXuDW+A39ov8QNkQM9Z7b1hcfOwM9ag6wRLdB88fu2cD9p0QIdgA8snykT8PQGs1QRLdBMev8Iw5/ixDmQOAcS50DiHEicA4lzIHEOJC7aH6qQruX0C69PwJEb+bonWqAd6ULbv9wDX647Sh3Rlri7yvs1F+0MurTJbHum/MaSnrbXgyZgihxojT3wo/EMM/Ax2hJXi8JtWR2+J+FFv1sPQDqDDl7i8vakj+Jdwxkmgr8HnVYeP9YYYq1oS9xUeb/mop1BB9La3S/sM5GWr5uw8fPitEVb4sJxIHEOJM6BxDmQOAcS50DiHEhctG8SOtJ1nH5hn4n03w3j1aepIFqgHfCtYL8O+HzNQWqJFqi7+H3IvN6f9+kyr0mKFuhS7jkJpfckdKSzsas2zeuNwDFyoDUeSYFa83MSXnDXeoCz3oHynmh/5+lI8HsStpltXeGxR0Qu6kUOlHtOws2JtsQNhfsp3FZVJNoZNJC/5fdmRTuDwnEgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcX8BVn1OSUK1/rIAAAAASUVORK5CYII=) 96% center no-repeat; background-size: 48px } } @media (max-width:719px) { #overview-top-nav .page-title { background: #222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABWCAYAAAAjbNN8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF52lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA1LTExVDE1OjI5OjUyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphYmYzM2VmNi05ODYwLTQ2ZGItODU2NC1kMzU1ODE4Y2FkMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NThERTEwNzlFRTZCMTFFNjkzNkNFQjU4RTUwM0REQzkiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OERFMTA3OUVFNkIxMUU2OTM2Q0VCNThFNTAzRERDOSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4REUxMDc2RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4REUxMDc3RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5Ii8+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFiZjMzZWY2LTk4NjAtNDZkYi04NTY0LWQzNTU4MThjYWQxOCIgc3RFdnQ6d2hlbj0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzXgSYAAAJqSURBVHic7dzRbdNQGIbhN4gBvAEdwUzQdAPYIEwATEA2KJ2AjJANajYwG3gEbxAuTi5ycWpO8UnPl1/fI1WqHFv6pVc+SWPXm9PptAUGTNK71gPYMgcS50DiHEicA4lzIHEOJM6BxDmQOAcS50DiHEicA4lzIHEOJM6BxDmQuGiBtsCp4GffZrzXixioxP01h6jpfesBrughs+0R6N94jlUiBxoy2+bCYz8Bv4Cuzij/ZQQeoi1xtXylbRxIZ/rOgfKm1gOcjZGXuDW+A39ov8QNkQM9Z7b1hcfOwM9ag6wRLdB88fu2cD9p0QIdgA8snykT8PQGs1QRLdBMev8Iw5/ixDmQOAcS50DiHEicA4lzIHEOJC7aH6qQruX0C69PwJEb+bonWqAd6ULbv9wDX647Sh3Rlri7yvs1F+0MurTJbHum/MaSnrbXgyZgihxojT3wo/EMM/Ax2hJXi8JtWR2+J+FFv1sPQDqDDl7i8vakj+Jdwxkmgr8HnVYeP9YYYq1oS9xUeb/mop1BB9La3S/sM5GWr5uw8fPitEVb4sJxIHEOJM6BxDmQOAcS50DiHEhctG8SOtJ1nH5hn4n03w3j1aepIFqgHfCtYL8O+HzNQWqJFqi7+H3IvN6f9+kyr0mKFuhS7jkJpfckdKSzsas2zeuNwDFyoDUeSYFa83MSXnDXeoCz3oHynmh/5+lI8HsStpltXeGxR0Qu6kUOlHtOws2JtsQNhfsp3FZVJNoZNJC/5fdmRTuDwnEgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcX8BVn1OSUK1/rIAAAAASUVORK5CYII=) 96% center no-repeat; background-size: 48px } } @media (max-width:768px) and (min-width:0) { body#rog_black_style #overview-top-nav .nav-tabs>.active { background-color: #222!important } body #overview-top-nav .inner .features-menu .nav-sub>li.active { background: #222!important } } /*! Lity - v2.4.1 - 2020-04-26 * http://sorgalla.com/lity/ * Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */ .lity { position: fixed; z-index: 1000000000; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; white-space: nowrap; outline: auto; background: #0b0b0b; background: rgba(0, 0, 0, .9); -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease } .lity.lity-opened { opacity: 1 } .lity.lity-closed { opacity: 0 } .lity * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .lity-wrap { position: fixed; z-index: 9990; top: 0; right: 0; bottom: 0; left: 0; text-align: center; outline: 0!important } .lity-wrap::before { display: inline-block; margin-right: -.25em; height: 100%; content: ""; vertical-align: middle } .lity-loader { position: absolute; z-index: 9991; top: 50%; opacity: 0; margin-top: -.8em; width: 100%; color: #fff; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-align: center; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease } .lity-loading .lity-loader { opacity: 1 } .lity-container { display: inline-block; position: relative; z-index: 9992; max-width: 100%; max-height: 100%; text-align: left; white-space: normal; outline: 0!important; vertical-align: middle } .lity-content { z-index: 9993; width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .3s ease; -o-transition: -o-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease } .lity-closed .lity-content, .lity-loading .lity-content { -webkit-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8) } .lity-content::after { display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; content: ""; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6) } .lity-close { position: fixed; z-index: 9994; cursor: pointer; top: 0; right: 0; padding: 0; width: 35px; height: 35px; color: #fff; font-size: 35px; font-family: Arial, Baskerville, monospace; text-align: center; text-decoration: none; border: 0; background: 0 0; -webkit-appearance: none; font-style: normal; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); -webkit-box-shadow: none; box-shadow: none } .lity-close::-moz-focus-inner { padding: 0; border: 0 } .lity-close:active, .lity-close:focus, .lity-close:hover, .lity-close:visited { padding: 0; color: #fff; font-size: 35px; font-family: Arial, Baskerville, monospace; text-align: center; text-decoration: none; outline: auto; border: 0; background: 0 0; font-style: normal; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); -webkit-box-shadow: none; box-shadow: none } .lity-close:active { top: 1px } .lity-image img { display: block; max-width: 100%; border: 0; line-height: 0 } .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container, .lity-iframe .lity-container, .lity-vimeo .lity-container, .lity-youtube .lity-container { width: 100%; max-width: 964px } .lity-iframe-container { overflow: auto; padding-top: 56.25%; width: 100%; height: 0; -webkit-transform: translateZ(0); transform: translateZ(0); pointer-events: auto; -webkit-overflow-scrolling: touch } .lity-iframe-container iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6) } .lity-hide { display: none } .beer-slider { display: inline-block; position: relative; overflow: hidden } .beer-slider *, .beer-slider ::after, .beer-slider ::before, .beer-slider::after, .beer-slider::before { box-sizing: border-box } .beer-slider img, .beer-slider svg { vertical-align: bottom } .beer-slider>* { height: 100% } .beer-slider>img { max-width: 100%; height: auto } .beer-reveal { position: absolute; overflow: hidden; z-index: 1; top: 0; right: 50%; left: 0; opacity: 0; transition: opacity .35s } .beer-reveal>:first-child { width: 200%; max-width: none; height: 100% } .beer-reveal>img:first-child { height: auto } .beer-range { position: absolute; z-index: 5; cursor: pointer; top: 0; bottom: 0; left: -1px; opacity: 0; margin: 0; width: calc(100% + 2px); height: 100%; -webkit-appearance: slider-horizontal!important; -moz-appearance: none; -ms-touch-action: auto; touch-action: auto } .beer-range::-webkit-slider-thumb { cursor: pointer; width: 36px; height: 100%; min-height: 36px; background: #fff; -webkit-appearance: none } .beer-range::-moz-range-thumb { cursor: pointer; width: 36px; height: 100%; min-height: 36px; background: fff } .beer-range::-ms-tooltip { cursor: pointer; width: 36px; height: 100%; min-height: 36px; background: #fff } .beer-handle { position: absolute; z-index: 2; top: calc(50% - 30px); opacity: 0; width: 60px; height: 60px; transform: translateX(-15px) } .beer-handle::before { position: absolute; top: -273px; left: 50%; width: 1px; height: 606px; background-color: #fff; content: "" } .beer-handle::after { position: absolute; top: 15px; left: 15px; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; content: "" } .beer-range:focus~.beer-handle::after { outline: 5px auto -webkit-focus-ring-color } .beer-ready .beer-handle, .beer-ready .beer-reveal { opacity: 1 } #CMD::before { display: block; position: absolute; visibility: hidden; width: 0; height: 0 } @media all and (min-width:1280px) { #CMD::before { content: "desktop" } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD::before { content: "tablet" } } @media all and (max-width:730.5px) { #CMD::before { content: "mobile" } } .wd__content { position: relative; color: #242424 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content { left: 0; margin-right: auto; margin-left: auto; padding-left: 0; width: 88% } } @media all and (max-width:730.5px) { .wd__content { left: 0; margin-right: auto; margin-left: auto; padding-left: 0; width: 89.2%; text-align: left } } .wd__content .content__slogan { position: relative; color: #a89d5b; font-size: 1.5625rem; letter-spacing: .5px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__slogan { font-size: 1.75rem } } @media all and (max-width:730.5px) { .wd__content .content__slogan { padding-top: 0; padding-left: 0; font-size: 1.125rem } } .wd__content .content__title { display: inline-block; position: relative; margin-top: 7px; padding-top: 5px; padding-bottom: 5px; font-size: 2.5rem; -webkit-background-clip: text; line-height: 1.2 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__title { margin-top: 5px; font-size: 2.5rem; line-height: 1.25 } } @media all and (max-width:730.5px) { .wd__content .content__title { margin-top: 1px; width: 100%; font-size: 2.125rem } } .wd__content .content__title, .wd__content .content__title * { -webkit-background-clip: text; -webkit-text-fill-color: transparent } .wd__content .content__title a, .wd__content .content__title div, .wd__content .content__title span, .wd__content .content__title sup { background-image: inherit } .wd__content .content__title.no-top-space { margin-top: -5px } .wd__content .content__title span { display: inline-block } .wd__content .content__info { position: relative; margin-top: 11px; font-size: 1.25rem; line-height: 1.5 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__info { margin-top: 9px; font-size: 1.25rem; line-height: 1.4 } } @media all and (max-width:730.5px) { .wd__content .content__info { margin-top: 6px; width: 100%; font-size: 1.125rem; line-height: 1.45 } } .wd__content .content__comment { margin-top: 11px; color: #717171; font-size: 1.25rem; line-height: 1.5 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__comment { margin-top: 12px; font-size: 1.25rem; line-height: 1.4 } } @media all and (max-width:730.5px) { .wd__content .content__comment { margin-top: 12px; font-size: 1.125rem; line-height: 1.45 } } .wd__content .content__link { display: block; margin-top: 3px; padding: 5px 0; font-size: 1.25rem; -webkit-background-clip: text; line-height: 27px; -webkit-text-fill-color: transparent } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__link { margin-top: 8px; font-size: 1.25rem; line-height: 1.4 } } @media all and (max-width:730.5px) { .wd__content .content__link { margin-top: 7px; font-size: 1.125rem; line-height: 1.47 } } .wd__content .content__link span { display: inline; color: #1ef9ef; border-bottom: 1px solid transparent } .wd__content .content__link *, .wd__content .content__link:active span, .wd__content .content__link:link span, .wd__content .content__link:visited span { border-bottom: 1px solid transparent } .wd__content .content__link:hover span { border-bottom: 1px solid #1ef9ef } .wd__content .content__link.link-gradient { display: block; margin-top: 3px; padding: 5px 0; font-size: 1.25rem; line-height: 27px; -webkit-text-fill-color: initial; background-image: initial } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__link.link-gradient { margin-top: 8px; font-size: 1.25rem; line-height: 1.4 } } .wd__content .content__link.link-gradient span { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #fff, #fff) } .wd__content .content__link.link-gradient:hover span { border-image: linear-gradient(to right, #fff, #fff); border-image-slice: 1 } .wd__content .content__link.link-gradient::after { color: #9846f4 } @media all and (max-width:730.5px) { .wd__content .content__link.link-gradient { margin-top: 7px; font-size: 1.125rem; line-height: 1.47; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #fff, #fff) } .wd__content .content__link.link-gradient span { -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-image: unset } .wd__content .content__link.link-gradient:hover span { border-image: unset; border-image-slice: 1 } .wd__content .content__link.link-gradient::after { color: #9846f4 } } .wd__link__arrow::after { content: ">"; padding-left: 7px; color: #1ef9ef } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__link__arrow::after { padding-left: 3px } } @media all and (max-width:730.5px) { .wd__link__arrow::after { padding-left: 4px } } .wd__content.sections-wdcontent .content__title { font-size: 2.1875rem; line-height: 1.2 } .wd__content.sections-wdcontent .content__info { margin-top: -3px; font-size: 1.25rem; line-height: 1.5 } .wd__content.sections-wdcontent .modal-button-container { z-index: 1; text-align: left; transition: opacity .3s } .wd__content.sections-wdcontent .modal-button-container:hover { opacity: .8 } .wd__content.sections-wdcontent .modal-button-container .modal-button { margin-top: 32px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content.sections-wdcontent .content__title { font-size: 1.625rem } .wd__content.sections-wdcontent .content__info { margin-top: 10px } .wd__content.sections-wdcontent .content__info, .wd__content.sections-wdcontent .content__info * { font-size: 1.25rem; line-height: 1.5 } .wd__content.sections-wdcontent .modal-button-container { margin-top: 23px } .wd__content.sections-wdcontent .modal-button-container .modal-button { margin-top: 0 } } @media all and (max-width:730.5px) { .wd__content.sections-wdcontent .content__title { font-size: 1.75rem } .wd__content.sections-wdcontent .content__info { margin-top: 5px } .wd__content.sections-wdcontent .content__info, .wd__content.sections-wdcontent .content__info * { font-size: 1.125rem; line-height: 1.3 } .wd__content.sections-wdcontent .modal-button-container { text-align: center } .wd__content.sections-wdcontent .modal-button-container .modal-button { margin-top: 14px } } @media all and (min-width:1280px) { .wd__content.wd__content-horz { display: flex; margin-right: auto; margin-left: auto; max-width: 1080px } .wd__content.wd__content-horz .content-col .content__slogan { margin-top: 0!important } .wd__content.wd__content-horz .content-col .content__info:first-child { margin-top: 0!important } .wd__content.wd__content-horz .content-col-1 { width: 38% } .wd__content.wd__content-horz .content-col-2 { padding-left: 60px; box-sizing: border-box; width: 62% } .wd__content.wd__content-horz.type-tight { padding-left: 55px; max-width: 960px } .wd__content.wd__content-horz.type-tight .content-col-2 { padding-left: 80px } } .wd__feature__list { position: relative; margin: 71px auto 0; width: 100% } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list { margin-top: 54px } } @media all and (max-width:730.5px) { .wd__feature__list { margin-top: 54px; width: 100% } } .wd__feature__list .wd__feature { display: inline-block; position: relative; margin: 0 21px 40px; box-sizing: border-box; color: #242424; text-align: center; vertical-align: top } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature { margin: 0 33px 36px } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature { margin: 0 17px 36px } } .wd__feature__list .wd__feature .wd__feature__describe__top { position: relative; margin-bottom: 6px; line-height: 1.2 } .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 1.0625rem; line-height: 1.2 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 8px } .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 1.0625rem; line-height: 1.3 } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 8px } .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 1rem } } .wd__feature__list .wd__feature .wd__feature__data { color: #242424 } .wd__feature__list .wd__feature .wd__feature__data, .wd__feature__list .wd__feature .wd__feature__data * { font-size: 3rem; line-height: 1 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__data { margin-bottom: 0 } .wd__feature__list .wd__feature .wd__feature__data, .wd__feature__list .wd__feature .wd__feature__data * { font-size: 3rem; line-height: 1 } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__data { margin-bottom: 0 } .wd__feature__list .wd__feature .wd__feature__data, .wd__feature__list .wd__feature .wd__feature__data * { font-size: 2.5rem; line-height: 1 } } .wd__feature__list .wd__feature .wd__feature__describe { position: relative; margin-top: 4px; line-height: 1.2 } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe * { font-size: 1.0625rem } .wd__feature__list .wd__feature .wd__feature__describe .comment { display: block; position: relative; margin-top: 4px; font-size: 1.0625rem; line-height: 1.2 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__describe .comment, .wd__feature__list .wd__feature .wd__feature__describe .comment * { line-height: 1.2; font-size: 1.0625rem } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__describe .comment { display: block } .wd__feature__list .wd__feature .wd__feature__describe .comment, .wd__feature__list .wd__feature .wd__feature__describe .comment * { line-height: 1.4; font-size: 1rem } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 3px } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe * { font-size: 1.0625rem; line-height: 1.2 } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 1px } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe * { line-height: 1.2; font-size: 1rem } } .wd__feature__list .wd__feature .wd__feature__data span.space-left-l { padding-left: 7px } .wd__feature__list .wd__feature .wd__feature__data span.space-left-m { padding-left: 5px } .wd__feature__list .wd__feature .wd__feature__data span.space-left-s { padding-left: 3px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-l { padding-right: 7px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-m { padding-right: 5px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-s { padding-right: 3px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__data span.space-left-l { padding-left: 7px } .wd__feature__list .wd__feature .wd__feature__data span.space-left-m { padding-left: 5px } .wd__feature__list .wd__feature .wd__feature__data span.space-left-s { padding-left: 3px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-l { padding-right: 7px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-m { padding-right: 5px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-s { padding-right: 3px } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__data span.space-left-l { padding-left: 3px } .wd__feature__list .wd__feature .wd__feature__data span.space-left-m { padding-left: 2px } .wd__feature__list .wd__feature .wd__feature__data span.space-left-s { padding-left: 1px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-l { padding-right: 3px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-m { padding-right: 2px } .wd__feature__list .wd__feature .wd__feature__data span.space-right-s { padding-right: 1px } } .wd__feature__list .wd__feature .wd__feature__data.text__long-en { position: relative; bottom: -4px; font-size: 3.375rem; line-height: 66px } .wd__feature__list .wd__feature .wd__feature__data.text__long-en * { line-height: 1 } .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { margin-top: 8px; font-size: 2.875rem; line-height: 58px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__data.text__long-en { font-size: 3.375rem; line-height: 65px } .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { margin-top: 10px; font-size: 2.875rem; line-height: 56px } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__data.text__long-en { margin-bottom: -1px; padding-top: 0; font-size: 2.3625rem; line-height: 49px } .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { padding-top: 5px; font-size: 2rem; line-height: 36px } } .wd__feature__list .wd__feature .wd__feature__data.plus { position: relative; margin-right: 32px } .wd__feature__list .wd__feature .wd__feature__data.plus span { position: absolute; top: 4px; right: -33px; font-size: 3.1875rem } @font-face { font-family: slick; src: url(/font/slick.eot); src: url(/font/slick.eot?#iefix) format("embedded-opentype"), url(/font/slick.woff) format("woff"), url(/font/slick.ttf) format("truetype"), url(/font/slick.svg#slick) format("svg"); font-weight: 400; font-style: normal } .slick-next, .slick-prev { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: 0 } .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover { outline: 0; color: transparent } .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before { opacity: 1 } .slick-next.slick-disabled:before, .slick-prev.slick-disabled:before { opacity: .25 } .slick-prev { left: -25px } [dir=rtl] .slick-prev { left: auto; right: -25px } .slick-next { right: -25px } [dir=rtl] .slick-next { left: -25px; right: auto } .slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100% } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { border: 0; background: 0 0; display: block; height: 20px; width: 20px; outline: 0; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer } .slick-dots li button:focus, .slick-dots li button:hover { outline: 0 } .slick-dots li button:focus:before, .slick-dots li button:hover:before { opacity: 1 } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: slick; font-size: 6px; line-height: 20px; text-align: center; color: #000; opacity: .25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button:before { color: #000; opacity: .75 } .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0 } .slick-list:focus { outline: 0 } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; left: 0; top: 0; display: block } .slick-track:after, .slick-track:before { content: ""; display: table } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { float: left; height: 100%; min-height: 1px; display: none } [dir=rtl] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .slick__nav { margin-bottom: 40px; color: #636360; font-size: 1.5em; text-align: center; line-height: 1.6 } .slick__nav a { color: #636360 } .slick-slide { display: block; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-next { right: 25px } .slick-prev { left: 25px } .slick__next, .slick__prev { z-index: 9999; content: "" } .slick__next::before, .slick__prev::before { content: ""; display: none } [dir=rtl] .slick__prev::before { content: ""; display: none } [dir=rtl] .slick__next::before { content: ""; display: none } .wd__slick .container { margin: auto; padding-right: 20px; padding-left: 20px; max-width: 900px } .wd__slick .container.e1 .slick__info { margin-top: 15em } .wd__slick .container .slick__half { width: 45% } .wd__slick .container .slick__left { float: left } .wd__slick .container .slick__right { float: right } .wd__slick .container .slick__img, .wd__slick .container .slick__info { width: 100% } .sprite__arrow__right { z-index: 1000; width: 49px; height: 96px; background-position: -214px -5px } .sprite__arrow__left { z-index: 1000; width: 49px; height: 96px; background-position: -80px -5px } .sprite-arrow_r { width: 65px; height: 130px } .sprite-arrow_l { width: 65px; height: 130px } .slick-next, .slick-prev { z-index: 1; margin-top: -19px; width: 50px; height: 118px; border-radius: 0 10px 10px 0; background-color: transparent; background-color: rgba(0, 0, 0, .3) } .slick-next::before, .slick-prev::before { display: block; position: absolute; z-index: 1000; top: 57px; color: #fff; font-size: 34px } .slick-prev { left: 0; border-radius: 0 10px 10px 0 } .slick-prev::before { content: "<"; right: 18px } .slick-next { right: 0; border-radius: 10px 0 0 10px } .slick-next::before { content: ">"; left: 18px } @media all and (min-width:731px) and (max-width:1279.5px) { .slick-next, .slick-prev { margin-top: -19px; width: 35px; height: 88px } .slick-next::before, .slick-prev::before { display: block; position: absolute; z-index: 1000; top: 43px; color: #fff; font-size: 26px } .slick-prev::before { right: 10px } .slick-next::before { left: 10px } } @media all and (max-width:730.5px) { .slick-next, .slick-prev { display: none!important } } .section__comment { margin-top: 25px; padding-top: 0 } .footnotes { margin: 0 auto; padding-right: 16px; padding-left: 16px; box-sizing: border-box; width: 100%; max-width: 1221px } .footnotes .is-hidden { overflow: hidden; opacity: 0; margin: 0!important; padding: 0!important; height: 0 } .footnotes:first-child { margin-top: 25px } .footnotes .footnote { font-size: 1.125rem; line-height: 1.4 } .footnotes .footnote li { list-style-type: decimal; margin-bottom: 10px } .footnotes .footnote li, .footnotes .footnote li * { color: #999; font-size: .8125rem; text-align: left; line-height: 1.5 } .footnotes.footnote-item-star .footnote li { position: relative; list-style-type: none; color: #999 } .footnotes.footnote-item-star .footnote li::before { display: block; position: absolute; top: 9px; left: -14px; content: "*"; line-height: 0; color: #999 } @media all and (min-width:731px) and (max-width:1279.5px) { .section__comment { margin-top: 0; padding-top: 30px; padding-bottom: 44px } .footnotes { padding: 0 28px 0 40px; width: 100%; max-width: 1280px } .footnotes .footnote li { margin-bottom: 10px } .footnotes .footnote li, .footnotes .footnote li * { font-size: .8125rem; line-height: 1.5 } .footnotes.footnote-item-star .footnote li::before { top: 9px; left: -14px } } @media all and (max-width:730.5px) { .section__comment { display: inline-block; margin-top: 0; padding-top: 56px; padding-bottom: 40px } .footnotes { padding: 0 28px 0 22px; box-sizing: border-box; width: 100%; max-width: 730px } .footnotes .footnote { margin-left: 14px; font-size: .83125rem; line-height: 1.4 } .footnotes .footnote li { margin-bottom: 12px } .footnotes .footnote li, .footnotes .footnote li * { font-size: .83125rem } .footnotes.footnote-item-star .footnote li::before { top: 10px; left: -11px } } #CMD.test .footnote-item:target { background: #ff0!important } #CMD.test .footnote-item:focus { background: red!important } .stopScrollbar { overflow: hidden } #af-header.popHide, #asus-api-footer.popHide, #main-zone #product-footer-zone.popHide, #overview-top-nav.popHide, .cmd-sidenav.popHide, .section__comment.popHide { display: none!important } .modal-button-container { z-index: 2147483647 } .modal-button-container.inner { position: fixed; bottom: 30px; left: 50%; transform: translate3d(-50%, 0, 0) } .modal-button-container.text-white .modal-button { color: #fff } .modal-button-container.text-dark .modal-button { color: #000 } .modal-button-container.outer { position: relative; text-align: center } .modal-button-container.outer .modal-button-target { top: 50px } @media (max-width:720px) { .modal-button-container.outer .modal-button-target { top: 42px } } .modal-button-container .modal-button-text, .modal-button-container .modal-inner-text { display: block; position: relative; font-size: 1.25rem; line-height: 1; pointer-events: none } @media (min-width:731px) and (max-width:1279.5px) { .modal-button-container .modal-button-text, .modal-button-container .modal-inner-text { font-size: 1.25rem } } @media (max-width:730.5px) { .modal-button-container .modal-button-text, .modal-button-container .modal-inner-text { font-size: 1.125rem } } .modal-button-container .modal-button { display: inline-block; position: relative; z-index: 1; cursor: pointer; margin: 10px 0 0; padding: 12px 20px; font-weight: 200; text-align: center; border: 0; border-style: solid; border-width: 3px; border-radius: 34px; background-color: #000; transition: background-color .4s ease-out, border-color .4s ease-out, color .4s ease-out; -webkit-tap-highlight-color: transparent; touch-action: manipulation; pointer-events: all; min-width: 50px; line-height: 46px } .outer-view { z-index: 0; transform-origin: 50vw 50vh } .outer-view.animate-scale { transform: translateZ(0) translateY(200px) scale(.96) } .outer-view .modal-button-container.ready .modal-button { transform: translate(0, 0)!important } .inner-view { display: block; position: fixed; overflow: hidden; z-index: 1000000000; top: 0; left: 50%; margin-left: -50%; width: 100%; text-align: center; background-color: #fff; transform: translateY(110vh) } .inner-view.killFixed { position: relative!important } .inner-view .inner-view-container { height: 100% } .inner-view .inner-modal { display: none; position: relative; visibility: hidden; padding-bottom: 50px; width: 100%; min-height: 100vh; min-height: var(--safarivh) } .inner-view .inner-modal.showed { display: block; visibility: visible } .inner-view .modal-button-container { opacity: 1; transform: translate3d(0, 0, 0); -webkit-overflow-scrolling: touch } .inner-view .modal-button-container { position: fixed; bottom: -80px; left: 0; opacity: 0; width: 100%; transform: translate3d(0, 0, 0) } .inner-view .modal-button-close { display: none } .inner-view.show-inner { transform: none!important } .inner-view.show-inner .modal-button-close { display: inline-block } .inner-view.show-inner .modal-active { display: block; visibility: visible } .inner-view.show-inner .modal-button-container { bottom: 50px; opacity: 1; transform: none; transition: opacity .3s 1s } @media (max-width:730.5px) { .inner-view.show-inner .modal-button-container { bottom: 40px } } @media (min-width:731px) and (max-width:1279.5px) { .modal-button-container .modal-button { padding: 10px 25px } .modal-button-container.inner { bottom: 20px } } @media (max-width:730.5px) { .modal-button-container .modal-button { padding: 8px 16px; text-align: center } .modal-button-container .modal-inner-text { font-size: 1.125rem } .modal-button-container.inner { bottom: 9px } } .wd__play__btn { display: block; position: absolute; left: 50%; margin-left: 497px; padding: 0; width: 36px; height: 36px } .wd__play__btn button { position: relative; cursor: pointer; padding: 0; width: 36px; height: 36px; border-width: 0; background-color: transparent } .wd__play__btn button .svg_button_play .svg-rect { fill: none } .wd__play__btn button .svg_button_play .svg-circle, .wd__play__btn button .svg_button_play .svg-line { stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; fill-rule: evenodd } .wd__play__btn button .svg_button_play .svg-triangle { clip-path: url(#clip-path) } .wd__play__btn button .svg_button_play .svg-line, .wd__play__btn button .svg_button_play .svg-triangle { transition: opacity .6s } .wd__play__btn button .svg_button_play .svg-triangle { opacity: 0 } .wd__play__btn button .svg_button_play .svg-line { opacity: 1 } .wd__play__btn button.show-play .svg_button_play .svg-triangle { opacity: 1 } .wd__play__btn button.show-play .svg_button_play .svg-line { opacity: 0 } .wd__play__btn .svg_button_play .svg-circle { stroke: #fff } .wd__play__btn .svg_button_play .svg-line { fill: #fff; stroke: transparent } .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #fff } .wd__section .slick-tab-content { margin: 63px auto 0; width: 100%; max-width: 1128px } .wd__section .slick-tab-content .title-nav .scrollPos { display: none } .wd__section .slick-tab-content .slick-title { position: relative; color: #1ef9ef; text-align: center } .wd__section .slick-tab-content .slick-title .title-nav-count-0 .slick-nav-btn { width: Infinity% } .wd__section .slick-tab-content .slick-title .title-nav-count-1 .slick-nav-btn { width: 100% } .wd__section .slick-tab-content .slick-title .title-nav-count-2 .slick-nav-btn { width: 50% } .wd__section .slick-tab-content .slick-title .title-nav-count-3 .slick-nav-btn { width: 33.3333333333% } .wd__section .slick-tab-content .slick-title .title-nav-count-4 .slick-nav-btn { width: 25% } .wd__section .slick-tab-content .slick-title .title-nav-count-5 .slick-nav-btn { width: 20% } .wd__section .slick-tab-content .slick-title .title-nav-count-6 .slick-nav-btn { width: 16.6666666667% } .wd__section .slick-tab-content .slick-title .title-nav-count-7 .slick-nav-btn { width: 14.2857142857% } .wd__section .slick-tab-content .slick-title .title-nav-count-8 .slick-nav-btn { width: 12.5% } .wd__section .slick-tab-content .slick-title .title-nav-count-9 .slick-nav-btn { width: 11.1111111111% } .wd__section .slick-tab-content .slick-title .title-nav-count-10 .slick-nav-btn { width: 10% } .wd__section .slick-tab-content .slick-title .title-nav { display: block; position: relative; margin: 0; font-size: 0; border-bottom: 1px solid #6f6f6f } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { display: inline-block; position: relative; cursor: pointer; bottom: -1px; padding: 6px 0; font-size: 1.25rem; text-align: center; border: 0; background-color: rgba(255, 255, 255, 0); transition: opacity .4s; text-transform: uppercase; vertical-align: bottom; line-height: 1.2 } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn * { pointer-events: none!important } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn .sign-fnum { top: -.7em } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn.active, .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus { color: #1ef9ef; border-bottom: 4px solid #1ef9ef } .wd__section .slick-tab-content .slick-info-container { position: relative; overflow: hidden; transition: height .5s ease 0s } .wd__section .slick-tab-content .slick-info-item { display: block; position: absolute; z-index: -1; top: 0; left: 0; opacity: 0; padding-top: 48px; width: 100% } .wd__section .slick-tab-content .slick-info-item.active { display: block; position: relative; z-index: 9; opacity: 1; transition: opacity 1s ease 0s } .wd__section .slick-tab-content .slick-info-item[hidden=hidden] { display: none } .wd__section .slick-tab-content .slick-info { position: relative; margin: 0 auto; max-width: 772px; height: auto; text-align: left } .wd__section .slick-tab-content .slick-info .slick-info-text { display: block; width: 100%; font-size: 1.25rem; line-height: 1.5 } .wd__section .slick-tab-content .slick-info .slick-info-text .info__comment { display: inline-block; margin-top: 8px; font-size: 1.125rem; line-height: 1.4 } .wd__section .slick-tab-content .slick-info+.slick-image { margin-top: 50px } .wd__section .slick-tab-content .slick-image { position: relative; z-index: -1; left: 50%; margin: 0; transform: translateX(-50%) } .wd__section .slick-tab-content .slick-image .img-slick { position: absolute; top: 0; left: 0; width: 1128px; height: 628px; border-radius: 10px; background-size: contain } .wd__section .vidInterface { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 460px; height: 170px } .wd__section .vidInterface video { filter: brightness(90%) } .wd__section .vidInterface .playBtn { /* background-image: url(//../images/playBtn.png); */ display: block; margin: 0 auto; width: 90px; height: 90px; background-size: cover; transform: rotate(0); transition: transform .4s ease } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .wd__section .vidInterface .playBtn { background-image: url(../images/large/2x/icon/playBtn.png) } } .wd__section .vidInterface .playBtn:hover { transform: rotate(120deg) } .wd__section .vidInterface span { display: block; margin-top: 20px; color: #fff; font-size: 1.75rem; line-height: 2.0625rem } @media all and (min-width:1280px) { .wd__section .slick-tab-content .slick-title .title-nav { display: flex; align-content: stretch; flex-direction: row; align-items: stretch } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { display: block; flex-shrink: 1; flex-grow: 1; flex-wrap: nowrap } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn .nav__title-text { display: flex; flex-direction: column; justify-content: flex-end; height: 100% } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__section .slick-tab-content .scroll_container { overflow-x: scroll; overflow-y: hidden; width: 100%; scroll-behavior: smooth } .wd__section .slick-tab-content .scroll_container::-webkit-scrollbar { display: none } .wd__section .slick-tab-content .scroll_container .scrollPos { position: absolute; top: 0; left: 0; width: 1px; height: 100px; background-color: red } .wd__section .slick-tab-content { margin-top: 62px; max-width: 100% } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { padding: 8px 25px; font-size: 1.25rem; line-height: 1.2 } .wd__section .slick-tab-content .slick-info-item { padding-top: 33px } .wd__section .slick-tab-content .slick-info { margin-top: 0; padding-top: 0; width: 708px } .wd__section .slick-tab-content .slick-image { margin: 10px 0 } .wd__section .slick-tab-content .slick-image .img-slick { margin-right: auto; margin-left: auto; width: 731px; height: 407px; border-radius: 5px } .wd__section .slick-tab-content .slick-info+.slick-image { margin-top: 33px } } @media all and (max-width:730.5px) { .wd__section .slick-tab-content .scroll_container { overflow-x: scroll; overflow-y: hidden; width: 100%; scroll-behavior: smooth } .wd__section .slick-tab-content .scroll_container::-webkit-scrollbar { display: none } .wd__section .slick-tab-content .scroll_container .scrollPos { position: absolute; top: 0; left: 0; width: 1px; height: 100px; background-color: red } .wd__section .slick-tab-content { margin: 45px auto 0; width: 100%; max-width: 720px } .wd__section .slick-tab-content .slick-title { position: relative; text-align: center } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { padding: 5px 23px; font-size: 1rem; line-height: 1.2 } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn.active, .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus { border-bottom: 2px solid #1ef9ef } .wd__section .slick-tab-content .slick-title .title-nav .sign-fnum { top: -.6em } .wd__section .slick-tab-content .slick-info-item { padding-top: 25px } .wd__section .slick-tab-content .slick-info { margin: 0 auto; padding-top: 0; width: 90%; max-width: 350px } .wd__section .slick-tab-content .slick-info .slick-info-text { font-size: .9375rem; line-height: 1.35 } .wd__section .slick-tab-content .slick-info .slick-info-text .info__comment { display: inline-block; margin-top: 7px; color: #6f6f6f; font-size: .9375rem; line-height: 1.2 } .wd__section .slick-tab-content .slick-image { position: relative; left: 50%; margin: 10px 0 0 } .wd__section .slick-tab-content .slick-image .img-slick { left: 50%; width: 414px; height: 228px; border-radius: 5px; transform: translateX(-50%) } .wd__section .slick-tab-content .slick-info+.slick-image { margin-top: 25px } } .grid__layout { display: flex; align-items: stretch; margin-right: auto; margin-left: auto; align-content: stretch; flex-direction: row; flex-wrap: wrap; min-height: 286px } .grid-item { flex-shrink: 1; flex-grow: 1 } .grid-item-ie { display: flex; position: relative; overflow: hidden; z-index: 0; margin: 0; box-sizing: border-box; border: 1px solid #8dc1ce; border-radius: 20px; background: linear-gradient(to top, #f4f7f9 0, #fff 100%); background-color: #ccc; flex-direction: column } @media all and (min-width:1280px) { .grid__layout { max-width: 1080px } .large-span-1 { flex-basis: 8.3333333333% } .large-span-2 { flex-basis: 16.6666666667% } .large-span-3 { flex-basis: 25% } .large-span-4 { flex-basis: 33.3333333333% } .large-span-5 { flex-basis: 41.6666666667% } .large-span-6 { flex-basis: 50% } .large-span-7 { flex-basis: 58.3333333333% } .large-span-8 { flex-basis: 66.6666666667% } .large-span-9 { flex-basis: 75% } .large-span-10 { flex-basis: 83.3333333333% } .large-span-11 { flex-basis: 91.6666666667% } .large-span-12 { flex-basis: 100% } } @media all and (min-width:731px) and (max-width:1279.5px) { .medium-span-1 { flex-basis: 8.3333333333% } .medium-span-2 { flex-basis: 16.6666666667% } .medium-span-3 { flex-basis: 25% } .medium-span-4 { flex-basis: 33.3333333333% } .medium-span-5 { flex-basis: 41.6666666667% } .medium-span-6 { flex-basis: 50% } .medium-span-7 { flex-basis: 58.3333333333% } .medium-span-8 { flex-basis: 66.6666666667% } .medium-span-9 { flex-basis: 75% } .medium-span-10 { flex-basis: 83.3333333333% } .medium-span-11 { flex-basis: 91.6666666667% } .medium-span-12 { flex-basis: 100% } } @media all and (max-width:730.5px) { .small-span-1 { flex-basis: 8.3333333333% } .small-span-2 { flex-basis: 16.6666666667% } .small-span-3 { flex-basis: 25% } .small-span-4 { flex-basis: 33.3333333333% } .small-span-5 { flex-basis: 41.6666666667% } .small-span-6 { flex-basis: 50% } .small-span-7 { flex-basis: 58.3333333333% } .small-span-8 { flex-basis: 66.6666666667% } .small-span-9 { flex-basis: 75% } .small-span-10 { flex-basis: 83.3333333333% } .small-span-11 { flex-basis: 91.6666666667% } .small-span-12 { flex-basis: 100% } } .wd__section .ksp__layout { padding-right: 16px; padding-left: 16px; box-sizing: border-box; max-width: 1268px; min-width: 1024px } .wd__section .ksp__layout .wd__feature.feature-icon .wd__feature__describe__top { display: block!important } .wd__section .ksp__layout .item_image { position: relative; z-index: -1; box-sizing: border-box } .wd__section .ksp__layout .item_image .img__block { display: block } .wd__section .ksp__layout .grid-item-ie { height: 100% } .wd__section .ksp__layout .grid-item-wdContent { display: flex; align-content: flex-end; flex-direction: row; min-height: 304px } .wd__section .ksp__layout .grid-item-wdContent .item_block { display: flex; width: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_content { position: relative; box-sizing: border-box; height: 100% } .wd__section .ksp__layout .wd__content { display: flex; position: relative; justify-content: center; margin: 0; height: 100%; flex-direction: column } .wd__section .ksp__layout .wd__content .content__slogan { margin-bottom: 13px; color: #000; font-size: 1.625rem; line-height: 1.14 } .wd__section .ksp__layout .wd__content .content__title { margin: 0; color: #000; font-size: 3.09375rem; line-height: 1.14 } .wd__section .ksp__layout .wd__content .content__info { margin-top: 13px; color: #000; line-height: 1.2; font-size: 1.625rem } .wd__section .ksp__layout .wd__content span.space-left-m { padding-left: 5px } .wd__section .ksp__layout .wd__content span.space-right-m { padding-right: 5px } .wd__section .ksp__layout .grid-item-wdFeature .grid-item-ie { padding: 37px 24px } .wd__section .ksp__layout .wd__feature__list { display: flex; justify-content: center; margin: 0; margin-top: 0; height: 100%; flex-direction: column } .wd__section .ksp__layout .wd__feature__list .wd__feature { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0 } .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 11px } .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 6px } .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe, .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe span, .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top span { line-height: 1.4; font-size: 1.625rem } .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__data { font-size: 3rem; line-height: 1.2 } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { padding: 37px 20px } .wd__section .ksp__layout .wd__feature__list.top-icon { display: flex; justify-content: flex-start; padding-top: 0; padding-bottom: 0 } .wd__section .ksp__layout .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { margin-right: auto; margin-left: auto; background-size: contain } .wd__section .ksp__layout .wd__feature__list.top-icon .wd__feature .wd__feature__data { font-size: 2.125rem } .wd__section .ksp__layout .grid-item-ie.showbevel { margin: 0 8px; border: 0; border-radius: 0; background-color: transparent } .wd__section .ksp__layout .grid-item-ie.showbevel::before { display: block; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; border: 1px solid #fff; background: #000; background-repeat: repeat; background-size: 400px 400px; content: ""; background-image: url(../images/large/2x/ksp/line-grid-png.png) } .wd__section .ksp__layout .grid-item-ie.showbevel .grid-item-border { position: absolute; z-index: 19; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff } .wd__section .ksp__layout .grid-item-ie.showbevel .corItem { position: absolute; z-index: 13; width: 30px; height: 30px; border-style: solid; border-width: 2px 0 0; border-color: #fff transparent transparent transparent; background-color: #000; transform-origin: center } .wd__section .ksp__layout .grid-item-ie.showbevel .corItem[class*=-top] { top: -15px } .wd__section .ksp__layout .grid-item-ie.showbevel .corItem[class*=-bottom] { bottom: -15px } .wd__section .ksp__layout .grid-item-ie.showbevel .corItem[class*=-left-] { left: -15px } .wd__section .ksp__layout .grid-item-ie.showbevel .corItem[class*=-right-] { right: -15px } .wd__section .ksp__layout .grid-item-ie.showbevel .cor-left-top { transform: rotate(135deg) scale(.8) } .wd__section .ksp__layout .grid-item-ie.showbevel .cor-left-bottom { transform: rotate(45deg) scale(.8) } .wd__section .ksp__layout .grid-item-ie.showbevel .cor-right-top { transform: rotate(225deg) scale(.8) } .wd__section .ksp__layout .grid-item-ie.showbevel .cor-right-bottom { transform: rotate(315deg) scale(.8) } .wd__section .ksp__layout .wd__feature__data .sign-cr { top: -.7em; font-size: .5em; line-height: 1 } .wd__section .ksp__layout .item__jumpto-button-container { position: absolute; z-index: 9; right: 0; bottom: 0; width: 0; height: 0 } .wd__section .ksp__layout .item__jumpto-button { position: absolute; overflow: hidden; cursor: pointer; right: 0; bottom: 0; margin: 0; padding: 0; width: 44px; height: 44px; border: 0; border-radius: 10px 0 0 } .wd__section .ksp__layout .item__jumpto-button * { pointer-events: none!important } .wd__section .ksp__layout .item__jumpto-button::before { display: block; position: absolute; top: 50%; bottom: unset; left: 50%; margin-top: -5px; margin-left: -10px; width: 20px; height: 10px; content: ""; -webkit-mask-image: url(../images/jumparrowMask.png); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; background-color: #000 } @media all and (min-width:1280px) { .wd__section .ksp__layout .grid-item-wdContent .grid-item-ie { width: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_block { justify-content: center; padding: 62px 70px; box-sizing: border-box } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right { flex-flow: row-reverse } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right .img__block { right: 0; left: auto } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center { display: flex; align-items: center; justify-content: center; margin: 0; padding: 50px 45px 33px; height: 100%; flex-direction: column } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content { width: 100%; height: auto } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__info, .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__title { text-align: center } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image { width: 100%; height: 103px } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-leftCenter { height: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_content { width: 50.9% } .wd__section .ksp__layout .grid-item-wdContent .item_image { width: 49% } .wd__section .ksp__layout .grid-item-wdContent .img__block { position: absolute } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__section .ksp__layout { padding-right: 16px; padding-left: 16px; box-sizing: border-box; width: 100%; max-width: 1023px; min-width: 1px } .wd__section .ksp__layout .grid-item-wdContent .grid-item-ie { width: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_block { justify-content: center; padding: 0 } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right { flex-flow: row-reverse } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right .item_content { padding: 29px 40px 35px 0 } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right .img__block { right: 0; left: auto } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center { flex-direction: column; height: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content { padding: 40px 24px; width: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__info, .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_content .content__title { text-align: center } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image { width: 100%; height: 100% } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-center .item_image .img__block { left: 50%; transform: translateX(-50%) } .wd__section .ksp__layout .grid-item-wdContent .item_content { padding: 29px 0 35px 40px; width: 54% } .wd__section .ksp__layout .grid-item-wdContent .wd__content { left: 0; padding-bottom: 5px; width: 99% } .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__title { width: 100%; font-size: 3rem; line-height: 1.2 } .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__info { margin-top: 6px; width: 100%; font-size: 1.625rem } .wd__section .ksp__layout .grid-item-wdContent .item_image { width: 46% } .wd__section .ksp__layout .grid-item-wdContent .item_image .img__block { position: absolute; top: 50%; transform: translateY(-50%) } .wd__section .ksp__layout .grid-item.grid-item-wdFeature { min-height: 175px } .wd__section .ksp__layout .grid-item.grid-item-wdFeature .grid-item-ie { padding: 37px 24px } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 6px; margin-right: auto; margin-left: auto; width: 86% } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 12px } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe, .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe span, .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top span { font-size: 1.625rem } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__data { font-size: 3rem; line-height: 1.2 } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { padding: 37px 20px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon { margin-top: 6px; margin-right: auto; margin-left: auto; width: 86% } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top { margin-bottom: 17px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { width: 100%; height: 100px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__data { font-size: 2.125rem } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe { margin-top: 14px } } @media all and (max-width:730.5px) { .wd__section .ksp__layout { position: relative; left: 50%; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; box-sizing: border-box; width: 100%; max-width: 391px; transform: translateX(-50%); min-width: 336px } .wd__section .ksp__layout .grid-item { min-width: 320px; justify-content: center } .wd__section .ksp__layout .grid-item-wdContent { flex-direction: column } .wd__section .ksp__layout .grid-item-wdContent .item_block { flex-direction: column } .wd__section .ksp__layout .grid-item-wdContent .item_block.text-right { flex-direction: column } .wd__section .ksp__layout .grid-item-wdContent .item_content { padding: 27px 24px; height: auto } .wd__section .ksp__layout .grid-item-wdContent .wd__content { left: 0; padding-bottom: 5px; width: 100% } .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__title { width: 100%; font-size: 2.3625rem; line-height: 1.2 } .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__info { margin-top: 8px; width: 100%; font-size: 1.25rem } .wd__section .ksp__layout .grid-item-wdContent .item_image { margin-top: -5px; width: 100%; height: 202px } .wd__section .ksp__layout .grid-item-wdContent .item_image .img__block { position: relative } .wd__section .ksp__layout .grid-item.grid-item-wdFeature .grid-item-ie { padding: 32px 24px; min-height: 1px } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 4px } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 6px; margin-right: auto; margin-left: auto; width: 86% } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe, .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe span, .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__describe__top span { font-size: 1.25rem } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__data { font-size: 2.3625rem; line-height: 1.2; letter-spacing: 1.4px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .grid-item-ie { padding: 32px 24px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon { margin-top: 6px; margin-right: auto; margin-left: auto; width: 86% } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe, .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe span, .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top, .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top span { font-size: 1.25rem } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top { margin-bottom: 13px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { width: 100%; height: 72px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__data { font-size: 1.5625rem } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe { margin-top: 11px } } .wd__performance__graph { position: relative; margin-top: 32px; text-align: left } .wd__performance__graph .graph__heading { display: block; padding-bottom: 40px; font-size: 25px } .wd__performance__graph .graph__description { display: block; margin-top: -34px; padding-bottom: 40px; font-size: 17px } .wd__performance__graph .space-left-m { padding-left: 3px } .wd__performance__graph .space-right-m { padding-right: 3px } .wd__performance__graph .graph .graph__line { margin-bottom: 28px } .wd__performance__graph .graph .graph__line.line-1 .bar__value { display: none } .wd__performance__graph .graph .graph__line.line-1 .graph__bar { transition: width 1.2s cubic-bezier(.455, .03, .515, .955) 0s } .wd__performance__graph .graph .graph__line.line-1 .graph__bar .bar__value { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) .8s } .wd__performance__graph .graph .graph__line.line-1 .graph__caption { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) .2s } .wd__performance__graph .graph .graph__line.line-2 .graph__bar { transition: width 1.2s cubic-bezier(.455, .03, .515, .955) .4s } .wd__performance__graph .graph .graph__line.line-2 .graph__bar .bar__value { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 1.2s } .wd__performance__graph .graph .graph__line.line-2 .graph__caption { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) .6s } .wd__performance__graph .graph .graph__line.line-3 .graph__bar { transition: width 1.2s cubic-bezier(.455, .03, .515, .955) .8s } .wd__performance__graph .graph .graph__line.line-3 .graph__bar .bar__value { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 1.6s } .wd__performance__graph .graph .graph__line.line-3 .graph__caption { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 1s } .wd__performance__graph .graph .graph__line.line-4 .graph__bar { transition: width 1.2s cubic-bezier(.455, .03, .515, .955) 1.2s } .wd__performance__graph .graph .graph__line.line-4 .graph__bar .bar__value { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 2s } .wd__performance__graph .graph .graph__line.line-4 .graph__caption { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 1.4s } .wd__performance__graph .graph .graph__line.line-5 .graph__bar { transition: width 1.2s cubic-bezier(.455, .03, .515, .955) 1.6s } .wd__performance__graph .graph .graph__line.line-5 .graph__bar .bar__value { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 2.4s } .wd__performance__graph .graph .graph__line.line-5 .graph__caption { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 1.8s } .wd__performance__graph .graph .graph__line.line-6 .graph__bar { transition: width 1.2s cubic-bezier(.455, .03, .515, .955) 2s } .wd__performance__graph .graph .graph__line.line-6 .graph__bar .bar__value { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 2.8s } .wd__performance__graph .graph .graph__line.line-6 .graph__caption { transition: opacity 1s cubic-bezier(.215, .61, .355, 1) 2.2s } .wd__performance__graph .graph .graph__line .graph__bar { position: relative; margin-bottom: 10px; height: 12px } .wd__performance__graph .graph .graph__line .graph__bar .bar__value { position: absolute; left: 100%; opacity: 1; margin-top: -8px; margin-left: 19px; font-size: 22px; letter-spacing: .05em } .wd__performance__graph .graph .graph__line .graph__bar .bar__value .value__unit { font-size: 13px } .wd__performance__graph .graph .graph__line .graph__caption { opacity: 1; font-size: 17px; letter-spacing: .05em } .wd__performance__graph .graph-badge { margin-top: -41px; margin-left: -26px; transform: translate3d(0, 0, 0); transition: transform .9s cubic-bezier(.215, .61, .355, 1) 1.1s, opacity .7s cubic-bezier(.215, .61, .355, 1) 1.1s } .wd__performance__graph .graph-badge .badge__caption-bottom, .wd__performance__graph .graph-badge .badge__caption-top { display: block; font-size: 16px; letter-spacing: .4px; line-height: 1 } .wd__performance__graph .graph-badge .badge__value { display: block; font-size: 65px; line-height: 1 } .wd__performance__graph .graph-badge .badge__value .value__unit { font-size: .4em } .wd__performance__graph .graph-badge .badge__caption-bottom { margin-top: -3px } .wd__performance__graph.reset .graph .graph__line .graph__bar { width: 0%!important } .wd__performance__graph.reset .graph .graph__line .graph__bar .bar__value { opacity: 0!important } .wd__performance__graph.reset .graph .graph__line .graph__caption { opacity: 0!important } .wd__performance__graph.reset .graph-badge { opacity: 0!important; transform: translate3d(-40px, 0, 0)!important } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__performance__graph .graph .graph__line .graph__bar .bar__value { margin-top: -4px; font-size: 17px } .wd__performance__graph .graph-badge { margin-top: -36px } .wd__performance__graph .graph-badge .badge__value { font-size: 58px } } @media all and (min-width:1px) and (max-width:730.5px) { .wd__performance__graph .graph__heading { padding-bottom: 24px; font-size: 19px } .wd__performance__graph .graph__description { margin-top: -26px; padding-bottom: 24px } .wd__performance__graph .graph .graph__line { margin-bottom: 28px } .wd__performance__graph .graph .graph__line.line-1 { position: relative } .wd__performance__graph .graph .graph__line.line-1 .graph__bar .bar__value { display: block; position: absolute; right: 0; margin-top: 16px; margin-left: -150px; font-size: 32px; text-align: right } .wd__performance__graph .graph .graph__line .graph__bar .bar__value { margin-left: 12px } .wd__performance__graph .graph .graph__line .graph__bar .bar__value .value__unit { font-size: 22px } .wd__performance__graph .graph .graph__line .graph__caption { opacity: 1; font-size: 17px; letter-spacing: .1px } .wd__performance__graph .graph-badge { display: none } } .wd__performance__graph.theme-black .graph__description, .wd__performance__graph.theme-black .graph__heading { color: #fff } .wd__performance__graph.theme-black .bar__value, .wd__performance__graph.theme-black .graph__caption { color: #eee } .wd__performance__graph.theme-black .line-1 .bar__value { color: #00c6ff } .wd__performance__graph.theme-black .graph-badges .graph-badge .badge__caption-bottom, .wd__performance__graph.theme-black .graph-badges .graph-badge .badge__caption-top { color: #fff } .wd__performance__graph.theme-black .graph-badges .graph-badge .badge__value { color: #00c6ff } .wd__performance__graph.theme-white .graph__description, .wd__performance__graph.theme-white .graph__heading { color: #333 } .wd__performance__graph.theme-white .bar__value, .wd__performance__graph.theme-white .graph__caption { color: #555 } .wd__performance__graph.theme-white .line-1 .bar__value { color: #00c6ff } .wd__performance__graph.theme-white .graph-badges .graph-badge .badge__caption-bottom, .wd__performance__graph.theme-white .graph-badges .graph-badge .badge__caption-top { color: #333 } .wd__performance__graph.theme-white .graph-badges .graph-badge .badge__value { color: #00c6ff } .section__kv .wd__content { position: relative; margin-top: 35px; margin-left: auto; margin-right: auto } .section__kv .wd__content .content__slogan { margin-top: 0; margin-left: 0; color: #000; font-size: 63px; text-transform: none } .section__kv .wd__content .content__title { margin-top: 26px; font-size: 65px } .section__kv .wd__content .content__info { margin-top: 40px; width: 100%; font-size: 26px } @media all and (min-width:731px) and (max-width:1279.5px) { .section__kv .wd__content .content__slogan { margin-top: -2px; font-size: 48px } .section__kv .wd__content .content__info { margin-top: 15px; width: 90%; max-width: 793px; font-size: 26px; line-height: 1.55 } } @media all and (max-width:730.5px) { .section__kv .wd__content { margin-top: 55px } .section__kv .wd__content .content__slogan { display: block; margin-top: 7px; margin-left: auto; margin-right: auto; width: 90%; text-align: center; font-size: 32px } .section__kv .wd__content .content__title { max-width: 450px } .section__kv .wd__content .content__info { text-align: center; margin-top: 16px; margin-left: auto; margin-right: auto; width: 84%; max-width: 460px; font-size: 22px; line-height: 1.43 } } .kv__badge { display: block; position: relative; margin-top: 64px; margin-right: auto; margin-left: auto; width: 94%; max-width: 950px } .kv__badge .badge__container { position: relative; text-align: center } .kv__badge .badge__container img { display: inline-block; position: relative; margin: 0 25px; background-size: contain; vertical-align: middle } .kv__badge .badge__container img.icon__badge-creator { width: 98px; height: 130px } #CMD .kv__badge .icon__badge-creator { background-image: url(../images/kv_badge_creator.jpg) } .kv__badge .badge__container img.icon__badge-oled { width: 98px; height: 130px } #CMD .kv__badge .icon__badge-oled { background-image: url(../images/kv_badge_oled.jpg) } .kv__badge .badge__container img.icon__badge-nvidia { left: -6px; margin-right: 7px; width: 192px; height: 90px } #CMD .kv__badge .icon__badge-nvidia { background-image: url(../images/kv_badge_nvidia.png) } .kv__badge .badge__container img.icon__badge-nvidia2022 { left: -6px; margin-right: 7px; width: 192px; height: 90px } #CMD .kv__badge .icon__badge-nvidia2022 { background-image: url(../images/kv_badge_nvidia2022.png) } .kv__badge .badge__container img.icon__badge-nvidiartx { width: 204px; height: 62px } #CMD .kv__badge .icon__badge-nvidiartx { background-image: url(../images/kv_badge_nvidiartx.png) } .kv__badge .badge__content { position: relative; margin-top: 24px; text-align: center } .kv__badge .badge__content .content-text { display: block; position: relative; margin-bottom: 5px; color: #999; font-size: .875rem; text-align: center; line-height: 1.2 } .kv__badge .badge__content .content-text:last-child { margin-bottom: 0 } @media all and (min-width:731px) and (max-width:1279.5px) { .kv__badge { margin-top: 52px; width: 100%; max-width: 720px } .kv__badge .badge__container img { margin: 0 25px } .kv__badge .badge__container img.icon__badge-creator { width: 98px; height: 130px } .kv__badge .badge__container img.icon__badge-oled { width: 98px; height: 130px } .kv__badge .badge__container img.icon__badge-nvidia, .kv__badge .badge__container img.icon__badge-nvidia2022 { left: -7px; margin-right: 5px; width: 192px; height: 90px } .kv__badge .badge__container img.icon__badge-nvidiartx { width: 218px; height: 66px } .kv__badge .badge__content { margin-top: 25px } .kv__badge .badge__content .content-text { font-size: .875rem; line-height: 1.2 } } @media all and (max-width:730.5px) { .kv__badge { margin-top: 52px; width: 90%; max-width: 430px } .kv__badge .badge__container img { margin: 0 21px 38px } .kv__badge .badge__container img.icon__badge-creator { width: 80px; height: 106px } .kv__badge .badge__container img.icon__badge-oled { width: 80px; height: 106px } .kv__badge .badge__container img.icon__badge-nvidia, .kv__badge .badge__container img.icon__badge-nvidia2022 { left: -4px; margin-right: 3px; width: 150px; height: 70px } .kv__badge .badge__container img.icon__badge-nvidiartx { width: 203px; height: 63px } .kv__badge .badge__content { margin-top: -3px } .kv__badge .badge__content .content-text { margin-bottom: 8px; font-size: .875rem; line-height: 1.2 } } @keyframes hoverAnimation { 0% { transform: scale(1, 1) translateY(0) } 35% { transform: scale(1, .2) translateY(130px) } 85% { transform: scale(1, 1) translateY(0) } } .vr__screen { display: block; position: relative; left: 50%; margin-top: 110px; margin-bottom: -30px; margin-left: -38px; width: 76px; height: 48px } .vr__screen #vr__screen__icon { fill: #333; width: 76px; height: 48px } .vr__screen #vr__screen__icon .vr__border { transform: scale(1, 1); animation: none } @media all and (min-width:731px) and (max-width:1279.5px) { .vr__screen { margin-top: 74px; margin-bottom: -29px } } @media all and (max-width:730.5px) { .vr__screen { margin-top: 56px; margin-bottom: -22px; margin-left: -35px; width: 70px; height: 44px } .vr__screen #vr__screen__icon { width: 70px; height: 44px } } @media all and (max-width:1279.5px) { .vr__screen #vr__screen__icon .vr__border { transform: scale(1, 1) } } .cmd-sidenav { z-index: 1001 } .cmd-sidenav .container-bg { position: absolute; right: 20px; width: 24px; height: 100%; border-radius: 18px; background: rgba(0, 0, 0, .4) } .cmd-sidenav .container-collapse { display: none } .cmd-sidenav .container-collapse .img__main { margin: 0; width: auto; height: auto } .cmd-sidenav .sidenav-container .item-container::marker { font-size: 0 } @media all and (min-width:1280px) { .wd__section .sectionnNavPosition { top: -140px } .cmd-sidenav { position: fixed; top: 180px; right: 0 } .cmd-sidenav .sidenav-container { position: relative } .cmd-sidenav .sidenav-container .container-items { position: relative } .cmd-sidenav .sidenav-container .container-items .item { display: block; position: relative; width: 57px; height: 43px; font-size: 0; -webkit-tap-highlight-color: transparent } .cmd-sidenav .sidenav-container .container-items .item .item-dot { position: absolute; cursor: pointer; top: 0; right: 0; width: 54px; height: 43px } .cmd-sidenav .sidenav-container .container-items .item .item-dot::after { display: block; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #9f9f9f; transform: translate3d(-50%, -50%, 0); user-select: none; pointer-events: none; content: "" } .cmd-sidenav .sidenav-container .container-items .item .item-label { position: absolute; overflow-y: hidden; right: 0; width: 400px; height: 100%; color: #fff; font-size: 0; text-align: right; user-select: none; pointer-events: none } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name, .cmd-sidenav .sidenav-container .container-items .item .item-label .label-triangle { display: inline-block; position: relative; vertical-align: top } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-triangle { top: 0; left: 1px; width: 40px; height: 100%; border-radius: 54px 0 0 54px; background: #fff } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name { padding: 0 23px 0 0; height: 100%; color: #fff; font-size: 1.25rem; background: #fff } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name span { display: inline-block; position: relative; top: 50%; transform: translateY(-50%) } .cmd-sidenav .sidenav-container .container-items .item .item-dot { opacity: 1; transition: opacity .2s 150ms linear } .cmd-sidenav .sidenav-container .container-items .item .item-dot::after { transition: transform .3s linear } .cmd-sidenav .sidenav-container .container-items .item .item-label { transform: translate3d(100%, 0, 0); transition: transform .3s linear } .cmd-sidenav .sidenav-container .container-items .item.hover .item-dot { opacity: 0; transition: opacity 150ms linear } .cmd-sidenav .sidenav-container .container-items .item.hover .item-label { transform: translate3d(0, 0, 0); transition: transform .3s 75ms linear } .cmd-sidenav .sidenav-container .container-items .item.enter .item-label .label-name { color: #fff } .cmd-sidenav .sidenav-container .container-items .item .item-dot.enter::after { background: #fff; transform: translate3d(-50%, -50%, 0) scale(1.5) } .cmd-sidenav .container-bg { right: 15px } .cmd-sidenav .sidenav-container .container-items .item { margin-top: -3px; width: 94px } .cmd-sidenav .sidenav-container .container-items .item .item-dot { width: 94px } .cmd-sidenav .sidenav-container .container-items .item .item-dot::after { margin-left: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__section .sectionnNavPosition { top: -140px } .cmd-sidenav { position: fixed; top: 123px; right: 20px; background-color: transparent } .cmd-sidenav .container-bg { display: none } .cmd-sidenav .item-label .label-triangle { display: none } .cmd-sidenav .item-label .label-name { padding-right: 15px; padding-left: 15px } .cmd-sidenav .item-dot { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100% } .cmd-sidenav .container-collapse { display: block; position: absolute; z-index: 1; top: -26px; right: 0; width: auto; height: auto } .cmd-sidenav .container-collapse .collapse-open::before { background: rgba(66, 66, 66, .8) } .cmd-sidenav .container-collapse .collapse-close::before { background: #424242 } .cmd-sidenav .container-collapse .collapse-close, .cmd-sidenav .container-collapse .collapse-open { position: absolute; top: 50%; right: 13px; width: 22px; height: 22px; transform: translate3d(0, -50%, 0); transition: opacity .3s } .cmd-sidenav .container-collapse .collapse-close::before, .cmd-sidenav .container-collapse .collapse-open::before { position: absolute; content: ""; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%) } .cmd-sidenav .container-collapse .collapse-close img, .cmd-sidenav .container-collapse .collapse-open img { position: absolute; top: 50%; left: 50%; margin-top: -11px; margin-left: -11px; width: 22px; height: 22px; background-position: no-repeat; background-size: contain } .cmd-sidenav .container-collapse .collapse-open .img { background-image: url(../images/open.svg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .cmd-sidenav .container-collapse .collapse-close { display: none; user-select: none; pointer-events: none } .cmd-sidenav .container-collapse .collapse-close .img { background-image: url(../images/close.svg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .cmd-sidenav .container-items { overflow: hidden; height: 100%; max-height: 0; transition: all .4s } .cmd-sidenav .container-items .item { display: block; position: relative; opacity: 0; transition: opacity } .cmd-sidenav .container-items .item .item-label { padding: 10px 14px; font-size: 1.1875rem; text-align: center } .cmd-sidenav .container-items .item .item-label .label-name { color: #fff; font-size: 1.1875rem; line-height: 1.2 } } @media all and (min-width:731px) and (max-width:1279.5px) { .cmd-sidenav.show { padding-bottom: 17px; background-color: #333 } .cmd-sidenav.show .container-items { max-height: 2000px; transition: all .4s } .cmd-sidenav.show .container-items::before { position: absolute; content: ""; top: -50px; left: 0; width: 100%; height: 50px; background-color: #333 } .cmd-sidenav.show .container-items .item { opacity: 1; transition: opacity .3s .4s } .cmd-sidenav.show .container-collapse .collapse-open { display: none; user-select: none; pointer-events: none } .cmd-sidenav.show .container-collapse .collapse-close { display: block; pointer-events: all } } @media all and (min-width:731px) and (max-width:1279.5px) { .cmd-sidenav { right: 20px; left: unset; opacity: 0; transition: opacity .3s } .cmd-sidenav.mobile-show { left: unset; opacity: 1 } } @media all and (min-width:731px) and (max-width:1279.5px) { .cmd-sidenav .item-dot.enter { z-index: -1; background: #e42657 } } @media all and (max-width:730.5px) { .wd__section .sectionnNavPosition { top: -102px } .cmd-sidenav { position: fixed; top: 123px; right: 16px; width: calc(100% - 32px); background-color: transparent } .cmd-sidenav .container-bg { display: none } .cmd-sidenav .item-label .label-triangle { display: none } .cmd-sidenav .item-dot { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100% } .cmd-sidenav .container-collapse { display: block; position: absolute; z-index: 1; top: -26px; right: 0; width: auto; height: auto } .cmd-sidenav .container-collapse .collapse-open::before { background: rgba(66, 66, 66, .8) } .cmd-sidenav .container-collapse .collapse-close::before { background: #424242 } .cmd-sidenav .container-collapse .collapse-close, .cmd-sidenav .container-collapse .collapse-open { position: absolute; top: 50%; right: 13px; width: 22px; height: 22px; transform: translate3d(0, -50%, 0); transition: opacity .3s } .cmd-sidenav .container-collapse .collapse-close::before, .cmd-sidenav .container-collapse .collapse-open::before { position: absolute; content: ""; top: 50%; left: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%) } .cmd-sidenav .container-collapse .collapse-close img, .cmd-sidenav .container-collapse .collapse-open img { position: absolute; top: 50%; left: 50%; margin-top: -11px; margin-left: -11px; width: 22px; height: 22px; background-position: no-repeat; background-size: contain } .cmd-sidenav .container-collapse .collapse-open .img { background-image: url(../images/open.svg) } } @media all and (max-width:730.5px) { .cmd-sidenav .container-collapse .collapse-close { display: none; user-select: none; pointer-events: none } .cmd-sidenav .container-collapse .collapse-close .img { background-image: url(../images/close.svg) } } @media all and (max-width:730.5px) { .cmd-sidenav .container-items { overflow: hidden; height: 100%; max-height: 0; transition: all .4s } .cmd-sidenav .container-items .item { display: block; position: relative; opacity: 0; transition: opacity } .cmd-sidenav .container-items .item .item-label { padding: 10px 14px; font-size: 1.125rem; text-align: center } .cmd-sidenav .container-items .item .item-label .label-name { color: #fff; font-size: 1.125rem; line-height: 1.2 } } @media all and (max-width:730.5px) { .cmd-sidenav.show { padding-bottom: 17px; background-color: #333 } .cmd-sidenav.show .container-items { max-height: 2000px; transition: all .4s } .cmd-sidenav.show .container-items::before { position: absolute; content: ""; top: -50px; left: 0; width: 100%; height: 50px; background-color: #333 } .cmd-sidenav.show .container-items .item { opacity: 1; transition: opacity .3s .4s } .cmd-sidenav.show .container-collapse .collapse-open { display: none; user-select: none; pointer-events: none } .cmd-sidenav.show .container-collapse .collapse-close { display: block; pointer-events: all } } @media all and (max-width:730.5px) { .cmd-sidenav { left: 100%; opacity: 0; transition: opacity .3s } .cmd-sidenav.mobile-show { left: unset; opacity: 1 } } @media all and (max-width:730.5px) { .cmd-sidenav .item-dot.enter { z-index: -1; background: #e42657 } } .wd__section .wd__feature__list { margin-right: auto; margin-left: auto } .wd__section .wd__feature__list.list-icon { margin-top: 22px } .wd__section .wd__feature__list.list-icon .wd__feature { top: 42px } .wd__section .wd__feature__list.list-icon .wd__feature.feature-icon { top: 0 } .wd__section .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top { display: none } .wd__section .wd__feature__list .wd__feature.feature-icon .wd__feature__data { position: relative; margin-right: auto; margin-left: auto } .wd__section .wd__feature__list .wd__feature.feature-icon .wd__feature__data .img__icon { width: 100%; height: 100% } .wd__section .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-right: auto; margin-left: auto; max-width: 168px } .wd__feature.icon-asusoled .img__icon { background-image: url(../images/icon_asusoled.png) } .wd__section .wd__feature__list .wd__feature.icon-asusoled .wd__feature__data { top: 19px; margin-bottom: 3px; width: 112px; height: 116px } .wd__feature.icon-asusoled120hz .img__icon { background-image: url(../images/icon_asusoled120hz.png) } .wd__section .wd__feature__list .wd__feature.icon-asusoled120hz .wd__feature__data { top: 29px; margin-bottom: 3px; width: 108px; height: 108px } .wd__feature.icon-blackdolbyvision .img__icon { background-image: url(../images/icon_blackdolbyvision.png) } .wd__section .wd__feature__list .wd__feature.icon-blackdolbyvision .wd__feature__data { top: 23px; margin-bottom: 3px; width: 168px; height: 116px } .wd__feature.icon-dolbyvision .img__icon { background-image: url(../images/icon_dolbyvision.png) } .wd__section .wd__feature__list .wd__feature.icon-dolbyvision .wd__feature__data { top: 23px; margin-bottom: 3px; width: 168px; height: 116px } .wd__feature.icon-flickfree .img__icon { background-image: url(../images/icon_flickfree.png) } .wd__section .wd__feature__list .wd__feature.icon-flickfree .wd__feature__data { width: 92px; height: 116px } .wd__feature.icon-lowbluelighthardware .img__icon { background-image: url(../images/icon_lowbluelighthardware.png) } .wd__section .wd__feature__list .wd__feature.icon-lowbluelighthardware .wd__feature__data { width: 92px; height: 116px } .wd__feature.icon-certifieddisplay .img__icon { background-image: url(../images/icon_certifieddisplay.png) } .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay .wd__feature__data { top: 8px; width: 92px; height: 116px } .wd__feature.icon-certifieddisplay500 .img__icon { background-image: url(../images/icon_certifieddisplay500.png) } .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay500 .wd__feature__data { top: 8px; width: 92px; height: 116px } .wd__feature.icon-certifieddisplay600 .img__icon { background-image: url(../images/icon_certifieddisplay600.png) } .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay600 .wd__feature__data { top: 8px; width: 92px; height: 116px } .wd__feature.icon-dolbyatmos .img__icon { background-image: url(../images/icon_dolbyatmos.png) } .wd__section .wd__feature__list .wd__feature.icon-dolbyatmos .wd__feature__data { top: 53px; margin-bottom: 56px; width: 187px; height: 64px } .wd__feature.icon-blackdolbyatmos .img__icon { background-image: url(../images/icon_blackdolbyatmos.png) } .wd__section .wd__feature__list .wd__feature.icon-blackdolbyatmos .wd__feature__data { top: 53px; margin-bottom: 56px; width: 187px; height: 64px } .wd__feature.icon-harmankardon .img__icon { background-image: url(../images/icon_harmankardon.png) } .wd__section .wd__feature__list .wd__feature.icon-harmankardon .wd__feature__data { top: 63px; margin-bottom: 73px; width: 256px; height: 47px } .wd__feature.icon-blackharmankardon .img__icon { background-image: url(../images/icon_blackharmankardon.png) } .wd__section .wd__feature__list .wd__feature.icon-blackharmankardon .wd__feature__data { top: 63px; margin-bottom: 73px; width: 256px; height: 47px } .wd__feature.icon-smartamplifier .img__icon { background-image: url(../images/icon_smartamplifier.png) } .wd__section .wd__feature__list .wd__feature.icon-smartamplifier .wd__feature__data { top: 34px; margin-bottom: 39px; width: 92px; height: 80px } .wd__feature.icon-blacksmartamplifier .img__icon { background-image: url(../images/icon_blacksmartamplifier.png) } .wd__section .wd__feature__list .wd__feature.icon-blacksmartamplifier .wd__feature__data { top: 34px; margin-bottom: 39px; width: 92px; height: 80px } .wd__feature.icon-audiobooster .img__icon { background-image: url(../images/icon_audiobooster.png) } .wd__section .wd__feature__list .wd__feature.icon-audiobooster .wd__feature__data { top: 32px; margin-bottom: 40px; width: 92px; height: 80px } .wd__feature.icon-blackaudiobooster .img__icon { background-image: url(../images/icon_blackaudiobooster.png) } .wd__section .wd__feature__list .wd__feature.icon-blackaudiobooster .wd__feature__data { top: 32px; margin-bottom: 40px; width: 92px; height: 80px } .wd__feature.icon-dirac .img__icon { background-image: url(../images/icon_dirac.png) } .wd__section .wd__feature__list .wd__feature.icon-dirac .wd__feature__data { top: 54px; margin-bottom: 58px; width: 190px; height: 62px } .wd__feature.icon-blackcalmanverified .img__icon { background-image: url(../images/icon_blackcalmanverified.png) } .wd__feature.icon-calmanverified .img__icon { background-image: url(../images/icon_calmanverified.png) } .wd__section .wd__feature__list .wd__feature.icon-blackcalmanverified .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-calmanverified .wd__feature__data { top: -4px; margin-top: 42px; width: 230px; height: 74px } .wd__feature.icon-sgsperformance .img__icon { background-image: url(../images/icon_sgsperformance.png) } .wd__section .wd__feature__list .wd__feature.icon-sgsperformance .wd__feature__data { top: -11px; margin-top: 28px; width: 150px; height: 88px } .wd__feature.icon-validateddisplay .img__icon { background-image: url(../images/icon_validateddisplay.png) } .wd__section .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data { top: 8px; width: 92px; height: 116px } .wd__feature.icon-lowbluelight .img__icon { background-image: url(../images/icon_lowbluelight.png) } .wd__section .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data { width: 180px; height: 116px } .wd__section .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data .img__icon { top: 3px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__section .wd__feature__list.list-icon { margin-top: -7px } .wd__section .wd__feature__list.list-icon .wd__feature { top: 29px } .wd__section .wd__feature__list.list-icon .wd__feature.feature-icon { top: 0 } .wd__section .wd__feature__list.list-icon .wd__feature .feature-icon { margin-bottom: -9px } .wd__section .wd__feature__list.list-icon .wd__feature .feature-icon .wd__feature__data { height: 116px } .wd__section .wd__feature__list .wd__feature.icon-asusoled .wd__feature__data { top: 14px } .wd__section .wd__feature__list .wd__feature.icon-asusoled120hz .wd__feature__data { top: 22px } .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay500 .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay600 .wd__feature__data { top: 3px } .wd__section .wd__feature__list .wd__feature.icon-blackdolbyvision .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-dolbyvision .wd__feature__data { top: 24px } .wd__section .wd__feature__list .wd__feature.icon-blackdolbyatmos .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-dolbyatmos .wd__feature__data { top: 51px; margin-bottom: 19px } .wd__section .wd__feature__list .wd__feature.icon-blackharmankardon .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-harmankardon .wd__feature__data { top: 58px; margin-bottom: 19px } .wd__section .wd__feature__list .wd__feature.icon-blacksmartamplifier .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-smartamplifier .wd__feature__data { top: 21px; margin-bottom: 28px } .wd__section .wd__feature__list .wd__feature.icon-audiobooster .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-blackaudiobooster .wd__feature__data { top: 20px; margin-bottom: 28px } .wd__section .wd__feature__list .wd__feature.icon-blackcalmanverified .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-calmanverified .wd__feature__data { top: -12px } .wd__section .wd__feature__list .wd__feature.icon-dirac .wd__feature__data { top: 54px; margin-bottom: 46px } .wd__section .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data { top: 3px } .wd__section .wd__feature__list .wd__feature.icon-lowbluelighthardware .wd__feature__data { top: -3px } .wd__section .wd__feature__list .wd__feature.icon-flickfree .wd__feature__data { top: -3px } .wd__section .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data { top: -1px } .wd__section .wd__feature__list .wd__feature.icon-sgsperformance .wd__feature__data { top: -14px } } @media all and (max-width:730.5px) { .wd__section .wd__feature__list.list-icon { margin-top: 9px } .wd__section .wd__feature__list.list-icon .wd__feature { top: 36px } .wd__section .wd__feature__list.list-icon .wd__feature.feature-icon { top: 0 } .wd__section .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: 0 } .wd__section .wd__feature__list .wd__feature.icon-asusoled .wd__feature__data { position: relative; top: 12px; margin-bottom: -31px; width: 100px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-asusoled120hz .wd__feature__data { position: relative; top: 16px; margin-bottom: -31px; width: 100px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-blackdolbyvision .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-dolbyvision .wd__feature__data { top: 20px; margin-bottom: -20px; width: 141px; height: 97px } .wd__section .wd__feature__list .wd__feature.icon-flickfree .wd__feature__data { width: 84px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-lowbluelighthardware .wd__feature__data { width: 84px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay500 .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay600 .wd__feature__data { width: 84px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-blackdolbyatmos .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-dolbyatmos .wd__feature__data { top: 55px; margin-bottom: -5px; width: 139px; height: 51px } .wd__section .wd__feature__list .wd__feature.icon-blackharmankardon .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-harmankardon .wd__feature__data { top: 61px; margin-bottom: 16px; width: 193px; height: 36px } .wd__section .wd__feature__list .wd__feature.icon-blacksmartamplifier .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-smartamplifier .wd__feature__data { top: 40px; margin-bottom: 11px; width: 71px; height: 62px } .wd__section .wd__feature__list .wd__feature.icon-blacksmartamplifier .wd__feature__describe, .wd__section .wd__feature__list .wd__feature.icon-smartamplifier .wd__feature__describe { top: 32px } .wd__section .wd__feature__list .wd__feature.icon-audiobooster .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-blackaudiobooster .wd__feature__data { top: 38px; margin-bottom: 0; width: 72px; height: 63px } .wd__section .wd__feature__list .wd__feature.icon-audiobooster .wd__feature__describe, .wd__section .wd__feature__list .wd__feature.icon-blackaudiobooster .wd__feature__describe { top: 42px } .wd__section .wd__feature__list .wd__feature.icon-blackcalmanverified .wd__feature__data, .wd__section .wd__feature__list .wd__feature.icon-calmanverified .wd__feature__data { top: -9px; margin-top: 39px; width: 202px; height: 65px } .wd__section .wd__feature__list .wd__feature.icon-dirac .wd__feature__data { top: 55px; margin-bottom: 7px; width: 141px; height: 46px } .wd__section .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data { top: 8px; width: 84px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data .img__icon { top: 0 } .wd__section .wd__feature__list .wd__feature.icon-certifieddisplay600 .wd__feature__data { top: 5px } .wd__section .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data { width: 153px; height: 104px } .wd__section .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data .img__icon { top: 3px } .wd__section .wd__feature__list .wd__feature.icon-sgsperformance .wd__feature__data { top: -10px; margin-top: 28px; width: 128px; height: 75px } } .inner__nav { position: relative; z-index: 2; margin: 0 auto; width: 1000px; text-align: center } .inner__nav .nav__heading { color: #ffe092; font-size: 21px; transition: opacity .6s ease-out } .inner__nav .nav__heading.clicked { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0 } .inner__nav .nav__switch__btn { position: absolute; cursor: pointer; bottom: -62px; left: 50%; margin-left: -20px; width: 40px; height: 40px; transition: all .6s ease-out, top 1s ease-out } .inner__nav .nav__switch__btn .icon__switch { /* background-image: url(///../images/inner/icon_open.png); */ position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all .5s ease-out } .inner__nav .nav__switch__btn.clicked { transform: translate3d(0, 210px, 0) } .inner__nav .nav__switch__btn.clicked .icon__switch { transform: rotate(405deg) translate3d(0, 0, 0); transform-origin: center } .inner__nav .nav__switch__btn.fixed { position: fixed; top: -30px; left: 50%; margin-left: -20px } .inner__nav .nav__switch__btn.disable { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; top: -300px!important } .inner__page { margin-top: 0; padding-top: 0; background-color: #f5f5f5 } .inner__page .wd__content .content__title { font-size: 27px; line-height: 1.2 } .inner__page .inner__mask { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: #000; transition: opacity .5s ease-out } .inner__page.darknight .inner__mask { -webkit-opacity: .6; -khtml-opacity: .6; -moz-opacity: .6; -ms-opacity: .6; -o-opacity: .6; opacity: .6; z-index: 1000000; transition: opacity .5s ease-out } .inner__page .section__content { z-index: 0; max-width: 2560px; background-color: #fff } .inner__page .section__content.theme-gray { margin-bottom: 4px; padding-bottom: 0; max-width: 1366px; background-color: #e7e7e7 } .inner__page .section__content.theme-gray .wd__content { padding-top: 39px } .inner__page .icon { position: relative; margin-right: auto; margin-bottom: 11px; margin-left: auto; width: 120px; height: 120px; background-position: center; background-repeat: no-repeat; background-size: cover } .inner__page .icon.icon-allSmiles { background-image: url(../images/large/1x/inner/icon/icon_all_smiles.png) } .inner__page .icon.icon-auto { background-image: url(../images/large/1x/inner/icon/icon_auto.png) } .inner__page .icon.icon-beautification { background-image: url(../images/large/1x/inner/icon/icon_beautification.png) } .inner__page .icon.icon-depthOfField { background-image: url(../images/large/1x/inner/icon/icon_depth_of_field.png) } .inner__page .icon.icon-effect { background-image: url(../images/large/1x/inner/icon/icon_effect.png) } .inner__page .icon.icon-gif { background-image: url(../images/large/1x/inner/icon/icon_gif.png) } .inner__page .icon.icon-hdrPro { background-image: url(../images/large/1x/inner/icon/icon_hdr_pro.png) } .inner__page .icon.icon-kids { background-image: url(../images/large/1x/inner/icon/icon_kids.png) } .inner__page .icon.icon-lowlight { background-image: url(../images/large/1x/inner/icon/icon_lowlight.png) } .inner__page .icon.icon-miniature { background-image: url(../images/large/1x/inner/icon/icon_miniature.png) } .inner__page .icon.icon-night { background-image: url(../images/large/1x/inner/icon/icon_night.png) } .inner__page .icon.icon-qrCode { background-image: url(../images/large/1x/inner/icon/icon_qr_code.png) } .inner__page .icon.icon-selfiePanorama { background-image: url(../images/large/1x/inner/icon/icon_selfie_panorama.png) } .inner__page .icon.icon-selfie { background-image: url(../images/large/1x/inner/icon/icon_selfie.png) } .inner__page .icon.icon-slowMotion { background-image: url(../images/large/1x/inner/icon/icon_slow_motion.png) } .inner__page .icon.icon-smartRemove { background-image: url(../images/large/1x/inner/icon/icon_smart_remove.png) } .inner__page .icon.icon-superResolution { background-image: url(../images/large/1x/inner/icon/icon_super_resolution.png) } .inner__page .icon.icon-manual { background-image: url(../images/large/1x/inner/icon/icon_manual.png) } .inner__page .icon.icon-timeLapse { background-image: url(../images/large/1x/inner/icon/icon_time_lapse.png) } .inner__page .icon.icon-timeRewind { background-image: url(../images/large/1x/inner/icon/icon_time_rewind.png) } .inner__page .icon.icon-youtube { background-image: url(../images/large/1x/inner/icon/icon_youtube.png) } .inner__page .icon.icon-panaroma { background-image: url(../images/large/1x/inner/icon/icon_panaroma.png) } .inner__page .icon.icon-pro { background-image: url(../images/large/1x/inner/icon/icon_pro.png) } .inner__page .icon.icon-portrait { background-image: url(../images/large/1x/inner/icon/icon_portrait.png) } @media all and (min-width:731px) and (max-width:1279.5px) { .inner__nav { margin: 0 auto; width: 100% } .inner__nav .nav__heading { font-size: 21px } .inner__nav .nav__switch__btn { bottom: -63px; left: 50%; margin-left: -20px; width: 40px; height: 40px } .inner__nav .nav__switch__btn .icon__switch { position: absolute; top: 0; left: 0; width: 40px; height: 40px } .inner__nav .nav__switch__btn.clicked { transform: translate3d(0, 210px, 0) } .inner__nav .nav__switch__btn.clicked .icon__switch { transform-origin: center; transform: rotate(405deg) translate3d(0, 0, 0) } .inner__nav .nav__switch__btn.fixed { top: -30px; left: 50%; margin-left: -20px } .inner__page .wd__content .content__title { font-size: 27px; line-height: 1.2 } .inner__page .section__content { padding-bottom: 205px } .inner__page .section__content.theme-gray { max-width: 1300px; max-width: 722px } .inner__page .section__content.theme-gray .wd__content { padding-top: 39px } .inner__page .section__content.theme-gray .col.always__on__top { background-color: #fff } .inner__page .icon { margin-bottom: 11px; width: 120px; height: 120px } } @media all and (max-width:730.5px) { .inner__nav { margin: 0 auto; width: 100% } .inner__nav .nav__heading { font-size: 15px; letter-spacing: .2px } .inner__nav .nav__switch__btn { bottom: -55px; left: 50%; margin-left: -19px; width: 38px; height: 38px } .inner__nav .nav__switch__btn .icon__switch { position: absolute; top: 0; left: 0; width: 38px; height: 38px } .inner__nav .nav__switch__btn.clicked { transform: translate3d(0, 210px, 0) } .inner__nav .nav__switch__btn.clicked .icon__switch { transform-origin: center; transform: rotate(405deg) translate3d(0, 0, 0) } .inner__nav .nav__switch__btn.fixed { top: -30px; left: 50%; margin-left: -19px } .inner__page .wd__content .content__title { font-size: 20px; line-height: 1.1 } .inner__page .section__content { padding-bottom: 205px } .inner__page .section__content.theme-gray { max-width: 414px } .inner__page .section__content.theme-gray .col.always__on__top { background-color: #fff } .inner__page .icon { margin-bottom: 11px; width: 120px; height: 120px } } .wd__innerbtn { position: relative; z-index: 2; margin-right: auto; margin-left: auto; padding: 0; max-width: 2560px } .wd__innerbtn.blackTheme { margin-top: -2px; background: #0f0d10 } .wd__innerbtn .inner__btn { position: absolute; margin: 0 auto; width: 100%; height: 80px } .wd__innerbtn .inner__btn span { display: block; opacity: 1; margin-bottom: 22px; font-size: 21px; text-align: center; transition: opacity .4s } .wd__innerbtn .inner__btn .toggleSlide { position: absolute; cursor: pointer; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; transform: translateY(0) translateZ(0) rotate(0); transition: transform .8s 50ms, background-image .3s ease-out; transform-origin: center center } .wd__innerbtn .inner__btn .toggleSlide.fixed { position: fixed; top: -100px } .wd__innerbtn .inner__btn.active .toggleSlide { transform: translateY(180px) translateZ(0) rotate(0) } .wd__innerbtn .inner__btn.active span { opacity: 0 } .wd__innerbtn.theme-black .inner__btn span { color: #333 } .wd__innerbtn.theme-black .inner__btn .toggleSlide { /* background-image: url(///../images/inner/icon_open_black.png) */ } .wd__innerbtn.theme-black .inner__btn.active .toggleSlide { /* background-image: url(///../images/inner/icon_close_black.png) */ } .wd__innerbtn.theme-white .inner__btn span { color: #fff } .wd__innerbtn.theme-white .inner__btn .toggleSlide { /* background-image: url(///../images/inner/icon_open_white.png) */ } .wd__innerbtn.theme-white .inner__btn.active .toggleSlide { /* background-image: url(///../images/inner/icon_close_white.png) */ } .inner__page { display: block; overflow: hidden; z-index: 1; margin-right: auto; margin-left: auto; max-width: 2560px } .inner__page .section__content { max-width: 1366px } .inner__page .section__content .wd__content .content__title { color: #333!important; font-size: 24px; font-weight: 200!important } .inner__page .section__content .wd__content .content__title * { font-weight: 200!important } .inner__page .section__content .wd__content .content__info { color: #333!important } .inner__page .row { opacity: 0; transition: opacity .4s } .inner__page.active .row { opacity: 1 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__innerbtn { padding: 20px 0 } .wd__innerbtn.blackTheme { margin-top: -2px } .wd__innerbtn .inner__btn { margin: 0 auto; width: 100%; height: 80px } .wd__innerbtn .inner__btn span { margin-bottom: 11px; font-size: 21px } .wd__innerbtn .inner__btn .toggleSlide { position: absolute; z-index: 999; cursor: pointer; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; transform: translateY(0) translateZ(0) rotate(0); transition: transform .8s 50ms, background-image .3s ease-out; transform-origin: center center } .wd__innerbtn .inner__btn.active span { opacity: 0 } .wd__innerbtn .inner__btn.active .toggleSlide { transform: translateY(120px) translateZ(0) rotate(0) } .wd__innerbtn .inner__btn.active .toggleSlide.fixed { top: -38px } } @media all and (max-width:730.5px) { .wd__innerbtn { padding: 20px 0 } .wd__innerbtn.blackTheme { margin-top: -2px; background: #0f0d10 } .wd__innerbtn .inner__btn { left: 0; margin: 0 2%; width: 96%; height: 80px } .wd__innerbtn .inner__btn span { margin-bottom: 19px; font-size: 15.5px } .wd__innerbtn .inner__btn .toggleSlide { position: absolute; cursor: pointer; left: 50%; margin-top: -5px; margin-left: -19px; width: 38px; height: 38px; background-position: center; background-repeat: no-repeat; background-size: cover; transform: translateY(0) translateZ(0) rotate(0); transition: transform .8s 50ms, background-image .3s ease-out; transform-origin: center center } .wd__innerbtn .inner__btn .toggleSlide.fixed { top: -25px } .wd__innerbtn .inner__btn.active span { opacity: 0 } .wd__innerbtn .inner__btn.active .toggleSlide { transform: translateY(103px) translateZ(0) rotate(0) } .inner__page .section__content .wd__content { max-width: 414px!important } } .wdtab .wdtab__nav { background-color: #fff } .wdtab .wdtab__nav::before { background-color: #7d7d7d } .wdtab .wdtab__nav-btn { color: #666; font-size: 1.25rem } .wdtab .wdtab__nav-btn.active, .wdtab .wdtab__nav-btn.focus-visible, .wdtab .wdtab__nav-btn:focus { color: #0069b9 } .wdtab .wdtab__nav-btn.active::before, .wdtab .wdtab__nav-btn.focus-visible::before, .wdtab .wdtab__nav-btn:focus::before { background-color: #0069b9 } .wdtab .wdtab__nav-btn * { pointer-events: none!important } .wdtab .wdtab__panel__item-info__text { color: #666; font-size: 1.25rem } .wdtab .wdtab__autoplay__enterdetect { position: absolute; z-index: -1; top: 0; left: 0; visibility: hidden; opacity: 0; width: 100%; height: 100% } .wdtab .wd__play__btn.wdtab__autoPlay { opacity: .6 } .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #000; fill: #fff; stroke-width: 4px } .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #000; stroke: transparent } .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #000 } .wdtab .wd__play__btn.wdtab__autoPlay:hover { opacity: 1 } .wdtab.isFakeImg .wdtab__panel__item-image .img__main { margin: 0 auto; width: 956px; height: 538px } #CMD .wdtab.isFakeImg .wdtab__panel__item-image .img__main { background-image: url(https://fakeimg.pl/956x538/) } .wdtab { position: relative } .wdtab .wdtab__autoPlay { margin-left: 482px } .wdtab .wdtab__autoPlay .wd__play__btn-button { position: absolute; top: 20px; right: 0 } .wdtab .wdtab__nav { position: relative } .wdtab .wdtab__nav::before { display: block; position: absolute; bottom: 0; left: 50%; width: 100%; height: 1px; transform: translateX(-50%); content: ""; transition: width .4s ease } .wdtab .wdtab__nav-container { display: flex; position: relative; width: 100% } .wdtab .wdtab__nav-btn { position: relative; cursor: pointer; padding-top: 20px; padding-bottom: 18px; color: #666; border: none; background-color: transparent; flex: 1 } .wdtab .wdtab__nav-btn.active::before, .wdtab .wdtab__nav-btn.focus-visible::before, .wdtab .wdtab__nav-btn:hover::before { display: block; position: absolute; bottom: 0; left: 50%; width: 100%; height: 4px; transform: translateX(-50%); content: "" } .wdtab .wdtab__nav-btn.active { cursor: initial } .wdtab .wdtab__nav-scrollouter { position: relative } .wdtab .wdtab__nav.isSticky { position: sticky; z-index: 19; top: -1px; padding-top: 1px } .wdtab .wdtab__nav.isSticky::before { width: 100vw!important } .wdtab .wdtab__panel__item { z-index: 1; opacity: 0; transition: opacity .5s ease .1s } .wdtab .wdtab__panel__item.active { display: block!important; z-index: 9!important; opacity: 1; transition: opacity 1s ease-in-out 0s } .wdtab.scrollActive .wdtab__nav-scrollouter { overflow-x: scroll; overflow-y: hidden; width: 100%; scroll-behavior: smooth; scroll-snap-type: x mandatory } .wdtab.scrollActive .wdtab__nav-scrollouter::-webkit-scrollbar { display: none } .wdtab.scrollActive .wdtab__nav-container { display: block; text-align: center } .wdtab.scrollActive .wdtab__nav-btn { display: inline-block; scroll-snap-align: center } .wdtable table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; border-collapse: collapse; border-spacing: 0 } .wdtable colgroup { display: table-column-group } .wdtable col { display: table-column } .wdtable tbody { display: table-row-group; vertical-align: middle; border-color: inherit } .wdtable tbody tr { display: table-row; color: #181818; font-size: 1.25rem; border-color: inherit; vertical-align: middle } .wdtable tbody td { display: table-cell; vertical-align: middle; color: #181818; font-size: 1.25rem } .wdtable tbody th { display: table-cell; vertical-align: middle; text-align: -internal-center } .wdtable tbody th, .wdtable tbody th span { font-weight: unset } .wdtable tbody .tr-8 td, .wdtable tbody .tr-8 th { vertical-align: top } .wdtable tbody td, .wdtable tbody th { border-bottom: 1px solid #c9c9c9 } .wdtable tbody td.no-bottom-line, .wdtable tbody th.no-bottom-line { border-bottom: 1px solid transparent } .wdtable tbody td .text__val, .wdtable tbody th .text__val { display: block } .wdtable .qr_container { position: relative; margin-top: 52px } .wdtable .qr_container .img__qrcode { left: 50%; margin-left: -60px; width: 120px; height: 120px } #CMD .wdtable .img__qrcode { background-image: url(../images/large/1x/qrcode.png) } .wdtable .qr-text { display: block; position: relative; margin-top: 16px; color: #181818; font-size: 1.25rem; line-height: 1.5 } .wdtable table .tr-0 td { font-size: 0!important } .wdtable table .tr-1 td span { display: inline-block; padding: 0 17px 1px } .wdtable table .tr-1 .td-1 span { border-radius: 15px } .wdtable table .tr-1 .td-2 span { border-radius: 15px } .wdtable table .tr-1 .td-3 span { color: #fff; border: 1px solid #0080ff; border-radius: 15px; background-color: #0080ff } .wdtable table .tr-1 .td-4 span { color: #000; border: 1px solid #ffd633; border-radius: 15px; background-color: #ffd633 } .wdtile__container { --tile-gap: 15px; --column-count: 3; display: grid; width: 100%; grid-gap: var(--tile-gap); gap: var(--tile-gap); grid-template-columns: repeat(var(--column-count), 1fr) } @media all and (min-width:1280px) { .wdtile__container[data-largecolum="1"] { --column-count: 1 } .wdtile__container[data-largecolum="2"] { --column-count: 2 } .wdtile__container[data-largecolum="3"] { --column-count: 3 } .wdtile__container[data-largecolum="4"] { --column-count: 4 } .wdtile__container[data-largecolum="5"] { --column-count: 5 } .wdtile__container[data-largecolum="6"] { --column-count: 6 } .wdtile__container[data-largecolum="7"] { --column-count: 7 } .wdtile__container[data-largecolum="8"] { --column-count: 8 } .wdtile__container[data-largecolum="9"] { --column-count: 9 } .wdtile__container[data-largecolum="10"] { --column-count: 10 } .wdtile__container[data-largecolum="11"] { --column-count: 11 } .wdtile__container[data-largecolum="12"] { --column-count: 12 } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtile__container[data-mediumcolum="1"] { --column-count: 1 } .wdtile__container[data-mediumcolum="2"] { --column-count: 2 } .wdtile__container[data-mediumcolum="3"] { --column-count: 3 } .wdtile__container[data-mediumcolum="4"] { --column-count: 4 } .wdtile__container[data-mediumcolum="5"] { --column-count: 5 } .wdtile__container[data-mediumcolum="6"] { --column-count: 6 } .wdtile__container[data-mediumcolum="7"] { --column-count: 7 } .wdtile__container[data-mediumcolum="8"] { --column-count: 8 } .wdtile__container[data-mediumcolum="9"] { --column-count: 9 } .wdtile__container[data-mediumcolum="10"] { --column-count: 10 } .wdtile__container[data-mediumcolum="11"] { --column-count: 11 } .wdtile__container[data-mediumcolum="12"] { --column-count: 12 } } @media all and (max-width:730.5px) { .wdtile__container[data-smallcolum="1"] { --column-count: 1 } .wdtile__container[data-smallcolum="2"] { --column-count: 2 } .wdtile__container[data-smallcolum="3"] { --column-count: 3 } .wdtile__container[data-smallcolum="4"] { --column-count: 4 } .wdtile__container[data-smallcolum="5"] { --column-count: 5 } .wdtile__container[data-smallcolum="6"] { --column-count: 6 } .wdtile__container[data-smallcolum="7"] { --column-count: 7 } .wdtile__container[data-smallcolum="8"] { --column-count: 8 } .wdtile__container[data-smallcolum="9"] { --column-count: 9 } .wdtile__container[data-smallcolum="10"] { --column-count: 10 } .wdtile__container[data-smallcolum="11"] { --column-count: 11 } .wdtile__container[data-smallcolum="12"] { --column-count: 12 } } @media all and (min-width:1280px) { .wdtile__container { --tile-gap: 24px } } @media all and (min-width:1280px) { .wdtile__container[data-largegap="10"] { --tile-gap: 10px } .wdtile__container[data-largegap="11"] { --tile-gap: 11px } .wdtile__container[data-largegap="12"] { --tile-gap: 12px } .wdtile__container[data-largegap="13"] { --tile-gap: 13px } .wdtile__container[data-largegap="14"] { --tile-gap: 14px } .wdtile__container[data-largegap="15"] { --tile-gap: 15px } .wdtile__container[data-largegap="16"] { --tile-gap: 16px } .wdtile__container[data-largegap="17"] { --tile-gap: 17px } .wdtile__container[data-largegap="18"] { --tile-gap: 18px } .wdtile__container[data-largegap="19"] { --tile-gap: 19px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtile__container { --tile-gap: 24px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtile__container[data-mediumgap="5"] { --tile-gap: 5px } .wdtile__container[data-mediumgap="6"] { --tile-gap: 6px } .wdtile__container[data-mediumgap="7"] { --tile-gap: 7px } .wdtile__container[data-mediumgap="8"] { --tile-gap: 8px } .wdtile__container[data-mediumgap="9"] { --tile-gap: 9px } .wdtile__container[data-mediumgap="10"] { --tile-gap: 10px } .wdtile__container[data-mediumgap="11"] { --tile-gap: 11px } .wdtile__container[data-mediumgap="12"] { --tile-gap: 12px } .wdtile__container[data-mediumgap="13"] { --tile-gap: 13px } .wdtile__container[data-mediumgap="14"] { --tile-gap: 14px } .wdtile__container[data-mediumgap="15"] { --tile-gap: 15px } .wdtile__container[data-mediumgap="16"] { --tile-gap: 16px } .wdtile__container[data-mediumgap="17"] { --tile-gap: 17px } .wdtile__container[data-mediumgap="18"] { --tile-gap: 18px } .wdtile__container[data-mediumgap="19"] { --tile-gap: 19px } } @media all and (max-width:730.5px) { .wdtile__container { --tile-gap: 24px } } @media all and (max-width:730.5px) { .wdtile__container[data-smallgap="1"] { --tile-gap: 1px } .wdtile__container[data-smallgap="2"] { --tile-gap: 2px } .wdtile__container[data-smallgap="3"] { --tile-gap: 3px } .wdtile__container[data-smallgap="4"] { --tile-gap: 4px } .wdtile__container[data-smallgap="5"] { --tile-gap: 5px } .wdtile__container[data-smallgap="6"] { --tile-gap: 6px } .wdtile__container[data-smallgap="7"] { --tile-gap: 7px } .wdtile__container[data-smallgap="8"] { --tile-gap: 8px } .wdtile__container[data-smallgap="9"] { --tile-gap: 9px } .wdtile__container[data-smallgap="10"] { --tile-gap: 10px } .wdtile__container[data-smallgap="11"] { --tile-gap: 11px } .wdtile__container[data-smallgap="12"] { --tile-gap: 12px } .wdtile__container[data-smallgap="13"] { --tile-gap: 13px } .wdtile__container[data-smallgap="14"] { --tile-gap: 14px } } .wdtile__item { position: relative; overflow: hidden; border-radius: 20px; min-height: 200px } .wdtile .item__leftdesc { z-index: 10 } .wdtile .wdtile__item-0 { order: 1 } .wdtile .wdtile__item-1 { order: 2 } .wdtile .wdtile__item-2 { order: 3 } .wdtile .wdtile__item-3 { order: 4 } .wdtile .wdtile__item-4 { order: 5 } .wdtile .wdtile__item-5 { order: 6 } .wdtile .wdtile__item-6 { order: 7 } .wdtile .wdtile__item-7 { order: 8 } .wdtile .wdtile__item-8 { order: 9 } .wdtile .wdtile__item-9 { order: 10 } .wdtile .wdtile__item-10 { order: 11 } .wdtile .wdtile__item-11 { order: 12 } .wdtile .wdtile__item-12 { order: 13 } .wdtile .wdtile__item-13 { order: 14 } .wdtile .wdtile__item-14 { order: 15 } .wdtile .wdtile__item-15 { order: 16 } .wdtile .wdtile__item-16 { order: 17 } .wdtile .wdtile__item-17 { order: 18 } .wdtile .wdtile__item-18 { order: 19 } .wdtile .wdtile__item-19 { order: 20 } .wdtile .wdtile__item-20 { order: 21 } .wdtile .wdtile__item-21 { order: 22 } .wdtile .wdtile__item-22 { order: 23 } .wdtile .wdtile__item-23 { order: 24 } .wdtile .wdtile__item-24 { order: 25 } .wdtile .wdtile__item-25 { order: 26 } .wdtile .wdtile__item-26 { order: 27 } .wdtile .wdtile__item-27 { order: 28 } .wdtile .wdtile__item-28 { order: 29 } .wdtile .wdtile__item-29 { order: 30 } .wdtile .wdtile__item-30 { order: 31 } .wdtile .wdtile__item-31 { order: 32 } .wdtile .wdtile__item-32 { order: 33 } .wdtile .wdtile__item-33 { order: 34 } .wdtile .wdtile__item-34 { order: 35 } .wdtile .wdtile__item-35 { order: 36 } .wdtile .wdtile__item-36 { order: 37 } .wdtile .wdtile__item-37 { order: 38 } .wdtile .wdtile__item-38 { order: 39 } .wdtile .wdtile__item-39 { order: 40 } .wdtile .wdtile__item-40 { order: 41 } .wdtile .wdtile__item-41 { order: 42 } .wdtile .wdtile__item-42 { order: 43 } .wdtile .wdtile__item-43 { order: 44 } .wdtile .wdtile__item-44 { order: 45 } .wdtile .wdtile__item-45 { order: 46 } .wdtile .wdtile__item-46 { order: 47 } .wdtile .wdtile__item-47 { order: 48 } .wdtile .wdtile__item-48 { order: 49 } .wdtile .wdtile__item-49 { order: 50 } .wdtile .wdtile__item-50 { order: 51 } .wdtile .wdtile__item-51 { order: 52 } .wdtile .wdtile__item-52 { order: 53 } .wdtile .wdtile__item-53 { order: 54 } .wdtile .wdtile__item-54 { order: 55 } .wdtile .wdtile__item-55 { order: 56 } .wdtile .wdtile__item-56 { order: 57 } .wdtile .wdtile__item-57 { order: 58 } .wdtile .wdtile__item-58 { order: 59 } .wdtile .wdtile__item-59 { order: 60 } .wdtile .wdtile__item-60 { order: 61 } .wdtile .wdtile__item-61 { order: 62 } .wdtile .wdtile__item-62 { order: 63 } .wdtile .wdtile__item-63 { order: 64 } .wdtile .wdtile__item-64 { order: 65 } .wdtile .wdtile__item-65 { order: 66 } .wdtile .wdtile__item-66 { order: 67 } .wdtile .wdtile__item-67 { order: 68 } .wdtile .wdtile__item-68 { order: 69 } .wdtile .wdtile__item-69 { order: 70 } .wdtile .wdtile__item-70 { order: 71 } .wdtile .wdtile__item-71 { order: 72 } .wdtile .wdtile__item-72 { order: 73 } .wdtile .wdtile__item-73 { order: 74 } .wdtile .wdtile__item-74 { order: 75 } .wdtile .wdtile__item-75 { order: 76 } .wdtile .wdtile__item-76 { order: 77 } .wdtile .wdtile__item-77 { order: 78 } .wdtile .wdtile__item-78 { order: 79 } .wdtile .wdtile__item-79 { order: 80 } .wdtile .wdtile__item-80 { order: 81 } .wdtile .wdtile__item-81 { order: 82 } .wdtile .wdtile__item-82 { order: 83 } .wdtile .wdtile__item-83 { order: 84 } .wdtile .wdtile__item-84 { order: 85 } .wdtile .wdtile__item-85 { order: 86 } .wdtile .wdtile__item-86 { order: 87 } .wdtile .wdtile__item-87 { order: 88 } .wdtile .wdtile__item-88 { order: 89 } .wdtile .wdtile__item-89 { order: 90 } .wdtile .wdtile__item-90 { order: 91 } .wdtile .wdtile__item-91 { order: 92 } .wdtile .wdtile__item-92 { order: 93 } .wdtile .wdtile__item-93 { order: 94 } .wdtile .wdtile__item-94 { order: 95 } .wdtile .wdtile__item-95 { order: 96 } .wdtile .wdtile__item-96 { order: 97 } .wdtile .wdtile__item-97 { order: 98 } .wdtile .wdtile__item-98 { order: 99 } .wdtile .wdtile__item-99 { order: 100 } .wdtile.devTest .wdtile__item::before { display: block; position: absolute; z-index: 9; bottom: 0; left: 0; color: #fc0; font-size: 25em; line-height: .6em } .wdtile.devTest .wdtile__item-0::before { content: "0" } .wdtile.devTest .wdtile__item-1::before { content: "1" } .wdtile.devTest .wdtile__item-2::before { content: "2" } .wdtile.devTest .wdtile__item-3::before { content: "3" } .wdtile.devTest .wdtile__item-4::before { content: "4" } .wdtile.devTest .wdtile__item-5::before { content: "5" } .wdtile.devTest .wdtile__item-6::before { content: "6" } .wdtile.devTest .wdtile__item-7::before { content: "7" } .wdtile.devTest .wdtile__item-8::before { content: "8" } .wdtile.devTest .wdtile__item-9::before { content: "9" } .wdtile.devTest .wdtile__item-10::before { content: "10" } .wdtile.devTest .wdtile__item-11::before { content: "11" } .wdtile.devTest .wdtile__item-12::before { content: "12" } .wdtile.devTest .wdtile__item-13::before { content: "13" } .wdtile.devTest .wdtile__item-14::before { content: "14" } .wdtile.devTest .wdtile__item-15::before { content: "15" } .wdtile.devTest .wdtile__item-16::before { content: "16" } .wdtile.devTest .wdtile__item-17::before { content: "17" } .wdtile.devTest .wdtile__item-18::before { content: "18" } .wdtile.devTest .wdtile__item-19::before { content: "19" } .wdtile.devTest .wdtile__item-20::before { content: "20" } .wdtile.devTest .wdtile__item-21::before { content: "21" } .wdtile.devTest .wdtile__item-22::before { content: "22" } .wdtile.devTest .wdtile__item-23::before { content: "23" } .wdtile.devTest .wdtile__item-24::before { content: "24" } .wdtile.devTest .wdtile__item-25::before { content: "25" } .wdtile.devTest .wdtile__item-26::before { content: "26" } .wdtile.devTest .wdtile__item-27::before { content: "27" } .wdtile.devTest .wdtile__item-28::before { content: "28" } .wdtile.devTest .wdtile__item-29::before { content: "29" } .wdtile.devTest .wdtile__item-30::before { content: "30" } .wdtile.devTest .wdtile__item-31::before { content: "31" } .wdtile.devTest .wdtile__item-32::before { content: "32" } .wdtile.devTest .wdtile__item-33::before { content: "33" } .wdtile.devTest .wdtile__item-34::before { content: "34" } .wdtile.devTest .wdtile__item-35::before { content: "35" } .wdtile.devTest .wdtile__item-36::before { content: "36" } .wdtile.devTest .wdtile__item-37::before { content: "37" } .wdtile.devTest .wdtile__item-38::before { content: "38" } .wdtile.devTest .wdtile__item-39::before { content: "39" } .wdtile.devTest .wdtile__item-40::before { content: "40" } .wdtile.devTest .wdtile__item-41::before { content: "41" } .wdtile.devTest .wdtile__item-42::before { content: "42" } .wdtile.devTest .wdtile__item-43::before { content: "43" } .wdtile.devTest .wdtile__item-44::before { content: "44" } .wdtile.devTest .wdtile__item-45::before { content: "45" } .wdtile.devTest .wdtile__item-46::before { content: "46" } .wdtile.devTest .wdtile__item-47::before { content: "47" } .wdtile.devTest .wdtile__item-48::before { content: "48" } .wdtile.devTest .wdtile__item-49::before { content: "49" } @media all and (min-width:1280px) { .wdtile .large-order-0 { order: 0 } .wdtile .large-order-1 { order: 1 } .wdtile .large-order-2 { order: 2 } .wdtile .large-order-3 { order: 3 } .wdtile .large-order-4 { order: 4 } .wdtile .large-order-5 { order: 5 } .wdtile .large-order-6 { order: 6 } .wdtile .large-order-7 { order: 7 } .wdtile .large-order-8 { order: 8 } .wdtile .large-order-9 { order: 9 } .wdtile .large-order-10 { order: 10 } .wdtile .large-order-11 { order: 11 } .wdtile .large-order-12 { order: 12 } .wdtile .large-order-13 { order: 13 } .wdtile .large-order-14 { order: 14 } .wdtile .large-order-15 { order: 15 } .wdtile .large-order-16 { order: 16 } .wdtile .large-order-17 { order: 17 } .wdtile .large-order-18 { order: 18 } .wdtile .large-order-19 { order: 19 } .wdtile .large-order-20 { order: 20 } .wdtile .large-order-21 { order: 21 } .wdtile .large-order-22 { order: 22 } .wdtile .large-order-23 { order: 23 } .wdtile .large-order-24 { order: 24 } .wdtile .large-order-25 { order: 25 } .wdtile .large-order-26 { order: 26 } .wdtile .large-order-27 { order: 27 } .wdtile .large-order-28 { order: 28 } .wdtile .large-order-29 { order: 29 } .wdtile .large-order-30 { order: 30 } .wdtile .large-order-31 { order: 31 } .wdtile .large-order-32 { order: 32 } .wdtile .large-order-33 { order: 33 } .wdtile .large-order-34 { order: 34 } .wdtile .large-order-35 { order: 35 } .wdtile .large-order-36 { order: 36 } .wdtile .large-order-37 { order: 37 } .wdtile .large-order-38 { order: 38 } .wdtile .large-order-39 { order: 39 } .wdtile .large-order-40 { order: 40 } .wdtile .large-order-41 { order: 41 } .wdtile .large-order-42 { order: 42 } .wdtile .large-order-43 { order: 43 } .wdtile .large-order-44 { order: 44 } .wdtile .large-order-45 { order: 45 } .wdtile .large-order-46 { order: 46 } .wdtile .large-order-47 { order: 47 } .wdtile .large-order-48 { order: 48 } .wdtile .large-order-49 { order: 49 } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtile .medium-order-0 { order: 0 } .wdtile .medium-order-1 { order: 1 } .wdtile .medium-order-2 { order: 2 } .wdtile .medium-order-3 { order: 3 } .wdtile .medium-order-4 { order: 4 } .wdtile .medium-order-5 { order: 5 } .wdtile .medium-order-6 { order: 6 } .wdtile .medium-order-7 { order: 7 } .wdtile .medium-order-8 { order: 8 } .wdtile .medium-order-9 { order: 9 } .wdtile .medium-order-10 { order: 10 } .wdtile .medium-order-11 { order: 11 } .wdtile .medium-order-12 { order: 12 } .wdtile .medium-order-13 { order: 13 } .wdtile .medium-order-14 { order: 14 } .wdtile .medium-order-15 { order: 15 } .wdtile .medium-order-16 { order: 16 } .wdtile .medium-order-17 { order: 17 } .wdtile .medium-order-18 { order: 18 } .wdtile .medium-order-19 { order: 19 } .wdtile .medium-order-20 { order: 20 } .wdtile .medium-order-21 { order: 21 } .wdtile .medium-order-22 { order: 22 } .wdtile .medium-order-23 { order: 23 } .wdtile .medium-order-24 { order: 24 } .wdtile .medium-order-25 { order: 25 } .wdtile .medium-order-26 { order: 26 } .wdtile .medium-order-27 { order: 27 } .wdtile .medium-order-28 { order: 28 } .wdtile .medium-order-29 { order: 29 } .wdtile .medium-order-30 { order: 30 } .wdtile .medium-order-31 { order: 31 } .wdtile .medium-order-32 { order: 32 } .wdtile .medium-order-33 { order: 33 } .wdtile .medium-order-34 { order: 34 } .wdtile .medium-order-35 { order: 35 } .wdtile .medium-order-36 { order: 36 } .wdtile .medium-order-37 { order: 37 } .wdtile .medium-order-38 { order: 38 } .wdtile .medium-order-39 { order: 39 } .wdtile .medium-order-40 { order: 40 } .wdtile .medium-order-41 { order: 41 } .wdtile .medium-order-42 { order: 42 } .wdtile .medium-order-43 { order: 43 } .wdtile .medium-order-44 { order: 44 } .wdtile .medium-order-45 { order: 45 } .wdtile .medium-order-46 { order: 46 } .wdtile .medium-order-47 { order: 47 } .wdtile .medium-order-48 { order: 48 } .wdtile .medium-order-49 { order: 49 } } @media all and (max-width:730.5px) { .wdtile .small-order-0 { order: 0 } .wdtile .small-order-1 { order: 1 } .wdtile .small-order-2 { order: 2 } .wdtile .small-order-3 { order: 3 } .wdtile .small-order-4 { order: 4 } .wdtile .small-order-5 { order: 5 } .wdtile .small-order-6 { order: 6 } .wdtile .small-order-7 { order: 7 } .wdtile .small-order-8 { order: 8 } .wdtile .small-order-9 { order: 9 } .wdtile .small-order-10 { order: 10 } .wdtile .small-order-11 { order: 11 } .wdtile .small-order-12 { order: 12 } .wdtile .small-order-13 { order: 13 } .wdtile .small-order-14 { order: 14 } .wdtile .small-order-15 { order: 15 } .wdtile .small-order-16 { order: 16 } .wdtile .small-order-17 { order: 17 } .wdtile .small-order-18 { order: 18 } .wdtile .small-order-19 { order: 19 } .wdtile .small-order-20 { order: 20 } .wdtile .small-order-21 { order: 21 } .wdtile .small-order-22 { order: 22 } .wdtile .small-order-23 { order: 23 } .wdtile .small-order-24 { order: 24 } .wdtile .small-order-25 { order: 25 } .wdtile .small-order-26 { order: 26 } .wdtile .small-order-27 { order: 27 } .wdtile .small-order-28 { order: 28 } .wdtile .small-order-29 { order: 29 } .wdtile .small-order-30 { order: 30 } .wdtile .small-order-31 { order: 31 } .wdtile .small-order-32 { order: 32 } .wdtile .small-order-33 { order: 33 } .wdtile .small-order-34 { order: 34 } .wdtile .small-order-35 { order: 35 } .wdtile .small-order-36 { order: 36 } .wdtile .small-order-37 { order: 37 } .wdtile .small-order-38 { order: 38 } .wdtile .small-order-39 { order: 39 } .wdtile .small-order-40 { order: 40 } .wdtile .small-order-41 { order: 41 } .wdtile .small-order-42 { order: 42 } .wdtile .small-order-43 { order: 43 } .wdtile .small-order-44 { order: 44 } .wdtile .small-order-45 { order: 45 } .wdtile .small-order-46 { order: 46 } .wdtile .small-order-47 { order: 47 } .wdtile .small-order-48 { order: 48 } .wdtile .small-order-49 { order: 49 } } @media all and (min-width:1280px) { .wdtile .large-grid-row-0 { grid-row-end: span 0 } .wdtile .large-grid-row-1 { grid-row-end: span 1 } .wdtile .large-grid-row-2 { grid-row-end: span 2 } .wdtile .large-grid-row-3 { grid-row-end: span 3 } .wdtile .large-grid-row-4 { grid-row-end: span 4 } .wdtile .large-grid-row-5 { grid-row-end: span 5 } .wdtile .large-grid-row-6 { grid-row-end: span 6 } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtile .medium-grid-row-0 { grid-row-end: span 0 } .wdtile .medium-grid-row-1 { grid-row-end: span 1 } .wdtile .medium-grid-row-2 { grid-row-end: span 2 } .wdtile .medium-grid-row-3 { grid-row-end: span 3 } .wdtile .medium-grid-row-4 { grid-row-end: span 4 } .wdtile .medium-grid-row-5 { grid-row-end: span 5 } .wdtile .medium-grid-row-6 { grid-row-end: span 6 } } @media all and (max-width:730.5px) { .wdtile .small-grid-row-0 { grid-row-end: span 0 } .wdtile .small-grid-row-1 { grid-row-end: span 1 } .wdtile .small-grid-row-2 { grid-row-end: span 2 } .wdtile .small-grid-row-3 { grid-row-end: span 3 } .wdtile .small-grid-row-4 { grid-row-end: span 4 } .wdtile .small-grid-row-5 { grid-row-end: span 5 } .wdtile .small-grid-row-6 { grid-row-end: span 6 } } @media all and (min-width:1280px) { .wdtile .large-grid-col-0 { grid-column-end: span 0 } .wdtile .large-grid-col-1 { grid-column-end: span 1 } .wdtile .large-grid-col-2 { grid-column-end: span 2 } .wdtile .large-grid-col-3 { grid-column-end: span 3 } .wdtile .large-grid-col-4 { grid-column-end: span 4 } .wdtile .large-grid-col-5 { grid-column-end: span 5 } .wdtile .large-grid-col-6 { grid-column-end: span 6 } .wdtile .large-grid-col-7 { grid-column-end: span 7 } .wdtile .large-grid-col-8 { grid-column-end: span 8 } .wdtile .large-grid-col-9 { grid-column-end: span 9 } .wdtile .large-grid-col-10 { grid-column-end: span 10 } .wdtile .large-grid-col-11 { grid-column-end: span 11 } .wdtile .large-grid-col-12 { grid-column-end: span 12 } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtile .medium-grid-col-0 { grid-column-end: span 0 } .wdtile .medium-grid-col-1 { grid-column-end: span 1 } .wdtile .medium-grid-col-2 { grid-column-end: span 2 } .wdtile .medium-grid-col-3 { grid-column-end: span 3 } .wdtile .medium-grid-col-4 { grid-column-end: span 4 } .wdtile .medium-grid-col-5 { grid-column-end: span 5 } .wdtile .medium-grid-col-6 { grid-column-end: span 6 } .wdtile .medium-grid-col-7 { grid-column-end: span 7 } .wdtile .medium-grid-col-8 { grid-column-end: span 8 } .wdtile .medium-grid-col-9 { grid-column-end: span 9 } .wdtile .medium-grid-col-10 { grid-column-end: span 10 } .wdtile .medium-grid-col-11 { grid-column-end: span 11 } .wdtile .medium-grid-col-12 { grid-column-end: span 12 } } @media all and (max-width:730.5px) { .wdtile .small-grid-col-0 { grid-column-end: span 0 } .wdtile .small-grid-col-1 { grid-column-end: span 1 } .wdtile .small-grid-col-2 { grid-column-end: span 2 } .wdtile .small-grid-col-3 { grid-column-end: span 3 } .wdtile .small-grid-col-4 { grid-column-end: span 4 } .wdtile .small-grid-col-5 { grid-column-end: span 5 } .wdtile .small-grid-col-6 { grid-column-end: span 6 } .wdtile .small-grid-col-7 { grid-column-end: span 7 } .wdtile .small-grid-col-8 { grid-column-end: span 8 } .wdtile .small-grid-col-9 { grid-column-end: span 9 } .wdtile .small-grid-col-10 { grid-column-end: span 10 } .wdtile .small-grid-col-11 { grid-column-end: span 11 } .wdtile .small-grid-col-12 { grid-column-end: span 12 } } .wdblockimg { position: relative; margin-right: auto; margin-left: auto; width: 100%; max-width: 1144px } .wdblockimg .wdblockimg__container { display: grid; position: relative; grid-gap: 24px; gap: 24px } .wdblockimg .wdblockimg__container .block { position: relative; overflow: hidden; border-radius: 20px; background-color: transparent } .wdblockimg .wdblockimg__container .block .block-content { position: relative; z-index: 1; padding: 40px 50px } .wdblockimg .wdblockimg__container .block .block-content .wd__content .content__info { margin-top: 5px } .wdblockimg .wdblockimg__container .block .block-img { position: relative; z-index: 0; width: 100% } .wdblockimg .wdblockimg__container .block .block-img .img__bg { position: relative } .wdblockimg .wdblockimg__container .block .modal-button-container { margin-top: 32px } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .wdblockimg__container .block .modal-button-container { margin-top: 24px } } @media all and (max-width:730.5px) { .wdblockimg .wdblockimg__container .block .modal-button-container { margin-top: 24px } } .wdblockimg .wdblockimg__container .block .modal-button-container .modal-button { margin-top: 0 } .wdblockimg .wdblockimg__container { display: grid; grid-template-columns: repeat(6, 1fr) } .wdblockimg .wdblockimg__container .block.column-span-2 { grid-column-end: span 2 } .wdblockimg .wdblockimg__container .block.column-span-3 { grid-column-end: span 3 } .wdblockimg .wdblockimg__container .block.column-span-6 { grid-column-end: span 6 } .wdblockimg .block.theme-black { background-color: #000 } .wdblockimg .block.theme-black .block-content .content__title { background-image: linear-gradient(to right, #fff, #fff 80%, #fff 100%) } .wdblockimg .block.theme-black .block-content .content__info, .wdblockimg .block.theme-black .block-content .content__info * { color: #fff } .wdblockimg .block.theme-black .modal-button-container .modal-button .modal-inner-text, .wdblockimg .block.theme-black .modal-button-container .modal-button .modal-inner-text * { color: #fff } .wdblockimg .block.theme-white { background-color: #fff } .wdblockimg .block.theme-white .block-content .content__title { background-image: linear-gradient(to right, #424242, #424242 80%, #424242 100%) } .wdblockimg .block.theme-white .block-content .content__info, .wdblockimg .block.theme-white .block-content .content__info * { color: #424242 } .wdblockimg .block.theme-white .modal-button-container .modal-button .modal-inner-text, .wdblockimg .block.theme-white .modal-button-container .modal-button .modal-inner-text * { color: #000 } .wdblockimg .block.imageTop .block-img { top: 0 } .section__wdvideos { position: relative; font-size: 0 } .section__wdvideos .wdVideos { position: relative } .section__wdvideos .item-productvideo .detect-point-out { position: absolute; top: 50%; left: 50%; width: 1px } .section__wdvideos .item-productvideo .detect-point-enter { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px } .section__wdvideos .item-productvideo .video__group { position: relative } .section__wdvideos .item-productvideo .btn__youtube { display: inline-block; position: absolute; cursor: pointer; left: 50%; padding: 16px 50px 16px 20px; border-radius: 28px; background-color: #161616; transform: translateX(-50%); min-width: 124px; line-height: 1.2 } .section__wdvideos .item-productvideo .btn__youtube span { color: #fff; font-size: 1.25rem; line-height: 1.2 } .section__wdvideos .item-productvideo .btn__youtube::after { position: absolute; top: calc(50% - 11.5px); right: 20px; width: 23px; height: 23px; background-repeat: no-repeat; background-size: contain; content: ""; background-image: url(../../common/base/images/svg/play.svg) } .section__wdvideos * { box-sizing: border-box } .section__wdvideos .sales__item { position: relative } .section__wdvideos .sales__item_preview { position: relative; width: 100%; height: 100% } .section__wdvideos .sales__containter { display: flex; margin: 0 auto; width: 1156px; flex-wrap: wrap } .section__wdvideos .sales__containter .slick_page { display: flex; width: 100%; flex-wrap: wrap } .section__wdvideos .sales__containter.desktop.type_1 .sales__item { padding: 0; width: 100% } .section__wdvideos .sales__containter.desktop.type_2 .sales__item, .section__wdvideos .sales__containter.desktop.type_4 .sales__item { width: 50% } .section__wdvideos .sales__containter.desktop.type_3 .sales__item, .section__wdvideos .sales__containter.desktop.type_6 .sales__item { width: 33.33% } .section__wdvideos .sales__containter.desktop.type_5 .sales__item { width: 33.33% } .section__wdvideos .sales__containter.desktop.type_5 .sales__item_1, .section__wdvideos .sales__containter.desktop.type_5 .sales__item_2 { width: 50% } .section__wdvideos .sales__containter.tablet .sales__item { width: 100% } .section__wdvideos .sales__containter.tablet.type_1 .sales__item { flex: unset; width: 100% } .section__wdvideos .sales__containter.tablet.type_2 .sales__item, .section__wdvideos .sales__containter.tablet.type_3 .sales__item, .section__wdvideos .sales__containter.tablet.type_4 .sales__item, .section__wdvideos .sales__containter.tablet.type_5 .sales__item, .section__wdvideos .sales__containter.tablet.type_6 .sales__item { width: 50% } .section__wdvideos .sales_button { position: relative; cursor: pointer; margin: 0 auto; padding: 20px 30px; text-align: center; outline: 0; border-color: transparent; background-color: transparent; box-shadow: none } .section__wdvideos .sales_button span { position: relative; color: #fff; font-size: 17px } .section__wdvideos .sales_button span::before { display: block; position: absolute; bottom: -5px; left: 0; width: 0; height: 1.5px; background: #fff; transition: width .3s; content: "" } .section__wdvideos .sales_button:hover span { color: #fff } .section__wdvideos .sales_button:hover span::before { width: 100% } .section__wdvideos .sales_button:hover .seeall_arrow-svg { stroke: #fff } .section__wdvideos .sales_button>.seeall_arrow { position: absolute; top: 50%; right: 10px; margin-top: 1.5px; margin-left: 4px; width: 10px; height: 10px; transform: translateY(-50%) rotate(90deg) } .section__wdvideos .sales_button>.seeall_arrow .seeall_arrow-svg { position: absolute; left: 0; width: 10px; height: 10px; stroke: #fff; stroke-width: 3px } .section__wdvideos .video_btn { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100% } .section__wdvideos .youtube_btn { position: absolute; z-index: 9; cursor: pointer; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; border-width: 0; background-image: url(../../common/base/images/svg/play.svg); background-repeat: no-repeat } .section__wdvideos .video_info { position: absolute; bottom: 0; left: 0; opacity: 1; padding: 13px 20px; width: 100%; color: #fff; font-size: .9375rem; background-color: rgba(0, 0, 0, .6); transition: opacity .7s cubic-bezier(.4, 0, .2, 1); line-height: 1.5; min-height: auto } .section__wdvideos .video_info span { display: -webkit-box; overflow: hidden; margin: 0 20px; text-align: center; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical } @media all and (min-width:1280px) { .section__wdvideos .wdVideos.active { margin-right: auto; margin-left: auto; padding-top: 128px; max-width: 2560px } .section__wdvideos .wdVideos.active .sales__containter { padding-bottom: 0!important } .section__wdvideos .wdVideos.active .item-productvideo { padding-bottom: 0 } .section__wdvideos .wdVideos.active .item-productvideo+.item-salesvideo { padding-top: 82px } .section__wdvideos .wdVideos.active .item-salesvideo { margin-bottom: -15px; padding-bottom: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__wdvideos .wdVideos.active { padding-top: 109px } .section__wdvideos .wdVideos.active .sales__containter { margin-bottom: 0 } .section__wdvideos .wdVideos.active .item-productvideo { padding-bottom: 0 } .section__wdvideos .wdVideos.active .item-productvideo+.item-salesvideo { padding-top: 66px } .section__wdvideos .wdVideos.active .item-salesvideo { margin-bottom: 0; padding-bottom: 0 } } @media all and (max-width:730.5px) { .section__wdvideos .wdVideos.active { padding-top: 58px } .section__wdvideos .wdVideos.active .sales__containter { margin-bottom: 0 } .section__wdvideos .wdVideos.active .item-productvideo { padding-bottom: 0 } .section__wdvideos .wdVideos.active .item-productvideo+.item-salesvideo { padding-top: 60px } .section__wdvideos .wdVideos.active .item-salesvideo { margin-bottom: 0; padding-bottom: 0 } } .performance_chart_container { position: relative } .performance_chart sup.sign-cr { top: 0; font-size: .4em } .performance_chart sup.sign-tm { top: 0; font-size: 1em; vertical-align: baseline } .performance_chart { position: relative; margin-top: 66px; margin-right: auto; margin-left: auto; padding-right: 0 } .performance_chart .item_contents { flex-grow: 1; padding-right: 48px } .performance_chart .item { display: block; position: relative; margin-bottom: 80px } .performance_chart .item::after { position: absolute; bottom: -40px; left: 73px; width: 100%; height: 2px; background-color: #2a2a2a; content: "" } .performance_chart .item:last-child { margin-bottom: 0 } .performance_chart .item:last-child::after { display: none } .performance_chart .item .item_chart { display: flex } .performance_chart .item__content { display: flex; position: relative; margin-bottom: 14px } .performance_chart .item__content .title { padding-right: 44px; box-sizing: border-box; width: calc(30% + 44px); color: #fff; font-size: 22px; text-align: right } .performance_chart .item__content .bar { display: flex; overflow: hidden; align-items: center; width: auto; flex-grow: 1 } .performance_chart .item__content .bar__content, .performance_chart .item__content .bar__line { position: relative; overflow: hidden; height: 26px; border-radius: 0 6px 6px 0 } .performance_chart .item__content .bar__score { display: flex; position: absolute; top: 0; left: 0; align-items: center; width: 100%; height: 100%; text-align: right } .performance_chart .item__content .bar__score__txt { position: relative; padding-right: 15px; color: #fff; transition: opacity .3s delay .3s; flex-grow: 1; line-height: 1 } .performance_chart .item__highline { display: flex; position: relative; top: 13px; right: 80px; width: auto } .performance_chart .item__highline .img__highline { position: relative; overflow: hidden; width: 88px; height: 100%; mask: linear-gradient(30deg, rgba(0, 0, 0, 0) 16%, #000 59%, #000 100%); mask-position: center; mask-size: contain; -webkit-mask-image: linear-gradient(30deg, rgba(0, 0, 0, 0) 16%, #000 59%, #000 100%); -webkit-mask-position: center; -webkit-mask-size: contain } .performance_chart .item__highline .img__highline_arrow { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 300px; background-color: #1ef9ef; background-position: top; background-size: contain; mask: url(../../common/base/images/wdPerformanceChart/1x/arrow.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../../common/base/images/wdPerformanceChart/1x/arrow.png); -webkit-mask-position: top; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; content: "" } .performance_chart .item__highline .highline_text { position: relative; margin-left: 29px; color: #1ef9ef } .performance_chart .item__highline .highline_text .text1 { font-size: 3.5rem; line-height: 1.1 } .performance_chart .item__highline .highline_text .text2 { margin-top: -6px; font-size: 1.625rem } .performance_chart .item__0 .item__highline { right: 0 } .performance_chart .orange { background-image: linear-gradient(90deg, #fecc69 25%, #e9702b 100%) } .performance_chart .gray { background-image: linear-gradient(90deg, #707070 25%, #555 100%) } .text_comment { margin-top: 0; padding-left: 11px; color: #999; font-size: 1rem; text-align: left; line-height: 1.4 } .performance_chart_container.aniInit .item__highline { opacity: 0; transform: translateY(20px); transition: transform .7s ease .3s, opacity .6s ease } .performance_chart_container.aniInit .bar { overflow: hidden } .performance_chart_container.aniInit .bar .bar__content { transform: translateX(-102%); transform-origin: left center; transition: transform 1s ease } .performance_chart_container.aniInit .bar .bar__score__txt { opacity: 0; font-size: 1rem; transition: opacity .4s ease .4s } .performance_chart_container.aniPlay .item__highline { opacity: 1; transform: translateY(0) } .performance_chart_container.aniPlay .bar .bar__content { transform: translateX(0) } .performance_chart_container.aniPlay .bar .bar__score__txt { opacity: 1 } .section__adobebanner-outer-s1 { overflow: hidden; background-color: #fff } .section__adobebanner-outer-s1 .banner__container .wd__content { position: relative; z-index: 9 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__title { margin-top: 0; background-image: linear-gradient(to right, #3050cb, #22137a) } .section__adobebanner-outer-s1 .banner__container .wd__content .content__info { color: #000 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__info, .section__adobebanner-outer-s1 .banner__container .wd__content .content__info * { -webkit-background-clip: unset; -webkit-text-fill-color: unset } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link { background-image: linear-gradient(to right, #000, #000 100%) } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link, .section__adobebanner-outer-s1 .banner__container .wd__content .content__link * { color: #000 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link::after { color: #000 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link:hover span { border-bottom: 1px solid #000 } .section__adobebanner-outer-s1 .banner__container .banner__item { position: relative; background-color: #fef8e0 } .section__adobebanner-outer-s1 .banner__container .img__main { z-index: 1; font-size: 0; background-size: contain } .section__antimicrobial-outer-s1 { overflow: hidden; background-color: #000 } .section__antimicrobial-outer-s1 .wd__content .content__slogan { color: #737778 } .section__antimicrobial-outer-s1 .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .section__antimicrobial-outer-s1 .wd__content .content__info { color: #fff } .section__antimicrobial-outer-s1 .wd__content .content__link { -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__antimicrobial-outer-s1::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background-color: #140929; content: "" } .section__antimicrobial-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature { top: 0 } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .antimicrobial-outer .wd__feature.icon-iso21702 .img__icon { background-image: url(../images/icon_iso21702.png) } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon.icon-iso21702 .wd__feature__data { top: -5px; margin-bottom: 5px; width: 73px; height: 73px } .antimicrobial-outer .wd__feature.icon-iso22196 .img__icon { background-image: url(../images/icon_iso22196.png) } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon.icon-iso22196 .wd__feature__data { top: -5px; margin-bottom: 5px; width: 73px; height: 73px } .section__antimicrobial-outer-s1 .wd__content_2 { left: 50%; margin-top: -303px; margin-left: -577px; width: 360px } .section__antimicrobial-outer-s1 .wd__content_2 .content__comment { position: relative; padding-left: 16px; color: #737778; font-size: .8125rem } .section__antimicrobial-outer-s1 .wd__content_2 .content__comment::before { display: block; position: absolute; top: 9px; left: 6px; color: #666; content: "*"; line-height: 0 } .section__antimicrobial-outer-s1.wd__section .modal-button-container .modal-button { background-color: rgba(0, 0, 0, 0); color: #efc4ff; border-color: #efc4ff } .section__antimicrobial-outer-s1.wd__section .modal-button-container .modal-button:hover { background-color: #000; color: rgba(239, 196, 255, .8); border-color: rgba(239, 196, 255, .6) } .section__antimicrobial-inner-s1 { margin-top: 0; padding-top: 0 } .section__antimicrobial-inner-s1 .img__main { display: block; position: absolute; margin-right: auto; margin-left: auto; width: 100% } .section__antimicrobial-inner-s1 .image__container { margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s1 .image__container .imgItem { display: flex; position: relative; margin-bottom: 0; width: 100% } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-0 { background-image: url(../sections/antimicrobial/images/inner/section1/large/1x/virus_0.png) } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-1 { background-image: url(../sections/antimicrobial/images/inner/section1/large/1x/virus_1.png) } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-2 { background-image: url(../sections/antimicrobial/images/inner/section1/large/1x/virus_2.png) } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-3 { background-image: url(../sections/antimicrobial/images/inner/section1/large/1x/virus_3.png) } .section__antimicrobial-inner-s1 .image__container .imgItem-title { box-sizing: border-box; color: #fff; text-align: left } .section__antimicrobial-inner-s1 .image__container .imgItem-info { box-sizing: border-box; color: #fff; text-align: left } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-img-1 { width: 320px; height: 320px } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-content { padding-top: 92px; padding-left: 54px; width: 500px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 { flex-direction: row-reverse; margin-top: -127px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-img-2 { width: 324px; height: 324px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-content { padding-top: 98px; padding-right: 40px; width: 405px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 { margin-top: -114px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-img-3 { width: 588px; height: 332px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-content { padding-top: 123px; padding-left: 8px; width: 360px } .section__antimicrobial-inner-s2 { margin-top: 0; padding-top: 0; background-color: transparent!important } .section__antimicrobial-inner-s2 .detect-point-enter, .section__antimicrobial-inner-s2 .detect-point-out { position: absolute } .section__antimicrobial-inner-s2 .steps { position: relative; margin-top: 52px } .section__antimicrobial-inner-s2 .steps .step { display: inline-block; position: relative; vertical-align: top } .section__antimicrobial-inner-s2 .steps .step .step-img { position: relative } .section__antimicrobial-inner-s2 .steps .step .step-content { position: relative; margin-top: 29px } .section__antimicrobial-inner-s2 .steps .step .step-content .content-info { color: #fff; font-size: 1.25rem; line-height: 1.5 } .section__antimicrobial-inner-s2 .steps .step.step-arrow { z-index: 10; margin: 0 -14px 0 45px; user-select: none; pointer-events: none } .section__antimicrobial-inner-s2 .steps .step.step-arrow .img__arrow { position: relative; top: 189px; left: -21px; width: 90px; height: 40px } .section__antimicrobial-inner-s2 .steps .step.step-1 { z-index: 10; width: 280px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img { margin-top: 62px; width: 280px; height: 273px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img { position: absolute } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-line { top: 0; left: 0; width: 280px; height: 266px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub { position: absolute; top: 50%; left: 50%; background-size: contain; offset-rotate: 30deg } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub1 { margin-top: -141px; margin-left: -138px; width: 60px; height: 60px; transform: scale(1); offset-distance: 7% } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub2 { margin-top: -139px; margin-left: -142px; width: 60px; height: 60px; transform: scale(.3); animation: move1 5s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub3 { margin-top: -139px; margin-left: -142px; width: 60px; height: 60px; transform: scale(.5); offset-distance: 58% } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub4 { margin-top: -138px; margin-left: -138px; width: 60px; height: 60px; transform: scale(.7); animation: move2 10s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub5 { margin-top: -138px; margin-left: -138px; width: 60px; height: 60px; transform: scale(.4); animation: move2 7s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub6 { margin-top: -133px; margin-left: -135px; width: 60px; height: 60px; transform: scale(.2) } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub7 { margin-top: -133px; margin-left: -135px; width: 60px; height: 60px; transform: scale(.8); animation: move3 7s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub8 { margin-top: -27px; margin-left: -61px; width: 20px; height: 20px; animation: float 12s ease-in-out infinite } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.animation-stop { animation-play-state: paused } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-main { z-index: 10; top: 0; left: 0; width: 280px; height: 266px } .section__antimicrobial-inner-s2 .steps .step.step-2 { z-index: 1; width: 610px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img { width: 610px; height: 334px } .section__antimicrobial-inner-s2 .video__area { position: relative } .section__antimicrobial-inner-s2 .video__area .video__container { position: relative } .section__antimicrobial-inner-s2 .video__area .video__container .video-item { position: relative; left: 50% } .section__antimicrobial-inner-s2 .table__container { left: 50%; margin-left: -600px; width: 1200px; height: 560px; position: relative } .section__antimicrobial-inner-s2 .table__container .img__bg { left: 50%; margin-left: -600px; width: 1200px; height: 560px } #CMD .section__antimicrobial-inner-s2 .table__container .img__bg { background-image: url(../sections/antimicrobial/images/inner/section2/large/1x/chart.jpg) } .section__antimicrobial-inner-s2 .table__container .vertical { display: flex; position: absolute; top: 11px; left: 30px; width: 1142px; height: 100% } .section__antimicrobial-inner-s2 .table__container .vertical span { position: absolute; color: #fff; font-size: 1.25rem } .section__antimicrobial-inner-s2 .table__container .vertical .colItem { width: 220px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 { width: 240px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-1 { top: 155px; left: 75px; width: 160px; font-size: 1.5rem; text-align: left; background-image: linear-gradient(to right, #efc4ff, #b757f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-2 { top: 373px; left: 75px; width: 160px; font-size: 1.5rem; text-align: left } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 { display: flex; justify-content: center } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { line-height: 1.5; top: 45px; width: 180px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content { display: flex; position: relative; top: 266px; justify-content: center; width: 220px; height: 270px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info { color: #bababa } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info-2 { top: 218px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-5 span { top: 260px; right: 39px; width: 220px; font-size: 2rem; background-image: linear-gradient(to right, #efc4ff, #b757f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } @keyframes float { 0% { transform: translateY(0) } 50% { transform: translateY(20px) } 100% { transform: translateY(0) } } @keyframes heartbeat { 0% { transform: scale(1) } 50% { transform: scale(.9) } 100% { transform: scale(1) } } @keyframes move1 { 0% { offset-distance: 0; z-index: 11 } 14% { z-index: 11 } 15% { z-index: 9 } 50% { z-index: 9 } 51% { z-index: 11 } 100% { z-index: 11; offset-distance: 100% } } @keyframes move2 { 0% { offset-distance: 0; z-index: 11 } 71% { z-index: 11 } 78% { z-index: 9 } 99% { z-index: 9 } 100% { z-index: 11; offset-distance: 100% } } @keyframes move3 { 0% { offset-distance: 0; z-index: 30 } 30% { z-index: 1 } 60% { z-index: 1 } 100% { z-index: 30; offset-distance: 100% } } #section__antimicrobial-inner-s2 .track-1 { offset-path: path("M57.99,24.24c10.55-7.47,65.9,50.26,104.51,100.27,35.67,46.19,78.95,114.14,70.56,120.95-8.33,6.77-66.77-47.4-109.55-100.53-28.34-35.2-47.8-67.45-60.21-90.19-8.66-21.56-8.05-28.56-5.31-30.5Z") } #section__antimicrobial-inner-s2 .track-2 { offset-path: path("M183.19,78.35c9.12-7.17,49.04-38.56,54.91-32.89,6.6,6.38-29.87,59.76-73.21,103.45-46.61,46.98-105.45,87.05-111.94,80.11-8.49-9.08,74.29-97.04,92.31-116.18,3.54-3.76,17.29-18.26,37.93-34.48Z") } #section__antimicrobial-inner-s2 .track-3 { offset-path: path("M78.15,178.62c-4.89,.18-68.18,2.3-68.97-4.51-.86-7.44,73.01-24.43,144.3-31.56,52.08-5.21,116.25-6.52,116.98-.27,.92,7.94-100.88,24.97-127.59,29.44-15.56,2.6-36.87,5.9-64.72,6.9Z") } #CMD #section__antimicrobial-inner-s2 .step-1 .img__step-line { background-image: url(../sections/antimicrobial/images/inner/section2/large/1x/ag_line.png) } #CMD #section__antimicrobial-inner-s2 .step-1 .img__step-main { background-image: url(../sections/antimicrobial/images/inner/section2/large/1x/ag_main.png) } #CMD #section__antimicrobial-inner-s2 .step-1 .img__step-sub { background-image: url(../sections/antimicrobial/images/inner/section2/large/1x/ag_float_balll.png) } #CMD #section__antimicrobial-inner-s2 .step-arrow .img__arrow { background-image: url(../sections/antimicrobial/images/inner/section2/large/1x/arrow.png) } .antimicrobial-inner { background-color: #000 } .antimicrobial-inner .wd__content .content__slogan { color: #6b6e70 } .antimicrobial-inner .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .antimicrobial-inner .wd__content .content__info { color: #fff } .antimicrobial-inner .wd__content .content__link { -webkit-background-clip: text; -webkit-text-fill-color: transparent } .antimicrobial-inner .wd__content .content__link { background-image: linear-gradient(to right, #fff, #fff) } .modal-inner__sectionsAntimicrobial { background-color: #000 } .section__audiodirac-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #12111b } .section__audiodirac-outer-s1 .wd__content .content__info { color: #fff } .section__audiodirac-outer-s1 .wd__content .content__link { color: #fff } .section__audiodirac-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__audiodirac-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__audiodirac-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_t.jpg) } .section__audiodirac-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2_t.jpg) } .section__audiodirac-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__audiodirac-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .modal-inner__sectionsAudioDirac { background-color: #0d0d0d } .modal-inner__sectionsAudioDirac .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .modal-inner__sectionsAudioDirac .wd__content .content__info { color: #fff } .modal-inner__sectionsAudioDirac .wd__content .content__link { color: #fff } .section__audioDirac-inner-s1 .compare_text { width: 100%; color: #bababa; text-align: center } .section__audioDirac-inner-s1 .compare_pic { background-position: 50%; background-repeat: no-repeat; background-size: cover } .section__audioDirac-inner-s1 .dirac_compare__with, .section__audioDirac-inner-s1 .dirac_compare__without { position: relative; overflow: hidden } .section__audioDirac-inner-s1 .dirac_compare__with .compare_text { color: #44b2ff } .section__audioDirac-inner-s2 .audio__chart_containter { margin: 0 auto } .section__audioDirac-inner-s2 .audio__chart_0 { position: relative; margin: 0 auto; margin-top: 70px; width: 1144px; height: 617px } .section__audioDirac-inner-s2 .audio__chart_0 .img-slick { overflow: hidden; width: 100%; height: 100%; border-radius: 20px } .section__audioDirac-inner-s2 .audio__chart_0 .top .topLeft { position: absolute; top: 45px; left: 80px; width: 40%; color: #bababa; font-size: 24px; text-align: center } .section__audioDirac-inner-s2 .audio__chart_0 .top .topRight { position: absolute; top: 45px; right: 157px; width: 40%; color: #44b2ff; font-size: 24px; text-align: center } .section__audioDirac-inner-s2 .audio__chart_0 .left { position: absolute; top: 190px; left: -40px; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotateZ(270deg) } .section__audioDirac-inner-s2 .audio__chart_0 .right { position: absolute; right: 160px; bottom: 45px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDirac-inner-s2 .audio__chart_0 .num { position: absolute; top: 48%; right: -10px; width: 200px; color: #44b2ff; font-size: 42px; font-weight: 700; text-align: center; transform: rotate(270deg) } .section__audiodolby-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #12101b } .section__audiodolby-outer-s1 .wd__content .content__info { color: #fff } .section__audiodolby-outer-s1 .wd__content .content__link { color: #fff } .section__audiodolby-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__audiodolby-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__audiodolby-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_p.jpg) } .section__audiodolby-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2_p.jpg) } .section__audiodolby-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__audiodolby-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__audiodolby-outer-s2 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #12101b } .section__audiodolby-outer-s2 .wd__content .content__info { color: #fff } .section__audiodolby-outer-s2 .wd__content .content__link { color: #fff } .section__audiodolby-outer-s2 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_k.jpg) } .section__audiodolby-outer-s2 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2_k.jpg) } .section__audiodolby-outer-s2 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__audiodolby-outer-s2 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .modal-inner__sectionsAudioDolby { background-color: #0d0d0d } .modal-inner__sectionsAudioDolby .wd__content .content__info { color: #fff } .modal-inner__sectionsAudioDolby .wd__content .content__link { color: #fff } .section__audioDolby-inner-s1 .wd__content { z-index: 3 } .section__audioDolby-inner-s2 .compare_text { width: 100%; color: #bababa; text-align: center } .section__audioDolby-inner-s2 .compare_pic { background-position: 50%; background-repeat: no-repeat; background-size: cover } .section__audioDolby-inner-s2 .ainoise_compare__with, .section__audioDolby-inner-s2 .ainoise_compare__without { position: relative; overflow: hidden } .section__audioDolby-inner-s2 .ainoise_compare__with .compare_text { color: #44b2ff } .section__audioDolby-inner-s3 .audio__chart_containter { margin: 0 auto } .section__audioDolby-inner-s3 .audio__chart_0 { position: relative; margin: 0 auto; margin-top: 80px; width: 1144px; height: 617px } .section__audioDolby-inner-s3 .audio__chart_0 .img-slick { overflow: hidden; width: 100%; height: 100%; border-radius: 20px } .section__audioDolby-inner-s3 .audio__chart_0 .top .topLeft { position: absolute; top: 45px; left: 80px; width: 40%; color: #bababa; font-size: 24px; text-align: center } .section__audioDolby-inner-s3 .audio__chart_0 .top .topRight { position: absolute; top: 45px; right: 157px; width: 40%; color: #44b2ff; font-size: 24px; text-align: center } .section__audioDolby-inner-s3 .audio__chart_0 .left { position: absolute; top: 186px; left: -40px; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotateZ(270deg) } .section__audioDolby-inner-s3 .audio__chart_0 .right { position: absolute; right: 160px; bottom: 45px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDolby-inner-s3 .audio__chart_0 .num { position: absolute; top: 300px; right: -10px; width: 200px; color: #44b2ff; font-size: 42px; font-weight: 700; text-align: center; transform: rotate(270deg) } .section__audioDolby-inner-s4 .wdtab .wdtab__nav { background-color: transparent } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn { color: #bababa; font-size: 1.5rem } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn:hover { color: #fff } .section__audioDolby-inner-s4 .wdtab .wdtab__autoPlay { margin-left: 536px } .section__audioDolby-inner-s4 .wdtab .wdtab__panel__item-info__text { padding-bottom: 27px!important; color: #fff; line-height: 1.5 } .section__audioDolby-inner-s4 .wdtab__panel__item-info { margin: 0 auto; width: 90%; max-width: 880px } .section__audioDolby-inner-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #fff; fill: #000 } .section__audioDolby-inner-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { stroke: #fff } .section__audioDolby-inner-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg-play .triangle { fill: #fff } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.active, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.focus-visible, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn:focus { color: #fff } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.active::before, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.focus-visible::before, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn:focus::before { background-image: linear-gradient(to right, #43b1fe, #00518b 100%) } .section__audioDolby-inner-s4 .audio__chart_containter { margin: 0 auto } .section__audioDolby-inner-s4 .audio__chart { margin: 0 auto; width: 1146px } .section__audioDolby-inner-s4 .audio__chart .slick-image { width: 100%; height: 100% } .section__audioDolby-inner-s4 .audio__chart .slick-image>.img-slick { width: 100%; height: 100%; border-radius: 20px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 { position: relative; height: 696px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .title { position: absolute; top: 40px; width: 100%; color: #fff; font-size: 24px; text-align: center } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .y { position: absolute; top: 198px; left: 0; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotate(270deg) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .x { position: absolute; right: 110px; bottom: 60px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav { position: absolute; bottom: 40px; left: 0; width: 100% } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item { position: relative; margin: 0 10px; padding-left: 50px; color: #bababa; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item::after { position: absolute; bottom: calc(50% - 2px); left: 0; width: 40px; border-bottom: 3px solid #fff; content: "" } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item--0::after { border-color: #628bff } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item--1::after { border-color: #a4e4ff } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 { position: relative; height: 678px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .title { position: absolute; top: 40px; width: 100%; color: #fff; font-size: 24px; text-align: center } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .y { position: absolute; top: 206px; left: 38px; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotate(270deg) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .x { position: absolute; right: 128px; bottom: 100px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .red { position: absolute; top: 113px; left: 302px; width: 200px; color: #ff3860; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav { position: absolute; bottom: 44px; left: 0; width: 100% } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item { position: relative; margin: 0 10px; padding-left: 50px; color: #bababa; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item::after { position: absolute; bottom: calc(50% - 2px); left: 0; width: 40px; content: "" } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--0::after { border-bottom: 2px solid #00728a } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--1::after { left: -1px; height: 2px; background-position: top; background-repeat: repeat-x; background-size: 10px 2px; background-image: linear-gradient(to right, #ff3860 40%, rgba(255, 255, 255, 0) 0) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--2::after { border-bottom: 2px solid #00f2fe } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--3::after { left: 4px; height: 2px; background-position: top; background-repeat: repeat-x; background-size: 8px 2px; background-image: linear-gradient(to right, #bababa 26%, rgba(255, 255, 255, 0) 0) } .section__noise { color: #181818 } .section__noise .sub__content { margin-top: 80px; margin-right: auto; margin-left: auto; max-width: 870px } .section__noise .sub__content .content__title { color: #181818; font-size: 2rem; font-weight: 300; line-height: 1.2 } .section__noise .sub__content .content__info { margin-top: 9px; color: #181818; font-size: 1.25rem; line-height: 1.5 } .section__noise .nav__noise { display: flex; justify-content: center; margin-top: 36px } .section__noise .nav__noise .nav__item { display: flex; cursor: pointer; align-items: center; justify-content: center; margin: 0 15px; padding: 15px; width: 240px; border: 3px solid #181818; border-radius: 20px } .section__noise .nav__noise .nav__item .nav__content { display: flex; align-items: center } .section__noise .nav__noise .nav__item .nav__content .img__icon { display: inline-block; margin-right: 10px; width: 45px; height: 45px } .section__noise .nav__noise .nav__item .nav__content .img__icon .svg_button_play { width: 36px; height: 36px } .section__noise .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-rect { fill: none } .section__noise .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-circle, .section__noise .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-line { stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; fill-rule: evenodd } .section__noise .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-circle { fill: #fff; stroke-width: 4px } .section__noise .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-triangle { clip-path: url(#clip-path) } .section__noise .nav__noise .nav__item .nav__content .nav__text { display: inline-block; width: 160px; letter-spacing: .02em } .section__noise .nav__noise .nav__item .nav__content .nav__text .content__title { font-size: 23px; font-weight: 300 } .section__noise .nav__noise .nav__item .nav__content .nav__text .content__info { font-size: 20px } .section__noise .nav__noise .nav__item.js-selected { border: solid 3px transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(179deg, #7a4418 0, #ebaf70 30%, #7a4418 60%, #c27638 100%) border-box } .section__noise .nav__noise .nav__item.js-selected .nav__content .img__icon .svg_button_play .svg-triangle { opacity: 0 } .section__noise .nav__noise .nav__item.js-selected .nav__content .img__icon .svg_button_play .svg-line { opacity: 1 } .section__noise .noise__switcher { display: flex; overflow: hidden; align-items: center; justify-content: center; visibility: hidden; margin-top: 60px; max-height: 0; text-align: center; transition: all .5s linear, opacity .4s; flex-direction: column } .section__noise .noise__switcher span { display: inline-block; margin-right: 10px; font-size: 1.75rem; font-weight: 300 } .section__noise .noise__switcher .img__switcher { display: inline-block; cursor: pointer; margin: 10px 0; padding: 0; width: 90px; height: 42px; border: 0; background-color: transparent; background-size: contain } #CMD .section__noise .noise__switcher .img__switcher { background-image: url(../images/btn-off.png) } #CMD .section__noise .noise__switcher .img__switcher.js-active { background-image: url(../images/btn-on.png) } .section__noise .noise__switcher.js-showed { visibility: visible; opacity: 1; max-height: 700px; transition: all .5s linear, opacity .4s .5s } .section__noise .noise__switcher .noise_desc { width: 100%; max-width: 800px; font-size: 1rem; text-align: center; line-height: 1.5 } .section__noise .img__noise { margin-top: 19px; height: 400px } .section__noise .img__noise .img__voice { background-image: url(../images/voiceBg.svg); position: absolute; z-index: 50; top: 50%; left: 50%; margin-top: -162px; margin-left: -162px; width: 324px; height: 324px; background-size: contain } .section__noise .img__noise #noise__left { position: absolute; z-index: 40; top: 0; left: 50%; margin-left: -880px } .section__noise .img__noise #noise__right { position: absolute; z-index: 40; top: 0; left: 50%; margin-left: 80px } .section__noise .modal-button-container { position: relative; z-index: 99; margin-top: 21px } .section__noise .nav__noise .nav__item { width: 234px } .section__noise .nav__noise .nav__item .nav__content { width: 100% } .section__noise .nav__noise .nav__item .nav__content .nav__text { width: 100% } .section__noise .nav__noise .nav__item .nav__content .img__icon { margin-right: 12px; margin-left: 0 } .section__noise .svg_button_play .svg-line, .section__noise .svg_button_play .svg-triangle { transition: opacity 1.2s } .section__noise .svg_button_play .svg-triangle { opacity: 1 } .section__noise .svg_button_play .svg-line { opacity: 0 } .section__noise .img__icon .svg_button_play .svg-circle { stroke: #4a47fe!important } .section__noise .img__icon .svg_button_play .svg-line { fill: #4a47fe!important; stroke: transparent } .section__noise .img__icon .svg_button_play .svg-triangle .triangle { fill: #4a47fe!important } .section__conference-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #e9eef2 } .section__conference-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #181818 } .section__conference-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__conference-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_l.jpg) } .section__conference-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2_l.jpg) } .section__conference-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__conference-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__conference-inner-s1 { color: #181818 } .section__conference-inner-s1 .wdtab .wdtab__panel .wdtab__panel__item-info__text { color: #181818 } .section__conference-inner-s1 .wdtab .wdtab__nav { background-color: inherit } .section__conference-inner-s1 .wdtab__nav-btn { display: flex; flex-direction: column; align-items: center } .section__conference-inner-s1 .wdtab__nav-btn .nav_icon { margin: 0 auto } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { stroke: #181818 } .section__conference-inner-s1 .single-nav { display: block; position: relative; margin-right: auto; margin-left: auto } .section__conference-inner-s1 .single-nav .wdtab__panel__item-info__text { display: none } #wdTab-conference-tabnav-0 .nav_icon { -webkit-mask: url(../images/icon01.svg) no-repeat 50% 50%; mask: url(../images/icon01.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-1 .nav_icon { -webkit-mask: url(../images/icon02.svg) no-repeat 50% 50%; mask: url(../images/icon02.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-2 .nav_icon { -webkit-mask: url(../images/icon03.svg) no-repeat 50% 50%; mask: url(../images/icon03.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-3 .nav_icon { -webkit-mask: url(../images/icon04.svg) no-repeat 50% 50%; mask: url(../images/icon04.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-4 .nav_icon { -webkit-mask: url(../images/icon05.svg) no-repeat 50% 50%; mask: url(../images/icon05.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-5 .nav_icon { -webkit-mask: url(../images/icon06.svg) no-repeat 50% 50%; mask: url(../images/icon06.svg) no-repeat 50% 50% } .section__conference-inner-s1 .wdtab__nav::before { background-color: #4a47fe } .section__conference-inner-s1 .wdtab__nav-btn { color: #666 } .section__conference-inner-s1 .wdtab__nav-btn:focus-visible { color: #4a47fe } .section__conference-inner-s1 .wdtab__nav-btn.active, .section__conference-inner-s1 .wdtab__nav-btn:hover { color: #4a47fe } .section__conference-inner-s1 .wdtab__nav-btn.active::before, .section__conference-inner-s1 .wdtab__nav-btn:hover::before { background-color: #4a47fe } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #666; fill: transparent } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-pause { fill: #666 } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-play { fill: #666 } .section__conference-inner-s1 .wdtab .wdtab__nav-btn, .section__conference-inner-s1 .wdtab .wdtab__nav-btn * { color: #666 } .section__conference-inner-s1 .wdtab .wdtab__nav-btn .nav_icon { background-color: #666 } .section__conference-inner-s1 .wdtab .wdtab__nav-btn.active, .section__conference-inner-s1 .wdtab .wdtab__nav-btn.active *, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:focus, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:focus *, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:focus-visible, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:focus-visible *, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:hover, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:hover * { color: #4a47fe } .section__conference-inner-s1 .wdtab .wdtab__nav-btn.active .nav_icon, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:focus .nav_icon, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:focus-visible .nav_icon, .section__conference-inner-s1 .wdtab .wdtab__nav-btn:hover .nav_icon { background-color: #4a47fe } .section__noise { overflow: hidden } .section__noise .img__icon .svg_button_play .svg-line { stroke: #643bff } .section__noise .nav__noise .nav__item { opacity: 1; transition: opacity ease-in .3s } .section__noise .nav__noise .nav__item.js-selected, .section__noise .nav__noise .nav__item:hover { opacity: 1; color: #643bff; border: solid 3px transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #225afc 0, #643bff 100%) border-box } .section__noise.white { background-color: #000 } .section__noise.white .wd__content .content__slogan { color: #fff } .section__noise.white .wd__content .content__title { color: #fff } .section__noise.white .wd__content .content__info { color: #fff } .section__noise.white .nav__noise .nav__item { border-color: #fff } .section__noise.white .nav__noise .nav__item .nav__content .nav__text .content__info, .section__noise.white .nav__noise .nav__item .nav__content .nav__text .content__title { color: #fff } .section__noise.white .nav__noise .nav__item.js-selected { border: solid 3px transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(120deg, #c2f0ff 0, #6b55aa 100%) border-box } .section__noise.white .sub__content .content__info, .section__noise.white .sub__content .content__title { color: #fff } .section__noise.white .noise__switcher { color: #fff } .section__noise.white .img__noise .img__voice { background-image: url(../images/voiceBg_black.svg) } .section__conference-inner-s3 .toggle_off, .section__conference-inner-s3 .toggle_on { margin: 0 auto; width: 85px; height: 41px } .section__conference-inner-s3 .mode_container .img_text, .section__conference-inner-s3 .mode_container .info, .section__conference-inner-s3 .mode_container .title { position: relative; z-index: 2; color: #181818 } .section__conference-inner-s3 .mode_container .title { line-height: 1.2 } #CMD .section__conference-inner-s3 .toggle_on { background-image: url(../images/toggle-on.png) } #CMD .section__conference-inner-s3 .toggle_off { background-image: url(../images/toggle-off.png) } .conference-inner, .conference-outer { background-color: #fff } .conference-inner .wd__content .content__title, .conference-outer .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .conference-inner .wd__content .content__info, .conference-outer .wd__content .content__info { color: #181818 } .conference-inner .wd__content .content__link, .conference-outer .wd__content .content__link { color: #181818 } #active__modal-inner__corningGlass .modal-button-container .modal-button { color: #fff; border-color: #fff } .wd__section.section__corningGlass { background-color: #000 } .section__corningGlass .inner_block__1 .antiglare_containter { position: relative } .section__corningGlass .inner_block__1 .antiglare_containter .content { display: flex; position: absolute; z-index: 2; justify-content: center } .section__corningGlass .inner_block__1 .antiglare_containter .content .item { display: block; width: 50%; color: #181818; text-align: center } .section__corningGlass .inner_block__1 .antiglare_containter .content .content__right.item { color: #fff } .section__corningGlass .inner_block__2 .campare_containter sup.sign-cr { top: -.5em; font-size: .6em } .section__corningGlass .inner_block__2 .campare_containter .item { text-align: center } .section__corningGlass .inner_block__2 .campare_containter .item .img { margin: 0 auto } .section__corningGlass .inner_block__2 .campare_containter .item .info, .section__corningGlass .inner_block__2 .campare_containter .item .title { color: #fff } .modal-corningGlass { background-color: #000 } .section__corningGlass .content__info, .section__corningGlass .content__title, .section__corningGlass .wd__feature__describe * { color: #fff!important } .section__corningGlass.wd__section .wd__feature__list .wd__feature .wd__feature__data { color: #fff!important } .section__display-outer-s1 { overflow: hidden; background-color: #000 } .section__display-outer-s1 .wd__content .content__info { color: #fff } .section__display-outer-s1 .wd__content .content__link { color: #fff } .section__display-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__display-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__display-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1.jpg) } .section__display-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2.jpg) } .section__display-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/blockimg_3.jpg) } .section__display-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/blockimg_4.jpg) } .section__display-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/blockimg_5.jpg) } .section__display-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images/blockimg_6.jpg) } .section__display-outer-s1 .wdblockimg .block-7 .img__bg { background-image: url(../images/blockimg_7.jpg) } .section__display-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images/blockimg_8.jpg) } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images/blockimg_8.jpg) } } @media all and (min-width:0) and (max-width:730.5px) { .section__display-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images/blockimg_8.jpg) } } .section__display-outer-s1 .wdblockimg .block-1 { background-color: #12101b } .section__display-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__display-outer-s1 .wdblockimg .block-2 { background-color: #fefefe } .section__display-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__display-outer-s1 .wdblockimg .block-3 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__display-outer-s1 .wdblockimg .block-4 { background-color: #12101b } .section__display-outer-s1 .wdblockimg .block-4 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__display-outer-s1 .wdblockimg .block-5 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__display-outer-s1 .wdblockimg .block-6 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__display-outer-s1 .wdblockimg .block-7 { background-color: #12101b } .section__display-outer-s1 .wdblockimg .block-7 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__display-outer-s1 .wdblockimg .block-8 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__display-inner-s1 { margin-top: 0; padding-top: 0 } .section__display-inner-s1 .product_list { position: relative; overflow: hidden; margin-right: auto; margin-left: auto; width: 100%; max-width: 1280px; font-size: 0 } .section__display-inner-s1 .product_list .product { display: inline-block; position: relative; overflow: hidden; box-sizing: border-box; width: 20%; height: 350px; vertical-align: top } .section__display-inner-s1 .product_list .product .product-img { position: absolute; top: 0; left: 50%; margin-left: -128px; width: 256px; height: 350px } .section__display-inner-s1 .product_list .product .product-img .img { width: 256px; height: 350px } .section__display-inner-s1 .product_list .product .content-link { display: block; position: absolute; z-index: 9999; top: 0; left: 0; margin-top: 0; width: 100%; height: 100%; color: #fff; font-size: 1.1875rem } .section__display-inner-s1 .product_list .product .content-link .link-text { display: inline-block } .section__display-inner-s1 .product_list .product .product-mask { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .7) } .section__display-inner-s1 .product_list .product .product-content { position: absolute; z-index: 9; top: 50%; width: 100%; text-align: center; transform: translateY(-50%) } .section__display-inner-s1 .product_list .product .product-content .content-title { position: relative; padding: 0 30px; color: #fff; font-size: 1.875rem; letter-spacing: .1px; line-height: 1.2; text-shadow: 0 0 9px #000 } .section__display-inner-s1 .product_list .product .product-content .content-hidden { position: relative; overflow: hidden; height: 100% } .section__display-inner-s1 .product_list .product .product-content .content-hidden .content-info { display: block; position: relative; margin-top: 19px; margin-right: auto; margin-left: auto; width: 90%; color: #fff; font-size: 1.25rem; line-height: 1.6 } .section__display-inner-s1 .product_list .product .product-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__display-inner-s1 .product_list .product .product-frame>div { position: absolute } .section__display-inner-s1 .product_list .product .product-frame .frame-top { top: 0; left: 0; height: 2px; background: linear-gradient(to right, #f6f61c, #3ffb5e) } .section__display-inner-s1 .product_list .product .product-frame .frame-right { top: 0; right: 0; width: 2px; background: linear-gradient(to bottom, #3ffb5e, #3627fe) } .section__display-inner-s1 .product_list .product .product-frame .frame-bottom { right: 0; bottom: 0; height: 2px; background: linear-gradient(to left, #3627fe, #f40e2b) } .section__display-inner-s1 .product_list .product .product-frame .frame-left { bottom: 0; left: 0; width: 2px; background: linear-gradient(to top, #f40e2b, #f6f61c) } .section__display-inner-s1 .product_list .product .product-mask { top: 0; left: 0; opacity: 0; transition: opacity .4s } .section__display-inner-s1 .product_list .product .product-content .content-hidden { opacity: 0; max-height: 0 } .section__display-inner-s1 .product_list .product .product-frame .frame-top { width: 0%; transition: width .4s .4s } .section__display-inner-s1 .product_list .product .product-frame .frame-right { height: 0%; transition: height .4s } .section__display-inner-s1 .product_list .product .product-frame .frame-bottom { width: 0%; transition: width .4s .4s } .section__display-inner-s1 .product_list .product .product-frame .frame-left { height: 0%; transition: height .4s } @keyframes hideToShow { 0% { opacity: 1 } 50% { opacity: 0 } 100% { opacity: 1 } } @keyframes hideTo0 { 0% { opacity: 1 } 30% { opacity: 0 } 30.1% { opacity: 0 } 100% { display: none; opacity: 0; height: 0 } } .section__display-inner-s1 .product_list .product.focus .product-mask, .section__display-inner-s1 .product_list .product.hover .product-mask, .section__display-inner-s1 .product_list .product:focus-visible .product-mask { z-index: 9; opacity: 1 } .section__display-inner-s1 .product_list .product.focus .product-content .content-title, .section__display-inner-s1 .product_list .product.hover .product-content .content-title, .section__display-inner-s1 .product_list .product:focus-visible .product-content .content-title { overflow: hidden; transition: transform 0s .2s; animation: hideTo0 1s; animation-fill-mode: both } .section__display-inner-s1 .product_list .product.focus .product-content .content-hidden, .section__display-inner-s1 .product_list .product.hover .product-content .content-hidden, .section__display-inner-s1 .product_list .product:focus-visible .product-content .content-hidden { opacity: 1; max-height: 1000px; transition: opacity .5s linear .5s, max-height .5s linear 450ms } @media (min-width:1280px) { .section__display-inner-s1 .product_list .product.focus .product-frame, .section__display-inner-s1 .product_list .product.hover .product-frame, .section__display-inner-s1 .product_list .product:focus-visible .product-frame, .section__display-inner-s1 .product_list .product:hover .product-frame { z-index: 12 } .section__display-inner-s1 .product_list .product.focus .product-frame .frame-top, .section__display-inner-s1 .product_list .product.hover .product-frame .frame-top, .section__display-inner-s1 .product_list .product:focus-visible .product-frame .frame-top, .section__display-inner-s1 .product_list .product:hover .product-frame .frame-top { width: 100%; transition: width .4s .4s } .section__display-inner-s1 .product_list .product.focus .product-frame .frame-right, .section__display-inner-s1 .product_list .product.hover .product-frame .frame-right, .section__display-inner-s1 .product_list .product:focus-visible .product-frame .frame-right, .section__display-inner-s1 .product_list .product:hover .product-frame .frame-right { height: 100%; transition: height .4s .8s } .section__display-inner-s1 .product_list .product.focus .product-frame .frame-bottom, .section__display-inner-s1 .product_list .product.hover .product-frame .frame-bottom, .section__display-inner-s1 .product_list .product:focus-visible .product-frame .frame-bottom, .section__display-inner-s1 .product_list .product:hover .product-frame .frame-bottom { width: 100%; transition: width .4s .4s } .section__display-inner-s1 .product_list .product.focus .product-frame .frame-left, .section__display-inner-s1 .product_list .product.hover .product-frame .frame-left, .section__display-inner-s1 .product_list .product:focus-visible .product-frame .frame-left, .section__display-inner-s1 .product_list .product:hover .product-frame .frame-left { height: 100%; transition: height .4s .8s } .section__display-inner-s1 .product_list .product.focus .product-mask, .section__display-inner-s1 .product_list .product.hover .product-mask, .section__display-inner-s1 .product_list .product:focus-visible .product-mask, .section__display-inner-s1 .product_list .product:hover .product-mask { z-index: 9; opacity: 1 } .section__display-inner-s1 .product_list .product.focus .product-content .content-title, .section__display-inner-s1 .product_list .product.hover .product-content .content-title, .section__display-inner-s1 .product_list .product:focus-visible .product-content .content-title, .section__display-inner-s1 .product_list .product:hover .product-content .content-title { transition: all 0s .2s; animation: hideTo0 1s; animation-fill-mode: both } .section__display-inner-s1 .product_list .product.focus .product-content .content-hidden, .section__display-inner-s1 .product_list .product.hover .product-content .content-hidden, .section__display-inner-s1 .product_list .product:focus-visible .product-content .content-hidden, .section__display-inner-s1 .product_list .product:hover .product-content .content-hidden { opacity: 1; max-height: 1000px; transition: opacity .5s linear .5s, max-height .5s linear 450ms } } @media all and (max-width:1279.5px) and (min-width:731px) { .section__display-inner-s1 .product_list { text-align: center } .section__display-inner-s1 .product_list .product .product-content .content-title { margin-bottom: -10px; padding: 0 55px; font-size: 2rem } .section__display-inner-s1 .product_list .product { display: inline-block; padding: 1px; box-sizing: border-box; width: 365px; height: 250px } .section__display-inner-s1 .product_list .product .product-content .content-hidden .content-info { line-height: 1.3; margin-top: 26px; font-size: 1.25rem } .section__display-inner-s1 .product_list .product .product-img { top: 50%; left: 50%; margin-left: unset; transform: translate(-50%, -50%) } .section__display-inner-s1 .product_list { padding-top: 47px } .section__display-inner-s1 .product_list .product .product-img, .section__display-inner-s1 .product_list .product .product-img .img { width: 365px; height: 250px } .section__display-inner-s1 .product_list .product-5 { width: 730px } .section__display-inner-s1 .product_list .product-5 .product-img, .section__display-inner-s1 .product_list .product-5 .product-img .img { width: 730px } } @media all and (max-width:730.5px) { .section__display-inner-s1 .product_list { text-align: center } .section__display-inner-s1 .product_list .product { display: inline-block; padding: 1px; box-sizing: border-box; width: 100%; max-width: 320px; height: 300px } .section__display-inner-s1 .product_list .product .product-content .content-title { margin-bottom: -10px; font-size: 2.125rem } .section__display-inner-s1 .product_list .product .product-content .content-hidden .content-info { margin-top: 26px; font-size: 1.125rem; line-height: 1.3 } .section__display-inner-s1 .product_list .product .product-img { top: 50%; left: 50%; margin-left: unset; width: 320px; height: 300px; transform: translate(-50%, -50%) } .section__display-inner-s1 .product_list .product .product-img .img { width: 320px; height: 300px } } .section__display-inner-s1 .wdtable.oledTable .table_cotainer { text-align: left } .section__display-inner-s1 .wdtable.oledTable .table_cotainer .text__val { display: block; line-height: 1.2 } .section__display-inner-s1 .wdtable.oledTable .table_cotainer td .text__val { line-height: 1.3 } .section__display-inner-s1 .wdtable.oledTable .table_cotainer sup.sign-cr, .section__display-inner-s1 .wdtable.oledTable .table_cotainer sup.sign-tm { top: 0; font-size: .6em; vertical-align: super } .section__display-inner-s1 .wdtable.oledTable .table_cotainer { position: relative } .section__display-inner-s1 .wdtable.oledTable .table_cotainer table { border-collapse: collapse } .section__display-inner-s1 .wdtable.oledTable .table_cotainer caption { opacity: 0; font-size: 0 } .section__display-inner-s1 .wdtable.oledTable .table_cotainer td, .section__display-inner-s1 .wdtable.oledTable .table_cotainer tr { color: #aaa; font-size: 1em } .section__display-inner-s1 .wdtable.oledTable .table_cotainer .tr-0 td { font-size: 0!important } .section__display-inner-s1 .wdtable.oledTable .table_cotainer .h-col-1 { background: linear-gradient(to right, #f29759, #ffeb7c, #80c47d, #56beb8, #319fc5, #668cc8, #8e66a9, #b971ac, #d96b9a); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__display-inner-s1 .wdtable.oledTable .table_cotainer .h-col-2 { background: linear-gradient(to right, #aaa, #aaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__display-inner-s1 .wdtable.oledTable .table_cotainer .td-1 { color: #fff } .section__display-inner-s1 .wdtable.oledTable .table_cotainer tr td, .section__display-inner-s1 .wdtable.oledTable .table_cotainer tr th { border-top: 1px solid #444; border-bottom: 0 solid transparent } .section__display-inner-s1 .wdtable.oledTable .table_cotainer tr:first-child td, .section__display-inner-s1 .wdtable.oledTable .table_cotainer tr:first-child th { border-top: 1px solid transparent } .section__display-inner-s1 .wdtable table .tr-1 td span { padding: 0 } .section__display-inner-s2 { margin-top: 0; padding-top: 0 } .section__display-inner-s2 .image__container { display: flex; flex-direction: row; flex-wrap: wrap } .section__display-inner-s2 .image__container .imgItem { position: relative; overflow: hidden; border-radius: 20px } .section__display-inner-s2 .image__container .imgItem-title { position: absolute; z-index: 9; top: 0; width: 100%; color: #181818; text-align: left } .section__display-inner-s3 .image__container { display: flex; justify-content: space-between; margin-right: auto; margin-left: auto } .section__display-inner-s3 .image__container .imgItem-img-outer { position: relative; overflow: hidden; border-radius: 20px } .section__display-inner-s3 .image__container .imgItem-title { box-sizing: border-box; color: #adadad; text-align: center } .section__display-inner-s3 .image__container .imgItem-info { box-sizing: border-box; color: #fff; text-align: center; line-height: 1.4 } .section__display-inner-s4 .campare_containter .imgItem-img-outer { overflow: hidden; border-radius: 20px } .section__display-inner-s4 .campare_containter .item { text-align: center } .section__display-inner-s4 .campare_containter .item .img { margin: 0 auto } .section__display-inner-s4 .campare_containter .item .title { color: #fff } .section__display-inner-s4 .campare_containter .item .info { color: #888 } .display-inner { background-color: #000 } .display-inner .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .display-inner .wd__content .content__info { color: #fff } .display-inner .wd__content .content__link { color: #fff } .display-inner .wd__feature__list .wd__feature .wd__feature__data, .display-inner .wd__feature__list .wd__feature .wd__feature__data *, .display-inner .wd__feature__list .wd__feature .wd__feature__describe, .display-inner .wd__feature__list .wd__feature .wd__feature__describe *, .display-inner .wd__feature__list .wd__feature .wd__feature__describe__top, .display-inner .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .modal-inner__sectionsDisplay { background-color: #000 } .environment-outer .wd__feature__list { margin-right: auto; margin-left: auto } .environment-outer .wd__feature__list.list-icon { margin-top: 22px } .environment-outer .wd__feature__list.list-icon .wd__feature__describe__top { display: none } .environment-outer .wd__feature__list .wd__feature.feature-icon .wd__feature__data { margin-right: auto; margin-left: auto; height: 116px } .environment-outer .wd__feature__list .wd__feature.feature-icon .wd__feature__data .img__icon { width: 100%; height: 100% } .environment-outer .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { max-width: 168px } .environment-outer .wd__feature.icon-asusoled .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_asusoled.png) } .environment-outer .wd__feature__list .wd__feature.icon-asusoled .wd__feature__data { width: 112px; height: 116px } .environment-outer .wd__feature.icon-dolbyvision .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_dolbyvision.png) } .environment-outer .wd__feature__list .wd__feature.icon-dolbyvision .wd__feature__data { width: 168px; height: 116px } .environment-outer .wd__feature.icon-flickfree .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_flickfree.png) } .environment-outer .wd__feature__list .wd__feature.icon-flickfree .wd__feature__data { width: 92px; height: 116px } .environment-outer .wd__feature.icon-lowbluelighthardware .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_lowbluelighthardware.png) } .environment-outer .wd__feature__list .wd__feature.icon-lowbluelighthardware .wd__feature__data { width: 92px; height: 116px } .environment-outer .wd__feature.icon-certifieddisplay .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_certifieddisplay.png) } .environment-outer .wd__feature__list .wd__feature.icon-certifieddisplay .wd__feature__data { width: 92px; height: 116px } .environment-outer .wd__feature.icon-validateddisplay .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_validateddisplay.png) } .environment-outer .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data { width: 68px } .environment-outer .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data .img__icon { top: 3px } .environment-outer .wd__feature.icon-lowbluelight .img__icon { background-image: url(../../common/sections/display/images/common/icon/1x/icon_lowbluelight.png) } .environment-outer .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data { width: 180px } .environment-outer .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data .img__icon { top: 3px } .environment-outer .wd__feature.icon-epeat .img__icon { background-image: url(../images/icon_epeat.png) } .environment-outer .wd__feature__list .wd__feature.icon-epeat .wd__feature__data { width: 146px; height: 102px } .environment-outer .wd__feature.icon-energystar .img__icon { background-image: url(../images/icon_energystar.png) } .environment-outer .wd__feature__list .wd__feature.icon-energystar .wd__feature__data { width: 102px; height: 102px } .environment-outer .wd__feature.icon-rohs .img__icon { background-image: url(../images/icon_rohs.png) } .environment-outer .wd__feature__list .wd__feature.icon-rohs .wd__feature__data { width: 146px; height: 102px } @media all and (min-width:731px) and (max-width:1279.5px) { .environment-outer .wd__feature__list.list-icon { margin-top: -7px } .environment-outer .wd__feature__list.list-icon .wd__feature .feature-icon { margin-bottom: -9px } .environment-outer .wd__feature__list.list-icon .wd__feature .feature-icon .wd__feature__data { height: 116px } } @media all and (max-width:730.5px) { .environment-outer .wd__feature__list.list-icon { margin-top: 9px } .environment-outer .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: 0 } .environment-outer .wd__feature__list .wd__feature.icon-asusoled .wd__feature__data { position: relative; top: 12px; width: 100px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-dolbyvision .wd__feature__data { width: 151px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-flickfree .wd__feature__data { width: 84px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-lowbluelighthardware .wd__feature__data { width: 84px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-certifieddisplay .wd__feature__data { width: 84px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data { width: 61px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-validateddisplay .wd__feature__data .img__icon { top: 3px } .environment-outer .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data { width: 153px; height: 104px } .environment-outer .wd__feature__list .wd__feature.icon-lowbluelight .wd__feature__data .img__icon { top: 3px } .environment-outer .wd__feature__list .wd__feature.icon-epeat .wd__feature__data { width: 109px; height: 76px } .environment-outer .wd__feature__list .wd__feature.icon-energystar .wd__feature__data { width: 76px; height: 76px } .environment-outer .wd__feature__list .wd__feature.icon-rohs .wd__feature__data { width: 109px; height: 76px } } .section__environment-outer-s1 { overflow: hidden; background-image: #fff } .section__environment-outer-s1 .wd__content .content__slogan { color: #181818 } .section__environment-outer-s1 .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .section__environment-outer-s1 .wd__content .content__info { color: #181818 } .section__environment-outer-s1 .wd__content .content__link { background-image: linear-gradient(to right, #fff, #fff); linkColor: #181818 } .section__environment-outer-s1 .wd__content .content__link { color: #181818 } .section__environment-outer-s1 .wd__content .content__link *, .section__environment-outer-s1 .wd__content .content__link span { color: #181818 } .section__environment-outer-s1 .wd__content .content__link::after { color: #181818 } .section__environment-outer-s1 .wd__content .content__link:link { color: #181818 } .section__environment-outer-s1 .wd__content .content__link:hover span { border-bottom: 1px solid #181818 } .section__environment-outer-s1::before { position: absolute; top: 0; left: 0; width: 100%; height: 10%; background-color: #f4fdeb; content: "" } .section__environment-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__environment-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__environment-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_3.jpg) } .section__environment-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2_3.jpg) } .section__environment-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/blockimg_3_4.jpg) } .section__environment-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/blockimg_4_3.jpg) } .section__environment-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/blockimg_5_3.jpg) } .section__environment-outer-s1 .wdblockimg .block-1 { background-color: #f7f7f7 } .section__environment-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__environment-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__environment-outer-s1 .wdblockimg .block-2 { background-color: #f7f7f7 } .section__environment-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__environment-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button .modal-inner-text { color: #181818 } .section__environment-outer-s1 .wdblockimg .block-3 { background-color: #f7f7f7 } .section__environment-outer-s1 .wdblockimg .block-3 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__environment-outer-s1 .wdblockimg .block-3 .modal-button-container .modal-button .modal-inner-text { color: #181818 } .section__environment-outer-s1 .wdblockimg .block-4 { background-color: #f7f7f7 } .section__environment-outer-s1 .wdblockimg .block-4 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__environment-outer-s1 .wdblockimg .block-4 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__environment-outer-s1 .wdblockimg .block-5 { background-color: #f7f7f7 } .section__environment-outer-s1 .wdblockimg .block-5 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__environment-outer-s1 .wdblockimg .block-5 .modal-button-container .modal-button .modal-inner-text { color: #181818 } .section__environment-outer-s1 .wdblockimg .block-6 { background-color: #fff } .section__environment-outer-s1 .wdblockimg .block-6 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__environment-outer-s1 .wdblockimg .block-6 .modal-button-container .modal-button .modal-inner-text { color: #181818 } .section__environment-outer-s1 .wdblockimg .block-7 { background-color: #12101b } .section__environment-outer-s1 .wdblockimg .block-7 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__environment-outer-s1 .wdblockimg .block-7 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__environment-outer-s1 .wdblockimg .block-8 { background-color: #fff } .section__environment-outer-s1 .wdblockimg .block-8 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__environment-outer-s1 .wdblockimg .block-8 .modal-button-container .modal-button .modal-inner-text { color: #181818 } .section__ksp { margin-top: 0; padding-top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item { color: #000; background-color: #fff } .section__ksp .wdtile.wdtile-ksp .item__content .wd__content .content__slogan { color: #181818 } .section__ksp .wdtile.wdtile-ksp .item__content .wd__content .content__title { color: #181818; background-image: linear-gradient(150deg, rgba(0, 30, 255, .99608) 0, #cd13be 34%, #d1004e 66%, #c76a00 100%) } .section__ksp .wdtile.wdtile-ksp .item__content .wd__content .content__info { color: #717171 } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button { background-color: #eaeaea } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button::before { background-color: red } .section__ksp .wdtile.wdtile-ksp .wdtile__container[data-largecolum="4"] { --tile-gap: 16px } .section__ksp .wdtile__item { display: flex } .section__ksp .wdtile__item, .section__ksp .wdtile__item * { font-size: 1em } .section__ksp .wdtile__item .item__block { display: flex; overflow: hidden; align-items: center; width: 100% } .section__ksp .wdtile__item .item__content { z-index: 9; width: 100% } .section__ksp .item__image { display: flex; position: relative; z-index: 1; align-items: center; justify-content: center; width: 100% } .section__ksp .item__image .img__item { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-size: contain; transform: translate(-50%, -50%); transform-origin: center } .section__ksp .item__block--content { display: flex } .section__ksp .item__block--content .item__content { width: auto; flex-basis: auto; flex-grow: 1 } .section__ksp .item__block--content .item__content+.item__image { width: 50%; flex-grow: 1; flex-basis: 50% } .section__ksp .item__block--content .wd__content .content__info { line-height: 1.4 } .section__ksp .item__block, .section__ksp .item__block * { text-align: center } .section__ksp .item__block .item__leftdesc.item__leftdesc { position: absolute; top: 0; left: 0; width: 100%; text-align: left; line-height: 1.4 } .section__ksp .item__block .item__content--descBottom { line-height: 1.4 } .section__ksp .item__block .item__content--descBottom span[class*=item__content--descBottom-] { display: block } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button-container { position: absolute; z-index: 9; right: 0; bottom: 0; width: 0; height: 0 } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button { position: absolute; overflow: hidden; cursor: pointer; right: 0; bottom: 0; margin: 0; padding: 0; width: 44px; height: 44px; border: 0; border-radius: 10px 0 0 } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button * { pointer-events: none!important } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button::before { display: block; position: absolute; top: 50%; bottom: unset; left: 50%; margin-top: -5px; margin-left: -10px; width: 20px; height: 10px; content: ""; -webkit-mask-image: url(../../common/sections/ksp/images/large/1x/jumparrowMask.png); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat } .section__ksp.test .item__image { background-color: #ccc } .section__ksp.test .img__item { background-color: #fc0 } .gallery__tile__container { --tile-gap: 15px; --column-count: 3; display: grid; width: 100%; grid-gap: var(--tile-gap); gap: var(--tile-gap); grid-template-columns: repeat(var(--column-count), 1fr) } @media all and (min-width:1280px) { .gallery__tile__container[data-largecolum="1"] { --column-count: 1 } .gallery__tile__container[data-largecolum="2"] { --column-count: 2 } .gallery__tile__container[data-largecolum="3"] { --column-count: 3 } .gallery__tile__container[data-largecolum="4"] { --column-count: 4 } } @media all and (min-width:731px) and (max-width:1279.5px) { .gallery__tile__container[data-mediumcolum="2"] { --column-count: 2 } .gallery__tile__container[data-mediumcolum="3"] { --column-count: 3 } .gallery__tile__container[data-mediumcolum="4"] { --column-count: 4 } } @media all and (max-width:730.5px) { .gallery__tile__container[data-smallcolum="1"] { --column-count: 1 } .gallery__tile__container[data-smallcolum="2"] { --column-count: 2 } .gallery__tile__container[data-smallcolum="3"] { --column-count: 3 } .gallery__tile__container[data-smallcolum="4"] { --column-count: 4 } } @media all and (min-width:1280px) { .gallery__tile__container { --tile-gap: 24px } } @media all and (min-width:1280px) { .gallery__tile__container[data-largegap="10"] { --tile-gap: 10px } .gallery__tile__container[data-largegap="11"] { --tile-gap: 11px } .gallery__tile__container[data-largegap="12"] { --tile-gap: 12px } .gallery__tile__container[data-largegap="13"] { --tile-gap: 13px } .gallery__tile__container[data-largegap="14"] { --tile-gap: 14px } .gallery__tile__container[data-largegap="15"] { --tile-gap: 15px } .gallery__tile__container[data-largegap="16"] { --tile-gap: 16px } .gallery__tile__container[data-largegap="17"] { --tile-gap: 17px } .gallery__tile__container[data-largegap="18"] { --tile-gap: 18px } .gallery__tile__container[data-largegap="19"] { --tile-gap: 19px } } @media all and (min-width:731px) and (max-width:1279.5px) { .gallery__tile__container { --tile-gap: 24px } } @media all and (min-width:731px) and (max-width:1279.5px) { .gallery__tile__container[data-mediumgap="5"] { --tile-gap: 5px } .gallery__tile__container[data-mediumgap="6"] { --tile-gap: 6px } .gallery__tile__container[data-mediumgap="7"] { --tile-gap: 7px } .gallery__tile__container[data-mediumgap="8"] { --tile-gap: 8px } .gallery__tile__container[data-mediumgap="9"] { --tile-gap: 9px } .gallery__tile__container[data-mediumgap="10"] { --tile-gap: 10px } .gallery__tile__container[data-mediumgap="11"] { --tile-gap: 11px } .gallery__tile__container[data-mediumgap="12"] { --tile-gap: 12px } .gallery__tile__container[data-mediumgap="13"] { --tile-gap: 13px } .gallery__tile__container[data-mediumgap="14"] { --tile-gap: 14px } .gallery__tile__container[data-mediumgap="15"] { --tile-gap: 15px } .gallery__tile__container[data-mediumgap="16"] { --tile-gap: 16px } .gallery__tile__container[data-mediumgap="17"] { --tile-gap: 17px } .gallery__tile__container[data-mediumgap="18"] { --tile-gap: 18px } .gallery__tile__container[data-mediumgap="19"] { --tile-gap: 19px } } @media all and (max-width:730.5px) { .gallery__tile__container { --tile-gap: 9px } } @media all and (max-width:730.5px) { .gallery__tile__container[data-smallgap="1"] { --tile-gap: 1px } .gallery__tile__container[data-smallgap="2"] { --tile-gap: 2px } .gallery__tile__container[data-smallgap="3"] { --tile-gap: 3px } .gallery__tile__container[data-smallgap="4"] { --tile-gap: 4px } .gallery__tile__container[data-smallgap="5"] { --tile-gap: 5px } .gallery__tile__container[data-smallgap="6"] { --tile-gap: 6px } .gallery__tile__container[data-smallgap="7"] { --tile-gap: 7px } .gallery__tile__container[data-smallgap="8"] { --tile-gap: 8px } .gallery__tile__container[data-smallgap="9"] { --tile-gap: 9px } .gallery__tile__container[data-smallgap="10"] { --tile-gap: 10px } .gallery__tile__container[data-smallgap="11"] { --tile-gap: 11px } .gallery__tile__container[data-smallgap="12"] { --tile-gap: 12px } .gallery__tile__container[data-smallgap="13"] { --tile-gap: 13px } .gallery__tile__container[data-smallgap="14"] { --tile-gap: 14px } } .gallery__tile__item { position: relative; overflow: hidden; border-radius: 20px; min-height: 200px } .gallery__tile .gallery__tile__item-0 { order: 1 } .gallery__tile .gallery__tile__item-1 { order: 2 } .gallery__tile .gallery__tile__item-2 { order: 3 } .gallery__tile .gallery__tile__item-3 { order: 4 } .gallery__tile .gallery__tile__item-4 { order: 5 } .gallery__tile .gallery__tile__item-5 { order: 6 } .gallery__tile .gallery__tile__item-6 { order: 7 } .gallery__tile .gallery__tile__item-7 { order: 8 } .gallery__tile .gallery__tile__item-8 { order: 9 } .gallery__tile .gallery__tile__item-9 { order: 10 } .gallery__tile .gallery__tile__item-10 { order: 11 } .gallery__tile .gallery__tile__item-11 { order: 12 } .gallery__tile .gallery__tile__item-12 { order: 13 } .gallery__tile .gallery__tile__item-13 { order: 14 } .gallery__tile .gallery__tile__item-14 { order: 15 } .gallery__tile .gallery__tile__item-15 { order: 16 } .gallery__tile .gallery__tile__item-16 { order: 17 } .gallery__tile .gallery__tile__item-17 { order: 18 } .gallery__tile .gallery__tile__item-18 { order: 19 } .gallery__tile .gallery__tile__item-19 { order: 20 } .gallery__tile .gallery__tile__item-20 { order: 21 } .gallery__tile .gallery__tile__item-21 { order: 22 } .gallery__tile .gallery__tile__item-22 { order: 23 } .gallery__tile .gallery__tile__item-23 { order: 24 } .gallery__tile .gallery__tile__item-24 { order: 25 } .gallery__tile .gallery__tile__item-25 { order: 26 } .gallery__tile .gallery__tile__item-26 { order: 27 } .gallery__tile .gallery__tile__item-27 { order: 28 } .gallery__tile .gallery__tile__item-28 { order: 29 } .gallery__tile .gallery__tile__item-29 { order: 30 } .gallery__tile .gallery__tile__item-30 { order: 31 } .gallery__tile .gallery__tile__item-31 { order: 32 } .gallery__tile .gallery__tile__item-32 { order: 33 } .gallery__tile .gallery__tile__item-33 { order: 34 } .gallery__tile .gallery__tile__item-34 { order: 35 } .gallery__tile .gallery__tile__item-35 { order: 36 } .gallery__tile .gallery__tile__item-36 { order: 37 } .gallery__tile .gallery__tile__item-37 { order: 38 } .gallery__tile .gallery__tile__item-38 { order: 39 } .gallery__tile .gallery__tile__item-39 { order: 40 } .gallery__tile .gallery__tile__item-40 { order: 41 } .gallery__tile .gallery__tile__item-41 { order: 42 } .gallery__tile .gallery__tile__item-42 { order: 43 } .gallery__tile .gallery__tile__item-43 { order: 44 } .gallery__tile .gallery__tile__item-44 { order: 45 } .gallery__tile .gallery__tile__item-45 { order: 46 } .gallery__tile .gallery__tile__item-46 { order: 47 } .gallery__tile .gallery__tile__item-47 { order: 48 } .gallery__tile .gallery__tile__item-48 { order: 49 } .gallery__tile .gallery__tile__item-49 { order: 50 } .gallery__tile .gallery__tile__item-50 { order: 51 } .gallery__tile .gallery__tile__item-51 { order: 52 } .gallery__tile .gallery__tile__item-52 { order: 53 } .gallery__tile .gallery__tile__item-53 { order: 54 } .gallery__tile .gallery__tile__item-54 { order: 55 } .gallery__tile .gallery__tile__item-55 { order: 56 } .gallery__tile .gallery__tile__item-56 { order: 57 } .gallery__tile .gallery__tile__item-57 { order: 58 } .gallery__tile .gallery__tile__item-58 { order: 59 } .gallery__tile .gallery__tile__item-59 { order: 60 } .gallery__tile .gallery__tile__item-60 { order: 61 } .gallery__tile .gallery__tile__item-61 { order: 62 } .gallery__tile .gallery__tile__item-62 { order: 63 } .gallery__tile .gallery__tile__item-63 { order: 64 } .gallery__tile .gallery__tile__item-64 { order: 65 } .gallery__tile .gallery__tile__item-65 { order: 66 } .gallery__tile .gallery__tile__item-66 { order: 67 } .gallery__tile .gallery__tile__item-67 { order: 68 } .gallery__tile .gallery__tile__item-68 { order: 69 } .gallery__tile .gallery__tile__item-69 { order: 70 } .gallery__tile .gallery__tile__item-70 { order: 71 } .gallery__tile .gallery__tile__item-71 { order: 72 } .gallery__tile .gallery__tile__item-72 { order: 73 } .gallery__tile .gallery__tile__item-73 { order: 74 } .gallery__tile .gallery__tile__item-74 { order: 75 } .gallery__tile .gallery__tile__item-75 { order: 76 } .gallery__tile .gallery__tile__item-76 { order: 77 } .gallery__tile .gallery__tile__item-77 { order: 78 } .gallery__tile .gallery__tile__item-78 { order: 79 } .gallery__tile .gallery__tile__item-79 { order: 80 } .gallery__tile .gallery__tile__item-80 { order: 81 } .gallery__tile .gallery__tile__item-81 { order: 82 } .gallery__tile .gallery__tile__item-82 { order: 83 } .gallery__tile .gallery__tile__item-83 { order: 84 } .gallery__tile .gallery__tile__item-84 { order: 85 } .gallery__tile .gallery__tile__item-85 { order: 86 } .gallery__tile .gallery__tile__item-86 { order: 87 } .gallery__tile .gallery__tile__item-87 { order: 88 } .gallery__tile .gallery__tile__item-88 { order: 89 } .gallery__tile .gallery__tile__item-89 { order: 90 } .gallery__tile .gallery__tile__item-90 { order: 91 } .gallery__tile .gallery__tile__item-91 { order: 92 } .gallery__tile .gallery__tile__item-92 { order: 93 } .gallery__tile .gallery__tile__item-93 { order: 94 } .gallery__tile .gallery__tile__item-94 { order: 95 } .gallery__tile .gallery__tile__item-95 { order: 96 } .gallery__tile .gallery__tile__item-96 { order: 97 } .gallery__tile .gallery__tile__item-97 { order: 98 } .gallery__tile .gallery__tile__item-98 { order: 99 } .gallery__tile .gallery__tile__item-99 { order: 100 } .gallery__tile.devTest .gallery__tile__item::before { display: block; position: absolute; z-index: 9; bottom: 0; left: 0; color: #fc0; font-size: 25em; line-height: .6em } .gallery__tile.devTest .gallery__tile__item-0::before { content: "0" } .gallery__tile.devTest .gallery__tile__item-1::before { content: "1" } .gallery__tile.devTest .gallery__tile__item-2::before { content: "2" } .gallery__tile.devTest .gallery__tile__item-3::before { content: "3" } .gallery__tile.devTest .gallery__tile__item-4::before { content: "4" } .gallery__tile.devTest .gallery__tile__item-5::before { content: "5" } .gallery__tile.devTest .gallery__tile__item-6::before { content: "6" } .gallery__tile.devTest .gallery__tile__item-7::before { content: "7" } .gallery__tile.devTest .gallery__tile__item-8::before { content: "8" } .gallery__tile.devTest .gallery__tile__item-9::before { content: "9" } .gallery__tile.devTest .gallery__tile__item-10::before { content: "10" } .gallery__tile.devTest .gallery__tile__item-11::before { content: "11" } .gallery__tile.devTest .gallery__tile__item-12::before { content: "12" } .gallery__tile.devTest .gallery__tile__item-13::before { content: "13" } .gallery__tile.devTest .gallery__tile__item-14::before { content: "14" } .gallery__tile.devTest .gallery__tile__item-15::before { content: "15" } .gallery__tile.devTest .gallery__tile__item-16::before { content: "16" } .gallery__tile.devTest .gallery__tile__item-17::before { content: "17" } .gallery__tile.devTest .gallery__tile__item-18::before { content: "18" } .gallery__tile.devTest .gallery__tile__item-19::before { content: "19" } .gallery__tile.devTest .gallery__tile__item-20::before { content: "20" } .gallery__tile.devTest .gallery__tile__item-21::before { content: "21" } .gallery__tile.devTest .gallery__tile__item-22::before { content: "22" } .gallery__tile.devTest .gallery__tile__item-23::before { content: "23" } .gallery__tile.devTest .gallery__tile__item-24::before { content: "24" } .gallery__tile.devTest .gallery__tile__item-25::before { content: "25" } .gallery__tile.devTest .gallery__tile__item-26::before { content: "26" } .gallery__tile.devTest .gallery__tile__item-27::before { content: "27" } .gallery__tile.devTest .gallery__tile__item-28::before { content: "28" } .gallery__tile.devTest .gallery__tile__item-29::before { content: "29" } .gallery__tile.devTest .gallery__tile__item-30::before { content: "30" } .gallery__tile.devTest .gallery__tile__item-31::before { content: "31" } .gallery__tile.devTest .gallery__tile__item-32::before { content: "32" } .gallery__tile.devTest .gallery__tile__item-33::before { content: "33" } .gallery__tile.devTest .gallery__tile__item-34::before { content: "34" } .gallery__tile.devTest .gallery__tile__item-35::before { content: "35" } .gallery__tile.devTest .gallery__tile__item-36::before { content: "36" } .gallery__tile.devTest .gallery__tile__item-37::before { content: "37" } .gallery__tile.devTest .gallery__tile__item-38::before { content: "38" } .gallery__tile.devTest .gallery__tile__item-39::before { content: "39" } .gallery__tile.devTest .gallery__tile__item-40::before { content: "40" } .gallery__tile.devTest .gallery__tile__item-41::before { content: "41" } .gallery__tile.devTest .gallery__tile__item-42::before { content: "42" } .gallery__tile.devTest .gallery__tile__item-43::before { content: "43" } .gallery__tile.devTest .gallery__tile__item-44::before { content: "44" } .gallery__tile.devTest .gallery__tile__item-45::before { content: "45" } .gallery__tile.devTest .gallery__tile__item-46::before { content: "46" } .gallery__tile.devTest .gallery__tile__item-47::before { content: "47" } .gallery__tile.devTest .gallery__tile__item-48::before { content: "48" } .gallery__tile.devTest .gallery__tile__item-49::before { content: "49" } @media all and (min-width:1280px) { .gallery__tile .large-order-0 { order: 0 } .gallery__tile .large-order-1 { order: 1 } .gallery__tile .large-order-2 { order: 2 } .gallery__tile .large-order-3 { order: 3 } .gallery__tile .large-order-4 { order: 4 } .gallery__tile .large-order-5 { order: 5 } .gallery__tile .large-order-6 { order: 6 } .gallery__tile .large-order-7 { order: 7 } .gallery__tile .large-order-8 { order: 8 } .gallery__tile .large-order-9 { order: 9 } .gallery__tile .large-order-10 { order: 10 } .gallery__tile .large-order-11 { order: 11 } .gallery__tile .large-order-12 { order: 12 } .gallery__tile .large-order-13 { order: 13 } .gallery__tile .large-order-14 { order: 14 } .gallery__tile .large-order-15 { order: 15 } .gallery__tile .large-order-16 { order: 16 } .gallery__tile .large-order-17 { order: 17 } .gallery__tile .large-order-18 { order: 18 } .gallery__tile .large-order-19 { order: 19 } .gallery__tile .large-order-20 { order: 20 } .gallery__tile .large-order-21 { order: 21 } .gallery__tile .large-order-22 { order: 22 } .gallery__tile .large-order-23 { order: 23 } .gallery__tile .large-order-24 { order: 24 } .gallery__tile .large-order-25 { order: 25 } .gallery__tile .large-order-26 { order: 26 } .gallery__tile .large-order-27 { order: 27 } .gallery__tile .large-order-28 { order: 28 } .gallery__tile .large-order-29 { order: 29 } .gallery__tile .large-order-30 { order: 30 } .gallery__tile .large-order-31 { order: 31 } .gallery__tile .large-order-32 { order: 32 } .gallery__tile .large-order-33 { order: 33 } .gallery__tile .large-order-34 { order: 34 } .gallery__tile .large-order-35 { order: 35 } .gallery__tile .large-order-36 { order: 36 } .gallery__tile .large-order-37 { order: 37 } .gallery__tile .large-order-38 { order: 38 } .gallery__tile .large-order-39 { order: 39 } .gallery__tile .large-order-40 { order: 40 } .gallery__tile .large-order-41 { order: 41 } .gallery__tile .large-order-42 { order: 42 } .gallery__tile .large-order-43 { order: 43 } .gallery__tile .large-order-44 { order: 44 } .gallery__tile .large-order-45 { order: 45 } .gallery__tile .large-order-46 { order: 46 } .gallery__tile .large-order-47 { order: 47 } .gallery__tile .large-order-48 { order: 48 } .gallery__tile .large-order-49 { order: 49 } } @media all and (min-width:731px) and (max-width:1279.5px) { .gallery__tile .medium-order-0 { order: 0 } .gallery__tile .medium-order-1 { order: 1 } .gallery__tile .medium-order-2 { order: 2 } .gallery__tile .medium-order-3 { order: 3 } .gallery__tile .medium-order-4 { order: 4 } .gallery__tile .medium-order-5 { order: 5 } .gallery__tile .medium-order-6 { order: 6 } .gallery__tile .medium-order-7 { order: 7 } .gallery__tile .medium-order-8 { order: 8 } .gallery__tile .medium-order-9 { order: 9 } .gallery__tile .medium-order-10 { order: 10 } .gallery__tile .medium-order-11 { order: 11 } .gallery__tile .medium-order-12 { order: 12 } .gallery__tile .medium-order-13 { order: 13 } .gallery__tile .medium-order-14 { order: 14 } .gallery__tile .medium-order-15 { order: 15 } .gallery__tile .medium-order-16 { order: 16 } .gallery__tile .medium-order-17 { order: 17 } .gallery__tile .medium-order-18 { order: 18 } .gallery__tile .medium-order-19 { order: 19 } .gallery__tile .medium-order-20 { order: 20 } .gallery__tile .medium-order-21 { order: 21 } .gallery__tile .medium-order-22 { order: 22 } .gallery__tile .medium-order-23 { order: 23 } .gallery__tile .medium-order-24 { order: 24 } .gallery__tile .medium-order-25 { order: 25 } .gallery__tile .medium-order-26 { order: 26 } .gallery__tile .medium-order-27 { order: 27 } .gallery__tile .medium-order-28 { order: 28 } .gallery__tile .medium-order-29 { order: 29 } .gallery__tile .medium-order-30 { order: 30 } .gallery__tile .medium-order-31 { order: 31 } .gallery__tile .medium-order-32 { order: 32 } .gallery__tile .medium-order-33 { order: 33 } .gallery__tile .medium-order-34 { order: 34 } .gallery__tile .medium-order-35 { order: 35 } .gallery__tile .medium-order-36 { order: 36 } .gallery__tile .medium-order-37 { order: 37 } .gallery__tile .medium-order-38 { order: 38 } .gallery__tile .medium-order-39 { order: 39 } .gallery__tile .medium-order-40 { order: 40 } .gallery__tile .medium-order-41 { order: 41 } .gallery__tile .medium-order-42 { order: 42 } .gallery__tile .medium-order-43 { order: 43 } .gallery__tile .medium-order-44 { order: 44 } .gallery__tile .medium-order-45 { order: 45 } .gallery__tile .medium-order-46 { order: 46 } .gallery__tile .medium-order-47 { order: 47 } .gallery__tile .medium-order-48 { order: 48 } .gallery__tile .medium-order-49 { order: 49 } } @media all and (max-width:730.5px) { .gallery__tile .small-order-0 { order: 0 } .gallery__tile .small-order-1 { order: 1 } .gallery__tile .small-order-2 { order: 2 } .gallery__tile .small-order-3 { order: 3 } .gallery__tile .small-order-4 { order: 4 } .gallery__tile .small-order-5 { order: 5 } .gallery__tile .small-order-6 { order: 6 } .gallery__tile .small-order-7 { order: 7 } .gallery__tile .small-order-8 { order: 8 } .gallery__tile .small-order-9 { order: 9 } .gallery__tile .small-order-10 { order: 10 } .gallery__tile .small-order-11 { order: 11 } .gallery__tile .small-order-12 { order: 12 } .gallery__tile .small-order-13 { order: 13 } .gallery__tile .small-order-14 { order: 14 } .gallery__tile .small-order-15 { order: 15 } .gallery__tile .small-order-16 { order: 16 } .gallery__tile .small-order-17 { order: 17 } .gallery__tile .small-order-18 { order: 18 } .gallery__tile .small-order-19 { order: 19 } .gallery__tile .small-order-20 { order: 20 } .gallery__tile .small-order-21 { order: 21 } .gallery__tile .small-order-22 { order: 22 } .gallery__tile .small-order-23 { order: 23 } .gallery__tile .small-order-24 { order: 24 } .gallery__tile .small-order-25 { order: 25 } .gallery__tile .small-order-26 { order: 26 } .gallery__tile .small-order-27 { order: 27 } .gallery__tile .small-order-28 { order: 28 } .gallery__tile .small-order-29 { order: 29 } .gallery__tile .small-order-30 { order: 30 } .gallery__tile .small-order-31 { order: 31 } .gallery__tile .small-order-32 { order: 32 } .gallery__tile .small-order-33 { order: 33 } .gallery__tile .small-order-34 { order: 34 } .gallery__tile .small-order-35 { order: 35 } .gallery__tile .small-order-36 { order: 36 } .gallery__tile .small-order-37 { order: 37 } .gallery__tile .small-order-38 { order: 38 } .gallery__tile .small-order-39 { order: 39 } .gallery__tile .small-order-40 { order: 40 } .gallery__tile .small-order-41 { order: 41 } .gallery__tile .small-order-42 { order: 42 } .gallery__tile .small-order-43 { order: 43 } .gallery__tile .small-order-44 { order: 44 } .gallery__tile .small-order-45 { order: 45 } .gallery__tile .small-order-46 { order: 46 } .gallery__tile .small-order-47 { order: 47 } .gallery__tile .small-order-48 { order: 48 } .gallery__tile .small-order-49 { order: 49 } } @media all and (min-width:1280px) { .gallery__tile .large-grid-row-0 { grid-row-end: span 0 } .gallery__tile .large-grid-row-1 { grid-row-end: span 1 } .gallery__tile .large-grid-row-2 { grid-row-end: span 2 } .gallery__tile .large-grid-row-3 { grid-row-end: span 3 } .gallery__tile .large-grid-row-4 { grid-row-end: span 4 } .gallery__tile .large-grid-row-5 { grid-row-end: span 5 } .gallery__tile .large-grid-row-6 { grid-row-end: span 6 } } @media all and (min-width:731px) and (max-width:1279.5px) { .gallery__tile .medium-grid-row-0 { grid-row-end: span 0 } .gallery__tile .medium-grid-row-1 { grid-row-end: span 1 } .gallery__tile .medium-grid-row-2 { grid-row-end: span 2 } .gallery__tile .medium-grid-row-3 { grid-row-end: span 3 } .gallery__tile .medium-grid-row-4 { grid-row-end: span 4 } .gallery__tile .medium-grid-row-5 { grid-row-end: span 5 } .gallery__tile .medium-grid-row-6 { grid-row-end: span 6 } } @media all and (max-width:730.5px) { .gallery__tile .small-grid-row-0 { grid-row-end: span 0 } .gallery__tile .small-grid-row-1 { grid-row-end: span 1 } .gallery__tile .small-grid-row-2 { grid-row-end: span 2 } .gallery__tile .small-grid-row-3 { grid-row-end: span 3 } .gallery__tile .small-grid-row-4 { grid-row-end: span 4 } .gallery__tile .small-grid-row-5 { grid-row-end: span 5 } .gallery__tile .small-grid-row-6 { grid-row-end: span 6 } } @media all and (min-width:1280px) { .gallery__tile .large-grid-col-0 { grid-column-end: span 0 } .gallery__tile .large-grid-col-1 { grid-column-end: span 1 } .gallery__tile .large-grid-col-2 { grid-column-end: span 2 } .gallery__tile .large-grid-col-3 { grid-column-end: span 3 } .gallery__tile .large-grid-col-4 { grid-column-end: span 4 } .gallery__tile .large-grid-col-5 { grid-column-end: span 5 } .gallery__tile .large-grid-col-6 { grid-column-end: span 6 } } @media all and (min-width:731px) and (max-width:1279.5px) { .gallery__tile .medium-grid-col-0 { grid-column-end: span 0 } .gallery__tile .medium-grid-col-1 { grid-column-end: span 1 } .gallery__tile .medium-grid-col-2 { grid-column-end: span 2 } .gallery__tile .medium-grid-col-3 { grid-column-end: span 3 } .gallery__tile .medium-grid-col-4 { grid-column-end: span 4 } .gallery__tile .medium-grid-col-5 { grid-column-end: span 5 } .gallery__tile .medium-grid-col-6 { grid-column-end: span 6 } } @media all and (max-width:730.5px) { .gallery__tile .small-grid-col-0 { grid-column-end: span 0 } .gallery__tile .small-grid-col-1 { grid-column-end: span 1 } .gallery__tile .small-grid-col-2 { grid-column-end: span 2 } .gallery__tile .small-grid-col-3 { grid-column-end: span 3 } .gallery__tile .small-grid-col-4 { grid-column-end: span 4 } .gallery__tile .small-grid-col-5 { grid-column-end: span 5 } .gallery__tile .small-grid-col-6 { grid-column-end: span 6 } } .section__military__grade .wd__content .content__slogan { color: #000 } .section__military__grade .wd__content .content__title { color: #333 } .section__military__grade .wd__content .content__info { color: #333 } .section__military__grade .wd__feature__list .wd__feature__data, .section__military__grade .wd__feature__list .wd__feature__data *, .section__military__grade .wd__feature__list .wd__feature__describe, .section__military__grade .wd__feature__list .wd__feature__describe *, .section__military__grade .wd__feature__list .wd__feature__describe__top, .section__military__grade .wd__feature__list .wd__feature__describe__top * { color: #333 } .section__military__grade .gallery__tile__item { background-color: #ccc } .section__military__grade .gallery__tile .item__head__slogan-text { color: #000 } .section__military__grade .gallery__tile .item__content-main { color: #181818 } .section__military__grade .gallery__tile .item__content-sub { color: #afafaf } .section__military__grade.theme-black { background-color: #000 } .section__military__grade.theme-black .gallery__tile__item { background-color: #171717 } .section__military__grade.theme-black .gallery__tile .item__head__slogan-text span { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -moz-linear-gradient(90deg, #f2c370 0, #fff7e2 44%, #f3b35d 100%); background-image: -webkit-linear-gradient(90deg, #f2c370 0, #fff7e2 44%, #f3b35d 100%); background-image: -ms-linear-gradient(90deg, #f2c370 0, #fff7e2 44%, #f3b35d 100%); background-image: linear-gradient(90deg, #f2c370 0, #fff7e2 44%, #f3b35d 100%); display: block } .section__military__grade.theme-black .gallery__tile .item__content-main { color: #fff } .section__military__grade.theme-black .gallery__tile .item__content-sub { color: #afafaf } @media all and (max-width:730.5px) { .section__military__grade .item__content-main, .section__military__grade .item__content-main * { color: #afafaf } } .section__military__grade { margin-top: 0; padding-top: 0 } .section__military__grade .wd__content { position: relative; z-index: 5 } .section__military__grade .wd__content .content__info { color: #fff } .section__military__grade .wd__feature__list { z-index: 4 } .section__military__grade .gallery__tile .item__head { display: flex; align-items: center } .section__military__grade .gallery__tile .item__head__slogan-text { padding-left: 20px; text-align: left; line-height: 1.4 } .section__military__grade .gallery__tile .img__slogan { width: 84px; height: 76px } .section__military__grade .gallery__tile .item__content { text-align: left; line-height: 1.4 } .section__military__grade .gallery__tile .item__content-main { margin-bottom: 5px } .section__military__grade .gallery__tile .item__content-sub { margin-bottom: 15px; color: #afafaf } .section__military__grade .gallery__tile .item__content-sub .item__content-text { margin-bottom: 5px } .section__military__grade .image__container { position: relative; overflow: hidden; z-index: 1 } .section__military__grade .img__main { z-index: 1 } .section__military__grade .gallery__tile__item-0 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_0.png) } .section__military__grade .gallery__tile__item-1 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_1.png) } .section__military__grade .gallery__tile__item-2 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_2.png) } .section__military__grade .gallery__tile__item-3 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_3.png) } .section__military__grade .gallery__tile__item-4 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_4.png) } .section__military__grade .gallery__tile__item-5 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_5.png) } .section__military__grade .gallery__tile__item-6 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_6.png) } .section__military__grade .gallery__tile__item-7 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_7.png) } .section__military__grade .gallery__tile__item-8 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_8.png) } .section__military__grade .gallery__tile__item-9 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_9.png) } .section__military__grade .gallery__tile__item-10 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_10.png) } .section__military__grade .gallery__tile__item-11 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_11.png) } .section__military__grade .gallery__tile__item-12 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_12.png) } .section__military__grade .gallery__tile__item-13 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_13.png) } .section__military__grade .gallery__tile__item-14 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_14.png) } .section__military__grade .gallery__tile__item-15 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_15.png) } .section__military__grade .gallery__tile__item-16 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_16.png) } .section__military__grade .gallery__tile__item-17 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_17.png) } .section__military__grade .gallery__tile__item-18 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_18.png) } .section__military__grade .gallery__tile__item-19 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_19.png) } .section__military__grade .gallery__tile__item-20 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_20.png) } .section__military__grade .gallery__tile__item-21 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_21.png) } .section__military__grade .gallery__tile__item-22 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_22.png) } .section__military__grade .gallery__tile__item-23 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_23.png) } .section__military__grade .gallery__tile__item-24 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_24.png) } .section__military__grade .gallery__tile__item-25 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_25.png) } .section__military__grade .gallery__tile__item-26 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_26.png) } .section__military__grade .gallery__tile__item-27 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_27.png) } .section__military__grade .gallery__tile__item-28 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_28.png) } .section__military__grade .gallery__tile__item-29 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_29.png) } .section__military__grade .gallery__tile__item-30 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_30.png) } .section__military__grade .gallery__tile__item-31 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_31.png) } .section__military__grade .gallery__tile__item-32 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_32.png) } .section__military__grade .gallery__tile__item-33 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_33.png) } .section__military__grade .gallery__tile__item-34 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_34.png) } .section__military__grade .gallery__tile__item-35 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_35.png) } .section__military__grade .gallery__tile__item-36 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_36.png) } .section__military__grade .gallery__tile__item-37 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_37.png) } .section__military__grade .gallery__tile__item-38 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_38.png) } .section__military__grade .gallery__tile__item-39 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_39.png) } .section__military__grade .gallery__tile__item-40 .gallery__tile__item { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_40.png) } .section__military__grade .gallery__tile__item .icon-shocktest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_shocktest.png) } .section__military__grade .gallery__tile__item .icon-vibrationtest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_vibrationtest.png) } .section__military__grade .gallery__tile__item .icon-hightemperaturetest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_hightemperaturetest.png) } .section__military__grade .gallery__tile__item .icon-lowtemperaturetest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_lowtemperaturetest.png) } .section__military__grade .gallery__tile__item .icon-humiditytest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_humiditytest.png) } .section__military__grade .gallery__tile__item .icon-temperatureshocktest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_temperatureshocktest.png) } .section__military__grade .gallery__tile__item .icon-sandanddusttest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_sandanddusttest.png) } .section__military__grade .gallery__tile__item .icon-freezethawtest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_freezethawtest.png) } .section__military__grade .gallery__tile__item .icon-altitudetest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_altitudetest.png) } .section__military__grade .gallery__tile__item .icon-solarradiationtest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_solarradiationtest.png) } .section__military__grade .gallery__tile__item .icon-mechanicalvibrationtest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_mechanicalvibrationtest.png) } .section__military__grade .gallery__tile__item .icon-explosiveatmospheretest { background-image: url(../../common/sections/militaryGrade/images/outer/large/1x/icon_explosiveatmospheretest.png) } .section__military__grade.use-page-imgs .gallery__tile__item-0 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_0.png) } .section__military__grade.use-page-imgs .gallery__tile__item-1 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_1.png) } .section__military__grade.use-page-imgs .gallery__tile__item-2 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_2.png) } .section__military__grade.use-page-imgs .gallery__tile__item-3 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_3.png) } .section__military__grade.use-page-imgs .gallery__tile__item-4 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_4.png) } .section__military__grade.use-page-imgs .gallery__tile__item-5 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_5.png) } .section__military__grade.use-page-imgs .gallery__tile__item-6 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_6.png) } .section__military__grade.use-page-imgs .gallery__tile__item-7 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_7.png) } .section__military__grade.use-page-imgs .gallery__tile__item-8 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_8.png) } .section__military__grade.use-page-imgs .gallery__tile__item-9 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_9.png) } .section__military__grade.use-page-imgs .gallery__tile__item-10 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_10.png) } .section__military__grade.use-page-imgs .gallery__tile__item-11 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_11.png) } .section__military__grade.use-page-imgs .gallery__tile__item-12 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_12.png) } .section__military__grade.use-page-imgs .gallery__tile__item-13 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_13.png) } .section__military__grade.use-page-imgs .gallery__tile__item-14 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_14.png) } .section__military__grade.use-page-imgs .gallery__tile__item-15 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_15.png) } .section__military__grade.use-page-imgs .gallery__tile__item-16 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_16.png) } .section__military__grade.use-page-imgs .gallery__tile__item-17 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_17.png) } .section__military__grade.use-page-imgs .gallery__tile__item-18 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_18.png) } .section__military__grade.use-page-imgs .gallery__tile__item-19 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_19.png) } .section__military__grade.use-page-imgs .gallery__tile__item-20 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_20.png) } .section__military__grade.use-page-imgs .gallery__tile__item-21 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_21.png) } .section__military__grade.use-page-imgs .gallery__tile__item-22 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_22.png) } .section__military__grade.use-page-imgs .gallery__tile__item-23 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_23.png) } .section__military__grade.use-page-imgs .gallery__tile__item-24 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_24.png) } .section__military__grade.use-page-imgs .gallery__tile__item-25 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_25.png) } .section__military__grade.use-page-imgs .gallery__tile__item-26 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_26.png) } .section__military__grade.use-page-imgs .gallery__tile__item-27 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_27.png) } .section__military__grade.use-page-imgs .gallery__tile__item-28 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_28.png) } .section__military__grade.use-page-imgs .gallery__tile__item-29 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_29.png) } .section__military__grade.use-page-imgs .gallery__tile__item-30 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_30.png) } .section__military__grade.use-page-imgs .gallery__tile__item-31 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_31.png) } .section__military__grade.use-page-imgs .gallery__tile__item-32 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_32.png) } .section__military__grade.use-page-imgs .gallery__tile__item-33 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_33.png) } .section__military__grade.use-page-imgs .gallery__tile__item-34 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_34.png) } .section__military__grade.use-page-imgs .gallery__tile__item-35 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_35.png) } .section__military__grade.use-page-imgs .gallery__tile__item-36 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_36.png) } .section__military__grade.use-page-imgs .gallery__tile__item-37 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_37.png) } .section__military__grade.use-page-imgs .gallery__tile__item-38 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_38.png) } .section__military__grade.use-page-imgs .gallery__tile__item-39 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_39.png) } .section__military__grade.use-page-imgs .gallery__tile__item-40 .gallery__tile__item { background-image: url(../sections/militaryGrade/images/outer/large/1x/icon_40.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-shocktest { background-image: url(../images/icon_shocktest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-vibrationtest { background-image: url(../images/icon_vibrationtest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-hightemperaturetest { background-image: url(../images/icon_hightemperaturetest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-lowtemperaturetest { background-image: url(../images/icon_lowtemperaturetest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-humiditytest { background-image: url(../images/icon_humiditytest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-temperatureshocktest { background-image: url(../images/icon_temperatureshocktest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-sandanddusttest { background-image: url(../images/icon_sandanddusttest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-freezethawtest { background-image: url(../images/icon_freezethawtest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-altitudetest { background-image: url(../images/icon_altitudetest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-solarradiationtest { background-image: url(../images/icon_solarradiationtest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-mechanicalvibrationtest { background-image: url(../images/icon_mechanicalvibrationtest.png) } .section__military__grade.use-page-imgs .gallery__tile__item .icon-explosiveatmospheretest { background-image: url(../images/icon_explosiveatmospheretest.png) } .section__military__grade .gallery__tile .img__slogan { background-size: contain } .section__creatorhub-outer-s1 { overflow: hidden } .section__creatorhub-outer-s1 .wdtab__nav { z-index: -1; top: 40px; visibility: hidden; opacity: 0; height: 0 } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay { z-index: 6 } .section__creatorhub-outer-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #fff; fill: #000 } .section__creatorhub-outer-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s1 .wdtab__panel__item .img__main { margin: 0 auto; background-position: 50%; background-repeat: no-repeat; background-size: contain } .section__creatorhub-outer-s2 { overflow: hidden } .section__creatorhub-outer-s2 .wd__feature__list { z-index: 2 } .section__creatorhub-outer-s2 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: transparent; fill: transparent } .section__creatorhub-outer-s2 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s2 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s2 .wdtab .wdtab__nav { background-color: transparent } .section__creatorhub-outer-s2 .wdtab .wdtab__nav::before { display: none } .section__creatorhub-outer-s2 .wdtab .wdtab__nav .wdtab__nav-btn { margin: 0 20px; padding: 11px 0; color: grey; border: 2px solid grey; border-radius: 40px } .section__creatorhub-outer-s2 .wdtab .wdtab__nav .wdtab__nav-btn::before { display: none } .section__creatorhub-outer-s2 .wdtab .slick-info-text { color: #fff; line-height: 1.5 } .section__creatorhub-outer-s2 .wdtab .wdtab__nav-btn.active, .section__creatorhub-outer-s2 .wdtab .wdtab__nav-btn.focus-visible, .section__creatorhub-outer-s2 .wdtab .wdtab__nav-btn:hover { color: #fff; outline: 0; border-color: #9ecaed; box-shadow: 0 0 12px #9ecaed; background-color: rgba(255, 255, 255, .15) } .section__creatorhub-outer-s3 { position: relative; overflow: hidden } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay { z-index: 10 } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: transparent; fill: transparent } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s3 .wdtab__nav { z-index: 10; background-color: transparent } .section__creatorhub-outer-s3 .wdtab__nav::before { display: none } .section__creatorhub-outer-s3 .wdtab__nav .wdtab__nav-btn { margin: 0 20px; padding: 11px 0; color: grey; border: 2px solid grey; border-radius: 40px } .section__creatorhub-outer-s3 .wdtab__nav .wdtab__nav-btn::before { display: none } .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn.active, .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn.focus-visible, .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn:hover { color: #fff; outline: 0; border-color: #9ecaed; background-color: rgba(255, 255, 255, .15); box-shadow: 0 0 12px #9ecaed } .section__creatorhub-outer-s3 .wdtab .wdtab__panel__item { position: relative; transition: opacity 1s ease 0s; transition-delay: .8s } .section__creatorhub-outer-s3 .wdtab .wdtab__panel__item.active { transition-delay: 0s } .section__creatorhub-outer-s3 .wdtab .slick-info { position: relative; z-index: 2; margin: 0 auto; padding-bottom: 50px; width: 90%; max-width: 800px; color: #fff } .section__creatorhub-outer-s3 .wdtab .slick-info .slick-info-text { font-size: 1.125rem; text-align: center; line-height: 1.5 } .section__creatorhub-outer-s3 .wdtab .slick-image { overflow: visible; top: 0; left: 50%; margin: 0; margin-top: 0; width: 2560px; height: 714px; transform: translateX(-50%) } .section__creatorhub-outer-s3 .wdtab .img-slick { left: 50%; margin-left: -1280px; width: 2560px; height: 714px; position: absolute; z-index: 3; top: 0; background-color: #fff } #CMD .section__creatorhub-outer-s3 .img-slick { background-image: url(../images/pd.jpg) } #CMD .section__creatorhub-outer-s3 .img-slick { mask: url(../images/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { background-image: url(../images/pd.jpg) } #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { mask: url(../images/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__creatorhub-outer-s3 .wdtab .bigScreen { position: absolute; z-index: 2; top: 147px; width: 100%; height: 264px; background-color: rgba(0, 0, 0, .5) } .section__creatorhub-outer-s3 .wdtab .smallScreen { position: absolute; bottom: 0; width: 100%; height: 253px; background: #000; background-size: contain } #wdTab-screenpad-0 .nav__icon { -webkit-mask-image: url(../images/icon0.png); mask-image: url(../images/icon0.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-1 .nav__icon { -webkit-mask-image: url(../images/icon1.png); mask-image: url(../images/icon1.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-2 .nav__icon { -webkit-mask-image: url(../images/icon2.png); mask-image: url(../images/icon2.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-3 .nav__icon { -webkit-mask-image: url(../images/icon3.png); mask-image: url(../images/icon3.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-4 .nav__icon { -webkit-mask-image: url(../images/icon4.png); mask-image: url(../images/icon4.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-5 .nav__icon { -webkit-mask-image: url(../images/icon5.png); mask-image: url(../images/icon5.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-6 .nav__icon { -webkit-mask-image: url(../images/icon6.png); mask-image: url(../images/icon6.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-7 .nav__icon { -webkit-mask-image: url(../images/icon7.png); mask-image: url(../images/icon7.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-8 .nav__icon { -webkit-mask-image: url(../images/icon8.png); mask-image: url(../images/icon8.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } .section__creatorhub-outer-s4 { overflow: hidden; margin-top: 0; padding-top: 0 } .section__creatorhub-outer-s4 .wdtab { margin: 63px auto 0; margin-top: 620px; padding-bottom: 0; width: 100%; max-width: 1128px; min-height: 438px } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay { z-index: 10 } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { fill: transparent; stroke: transparent } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav { z-index: 10; padding-top: 40px; background-color: transparent } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container { position: relative; z-index: 3 } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__icon { margin: 0 auto; width: 80px; height: 80px; pointer-events: none; background-color: #fff; background-size: contain } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__text { text-transform: none!important; padding-top: 9px; padding-bottom: 17px; color: #fff; pointer-events: none; line-height: 1.2 } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn::before { display: block; position: absolute; bottom: -5px; left: calc(50% - 5.5px); width: 10px; height: 10px; border: 1px solid #fff; border-radius: 20px; background-color: #000; transform: none!important; content: "" } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active::before, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.focus-visible::before, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn:hover::before { border-color: #7e57ff; background-color: #7e57ff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active .nav__icon, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.focus-visible .nav__icon, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn:hover .nav__icon { background-color: #7e57ff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active .nav__text, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.focus-visible .nav__text, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn:hover .nav__text { color: #7e57ff } .section__creatorhub-outer-s4 .wdtab .wdtab__panel { overflow: visible; z-index: 1 } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item { position: relative; transition: opacity 1s ease 0s; transition-delay: .8s } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item.active { transition-delay: 0s } .section__creatorhub-outer-s4 .wdtab .slick-info { margin: 0 auto; padding-bottom: 100px; width: 90%; max-width: 800px; color: #fff } .section__creatorhub-outer-s4 .wdtab .slick-info .slick-info-text { position: relative; z-index: 3; line-height: 1.5 } .section__creatorhub-outer-s4 .wdtab .slick-info::before { display: block; position: absolute; z-index: 1; top: -190px; left: 50%; margin-left: -720px; width: 1440px; height: calc(100% + 132px); background: linear-gradient(to left, rgba(25, 35, 52, 0) 0, rgba(25, 35, 52, .87) 15%, rgba(25, 35, 52, .87) 85%, rgba(25, 35, 52, 0) 100%); content: "" } .section__creatorhub-outer-s4 .wdtab .slick-image { position: absolute; overflow: visible; z-index: -1; top: -920px; left: 50%; margin: 0; margin-top: 0; width: 2560px; height: 1200px; transform: translateX(-50%) } .section__creatorhub-outer-s4 .wdtab .img-slick { left: 50%; margin-left: -1280px; width: 2560px; height: 1200px; position: absolute; z-index: 9; top: unset; bottom: 0; background-color: #fff } #CMD .section__creatorhub-outer-s4 .img-slick { background-image: url(../images/pd.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick { mask: url(../images/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { background-image: url(../images/pd.jpg) } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { mask: url(../images/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4 .img-slick-1 { background-image: url(../images/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-1 { mask: url(../images/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { background-image: url(../images/pd_2.jpg) } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { mask: url(../images/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4 .img-slick-2 { background-image: url(../images/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-2 { mask: url(../images/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { background-image: url(../images/pd_2.jpg) } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { mask: url(../images/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__creatorhub-outer-s4 .wdtab .bigScreen { position: absolute; z-index: 3; top: 147px; width: 100%; height: 260px; background: #000 } .section__creatorhub-outer-s4 .wdtab .smallScreen { position: absolute; bottom: 500px; width: 100%; height: 253px; background: #000; background-size: contain } .section__creatorhub-outer-s4 .wdtab .monitorScreen { position: absolute; top: 199px; left: 1280px; width: 1060px; height: 329px; background: #000 } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .bigScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .bigScreen { top: 376px; left: 669px; width: 560px; height: 160px } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .smallScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .smallScreen { top: 558px; left: 731px; width: 495px; height: 148px } .creatorhub-outer .wd__content .content__slogan { color: #888a8c } .creatorhub-outer .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .creatorhub-outer .wd__content .content__info { color: #fff } .creatorhub-outer sup.sign-cr, .creatorhub-outer sup.sign-deg, .creatorhub-outer sup.sign-star, .creatorhub-outer sup.sign-tm { color: #fff } .creatorhub-outer .wdtab .wdtab__autoPlay { opacity: .5!important } .creatorhub-outer .wdtab .wdtab__autoPlay:hover { opacity: 1!important } .creatorhub-outer .tab__video_control .tab__video_control_button { position: relative; cursor: pointer; opacity: 0; padding: 0; width: 36px; height: 36px; border-width: 0; background-color: transparent } .creatorhub-outer .tab__video_control .tab__video_control_button svg { opacity: .5 } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-circle, .creatorhub-outer .tab__video_control .tab__video_control_button .svg-line { stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; fill-rule: evenodd } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-circle { fill: transparent; stroke: #fff } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-line { fill: #fff; stroke: #fff } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-triangle { opacity: 0; fill: #fff } .creatorhub-outer .tab__video_control .tab__video_control_button.show { opacity: 1 } .creatorhub-outer .tab__video_control .tab__video_control_button.resume .svg-line { opacity: 0 } .creatorhub-outer .tab__video_control .tab__video_control_button.resume .svg-triangle { opacity: 1 } .creatorhub-outer .tab__video_control .tab__video_control_button:hover svg { opacity: 1 } .section__software-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #000 } .section__software-outer-s1 .wd__content .content__slogan { color: #6b6e70 } .section__software-outer-s1 .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .section__software-outer-s1 .wd__content .content__info { color: #fff } .section__software-outer-s1 .wd__content .content__link { background-image: linear-gradient(to right, #1ef9ef 0, #1ef9ef 100%); color: #1ef9ef } .section__software-outer-s1 .software-infos { position: relative; margin-top: -530px } .section__software-outer-s1 .software-info { display: flex; overflow: hidden; align-items: center; justify-content: center; margin: 24px auto 0; max-width: 1144px; border-radius: 20px; background: linear-gradient(to top, #404f60 0, #0e1115 30%) padding-box } .section__software-outer-s1 .software-info .wd__content { padding: 54px 0 19px } .section__software-outer-s1 .software-info .wd__content .content__title { background-image: linear-gradient(to right, #fff 0, #fff 100%) } .section__software-outer-s1 .software-info-icon0-outer { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 260px } .section__software-outer-s1 .software-info-icon0 { width: 110px; height: 110px } .section__software-outer-s1 .software-info-icon0 img { width: 100%; height: 100% } .section__software-outer-s1 .software-info .wd__feature__list .img__icon { filter: brightness(10) } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__data, .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__data *, .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe, .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe *, .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe__top, .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-left: 0; max-width: 125px } .section__software-outer-s1 .img__main { margin: -212px auto 0; width: 100%; max-width: 2972px; height: 1300px } .section__software-outer-s1 .img__main.use-page-imgs { background-image: url(../images/main-t.jpg) } .section__software-outer-s1 .img__main { background-image: url(../images/main-y.jpg) } #CMD .section__software-outer-s1 .software-info1 .img__icon0 { background-image: url(../images/icon1-0.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon1 { background-image: url(../images/icon1-1.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon2 { background-image: url(../images/icon1-2.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon3 { background-image: url(../images/icon1-3.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon4 { background-image: url(../images/icon1-4.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon5 { background-image: url(../images/icon1-5.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon6 { background-image: url(../images/icon1-6.png) } .section__software-outer-s1 .software-info1 .wd__feature__data { width: 110px } #CMD .section__software-outer-s1 .software-info2 .img__icon0 { background-image: url(../images/icon2-0.png) } #CMD .section__software-outer-s1 .software-info2 .img__icon1 { background-image: url(../images/icon2-1.png) } #CMD .section__software-outer-s1 .software-info2 .img__icon2 { background-image: url(../images/icon2-2.png) } .section__software-outer-s1 .software-info2 .wd__feature__data { width: 160px } #CMD .section__software-outer-s1 .software-info3 .img__icon0 { background-image: url(../images/icon3-0.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon1 { background-image: url(../images/icon3-1.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon2 { background-image: url(../images/icon3-2.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon3 { background-image: url(../images/icon3-3.png) } .section__software-outer-s1 .software-info3 .wd__feature__data { width: 110px } .section__spatialVision-outer-s1 { overflow: hidden; background-color: #000 } .section__spatialVision-outer-s1 .image_container { position: relative; left: 50%; margin-top: 22px; margin-left: -1280px; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .image_container .ani_enter_detect { top: 50% } .section__spatialVision-outer-s1 .image_container .img__bg { position: absolute; top: 0; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .img__bg { background-image: url(../images/bg-1.jpg) } .section__spatialVision-outer-s1 .image_container .img__explode_back { position: absolute; top: 0; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .img__explode_back { background-image: url(../images/explode_back.jpg) } .section__spatialVision-outer-s1 .image_container .img__explode { position: absolute; top: 0; width: 2560px; height: 830px; mask: url(../images/explode_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/explode_mask.png); -webkit-mask-position: top; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat } .section__spatialVision-outer-s1 .image_container .img__explode_1 { position: absolute; z-index: 2; top: -1px; left: 50%; margin-left: -285px; width: 1008px; height: 710px } .section__spatialVision-outer-s1 .img__explode_1 { background-image: url(../images/explode_1.jpg) } .section__spatialVision-outer-s1 .img__explode_1 { mask: url(../images/explode_1_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/explode_1_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__spatialVision-outer-s1 .image_container .img__explode_2 { position: absolute; z-index: 4; top: 49px; left: 50%; margin-left: 18px; width: 704px; height: 642px } .section__spatialVision-outer-s1 .img__explode_2 { background-image: url(../images/explode_2.jpg) } .section__spatialVision-outer-s1 .img__explode_2 { mask: url(../images/explode_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/explode_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__spatialVision-outer-s1 .image_container .img__explode_3 { position: absolute; z-index: 3; top: 36px; left: 50%; margin-left: -50px; width: 781px; height: 673px } .section__spatialVision-outer-s1 .img__explode_3 { background-image: url(../images/explode_3.jpg) } .section__spatialVision-outer-s1 .img__explode_3 { mask: url(../images/explode_3_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/explode_3_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__spatialVision-outer-s1 .image_container .img__shadow { position: absolute; z-index: 1; top: 0; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .img__shadow { background-image: url(../images/shadow.png) } .section__spatialVision-outer-s1 .wd__feature__list { display: flex; justify-content: center; margin-top: -30px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon { margin: 0 11px 40px; padding: 56px 32px; width: 366px; border-radius: 20px; background-image: linear-gradient(125deg, #042736, #1c0e2d) } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top { display: block; margin-bottom: 23px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top .img__icon { margin: 0 auto; width: 126px; height: 91px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { font-size: 2.125rem; line-height: 1.2; background-image: linear-gradient(to right, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data * { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #9846f4, #9846f4 90%) } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: 8px; line-height: 1.5; max-width: 280px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe, .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe * { color: #fff; font-size: 1.25rem } .section__spatialVision-outer-s1 .wd__feature .img__icon1 { background-image: url(../images/icon_glassesFree.png) } .section__spatialVision-outer-s1 .wd__feature .img__icon2 { background-image: url(../images/icon_crosstalk.png) } .section__spatialVision-outer-s1 .wd__feature .img__icon3 { background-image: url(../images/icon_switch.png) } .section__spatialVision-outer-s1 .img__explode_back { opacity: 0; transition: opacity 0s } .section__spatialVision-outer-s1 .img__explode_1 { opacity: 0; transform: scale(.8); transition: transform 0s, opacity 0s; transform-origin: right 60% } .section__spatialVision-outer-s1 .img__explode_2 { opacity: 0; transform: scale(.7) rotate(5deg); transition: transform 0s, opacity 0s; transform-origin: 70% 50% } .section__spatialVision-outer-s1 .img__explode_3 { opacity: 0; transform: scale(.8); transition: transform 0s, opacity 0s; transform-origin: 47% 89% } .section__spatialVision-outer-s1 .img__shadow { opacity: 0; transform: translate(30px); transition: transform 0s, opacity 0s; transform-origin: right 60% } .section__spatialVision-outer-s1 .image_container.playAni .img__explode_back { opacity: 1; transition: opacity .2s linear .3s } .section__spatialVision-outer-s1 .image_container.playAni .img__explode_1 { opacity: 1; transform: scale(1); transition: transform .5s cubic-bezier(.04, 0, .08, .96) 470ms, opacity .2s linear 450ms } .section__spatialVision-outer-s1 .image_container.playAni .img__shadow { opacity: 1; transform: translate(0); transition: transform 2s cubic-bezier(.04, 0, .08, .96) .5s, opacity .2s linear 450ms } .section__spatialVision-outer-s2 { overflow: hidden; background-color: #000 } .section__spatialVision-outer-s2 .category_container { display: flex; position: relative; z-index: 20; justify-content: space-between; margin: 0 auto; margin-top: 62px; width: 1140px } .section__spatialVision-outer-s2 .category_container .category-item { width: 216px } .section__spatialVision-outer-s2 .category_container .category-item-2 { margin-top: 58px } .section__spatialVision-outer-s2 .category_container .category-item-3 { margin-top: 22px } .section__spatialVision-outer-s2 .category_container .category-item-4 { margin-top: 82px } .section__spatialVision-outer-s2 .category_container .category-item-5 { margin-top: 22px } .section__spatialVision-outer-s2 .category_container .wd__content { padding-left: 16px } .section__spatialVision-outer-s2 .category_container .wd__content::before { display: block; position: absolute; top: 5px; left: 0; width: 1px; height: calc(100% - 13px); background-color: #848484; content: "" } .section__spatialVision-outer-s2 .category_container .wd__content .content__title { font-size: 1.5625rem } .section__spatialVision-outer-s2 .category_container .wd__content .content__info { margin-top: 5px; color: #848484; font-size: 1rem } .section__spatialVision-outer-s2 .category_container .category_img { margin-top: 16px; width: 216px; height: 250px; border-radius: 20px } .section__spatialVision-outer-s2 .category_container .category-item-1 .category_img_1 { background-image: url(../images/blockimg1_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-1 .category_img_2 { background-image: url(../images/blockimg1_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-2 .category_img_1 { background-image: url(../images/blockimg2_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-2 .category_img_2 { background-image: url(../images/blockimg2_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-3 .category_img_1 { background-image: url(../images/blockimg3_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-3 .category_img_2 { background-image: url(../images/blockimg3_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-4 .category_img_1 { background-image: url(../images/blockimg4_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-4 .category_img_2 { background-image: url(../images/blockimg4_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-5 .category_img_1 { background-image: url(../images/blockimg5_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-5 .category_img_2 { background-image: url(../images/blockimg5_2.jpg) } .section__spatialVision-outer-s3 { z-index: 10; background-color: #000 } .section__spatialVision-outer-s3 .imgAni { position: relative } .section__spatialVision-outer-s3 .image_container { position: relative; overflow: hidden; margin-top: -913px } .section__spatialVision-outer-s3 .image_container .ani_enter_detect { top: 50% } .section__spatialVision-outer-s3 .image_container .img_bg { left: 50%; margin-left: -1280px; width: 2560px; height: 1204px } .section__spatialVision-outer-s3 .img_bg { background-image: url(../images/bg-3.jpg) } .section__spatialVision-outer-s3 .image_container .img_3d_left { position: absolute; top: 0; left: 50%; margin-left: -1280px; width: 2560px; height: 1204px } .section__spatialVision-outer-s3 .img_3d_left { background-image: url(../images/3d_left.jpg) } .section__spatialVision-outer-s3 .image_container .img_3d_right { position: absolute; top: 0; left: 50%; margin-left: -1280px; width: 2560px; height: 1204px } .section__spatialVision-outer-s3 .img_3d_right { background-image: url(../images/3d_right.jpg) } .section__spatialVision-outer-s3 .image_container .img_ani_text { position: absolute; top: 679px; left: 50%; width: 50px; color: #fff; font-size: 1.4375rem } .section__spatialVision-outer-s3 .image_container .img_ani_text_left { margin-left: 140px } .section__spatialVision-outer-s3 .image_container .img_ani_text_right { margin-left: 265px } .section__spatialVision-outer-s3 .info_box { position: absolute; z-index: 10; top: 933px; left: 50%; margin-left: -62px; padding: 21px 20px 20px 30px; border: 1px solid #fff } .section__spatialVision-outer-s3 .info_box .text_right::before { display: block; position: absolute; top: 15px; left: 16px; width: 10px; height: 31px; background-color: #006cff; content: "" } .section__spatialVision-outer-s3 .info_box .text_left::before { display: block; position: absolute; top: 46px; left: 16px; width: 10px; height: 31px; background-color: #00ffea; content: "" } .section__spatialVision-outer-s3 .info_box .info_text { padding-left: 7px; color: #fff; font-size: .96875rem; text-align: left; line-height: 1.4 } .section__spatialVision-outer-s3 .info_box .info_text_right { padding-bottom: 8px } .section__spatialVision-outer-s3 .img_3d_left { opacity: 0 } .section__spatialVision-outer-s3 .img_3d_right { opacity: 0 } .section__spatialVision-outer-s3 .img_ani_text_left, .section__spatialVision-outer-s3 .img_ani_text_right { opacity: 0 } .section__spatialVision-outer-s3 .image_container.playAni .img_3d_left, .section__spatialVision-outer-s3 .image_container.playAni .img_ani_text_left { opacity: 1; transition: opacity .2s linear 1s } .section__spatialVision-outer-s3 .image_container.playAni .img_3d_right, .section__spatialVision-outer-s3 .image_container.playAni .img_ani_text_right { opacity: 1; transition: opacity .2s linear 2s } .section__spatialVision-outer-s4 { overflow: hidden; background-color: #000 } .section__spatialVision-outer-s4 .nav_container { margin: 62px auto 0; width: 820px } .section__spatialVision-outer-s4 .nav_container .home { margin: 0 auto; width: 380px } .section__spatialVision-outer-s4 .nav_container .home .icon_home { margin: 0 auto; width: 93px; height: 100px } .section__spatialVision-outer-s4 .icon_home { background-image: url(../images/icon_3DHub.png) } .section__spatialVision-outer-s4 .nav_container .home .text__ttnormal { margin-top: 17px; color: #fff; font-size: 1.625rem } .section__spatialVision-outer-s4 .nav_container .icon_line { margin: 30px auto 0; width: 647px; height: 26px; background-size: contain } .section__spatialVision-outer-s4 .icon_line { background-image: url(../images/icon_line.png) } .section__spatialVision-outer-s4 .nav_container .child_container { display: flex; justify-content: space-between; margin-top: 25px } .section__spatialVision-outer-s4 .nav_container .child_container .child_item { width: 170px } .section__spatialVision-outer-s4 .nav_container .child_container .child_icon { margin: 0 auto 12px; width: 110px; height: 106px } .section__spatialVision-outer-s4 .child_container .child_item_1 .icon_1 { background-image: url(../images/icon_1.png) } .section__spatialVision-outer-s4 .child_container .child_item_2 .icon_2 { background-image: url(../images/icon_2.png) } .section__spatialVision-outer-s4 .child_container .child_item_3 .icon_3 { background-image: url(../images/icon_3.png) } .section__spatialVision-outer-s4 .child_container .child_item_4 .icon_4 { background-image: url(../images/icon_4.png) } .section__spatialVision-outer-s4 .nav_container .child_container .nav_text { color: #fff; font-size: 1.625rem } .section__spatialVision-outer-s4 .carousel_container { margin: 80px auto 0; width: 1260px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box { overflow: hidden; width: 454px; border-radius: 40px; box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .8784313725); background-image: linear-gradient(125deg, #042736, #1c0e2d) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content { padding: 51px 30px 30px; min-height: 238px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__title { font-size: 2.125rem } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__info { margin-top: 6px } .section__spatialVision-outer-s4 .carousel_container .carousel_img { width: 454px; height: 363px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-1 .carousel_img_1 { background-image: url(../images/card_1.jpg) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-2 .carousel_img_2 { background-image: url(../images/card_2.jpg) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-3 .carousel_img_3 { background-image: url(../images/card_3.jpg) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-4 .carousel_img_4 { background-image: url(../images/card_4.jpg) } .section__spatialVision-outer-s4 .slick-list { overflow: initial } .section__spatialVision-outer-s4 .slick-track { transition: all .1s linear 0s } .section__spatialVision-outer-s4 .slick-slide { position: relative; cursor: pointer; margin-right: -30px; margin-left: -30px; width: 454px!important } .section__spatialVision-outer-s4 .slick-center { z-index: 4 } .section__spatialVision-outer-s4 .level-1 { z-index: 3; transform: scale(.9) } .section__spatialVision-outer-s4 .level-2 { z-index: 2; margin-right: -50px; margin-left: -50px; transform: scale(.8) } .section__spatialVision-outer-s4 .level-3 { z-index: 1; margin-right: -70px; margin-left: -70px; transform: scale(.7) } .spatialVision-outer .wd__content .content__slogan { color: #737778 } .spatialVision-outer .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .spatialVision-outer .wd__content .content__info { color: #fff } .spatialVision-outer .wd__content .content__title .footnote-num a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #9846f4, #9846f4 90%) } .spatialVision-inner { background-color: #000 } .spatialVision-inner .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } .spatialVision-inner .wd__content .content__info { color: #fff } .spatialVision-inner .wd__content .content__link { color: #fff } .modal-inner__sectionsSpatialVision { background-color: #000 } .section__userexperience-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #e9eef2 } .section__userexperience-outer-s1 .wd__content .content__info { color: #181818 } .section__userexperience-outer-s1 .wd__content .content__link { color: #181818 } .section__userexperience-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1-1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2-2.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/blockimg_3-3.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/blockimg_4-4.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/blockimg_5-5.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images/blockimg_6-6.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-7 .img__bg { background-image: url(../images/blockimg_7-7.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images/blockimg_8-8.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-9 .img__bg { /* background-image: url(../images/blockimg_9.jpg) */ } .section__userexperience-outer-s1 .wdblockimg .block-10 .img__bg { background-image: url(../images/blockimg_10.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-11 .img__bg { background-image: url(../images/blockimg_11.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-12 .img__bg { background-image: url(../images/blockimg_12.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-13 .img__bg { /* background-image: url(../images/blockimg_13.jpg) */ } .section__userexperience-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userexperience-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__userexperience-outer-s1 .wdblockimg .block-3 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-4 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__userexperience-outer-s1 .wdblockimg .block-5 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-6 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-7 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__userexperience-outer-s1 .wdblockimg .block-8 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-9 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__userexperience-outer-s1 .wdblockimg .block-10 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-11 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__userexperience-outer-s1 .wdblockimg .block-12 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-13 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__userExperience-inner-s1 { padding-top: 160px; padding-bottom: 0; background: #0e111b } .section__userExperience-inner-s1 .wd__content { margin: 0 auto } .section__userExperience-inner-s1 .wd__content .content__info { color: #fff } .section__userExperience-inner-s1 .wd__content .content__link { color: #fff } .section__userExperience-inner-s1 .userExperience-inner-s1-figure { margin: 84px auto 0; max-width: 1144px } .section__userExperience-inner-s1 .userExperience-inner-s1-figure-item { overflow: hidden; border-radius: 20px } .section__userExperience-inner-s1 .userExperience-inner-s1-figure-item img { width: 100%; height: 270px } .section__userExperience-inner-s1 .userExperience-inner-s1-imgs { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: repeat(3, 1fr) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-1 { background-image: url(../images/img1-1.jpg) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-2 { background-image: url(../images/img2.jpg) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-3 { background-image: url(../images/img3.jpg) } .section__userExperience-inner-s2 { padding-top: 160px; padding-bottom: 0; background: #0e111b } .section__userExperience-inner-s2 .wd__content { margin: 0 auto } .section__userExperience-inner-s2 .wd__content .content__info { color: #fff } .section__userExperience-inner-s2 .wd__content .content__link { color: #fff } .section__userExperience-inner-s2 .userExperience-inner-s2-figure { margin: 84px auto 0; max-width: 1144px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure-item { overflow: hidden; border-radius: 20px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure-item img { width: 100%; height: 340px } .section__userExperience-inner-s2 .userExperience-inner-s2-imgs { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: repeat(2, 1fr) } .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-1 { background-image: url(../images/img1-1.jpg) } .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-2 { background-image: url(../images/img2.jpg) } .section__userExperience-inner-s3 { padding-top: 160px; padding-bottom: 100px; background: #0e111b } .section__userExperience-inner-s3 .wd__content { margin: 0 auto } .section__userExperience-inner-s3 .wd__content .content__info { color: #fff } .section__userExperience-inner-s3 .wd__content .content__link { color: #fff } .section__userExperience-inner-s3 .wdtab { margin-top: 64px } .section__userExperience-inner-s3 .wdtab__nav { background-color: transparent } .section__userExperience-inner-s3 .wdtab__nav-btn { font-size: 1.875rem } .section__userExperience-inner-s3 .wdtab__nav-btn.active, .section__userExperience-inner-s3 .wdtab__nav-btn.focus-visible, .section__userExperience-inner-s3 .wdtab__nav-btn:focus { color: #fff } .section__userExperience-inner-s3 .wdtab__nav-btn.active::before, .section__userExperience-inner-s3 .wdtab__nav-btn.focus-visible::before, .section__userExperience-inner-s3 .wdtab__nav-btn:focus::before { background-image: linear-gradient(to right, #9ddaff, #6994ff 100%) } .section__userExperience-inner-s3 .wdtab__panel { padding-top: 0; min-height: 754px } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay { margin-left: 535px } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { fill: transparent } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play, .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play * { stroke: #fff } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .triangle { fill: #fff } .section__userExperience-inner-s3 .img_containter { position: relative; overflow: hidden; margin: 0 auto; width: 1144px; height: 596px; border-radius: 20px } .section__userExperience-inner-s3 .img_containter>img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__userExperience-inner-s3 .slider_step__containter { position: relative; margin: 60px auto 50px; width: 340px } .section__userExperience-inner-s3 .slider_step__containter .step_icon { position: absolute; top: 50%; background-size: contain; transform: translateY(-50%) } .section__userExperience-inner-s3 .slider_step__containter .beer-range::-webkit-slider-thumb { width: 30px } .section__userExperience-inner-s3 .slider_step__containter .beer-slider { position: relative; overflow: initial; margin-right: auto; margin-left: auto; box-sizing: border-box; width: 240px; height: 2px; height: 2px; font-size: 0; background-color: #fff } .section__userExperience-inner-s3 .slider_step__containter .beer-slider-2 { background-image: linear-gradient(to right, #ff4d00, #ffa839, #fff, #a6ddfc, #0083ff 100%) } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-range { left: -15px; opacity: 0; margin-top: -25px; width: calc(100% + 30px); height: 50px } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .img { display: none } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-handle { top: calc(50% - 15px); width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: #0e111b } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-handle::before { display: none } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-handle::after { top: 2px; left: 2px; width: 22px; height: 22px; background-image: linear-gradient(to right, #9ddaff, #6994ff 100%) } .section__userExperience-inner-s3 .step_icon.dark { left: 5px; width: 25px; height: 25px } #CMD .section__userExperience-inner-s3 .slider_step__containter .step_icon.dark { background-image: url(../images/slider_icon_dark.png) } .section__userExperience-inner-s3 .step_icon.light { right: 5px; width: 25px; height: 25px } #CMD .section__userExperience-inner-s3 .slider_step__containter .step_icon.light { background-image: url(../images/slider_icon_light.png) } .section__userExperience-inner-s3 .step_icon.candle { left: 8px; width: 28px; height: 28px; filter: contrast(.1) } #CMD .section__userExperience-inner-s3 .slider_step__containter .step_icon.candle { background-image: url(../images/slider_icon_candle.png) } .section__userExperience-inner-s3 .step_icon.cloud { right: 0; width: 28px; height: 28px; filter: contrast(.1) } #CMD .section__userExperience-inner-s3 .slider_step__containter .step_icon.cloud { background-image: url(../images/slider_icon_cloud.png) } #CMD .section__userExperience-inner-s3 .img__inner3__1_dark { background-image: url(../images/ani_dark.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_light { background-image: url(../images/ani_light.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_warm { background-image: url(../images/ani_warm.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_cool { background-image: url(../images/ani_cool.jpg) } .section__userExperience-inner-s4 { padding-top: 100px; padding-bottom: 0; background-color: #d1d1d1 } .section__userExperience-inner-s4 .wd__content { margin: 0 auto } .section__userExperience-inner-s4 .wd__content .content__title { background-image: linear-gradient(to right, #181818 0, #181818 100%) } .section__userExperience-inner-s4 .wd__content .content__info { color: #181818 } .section__userExperience-inner-s4 .wd__content .content__link { background-image: linear-gradient(to right, #1ef9ef 0, #1ef9ef 100%); color: #1ef9ef } .section__userExperience-inner-s4 .wdblockimg { z-index: 10; margin-top: 84px } @media (min-width:1024px) and (max-width:1279.5px) { .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 .img__bg { top: -7%!important; transform: scale(.9)!important } } .section__userExperience-inner-s4 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_1.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-3 .img__bg { background-image: url(../images/blockimg_3-1.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-4 .img__bg { background-image: url(../images/blockimg_4-1.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-5 .img__bg { background-image: url(../images/blockimg_5-1.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-6 .img__bg { background-image: url(../images/blockimg_6-1.jpg) } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s4 .wdblockimg .block-6 .img__bg { background-image: url(../images/blockimg_6-1.jpg) } } @media all and (min-width:0) and (max-width:730.5px) { .section__userExperience-inner-s4 .wdblockimg .block-6 .img__bg { background-image: url(../images/blockimg_6-1.jpg) } } .section__userExperience-inner-s4 .wdblockimg .block-1 { background-color: #242424 } .section__userExperience-inner-s4 .wdblockimg .block-1 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s4 .wdblockimg .block-1 .block-content .content__info, .section__userExperience-inner-s4 .wdblockimg .block-1 .block-content .content__info * { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s4 .wdblockimg .block-1 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-2 { background-color: #242424 } .section__userExperience-inner-s4 .wdblockimg .block-2 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s4 .wdblockimg .block-2 .block-content .content__info, .section__userExperience-inner-s4 .wdblockimg .block-2 .block-content .content__info * { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s4 .wdblockimg .block-2 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-3 { background-color: #242424 } .section__userExperience-inner-s4 .wdblockimg .block-3 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s4 .wdblockimg .block-3 .block-content .content__info, .section__userExperience-inner-s4 .wdblockimg .block-3 .block-content .content__info * { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-3 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s4 .wdblockimg .block-3 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-4 { background-color: #242424 } .section__userExperience-inner-s4 .wdblockimg .block-4 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s4 .wdblockimg .block-4 .block-content .content__info, .section__userExperience-inner-s4 .wdblockimg .block-4 .block-content .content__info * { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-4 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s4 .wdblockimg .block-4 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-5 { background-color: #242424 } .section__userExperience-inner-s4 .wdblockimg .block-5 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s4 .wdblockimg .block-5 .block-content .content__info, .section__userExperience-inner-s4 .wdblockimg .block-5 .block-content .content__info * { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-5 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s4 .wdblockimg .block-5 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-6 { background-color: #242424 } .section__userExperience-inner-s4 .wdblockimg .block-6 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s4 .wdblockimg .block-6 .block-content .content__info, .section__userExperience-inner-s4 .wdblockimg .block-6 .block-content .content__info * { color: #fff } .section__userExperience-inner-s4 .wdblockimg .block-6 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s4 .wdblockimg .block-6 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s5 { padding-top: 160px; padding-bottom: 0; background-color: #d1d1d1 } .section__userExperience-inner-s5 .wd__content { margin: 0 auto } .section__userExperience-inner-s5 .wd__content .content__title { background-image: linear-gradient(to right, #181818 0, #181818 100%) } .section__userExperience-inner-s5 .wd__content .content__info { color: #181818 } .section__userExperience-inner-s5 .wd__content .content__link { background-image: linear-gradient(to right, #1ef9ef 0, #1ef9ef 100%); color: #1ef9ef } .section__userExperience-inner-s5 .btn__lity__video { margin-top: 84px } .section__userExperience-inner-s5 .btn__lity__video .compare_content::before { content: ""; position: absolute; z-index: 9; z-index: 2; cursor: pointer; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px; width: 150px; height: 150px; border-width: 0; background-repeat: no-repeat; transition: all .7s cubic-bezier(.4, 0, .2, 1); background-image: url(../images/play.svg) } .section__userExperience-inner-s5 .btn__lity__video .video_info { display: flex; position: absolute; z-index: 2; top: 50%; left: 0; align-items: center; justify-content: center; opacity: 0; padding: 40px; box-sizing: border-box; width: 100%; height: auto; color: #242424; font-size: 1.625rem; text-align: center; -webkit-background-clip: text; transform: translateY(80px); transition: opacity .7s cubic-bezier(.4, 0, .2, 1); -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #fff 0, #fff 100%) } .section__userExperience-inner-s5 .btn__lity__video .compare_content { position: relative; overflow: hidden; cursor: pointer; margin-right: auto; margin-left: auto; width: 1144px; height: 646px; border-radius: 20px } .section__userExperience-inner-s5 .btn__lity__video .compare_content::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-color: rgba(0, 0, 0, .6); transition: opacity .7s cubic-bezier(.4, 0, .2, 1); content: " " } .section__userExperience-inner-s5 .btn__lity__video .compare_content a { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; width: 100%; height: 100%; color: #181818 } .section__userExperience-inner-s5 .btn__lity__video .compare_content:hover::after { opacity: 1 } .section__userExperience-inner-s5 .btn__lity__video .compare_content:hover .video_info { opacity: 1 } .section__userExperience-inner-s5 .btn__lity__video .compare_content:hover::before { transform: rotate(120deg) } .section__userExperience-inner-s5 .video__bg { margin: 0 auto; width: 1144px; height: 646px } #CMD .section__userExperience-inner-s5 .btn__lity__video .video__bg { background-image: url(../images/video_bg.jpg) } .section__userExperience-inner-s6 { padding-top: 160px; padding-bottom: 0; background-color: #dadada } .section__userExperience-inner-s6 .wd__content { margin: 0 auto } .section__userExperience-inner-s6 .wd__content .content__title { background-image: linear-gradient(to right, #181818 0, #181818 100%) } .section__userExperience-inner-s6 .wd__content .content__info { color: #181818 } .section__userExperience-inner-s6 .wd__content .content__link { background-image: linear-gradient(to right, #1ef9ef 0, #1ef9ef 100%); color: #1ef9ef } .section__userExperience-inner-s6 .wdblockimg { z-index: 10; margin-top: 84px } .section__userExperience-inner-s6 .wdblockimg .block-1 .img__bg { background-image: url(../images/blockimg_1_2.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-2 .img__bg { background-image: url(../images/blockimg_2_2.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-3 .img__bg { background-image: url(../images/blockimg_3_3.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-4 .img__bg { background-image: url(../images/blockimg_4_4.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-1 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-1 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s6 .wdblockimg .block-1 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-1 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-1 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-2 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-2 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s6 .wdblockimg .block-2 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-2 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-2 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-3 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-3 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s6 .wdblockimg .block-3 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-3 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-3 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-3 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-4 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-4 .block-content .content__title { background-image: linear-gradient(to right, #dbbda2 0, #dbbda2 100%) } .section__userExperience-inner-s6 .wdblockimg .block-4 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-4 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-4 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-4 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s7 { padding-top: 160px; padding-bottom: 0; background-color: #dadada } .section__userExperience-inner-s7 .wd__content { margin: 0 auto } .section__userExperience-inner-s7 .wd__content .content__title { background-image: linear-gradient(to right, #181818 0, #181818 100%) } .section__userExperience-inner-s7 .wd__content .content__info { color: #181818 } .section__userExperience-inner-s7 .wd__content .content__link { background-image: linear-gradient(to right, #1ef9ef 0, #1ef9ef 100%); color: #1ef9ef } .section__userExperience-inner-s7::before { background-color: #dadada } .section__userExperience-inner-s7 .userExperience-inner-s7 .wd__content { margin: 0 auto } .section__userExperience-inner-s7 .userExperience-inner-s7 .wd__content .content__title { background-image: linear-gradient(to right, #181818 0, #181818 100%) } .section__userExperience-inner-s7 .userExperience-inner-s7 .wd__content .content__info { color: #181818 } .section__userExperience-inner-s7 .userExperience-inner-s7 .wd__content .content__link { background-image: linear-gradient(to right, #1ef9ef 0, #1ef9ef 100%); color: #1ef9ef } .section__userExperience-inner-s7 .userExperience-inner-s7-main { margin: 84px auto 0; max-width: 1144px } .section__userExperience-inner-s7 .userExperience-inner-s7-item { display: flex; overflow: hidden; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: 20px; background-color: #fff } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer { width: 570px } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content { max-width: 93%; margin: 0 } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content .content__title { background-image: linear-gradient(to right, #73594a 0, #73594a 100%) } .section__userExperience-inner-s7 .userExperience-inner-s7-item .imgItem-outer { overflow: hidden } .section__userExperience-inner-s7 .userExperience-inner-s7-item .imgItem-outer img { width: 100% } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 { flex-direction: row-reverse } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .textItem-outer { margin-left: 0; padding: 40px 0 10px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list { margin-top: 27px; padding-left: 20px; list-style: none } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list .wd__content .content__title { background-image: linear-gradient(to right, #333 0, #333 100%) } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li { position: relative; margin-bottom: 33px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li::before { display: block; position: absolute; top: 7px; left: -20px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 8.7px; border-color: transparent transparent transparent #dadada; content: "" } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 .wd__content { margin-left: 93px!important } .section__userExperience-inner-s7 .s7-inner-item-img-1 { right: -3px; width: 572px; height: 498px } .section__userExperience-inner-s7 .s7-inner-item-img-2 { right: -3px; width: 572px; height: 498px } .section__userExperience-inner-s8 { padding-top: 160px; padding-bottom: 0; background: #0e111b } .section__userExperience-inner-s8 .wd__content { margin: 0 auto } .section__userExperience-inner-s8 .wd__content .content__info { color: #fff } .section__userExperience-inner-s8 .wd__content .content__link { color: #fff } .section__userExperience-inner-s8 .userExperience-inner-s8-figure { margin: 84px auto 0; max-width: 1144px } .section__userExperience-inner-s8 .userExperience-inner-s8-figure-item { overflow: hidden; border-radius: 20px } .section__userExperience-inner-s8 .userExperience-inner-s8-figure-item img { width: 100%; height: 340px } .section__userExperience-inner-s8 .userExperience-inner-s8-imgs { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: repeat(2, 1fr) } .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-1 { background-image: url(../images/img1_1.jpg) } .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-2 { background-image: url(../images/img2_1.jpg) } section { position: relative } section.is-hidden { display: none } section.is-hidden * { background-image: none!important } section .sectionnNavPosition { transform: none!important; transition: all 0s } section .row .col[class*=pull-], section .row .col[class*=push-] { position: relative } section .always__on__top { position: relative; z-index: 888 } section .no__wrap { display: inline-block; white-space: nowrap } section .slick-dots li { margin-right: 10px; margin-left: 10px } section .slick-dots li button::before { color: #1c1b19; font-size: 41px } section .slick-dots li button:hover::before { color: #1c1b19 } section .detect-point-out { position: absolute; top: 0; left: 50%; width: 1px; height: 100% } section .detect-point-enter { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px } section .large_use, section .medium_use, section .small_use { display: none } section .hide { position: absolute; opacity: 0; height: 0 } section .ani_enter_detect { position: absolute; z-index: 99; left: 50%; width: 10px; height: 10px } .wd__content .content__slogan { color: linear-gradient(to right, #fff, #fff) } .wd__content .content__title { color: #181818; background-image: linear-gradient(to right, #fff, #fff); margin-top: 9px } .wd__content .content__info { color: #181818; margin-top: 4px } .wd__content .content__title sup.footnote-num { -webkit-text-fill-color: initial!important; background-image: none!important; background-color: rgba(0, 0, 0, 0) } .wd__content .content__link { background-image: linear-gradient(to right, #fff, #fff) } .wd__content .content__link sup { background-image: linear-gradient(to right, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .wd__feature__list .wd__feature .wd__feature__data { color: #1ef9ef } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe *, .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #000 } section .modal-button-container .modal-button { background-color: rgba(0, 0, 0, 0); color: #b95000; border-color: #b95000 } section .modal-button-container .modal-button:hover { background-color: rgba(0, 0, 0, 0); color: rgba(185, 80, 0, .8); border-color: rgba(185, 80, 0, .6) } section .modal-button-container.theme-black .modal-button { background-color: #000; color: #000; border-color: #000 } section .modal-button-container.theme-black .modal-button:hover { background-color: #000; color: rgba(0, 0, 0, .8); border-color: rgba(0, 0, 0, .6) } section .sectionnNavPosition { position: relative; z-index: 1; top: -140px; opacity: 1; width: 100%; height: 1px } #CMD .svgDefs { position: absolute; overflow: hidden; z-index: -1; top: 0; left: 0; opacity: 0; height: 0 } .wd__section .video_control { display: block; position: absolute; z-index: 9; top: 0; left: 0; width: 100% } .wd__section .video_control .video_control-button { position: absolute; top: -50px; left: 50%; transform: translateX(-50%) } #CMD .video_control-button { z-index: 9; cursor: pointer; opacity: 0; margin-bottom: 36px; width: 36px; height: 36px; border-width: 0; background-color: transparent; transition: opacity .3s ease } #CMD .video_control-button.show { opacity: 1 } #CMD .video_control-button.pause { background-image: url(../images/icon_pause.svg) } #CMD .video_control-button.resume { background-image: url(../images/icon_play.svg) } section .colImg { position: relative } section .imgDesc { position: absolute; z-index: 9; width: 100%; height: 100% } section .imgDesc__item { position: absolute } section .imgDesc__text { color: #fff; font-size: 24px } section .slick-tab-content .scroll_container { z-index: 9; padding-bottom: 10px } section .slick-tab-content .slick-title { z-index: 9 } section .slick-tab-content .slick-title .title-nav .slick-nav-btn { position: relative; color: #757575; border-bottom: 4px solid transparent } section .slick-tab-content .slick-title .title-nav .slick-nav-btn::before { display: block; position: absolute; bottom: -11px; left: 50%; margin-left: -6px; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 20px; background-color: #000; transition: all .3s ease; content: ""; transform-origin: center } section .slick-tab-content .slick-title .title-nav .slick-nav-btn.active, section .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus { border-bottom: 4px solid transparent; color: #fff } section .slick-tab-content .slick-title .title-nav .slick-nav-btn.active::before, section .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus::before { background-color: #fff } section .modal-button-container .modal-button { padding: 20px 37px; border-width: 2px } section.section__conference-outer-s1 .wd__content .content__slogan, section.section__environment-outer-s1 .wd__content .content__slogan, section.section__userexperience-outer-s1 .wd__content .content__slogan, section.theme-white .wd__content .content__slogan { color: #555 } section.section__conference-outer-s1 .wd__content .content__title, section.section__environment-outer-s1 .wd__content .content__title, section.section__userexperience-outer-s1 .wd__content .content__title, section.theme-white .wd__content .content__title { background-image: linear-gradient(to right, #020202, #020202) } section.section__conference-outer-s1 .wd__content .content__info, section.section__environment-outer-s1 .wd__content .content__info, section.section__userexperience-outer-s1 .wd__content .content__info, section.theme-white .wd__content .content__info { color: #010103 } section.section__conference-outer-s1 .wd__content .content__comment, section.section__environment-outer-s1 .wd__content .content__comment, section.section__userexperience-outer-s1 .wd__content .content__comment, section.theme-white .wd__content .content__comment { color: #010103 } section.section__conference-outer-s1 .wd__content .content__title, section.section__conference-outer-s1 .wd__content .content__title *, section.section__environment-outer-s1 .wd__content .content__title, section.section__environment-outer-s1 .wd__content .content__title *, section.section__userexperience-outer-s1 .wd__content .content__title, section.section__userexperience-outer-s1 .wd__content .content__title *, section.theme-white .wd__content .content__title, section.theme-white .wd__content .content__title * { background-image: linear-gradient(to right, #020202, #020202 100%) } section.section__conference-outer-s1 .wd__content .content__link, section.section__conference-outer-s1 .wd__content .content__link *, section.section__environment-outer-s1 .wd__content .content__link, section.section__environment-outer-s1 .wd__content .content__link *, section.section__userexperience-outer-s1 .wd__content .content__link, section.section__userexperience-outer-s1 .wd__content .content__link *, section.theme-white .wd__content .content__link, section.theme-white .wd__content .content__link * { background-image: linear-gradient(to right, #020202, #020202 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } section.section__conference-outer-s1 .wd__content .content__link:hover span, section.section__environment-outer-s1 .wd__content .content__link:hover span, section.section__userexperience-outer-s1 .wd__content .content__link:hover span, section.theme-white .wd__content .content__link:hover span { border-bottom: 1px solid #020202 } section.section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, section.section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, section.section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, section.section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, section.section__userexperience-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, section.section__userexperience-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, section.theme-white .wd__feature__list .wd__feature .wd__feature__data, section.theme-white .wd__feature__list .wd__feature .wd__feature__data * { color: #fff } section.section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, section.section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__conference-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, section.section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__environment-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__userexperience-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, section.section__userexperience-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__userexperience-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__userexperience-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe *, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe__top, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #eee } section.antimicrobial-inner .wd__content .content__slogan, section.antimicrobial-outer .wd__content .content__slogan, section.audioDolby-inner .wd__content .content__slogan, section.section__creatorhub-outer-s1 .wd__content .content__slogan, section.section__creatorhub-outer-s2 .wd__content .content__slogan, section.section__creatorhub-outer-s3 .wd__content .content__slogan, section.section__creatorhub-outer-s4 .wd__content .content__slogan, section.section__military__grade .wd__content .content__slogan, section.section__thermal .wd__content .content__slogan, section.software-outer .wd__content .content__slogan, section.theme-black .wd__content .content__slogan { color: #6b6e70 } section.antimicrobial-inner .wd__content .content__title, section.antimicrobial-outer .wd__content .content__title, section.audioDolby-inner .wd__content .content__title, section.section__creatorhub-outer-s1 .wd__content .content__title, section.section__creatorhub-outer-s2 .wd__content .content__title, section.section__creatorhub-outer-s3 .wd__content .content__title, section.section__creatorhub-outer-s4 .wd__content .content__title, section.section__military__grade .wd__content .content__title, section.section__thermal .wd__content .content__title, section.software-outer .wd__content .content__title, section.theme-black .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff) } section.antimicrobial-inner .wd__content .content__info, section.antimicrobial-outer .wd__content .content__info, section.audioDolby-inner .wd__content .content__info, section.section__creatorhub-outer-s1 .wd__content .content__info, section.section__creatorhub-outer-s2 .wd__content .content__info, section.section__creatorhub-outer-s3 .wd__content .content__info, section.section__creatorhub-outer-s4 .wd__content .content__info, section.section__military__grade .wd__content .content__info, section.section__thermal .wd__content .content__info, section.software-outer .wd__content .content__info, section.theme-black .wd__content .content__info { color: #fff } section.antimicrobial-inner .wd__content .content__comment, section.antimicrobial-outer .wd__content .content__comment, section.audioDolby-inner .wd__content .content__comment, section.section__creatorhub-outer-s1 .wd__content .content__comment, section.section__creatorhub-outer-s2 .wd__content .content__comment, section.section__creatorhub-outer-s3 .wd__content .content__comment, section.section__creatorhub-outer-s4 .wd__content .content__comment, section.section__military__grade .wd__content .content__comment, section.section__thermal .wd__content .content__comment, section.software-outer .wd__content .content__comment, section.theme-black .wd__content .content__comment { color: #fff } section.antimicrobial-inner .wd__content .content__title, section.antimicrobial-inner .wd__content .content__title *, section.antimicrobial-outer .wd__content .content__title, section.antimicrobial-outer .wd__content .content__title *, section.audioDolby-inner .wd__content .content__title, section.audioDolby-inner .wd__content .content__title *, section.section__creatorhub-outer-s1 .wd__content .content__title, section.section__creatorhub-outer-s1 .wd__content .content__title *, section.section__creatorhub-outer-s2 .wd__content .content__title, section.section__creatorhub-outer-s2 .wd__content .content__title *, section.section__creatorhub-outer-s3 .wd__content .content__title, section.section__creatorhub-outer-s3 .wd__content .content__title *, section.section__creatorhub-outer-s4 .wd__content .content__title, section.section__creatorhub-outer-s4 .wd__content .content__title *, section.section__military__grade .wd__content .content__title, section.section__military__grade .wd__content .content__title *, section.section__thermal .wd__content .content__title, section.section__thermal .wd__content .content__title *, section.software-outer .wd__content .content__title, section.software-outer .wd__content .content__title *, section.theme-black .wd__content .content__title, section.theme-black .wd__content .content__title * { background-image: linear-gradient(to right, #fff, #fff 100%) } section.antimicrobial-inner .wd__content .content__link, section.antimicrobial-inner .wd__content .content__link *, section.antimicrobial-outer .wd__content .content__link, section.antimicrobial-outer .wd__content .content__link *, section.audioDolby-inner .wd__content .content__link, section.audioDolby-inner .wd__content .content__link *, section.section__creatorhub-outer-s1 .wd__content .content__link, section.section__creatorhub-outer-s1 .wd__content .content__link *, section.section__creatorhub-outer-s2 .wd__content .content__link, section.section__creatorhub-outer-s2 .wd__content .content__link *, section.section__creatorhub-outer-s3 .wd__content .content__link, section.section__creatorhub-outer-s3 .wd__content .content__link *, section.section__creatorhub-outer-s4 .wd__content .content__link, section.section__creatorhub-outer-s4 .wd__content .content__link *, section.section__military__grade .wd__content .content__link, section.section__military__grade .wd__content .content__link *, section.section__thermal .wd__content .content__link, section.section__thermal .wd__content .content__link *, section.software-outer .wd__content .content__link, section.software-outer .wd__content .content__link *, section.theme-black .wd__content .content__link, section.theme-black .wd__content .content__link * { background-image: linear-gradient(to right, #fff, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } section.antimicrobial-inner .wd__content .content__link:hover span, section.antimicrobial-outer .wd__content .content__link:hover span, section.audioDolby-inner .wd__content .content__link:hover span, section.section__creatorhub-outer-s1 .wd__content .content__link:hover span, section.section__creatorhub-outer-s2 .wd__content .content__link:hover span, section.section__creatorhub-outer-s3 .wd__content .content__link:hover span, section.section__creatorhub-outer-s4 .wd__content .content__link:hover span, section.section__military__grade .wd__content .content__link:hover span, section.section__thermal .wd__content .content__link:hover span, section.software-outer .wd__content .content__link:hover span, section.theme-black .wd__content .content__link:hover span { border-bottom: 1px solid #fff } section.antimicrobial-inner .wd__feature__list .wd__feature .wd__feature__data, section.antimicrobial-inner .wd__feature__list .wd__feature .wd__feature__data *, section.antimicrobial-outer .wd__feature__list .wd__feature .wd__feature__data, section.antimicrobial-outer .wd__feature__list .wd__feature .wd__feature__data *, section.audioDolby-inner .wd__feature__list .wd__feature .wd__feature__data, section.audioDolby-inner .wd__feature__list .wd__feature .wd__feature__data *, section.section__creatorhub-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, section.section__creatorhub-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, section.section__creatorhub-outer-s2 .wd__feature__list .wd__feature .wd__feature__data, section.section__creatorhub-outer-s2 .wd__feature__list .wd__feature .wd__feature__data *, section.section__creatorhub-outer-s3 .wd__feature__list .wd__feature .wd__feature__data, section.section__creatorhub-outer-s3 .wd__feature__list .wd__feature .wd__feature__data *, section.section__creatorhub-outer-s4 .wd__feature__list .wd__feature .wd__feature__data, section.section__creatorhub-outer-s4 .wd__feature__list .wd__feature .wd__feature__data *, section.section__military__grade .wd__feature__list .wd__feature .wd__feature__data, section.section__military__grade .wd__feature__list .wd__feature .wd__feature__data *, section.section__thermal .wd__feature__list .wd__feature .wd__feature__data, section.section__thermal .wd__feature__list .wd__feature .wd__feature__data *, section.software-outer .wd__feature__list .wd__feature .wd__feature__data, section.software-outer .wd__feature__list .wd__feature .wd__feature__data *, section.theme-black .wd__feature__list .wd__feature .wd__feature__data, section.theme-black .wd__feature__list .wd__feature .wd__feature__data * { color: #fff } section.antimicrobial-inner .wd__feature__list .wd__feature .wd__feature__describe, section.antimicrobial-inner .wd__feature__list .wd__feature .wd__feature__describe *, section.antimicrobial-inner .wd__feature__list .wd__feature .wd__feature__describe__top, section.antimicrobial-inner .wd__feature__list .wd__feature .wd__feature__describe__top *, section.antimicrobial-outer .wd__feature__list .wd__feature .wd__feature__describe, section.antimicrobial-outer .wd__feature__list .wd__feature .wd__feature__describe *, section.antimicrobial-outer .wd__feature__list .wd__feature .wd__feature__describe__top, section.antimicrobial-outer .wd__feature__list .wd__feature .wd__feature__describe__top *, section.audioDolby-inner .wd__feature__list .wd__feature .wd__feature__describe, section.audioDolby-inner .wd__feature__list .wd__feature .wd__feature__describe *, section.audioDolby-inner .wd__feature__list .wd__feature .wd__feature__describe__top, section.audioDolby-inner .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__creatorhub-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, section.section__creatorhub-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__creatorhub-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__creatorhub-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__creatorhub-outer-s2 .wd__feature__list .wd__feature .wd__feature__describe, section.section__creatorhub-outer-s2 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__creatorhub-outer-s2 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__creatorhub-outer-s2 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__creatorhub-outer-s3 .wd__feature__list .wd__feature .wd__feature__describe, section.section__creatorhub-outer-s3 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__creatorhub-outer-s3 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__creatorhub-outer-s3 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__creatorhub-outer-s4 .wd__feature__list .wd__feature .wd__feature__describe, section.section__creatorhub-outer-s4 .wd__feature__list .wd__feature .wd__feature__describe *, section.section__creatorhub-outer-s4 .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__creatorhub-outer-s4 .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__military__grade .wd__feature__list .wd__feature .wd__feature__describe, section.section__military__grade .wd__feature__list .wd__feature .wd__feature__describe *, section.section__military__grade .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__military__grade .wd__feature__list .wd__feature .wd__feature__describe__top *, section.section__thermal .wd__feature__list .wd__feature .wd__feature__describe, section.section__thermal .wd__feature__list .wd__feature .wd__feature__describe *, section.section__thermal .wd__feature__list .wd__feature .wd__feature__describe__top, section.section__thermal .wd__feature__list .wd__feature .wd__feature__describe__top *, section.software-outer .wd__feature__list .wd__feature .wd__feature__describe, section.software-outer .wd__feature__list .wd__feature .wd__feature__describe *, section.software-outer .wd__feature__list .wd__feature .wd__feature__describe__top, section.software-outer .wd__feature__list .wd__feature .wd__feature__describe__top *, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe *, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe__top, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #eee } section .wdblockimg .block__scroll-item.theme-black .wd__content .content__title, section .wdblockimg .block__scroll-item.theme-black .wd__content .content__title * { background-image: linear-gradient(to right, #fff, #fff) } section .wdblockimg .block__scroll-item.theme-white .wd__content .content__title, section .wdblockimg .block__scroll-item.theme-white .wd__content .content__title * { background-image: linear-gradient(to right, #000, #000) } section .audioDolby-inner { background-color: unset!important } section.section__wdvideos { background-color: #f5f5f5 } #CMD section .wdblockimg .block .modal-button-container .modal-button { border-color: transparent!important } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button { background: linear-gradient(to right, #d1c3ff, #d1c3ff) } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button span { background-image: linear-gradient(to right, #d1c3ff, #d1c3ff) } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button::before { background-color: #fff } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button:hover::before { background-color: #2a1766 } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button { background: linear-gradient(to right, #2a1766, #2a1766) } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button span { background-image: linear-gradient(to right, #2a1766, #2a1766) } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button::before { background-color: #000 } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button:hover::before { background-color: #d1c3ff } .section-media-top { display: block; position: relative; background-color: #f5f5f5 } .wd__section .img { display: block; position: relative; background-position: center; background-repeat: no-repeat } section.section__wdvideos { background-color: #000 } section .vr__screen #vr__screen__icon { fill: #fff } section .theme-black .modal-button-container .modal-button { color: #fff; border-color: #fff; background-color: rgba(0, 0, 0, 0) } section .theme-black .modal-button-container .modal-button:hover { color: #fff; border-color: #fff; background-color: #fff } section .theme-black .modal-button-container .modal-button:hover .modal-inner-text { color: #000 } section .section__audiodolby-outer-s1 { background-color: #0c0e15 } section .section__userExperience-inner-s7 .userExperience-inner-s7-main .userExperience-inner-s7-item-2 { display: none!important } section .wd__feature__list .wd__feature__data sup.footnote-num { top: -.6em!important; font-size: .4em!important } section .campare_containter .title sup.sign-cr, section .campare_containter .title sup.sign-tm { top: -.67em!important; font-size: .7em!important } section .figure__img img { width: 100%; height: 100% } .section__corningGlass .inner_block__1 .antiglare_containter .img__main { z-index: -1 } #section__displayScroll .animation__container .slide-2 .video_control { top: 50%; left: 50%; margin-top: -266px; margin-left: -253px; width: 100px; height: 100px } #section__displayScroll .animation__container .slide-2 .video_control .video_control-button { top: 0; left: 0; opacity: 1; padding: 0; width: 28px; height: 28px; background-position: center; background-repeat: no-repeat; background-size: contain } .section__environment-outer-s1 { background-color: #fff } .section__conference-outer-s1 { background-color: #e9eef2 } .modal-inner__sectionsUserExperience { background-color: #dadada!important } .modal-inner__conference { background-color: #fff!important } .conference-inner .wd__content .content__title, .conference-inner .wd__content .content__title * { background-image: linear-gradient(to right, #000, #000) } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active .nav__icon { background-color: #fff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active .nav__text { color: #fff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active::before { border-color: #fff; background-color: #fff } section .figure__img { position: relative } section .figure__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } section .section__userExperience-inner-s7 .block__scroll-item.userExperience-inner-s7-item-1 .wd__content .content__title { background-image: linear-gradient(to right, #000, #000) } section .section__userExperience-inner-s4 { background-color: #dadada } section .section__environment-outer-s1 { background-color: #000 } section .section__userExperience-inner-s5 { background-color: #dadada } section .section__creatorhub-outer-s3 .wdtab .slick-info .slick-info-text sup.sign-cr { font-size: .7em; top: -.56em } section .section__userexperience-outer-s1 .wdblockimg .block.theme-black { background-color: #151517 } .section__pdc { z-index: 1; margin-bottom: -1px; background-color: #000 } .section__pdc .pdc-space-start { display: flex; margin-top: 0; padding-top: 0 } .section__pdc .pdc-space-end { display: flex; margin-bottom: 0; padding-bottom: 0 } .section__pdc .product_awards, .section__pdc .product_gallery, .section__pdc .product_medias, .section__pdc .product_videos { background-color: transparent } .section__pdc .product_awards .splide__pagination::after, .section__pdc .product_medias .splide__pagination::after, .section__pdc .product_videos .splide__pagination::after { background-color: #86929e } .section__pdc .splide__pagination li .splide__pagination__page.is-active::after { background-color: #86929e!important } .section__pdc .product_awards .awards-container .awards-seeall { color: #86929e } .section__pdc .product_awards .awards-container .awards-seeall { color: #86929e } .section__pdc .product_videos .videos-container .videos-seeall { color: #86929e } .section__pdc .product_videos .videos-container .videos-seeall { color: #86929e } .section__pdc .product_medias .medias-container .medias-seeall { color: #86929e } .section__pdc .product_medias .medias-container .medias-seeall { color: #86929e } .section__pdc .arrow_link::before { background: #86929e } .section__pdc .arrow_link::after { display: none } .section__pdc .seeall_arrow-svg { stroke: #86929e!important } .section__pdc .product_medias .medias-container .medias-carousel { background-color: rgba(0, 0, 0, 0) } .section__pdc .product_medias .medias-container .medias-carousel .splide__track { background-color: #1b1b1b } .section__pdc .product_awards .awards-container .awards-carousel { background-color: rgba(0, 0, 0, 0) } .section__pdc .product_awards .awards-container .awards-carousel .splide__track { background-color: #1b1b1b } .section__pdc .product_videos .videos-container .videos-carousel, .section__pdc .product_videos .videos-container .videos-carousel .splide__track { background-color: rgba(0, 0, 0, 0) } .section__pdc .product_videos .videos-container .videos-carousel .videos-item .item-content { background-color: #1b1b1b } @media all and (max-width:730.5px) { .section__pdc .product_awards .awards-container .awards-carousel, .section__pdc .product_medias .medias-container .medias-carousel { background-color: #1b1b1b } } .section__pdc .awards-container .awards-carousel .awards-item .item-content, .section__pdc .medias-container .medias-carousel .medias-item .item-content, .section__pdc .videos-container .videos-carousel .videos-item .item-content { color: #fff } .section__pdc .active::nth-last-child(1) { margin-bottom: 0 } .section__pdc.section__pdc-top { z-index: 9 } @media all and (min-width:1280px) { .section__pdc.section__pdc-top .pdc-space-start { margin-top: 0; padding-top: 114px } .section__pdc.section__pdc-top .pdc-space-end { margin-bottom: -81px; padding-bottom: 0 } .section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 128px } .section__pdc.section__pdc-bottom .pdc-space-end { margin-bottom: -82px; padding-bottom: 0 } } @media all and (max-width:1279.5px) and (min-width:731px) { .section__pdc.section__pdc-top .pdc-space-start { margin-top: 0; padding-top: 100px } .section__pdc.section__pdc-top .pdc-space-end { margin-bottom: -59px; padding-bottom: 0 } .section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 109px } .section__pdc.section__pdc-bottom .pdc-space-end { margin-bottom: -63px; padding-bottom: 0 } } @media all and (max-width:730.5px) { .section__pdc.section__pdc-top .pdc-space-start { margin-top: 0; padding-top: 58px } .section__pdc.section__pdc-top .pdc-space-end { margin-bottom: -58px; padding-bottom: 0 } .section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 58px } .section__pdc.section__pdc-bottom .pdc-space-end { margin-bottom: -62px; padding-bottom: 0 } } @media all and (min-width:1280px) { .section__pdc.section__pdc-top+.section__wdvideos .wdVideos.active { padding-top: 128px } .section__wdvideos .wdVideos.active+.section__pdc.section__pdc-bottom .pdc-space-start { padding-top: 128px } .section__wdvideos .wdVideos.active+.section__pdc.section__pdc-bottom .pdc-space-start { padding-top: 128px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__pdc.section__pdc-top+.section__wdvideos .wdVideos.active { padding-top: 100px } .section__ksp+.section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 0 } .section__wdvideos .wdVideos.active+.section__pdc.section__pdc-bottom .pdc-space-start { padding-top: 100px } } @media all and (max-width:730.5px) { .section__pdc.section__pdc-top+.section__wdvideos .wdVideos.active { padding-top: 58px } } .section__kv { margin-top: 0; padding-top: 0 } .section__kv .kv__logo { color: #fff } .section__kv .wd__content .content__slogan { text-transform: unset } .section__kv .wd__content .content__slogan * { color: #fff } .section__kv .wd__content .content__title { color: #afafaf; background-image: linear-gradient(to right, #afafaf, #afafaf 90%) } .section__kv .wd__content .content__info.info--1 { color: #afafaf!important } .section__kv .wd__content .content__info.info--2 { line-height: 1.5 } .section__kv .wd__content.bottom-content .content__info { color: #fff } .section__kv .bottom-content { margin-top: 0 } .section__kv .img__evo { left: 50%; margin-left: -55px; width: 110px; height: 150px; position: absolute; z-index: 11; top: 50%; background-size: contain; filter: drop-shadow(-5px 0 10px rgba(255, 255, 255, .6)) } #CMD .section__kv .img__evo { background-image: url(../images/intelEvoI9_left.png) } .section__kv .bottom__content { opacity: 0; transition: opacity 1s ease-in-out } .section__kv .img__bg { position: relative; z-index: 9; opacity: 0; transition: opacity .6s cubic-bezier(.65, .05, .36, 1) } .section__kv .img__evo { opacity: 0; transition: opacity .6s cubic-bezier(.65, .05, .36, 1) } .section__kv .video_mask { position: absolute; z-index: 1; top: 0; left: 0; opacity: 1; width: 100%; height: 100%; background-color: #000 } .section__kv .video_box { position: absolute; z-index: 3; top: -24px; left: 50%; opacity: 1!important; margin-left: -569px; width: 1138px; height: 1084px } .section__kv .image__container.playVideo .video_box, .section__kv .image__container.playVideo .video_mask { opacity: 1; transition: opacity .5s } .section__kv.showBg .img__bg { opacity: 1 } .section__kv.showBg .img__evo { opacity: 1 } .section__kv.showContent .bottom__content { opacity: 1 } .section__kv.aniPlayEnd .video_box, .section__kv.aniPlayEnd .video_mask { opacity: 0; transition: opacity .7s } .section__ksp { padding-top: 30px; padding-bottom: 10px; background: #000 } .section__ksp .ksp__layout .item__jumpto-button { background: rgba(255, 255, 255, .4) } .section__ksp .ksp__layout .item__jumpto-button::before { background-color: #fff } .section__ksp .ksp__layout { max-width: 1244px } .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 21px } .section__ksp .ksp__layout .grid-item { margin-bottom: 0; padding: 6px; box-sizing: border-box } .section__ksp .ksp__layout .grid-item-ie { display: inline-block; position: relative; box-sizing: border-box; width: 100%; border: 0; border: 1px solid transparent; border-radius: 12px; border-radius: 15px; background: linear-gradient(to top, #24282d 0, #000 100%) padding-box, linear-gradient(59deg, #27323f 0, #27323f 35%, #abbad9 66%, #27323f 80%, #27323f 100%) border-box } .section__ksp .ksp__layout .wd__content .content__title { color: #fff } .section__ksp .ksp__layout .wd__content .content__info { line-height: 1.2; color: #8a8e90 } .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__data { display: inline-block; color: #fff } .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__data .sign-cr { top: 0; font-size: .6em } .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe, .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe *, .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top, .section__ksp .ksp__layout .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #8a8e90 } .section__ksp sup { position: relative; vertical-align: super; top: 0; font-size: .6em; line-height: unset } .section__ksp sup.sign-deg { top: 0; font-size: 1em; vertical-align: baseline } .section__ksp sup.sign-star { top: -.83em; font-size: .5em } .section__ksp .grid-item-1 .grid-item-ie, .section__ksp .grid-item-10 .grid-item-ie, .section__ksp .grid-item-13 .grid-item-ie, .section__ksp .grid-item-14 .grid-item-ie, .section__ksp .grid-item-15 .grid-item-ie, .section__ksp .grid-item-23 .grid-item-ie, .section__ksp .grid-item-24 .grid-item-ie, .section__ksp .grid-item-4 .grid-item-ie, .section__ksp .grid-item-5 .grid-item-ie, .section__ksp .grid-item-6 .grid-item-ie, .section__ksp .grid-item-7 .grid-item-ie, .section__ksp .grid-item-8 .grid-item-ie, .section__ksp .grid-item-9 .grid-item-ie { background: linear-gradient(to top, #24282d 0, #24282d 100%) padding-box, linear-gradient(59deg, #27323f 0, #27323f 35%, #abbad9 66%, #27323f 80%, #27323f 100%) border-box } .section__ksp .grid-item-1 .grid-item-ie div, .section__ksp .grid-item-10 .grid-item-ie div, .section__ksp .grid-item-13 .grid-item-ie div, .section__ksp .grid-item-14 .grid-item-ie div, .section__ksp .grid-item-15 .grid-item-ie div, .section__ksp .grid-item-23 .grid-item-ie div, .section__ksp .grid-item-24 .grid-item-ie div, .section__ksp .grid-item-4 .grid-item-ie div, .section__ksp .grid-item-5 .grid-item-ie div, .section__ksp .grid-item-6 .grid-item-ie div, .section__ksp .grid-item-7 .grid-item-ie div, .section__ksp .grid-item-8 .grid-item-ie div, .section__ksp .grid-item-9 .grid-item-ie div { z-index: 9 } .section__ksp .grid-item-1 .grid-item-ie::after, .section__ksp .grid-item-1 .grid-item-ie::before, .section__ksp .grid-item-10 .grid-item-ie::after, .section__ksp .grid-item-10 .grid-item-ie::before, .section__ksp .grid-item-13 .grid-item-ie::after, .section__ksp .grid-item-13 .grid-item-ie::before, .section__ksp .grid-item-14 .grid-item-ie::after, .section__ksp .grid-item-14 .grid-item-ie::before, .section__ksp .grid-item-15 .grid-item-ie::after, .section__ksp .grid-item-15 .grid-item-ie::before, .section__ksp .grid-item-23 .grid-item-ie::after, .section__ksp .grid-item-23 .grid-item-ie::before, .section__ksp .grid-item-24 .grid-item-ie::after, .section__ksp .grid-item-24 .grid-item-ie::before, .section__ksp .grid-item-4 .grid-item-ie::after, .section__ksp .grid-item-4 .grid-item-ie::before, .section__ksp .grid-item-5 .grid-item-ie::after, .section__ksp .grid-item-5 .grid-item-ie::before, .section__ksp .grid-item-6 .grid-item-ie::after, .section__ksp .grid-item-6 .grid-item-ie::before, .section__ksp .grid-item-7 .grid-item-ie::after, .section__ksp .grid-item-7 .grid-item-ie::before, .section__ksp .grid-item-8 .grid-item-ie::after, .section__ksp .grid-item-8 .grid-item-ie::before, .section__ksp .grid-item-9 .grid-item-ie::after, .section__ksp .grid-item-9 .grid-item-ie::before { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "" } .section__ksp .grid-item-1 .grid-item-ie::before, .section__ksp .grid-item-10 .grid-item-ie::before, .section__ksp .grid-item-13 .grid-item-ie::before, .section__ksp .grid-item-14 .grid-item-ie::before, .section__ksp .grid-item-15 .grid-item-ie::before, .section__ksp .grid-item-23 .grid-item-ie::before, .section__ksp .grid-item-24 .grid-item-ie::before, .section__ksp .grid-item-4 .grid-item-ie::before, .section__ksp .grid-item-5 .grid-item-ie::before, .section__ksp .grid-item-6 .grid-item-ie::before, .section__ksp .grid-item-7 .grid-item-ie::before, .section__ksp .grid-item-8 .grid-item-ie::before, .section__ksp .grid-item-9 .grid-item-ie::before { z-index: 1; background-repeat: repeat; background-image: url(../images/bg\ \(1\).jpg); background-size: 1500px 400px } .section__ksp .grid-item-1 .grid-item-ie::after, .section__ksp .grid-item-10 .grid-item-ie::after, .section__ksp .grid-item-13 .grid-item-ie::after, .section__ksp .grid-item-14 .grid-item-ie::after, .section__ksp .grid-item-15 .grid-item-ie::after, .section__ksp .grid-item-23 .grid-item-ie::after, .section__ksp .grid-item-24 .grid-item-ie::after, .section__ksp .grid-item-4 .grid-item-ie::after, .section__ksp .grid-item-5 .grid-item-ie::after, .section__ksp .grid-item-6 .grid-item-ie::after, .section__ksp .grid-item-7 .grid-item-ie::after, .section__ksp .grid-item-8 .grid-item-ie::after, .section__ksp .grid-item-9 .grid-item-ie::after { z-index: 1; background: linear-gradient(to top, rgba(36, 40, 45, .93) 0, rgba(0, 0, 0, .6) 100%) padding-box } .section__ksp .grid-item-16 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-16 .wd__feature__list .wd__feature__data *, .section__ksp .grid-item-17 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-17 .wd__feature__list .wd__feature__data *, .section__ksp .grid-item-18 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-18 .wd__feature__list .wd__feature__data *, .section__ksp .grid-item-19 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-19 .wd__feature__list .wd__feature__data *, .section__ksp .grid-item-20 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-20 .wd__feature__list .wd__feature__data *, .section__ksp .grid-item-21 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-21 .wd__feature__list .wd__feature__data *, .section__ksp .grid-item-22 .wd__feature__list .wd__feature__data, .section__ksp .grid-item-22 .wd__feature__list .wd__feature__data * { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -moz-linear-gradient(-29deg, #86929e 0, #ddecfa 45%, #ddecfa 50%, #ddecfa 55%, #86929e 100%); background-image: -webkit-linear-gradient(-29deg, #86929e 0, #ddecfa 45%, #ddecfa 50%, #ddecfa 55%, #86929e 100%); background-image: -ms-linear-gradient(-29deg, #86929e 0, #ddecfa 45%, #ddecfa 50%, #ddecfa 55%, #86929e 100%); background-image: linear-gradient(-29deg, #86929e 0, #ddecfa 45%, #ddecfa 50%, #ddecfa 55%, #86929e 100%) } .section__ksp .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe__top .img__icon { width: 100%; height: 110px; background-size: contain } #CMD .section__ksp .grid-item-16 .img__icon0 { background-image: url(../images/icon_smartamp.png) } #CMD .section__ksp .grid-item-17 .img__icon0 { background-image: url(../images/icon_dolbyvisionatmos.png) } #CMD .section__ksp .grid-item-18 .img__icon0 { background-image: url(../images/icon_fourmic.png) } #CMD .section__ksp .grid-item-19 .img__icon0 { background-image: url(../images/icon_ainoise.png) } #CMD .section__ksp .grid-item-20 .img__icon0 { background-image: url(../images/icon_guard.png) } #CMD .section__ksp .grid-item-21 .img__icon0 { background-image: url(../images/icon_dolbyvision.png) } #CMD .section__ksp .grid-item-22 .img__icon0 { background-image: url(../images/icon_ircamera.png) } .section__ksp .grid-item-18, .section__ksp .grid-item-20, .section__ksp .grid-item-21, .section__ksp .grid-item-23, .section__ksp .grid-item-24 { display: none!important } .section__airup { position: relative; z-index: 9; margin-top: 0; padding-top: 0 } .section__airup.static .animation__container { margin-top: -681px } .section__airup.static .image__container.main { position: relative; left: 0; margin: 0; width: 100%; height: auto } .section__airup.static .image__container.show_detail { margin-top: -240px } .section__airup.static .img__body_bg { display: none } .section__airup.static .img__body_main { left: 50%; margin-left: -1280px; width: 2560px; height: 1200px } #CMD .section__airup.static .img__body_main { background-image: url(../images/large/1x/s2_main.jpg) } .section__airup.initSCrolling { margin-top: 0; padding-top: 0 } .section__airup.initScrolling #airupAniContent { z-index: 9; opacity: 0 } .section__airup.initScrolling .image__container.main { transform: scale(.44) } .section__airup.initScrolling #airupScrollContainer { position: relative; padding-top: 1000px } .section__airup.initScrolling .flexLayout { position: relative; height: 100vh } .section__airup.initScrolling .animation__container { position: absolute; top: 0; left: 50%; margin-top: 0; height: 0 } .section__airup.initScrolling .animation__container .image__container { width: 1810px; height: 344px } .section__airup.initScrolling .animation__container .img__body_main { z-index: 9; width: 1810px; height: 344px } .section__airup.initScrolling .animation__container .img__body_cover { top: -228px; left: -1680px; width: 1810px; height: 344px } .section__airup.initScrolling .animation__container .img__bone { top: -38px; left: -35px; width: 70px; height: 205px } .section__airup.initScrolling .animation__container .img__board { z-index: 5; top: -39px; left: -33px; width: 880px; height: 140px } .section__airup.initScrolling .animation__container .img__body_bg { left: 50%; margin-left: -1280px; width: 2560px; height: 1200px; position: absolute; top: -541px; opacity: 0 } .section__airup.initScrolling .animation__container .roll__container { position: absolute; z-index: 1; top: 0; left: 0; width: 1810px; height: 344px } .section__airup.initScrolling .animation__container .roll_item { position: absolute; top: 0; left: 0; width: 0; height: 0 } .section__airup.initScrolling .animation__container .roll_item::before { display: block; position: absolute; z-index: 999; width: 0; height: 0; content: "" } .section__airup.initScrolling .animation__container .roll_screen_board { top: 185px; left: 50%; margin-left: -37px; transform: rotate(-12.2deg); transform-origin: center } .section__airup.initScrolling .animation__container .roll_bone { z-index: 9; top: 50px; left: 709px; transform-origin: center } .section__airup.initScrolling .animation__container .roll_cover { z-index: 1; top: 45px; left: 799px; transform: rotate(132deg); transform-origin: center } .section__display.hide { display: none!important } .section__display .slide-Video { position: absolute; overflow: hidden; top: 0; left: 50%; opacity: 1; margin-top: 154px; margin-left: -550px; width: 1100px; height: 1100px; transform: scale(.764); transform-origin: center } .section__display .blackMaskScreen { position: absolute; z-index: 3; top: 0; left: 0; opacity: 0; background: rgba(0, 0, 0, .8) } .section__display .blackMaskScreen-top { top: 0; width: 100%; height: 632px } .section__display .blackMaskScreen-bottom { top: 640px; width: 100%; height: 160px } .section__display .video_item { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100% } .section__display .wd__feature__list .feature-icon .wd__feature__data { position: relative; height: 48px } .section__display .wd__feature__list .img__icon { position: absolute; bottom: 0; background-size: contain } .section__display .wd__feature__list .feature-icon.feature-8 { min-width: 56px!important } .section__display .wd__feature__list .img__icon8 { bottom: 8px; width: 56px!important; height: 80px!important } #CMD .section__display .wd__feature__list .img__icon8 { background-image: url(../images/icon_hdr.png) } .section__display .wd__feature__list .feature-icon.feature-9 { min-width: 60px!important } .section__display .wd__feature__list .img__icon9 { bottom: 8px; width: 60px!important; height: 89px!important } #CMD .section__display .wd__feature__list .img__icon9 { background-image: url(../images/icon_vesa.png) } .section__display .wd__feature__list .feature-icon.feature-10 { min-width: 100px!important } .section__display .wd__feature__list .img__icon10 { bottom: 8px; width: 100px!important; height: 100px!important } #CMD .section__display .wd__feature__list .img__icon10 { background-image: url(../images/icon_tuv.png) } .section__display .wd__feature__list .feature-icon.feature-11 { min-width: 100px!important } .section__display .wd__feature__list .img__icon11 { bottom: 8px; width: 100px!important; height: 100px!important } #CMD .section__display .wd__feature__list .img__icon11 { background-image: url(../images/icon_tuv.png) } .section__display .wd__feature__list .feature-icon.feature-12 { min-width: 144px!important } .section__display .wd__feature__list .img__icon12 { bottom: 8px; width: 144px!important; height: 87px!important } #CMD .section__display .wd__feature__list .img__icon12 { background-image: url(../images/icon_sgs.png) } .section__display .wd__feature__list .feature-icon.feature-13 { min-width: 132px!important } .section__display .wd__feature__list .img__icon13 { bottom: -27px; width: 132px!important; height: 132px!important } #CMD .section__display .wd__feature__list .img__icon13 { background-image: url(../images/icon_oled.png) } .section__display .wd__feature__list .feature-icon.feature-14 { min-width: 168px!important } .section__display .wd__feature__list .img__icon14 { bottom: 0; width: 168px!important; height: 89px!important } #CMD .section__display .wd__feature__list .img__icon14 { background-image: url(../images/icon_dolbyvision.png) } .section__screenpadPlusPerf { overflow: hidden; margin-top: 0; padding-top: 0 } .section__screenpadPlusPerf .slick-tab-content .slick-title .title-nav .slick-nav-btn { text-transform: unset } .section__screenpadPlusPerf .slick-tab-content .slick-title .title-nav .slick-nav-btn .nav__text { pointer-events: none } .section__screenpadPlusPerf .slick-tab-content .slick-title .title-nav .slick-nav-btn.active, .section__screenpadPlusPerf .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus { color: transparent!important; border-width: 0!important } .section__performance { margin-top: 0; padding-top: 0 } .section__performance .performance_chart_container { display: none!important } .section__performance .img__evo { left: 50%; margin-left: -69px; width: 138px; height: 172px; position: absolute; top: 50% } #CMD .section__performance .img__evo { background-image: url(../images_evo.png) } .section__cpu .performance_chart .item__highline .img__highline_arrow { background-color: #fff } .section__cpu .performance_chart .item__highline .highline_text { color: #fff } .section__cpu .performance_chart .bar__score__txt { font-size: 1rem } .section__cpu .performance_chart .main { background-image: linear-gradient(90deg, #1c212d 0, #404f60 35%, #9099b1 65%, #fff 100%) } .section__cpu .performance_chart .main .bar__score__txt { color: #000 } .section__cpu .performance_chart .gray { background-image: linear-gradient(90deg, #707070 25%, #555 100%) } .section__gpu { overflow: hidden; margin-top: 0; padding-top: 0 } .section__gpu .wd__feature__list .feature-icon .img__icon { position: absolute; bottom: 0 } .section__gpu .wd__feature__list .feature-icon .wd__feature__data { position: relative } .section__gpu .img__icon4 { width: 360px; height: 148px; background-size: contain } #CMD .section__gpu .img__icon4 { background-image: url(../images/icon_rtx2022.png) } .section__gpu .performance_chart .item__highline .highline_text { color: #fff } .section__gpu .performance_chart .item__highline .img__highline_arrow { background-color: #fff } .section__gpu .performance_chart .item__content .bar__content { border-radius: 0 6px 6px 0 } .section__gpu .performance_chart .item__content .title { color: #fff } .section__gpu .performance_chart .item__content .bar__score__txt { color: #fff } .section__gpu .performance_chart .bar__content.main { background-image: linear-gradient(90deg, #86929e 25%, #ddecfa 100%) } .section__gpu .performance_chart .bar__content.main .bar__score__txt { color: #181818 } .section__gpu .performance_chart .gray { background-image: linear-gradient(90deg, #707070 25%, #555 100%) } .section__gpu .performance_chart .gray .bar__score__txt { background-image: linear-gradient(90deg, #707070 25%, #555 100%) } .section__gpu .performance_chart .text_comment { color: #999 } .section__gpu .performance_chart_container { margin-right: auto; margin-left: auto } .section__gpu .performance_chart { margin-right: auto; margin-left: auto } .section__s7 .hybrid__contents { margin-top: 50px } .section__s7 .video-container { position: absolute; z-index: 2; width: 668px; height: 524px } .section__s7 .video-container .detect-point-enter { position: absolute; top: 50%; width: 1px; height: 1px } .section__s7 .video-container .detect-point-out { position: absolute; top: 0; width: 1px; height: 100% } .section__s7 .video-container video { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px } .section__s7 .video-container .wd__play__btn { z-index: 10; bottom: -53px; left: 0; margin-left: unset } .section__s7 .video-container .video-content { position: absolute; top: 0; left: 0; width: 678px; height: 524px; transform: matrix3d(1.208542, .079851, 0, .000391, -.0076, .984266, 0, -.000034, 0, 0, 1, 0, 3, -1, 0, 1); transform-origin: 0 0 0 } .section__s7 .video-container .video-content .content-text { position: absolute; left: 50%; width: 120px; color: #fff; font-size: 1.625rem; text-align: center; line-height: 1.2 } .section__s7 .video-container .video-content .content-text.text-1 { bottom: 412px; margin-left: -234px } .section__s7 .video-container .video-content .content-text.text-2 { bottom: 491px; margin-left: 32px } .section__s7 .video-container .video-content .content-text.text-3 { top: 496px; margin-left: -13px } .section__s7 .img-container { position: relative; z-index: 1; left: 50%; margin-top: 40px; margin-left: -325px } .section__s7 .img-container .img__main { position: relative; overflow: hidden; width: 898px; height: 600px; border-radius: 20px } .section__s7 .img__main { background-image: url(../images/main2.jpg) } .section__s7 .video-container .video-content .content-text { opacity: 0 } .section__s7 .video-container .video-content .content-text.active { opacity: 1; transition: opacity .4s } .section__thermal { overflow: hidden; margin-top: 0; padding-top: 0 } .section__thermal .image__container { left: 50%; margin-left: -1000px; width: 2000px; height: 1200px; position: relative } .section__thermal .img__static { z-index: 13 } .section__thermal.aniInit .img__static { opacity: 0; transition: opacity 250ms ease-in-out } .section__thermal.aniInit .fans__container, .section__thermal.aniInit .img__bg, .section__thermal.aniInit .img__fans, .section__thermal.aniInit .img__pd_down, .section__thermal.aniInit .img__pd_up { position: absolute; top: 0; left: 0 } .section__thermal.aniInit .img__bg { z-index: 1 } .section__thermal.aniInit .img__pd_down { z-index: 3 } .section__thermal.aniInit .fans__container { z-index: 5 } .section__thermal.aniInit .img__pd_up { z-index: 6 } .section__thermal.aniInit #thermal_brush { z-index: 4 } .section__thermal.aniInit.aniEnd .img__static { display: block; z-index: 9; opacity: 1 } .section__thermal .image__container { position: relative } .section__thermal .img__static { display: block; opacity: 1 } .section__thermal .img__bg, .section__thermal .img__pd { display: none; opacity: 0 } .section__thermal.aniInit .img__static { display: block; opacity: 0 } .section__thermal.aniInit .img__pd, .section__thermal.aniInit .img__pd_down { display: block; opacity: 1 } .section__thermal.aniInit .fans__container { left: 50%; width: 304px; height: 304px } .section__thermal.aniInit .left__fans { top: 670px; margin-left: -432px } .section__thermal.aniInit .right__fans { top: 736px; margin-left: -40px } .section__thermal.aniInit .img__fans { transform-origin: center } .section__thermal.aniInit .img__fans-0 { top: 0; transform: scale(1, .15) } .section__thermal.aniInit .img__fans-1 { top: 7px; transform: scale(.8, .15) } .section__thermal.aniInit .img__fans-2 { top: 14px; transform: scale(.7, .15) } .section__thermal.aniInit .img__static { left: 50%; margin-left: -1000px; width: 2000px; height: 1200px } .section__thermal.aniInit .img__pd_down { left: 50%; margin-left: -1000px; width: 2000px; height: 1200px } .section__thermal.aniInit .img__pd_up { left: 50%; margin-left: -1000px; width: 2000px; height: 1200px; transition: opacity .2s ease-in-out } .section__thermal.aniInit .fans__container { opacity: .8; transform: scale(.8) rotate(2deg); transform-origin: center } .section__thermal.aniInit .right__fans { transform: scale(.9) rotate(2deg) } .section__thermal.aniInit .img__fans { left: 50%; margin-left: -152px; width: 304px; height: 304px; opacity: 0; transition: opacity .1s ease } .section__thermal.aniInit .img__fans::before { display: block; position: absolute; top: 0; left: 0; width: 304px; height: 304px; background-size: contain; background-size: contain; transform: rotate(0); transition: all 1ms ease; content: "" } .section__thermal.aniPlay .image__container .fans__container .img__fans { opacity: 1 } .section__thermal.aniPlay .image__container .fans__container .img__fans::before { will-change: transform; transform: rotate(-72000deg); transition: transform 9s ease .2s } .section__thermal.aniPlay .img__pd_up { opacity: .35; transition: opacity .3s ease } #thermal_brush { position: absolute; top: 0; left: 0; width: 2000px; height: 1200px } .section__connectivity { margin-top: 0; padding-top: 0 } .section__connectivity .descPath__container { position: absolute; z-index: 9; top: 0; left: 0 } .section__connectivity .descPath-item { display: none } .section__connectivity .descpath { fill: none; stroke-miterlimit: 10; stroke: #fff } .section__connectivity .imgDesc__text { color: #fff } .section__connectivity .image__container.aniInit .imgDesc__text { opacity: 0; transition: opacity 0 ease } .section__connectivity .image__container.aniInit .descPath-item line, .section__connectivity .image__container.aniInit .descPath-item polyline { opacity: 0; transition: opacity .3s ease, stroke-dashoffset 0s ease; stroke-dashoffset: 207; stroke-dasharray: 207 } .section__connectivity .image__container.aniInit.aniPlay .imgDesc__text { opacity: 1; transition-delay: .215s; transition-duration: .429s } .section__connectivity .image__container.aniInit.aniPlay .descPath-item line, .section__connectivity .image__container.aniInit.aniPlay .descPath-item polyline { stroke-dashoffset: 0; opacity: 1; transition: opacity .2s ease, stroke-dashoffset .7s ease } .section__audioDolby { background: #0a0e14 } .section__audioDolby .wd__feature__list { margin-right: auto; margin-left: auto } .section__audioDolby .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top { display: block } .section__audioDolby .wd__feature__list .wd__feature__data { position: relative } #CMD .section__audioDolby .wd__feature__list .img__icon1 { background-image: url(../images/icon_amp.png) } #CMD .section__audioDolby .wd__feature__list .img__icon2 { background-image: url(../images/icon_atmos.svg) } #CMD .section__audioDolby .wd__feature__list .img__icon3 { background-image: url(../images/icon_harman.png) } #CMD .section__audioDolby .wd__feature__list .img__icon4 { background-image: url(../images/icon_audiobooster.png) } .section__audioDolby .wd__feature__list .wd__feature .img__icon { margin-right: auto; margin-left: auto } .section__mobility { margin-top: 0; padding-top: 0; background-color: #0a0e14 } .section__mobility .img__main { left: 50%; margin-left: -.5px; width: 1px; height: 1px } #CMD .section__mobility .img__main { background-image: url(../images/large/1x/smobility_main.jpg) } .section__comment { margin-top: 0; padding-top: 0; padding-bottom: 0 } .inner-view { background: rgba(0, 0, 0, 0) } .inner-view .inner-view-container .modal-button-container .modal-button { background-color: #000; color: #fff; border-color: #fff } .inner-view .inner-view-container .modal-button-container .modal-button:hover { background-color: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .6) } .inner-view #active__modal-inner__conference { background-color: #fff } .inner-view #active__modal-inner__conference .conference-inner { background-color: #fff } .inner-view .modal-inner__sectionsUserExperience { background-color: #f5f5f5 } .inner-view .wd__content .content__title { line-height: 1.2 } .section__s11inner1 { margin-top: 0; padding-top: 0 } .section__s11inner1 .wd__feature__list .wd__feature__describe__top { display: none!important } #section__s11inner1 .wd__performance__graph { position: relative; margin-top: 38px; text-align: left } #section__s11inner1 .wd__performance__graph .graph__line.line-1 .graph__bar { background: linear-gradient(to top, #839fae, #839fae) } #section__s11inner1 .wd__performance__graph .graph__line.line-2 .graph__bar, #section__s11inner1 .wd__performance__graph .graph__line.line-3 .graph__bar { background: linear-gradient(to left, #ccc, #7a7a7a 29%) } #section__s11inner1 .wd__performance__graph .graph-badge .badge__value { color: #839fae } #section__s11inner1 .wd__performance__graph .row { position: relative; margin-right: auto; margin-left: auto } #section__s11inner1 .wd__performance__graph .row .col { right: auto; left: auto; float: left; margin: 0; margin-left: auto; padding: 0; box-sizing: border-box } #section__s11inner1 .wd__performance__graph .row .col.l3 { width: 25% } #section__s11inner1 .wd__performance__graph .row .col.push-l1 { left: 8.33333% } .section__s11inner1 .graphs { position: relative; left: 50%; text-align: center } .section__s11inner1 .graphs .graph__part { display: inline-block } .section__s11inner1 .graphs .graph__title { color: #fff; text-align: left } .section__s11inner1 .wd__performance__graph .graph__line.line-1 .graph__bar { background: linear-gradient(to top, #839fae, #839fae) } .section__s11inner1 .wd__performance__graph .graph__line.line-2 .graph__bar { background: linear-gradient(to left, #ccc, #7a7a7a 29%) } .section__s11inner1 .wd__performance__graph .graph__line.line-3 .graph__bar { background: linear-gradient(to left, #ccc, #7a7a7a 29%) } .section__s11inner1 .wd__performance__graph .bar__value, .section__s11inner1 .wd__performance__graph .graph__caption { color: rgba(255, 242, 242, .9490196078) } .section__s11inner1 .wd__performance__graph .graph-badge .badge__value { color: #839fae } .section__s11inner1 .wd__performance__graph .graph__line.line-1 .graph__bar .bar__value { color: #839fae } .section__s11inner1 .graph-0 .wd__performance__graph .graph__line.line-1 .graph__bar { width: 100% } .section__s11inner1 .graph-0 .wd__performance__graph .graph__line.line-2 .graph__bar { width: 28.5714% } .section__s11inner1 .graph-0 .wd__performance__graph .graph__line.line-3 .graph__bar { width: 7.4285% } .section__s11inner1 .graph-1 .wd__performance__graph .graph__line.line-1 .graph__bar { width: 100% } .section__s11inner1 .graph-1 .wd__performance__graph .graph__line.line-2 .graph__bar { width: 38.41% } .section__s11inner1 .graph-1 .wd__performance__graph .graph__line.line-3 .graph__bar { width: 10% } .section__s17inner1 { margin-top: 0; padding-top: 0 } html { --wd-guide-floatspace-section-height: 205px; --wd-guide-floatspace-image-height: 100px } @media all and (min-width:1279.5px) and (max-width:1279.5px) { html { --wd-guide-floatspace-section-height: 205px; --wd-guide-floatspace-image-height: 100px } } @media all and (max-width:730.5px) { html { --wd-guide-floatspace-section-height: 205px; --wd-guide-floatspace-image-height: 100px } }