body #CMD { font-size: 16px; line-height: 1; } @media (min-width: 1280px) { #CMD .pc_desctop { max-width: max-content !important; } #CMD .pc_desctop_1 { max-width: none; } } @media (max-width: 730.5px) { #CMD .main_image, #CMD .img__icon1, #CMD .img__icon2, #CMD .img__icon3, #CMD .main_image_1, #CMD .pc_desctop { max-width: 100% !important; } #CMD .pc_desctop_1 { max-width: none; } } .inline__block { display: inline-block } #CMD.font-tt .sup__base, #CMD.font-tt sup { position: relative; top: -.5em; font-size: 19.6px; font-feature-settings: "normal"; vertical-align: baseline; -webkit-text-size-adjust: none !important; text-size-adjust: none !important } #CMD.font-tt .sup__base, #CMD.font-tt .sup__base *, #CMD.font-tt sup, #CMD.font-tt sup * { color: inherit !important; line-height: 0 !important } #CMD.font-tt [class*=sign-].sup__base, #CMD.font-tt sup[class*=sign-] { font-size: 38px; font-feature-settings: "numr" } #CMD.font-tt .sign-deg.sup__base, #CMD.font-tt sup.sign-deg { top: 0 } #CMD.font-tt .sign-reg.sup__base, #CMD.font-tt sup.sign-reg { top: .132em; font-size: 1.24em } #CMD.font-tt .sign-cr.sup__base, #CMD.font-tt sup.sign-cr { top: 0; vertical-align: unset } #CMD.font-tt .sign-tm.sup__base, #CMD.font-tt sup.sign-tm { top: .114em; font-size: 1.2em } #CMD.font-tt .sign-star.sup__base, #CMD.font-tt sup.sign-star { top: 0 } #CMD.font-tt .sign-xe.sup__base, #CMD.font-tt sup.sign-xe { top: .02em; font-size: 19.6px; vertical-align: super } #CMD.font-tt .footnote-num.sup__base, #CMD.font-tt sup.footnote-num { top: auto; vertical-align: baseline; font-size: 38px; font-feature-settings: "numr"; line-height: inherit !important } #CMD.font-tt .sup__base a, #CMD.font-tt sup a { color: inherit !important; /*font-size: inherit !important;*/ font-size: 23px; vertical-align: inherit !important } #CMD.font-tt .ksp__layout .wd__content .content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup, #CMD.font-tt .section__display-inner-s4 .item__content sup, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup, #CMD.font-tt .sections-wdcontent .content__link sup, #CMD.font-tt .sections-wdcontent .content__slogan sup, #CMD.font-tt .sections-wdcontent .content__title sup, #CMD.font-tt .sup__ttnormal sup, #CMD.font-tt .wd__content .content__link sup, #CMD.font-tt .wd__content .content__slogan sup, #CMD.font-tt .wd__content .content__title sup, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup, #CMD.font-tt .wdblockimg .wd__content .content__title sup, #CMD.font-tt .wdtile.wdtile-ksp * sup, #CMD.font-tt [class*=text__tt] sup { position: relative; top: -.5em; font-size: 19.6px; font-feature-settings: "normal"; vertical-align: baseline; -webkit-text-size-adjust: none !important; text-size-adjust: none !important } #CMD.font-tt .ksp__layout .wd__content .content__info, #CMD.font-tt .ksp__layout .wd__content .content__info *, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup *, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup *, #CMD.font-tt .section__display-inner-s4 .item__content sup, #CMD.font-tt .section__display-inner-s4 .item__content sup *, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup *, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup *, #CMD.font-tt .sections-wdcontent .content__link sup, #CMD.font-tt .sections-wdcontent .content__link sup *, #CMD.font-tt .sections-wdcontent .content__slogan sup, #CMD.font-tt .sections-wdcontent .content__slogan sup *, #CMD.font-tt .sections-wdcontent .content__title sup, #CMD.font-tt .sections-wdcontent .content__title sup *, #CMD.font-tt .sup__ttnormal sup, #CMD.font-tt .sup__ttnormal sup *, #CMD.font-tt .wd__content .content__link sup, #CMD.font-tt .wd__content .content__link sup *, #CMD.font-tt .wd__content .content__slogan sup, #CMD.font-tt .wd__content .content__slogan sup *, #CMD.font-tt .wd__content .content__title sup, #CMD.font-tt .wd__content .content__title sup *, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup *, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup *, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup *, #CMD.font-tt .wdblockimg .wd__content .content__title sup, #CMD.font-tt .wdblockimg .wd__content .content__title sup *, #CMD.font-tt .wdtile.wdtile-ksp * sup, #CMD.font-tt .wdtile.wdtile-ksp * sup *, #CMD.font-tt [class*=text__tt] sup, #CMD.font-tt [class*=text__tt] sup * { -webkit-text-fill-color: initial !important; background-image: none !important; color: inherit !important; line-height: 0 !important } #CMD.font-tt .ksp__layout .wd__content [class*=sign-].content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup[class*=sign-], #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup[class*=sign-], #CMD.font-tt .section__display-inner-s4 .item__content sup[class*=sign-], #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup[class*=sign-], #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup[class*=sign-], #CMD.font-tt .sections-wdcontent .content__link sup[class*=sign-], #CMD.font-tt .sections-wdcontent .content__slogan sup[class*=sign-], #CMD.font-tt .sections-wdcontent .content__title sup[class*=sign-], #CMD.font-tt .sup__ttnormal sup[class*=sign-], #CMD.font-tt .wd__content .content__link sup[class*=sign-], #CMD.font-tt .wd__content .content__slogan sup[class*=sign-], #CMD.font-tt .wd__content .content__title sup[class*=sign-], #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup[class*=sign-], #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup[class*=sign-], #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup[class*=sign-], #CMD.font-tt .wdtile.wdtile-ksp * sup[class*=sign-], #CMD.font-tt [class*=text__tt] sup[class*=sign-] { font-size: 38px; font-feature-settings: "numr" } #CMD.font-tt .ksp__layout .wd__content .sign-deg.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.sign-deg, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.sign-deg, #CMD.font-tt .section__display-inner-s4 .item__content sup.sign-deg, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.sign-deg, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.sign-deg, #CMD.font-tt .sections-wdcontent .content__link sup.sign-deg, #CMD.font-tt .sections-wdcontent .content__slogan sup.sign-deg, #CMD.font-tt .sections-wdcontent .content__title sup.sign-deg, #CMD.font-tt .sup__ttnormal sup.sign-deg, #CMD.font-tt .wd__content .content__link sup.sign-deg, #CMD.font-tt .wd__content .content__slogan sup.sign-deg, #CMD.font-tt .wd__content .content__title sup.sign-deg, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.sign-deg, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.sign-deg, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-deg, #CMD.font-tt .wdtile.wdtile-ksp * sup.sign-deg, #CMD.font-tt [class*=text__tt] sup.sign-deg { top: 0 } #CMD.font-tt .ksp__layout .wd__content .sign-reg.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.sign-reg, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.sign-reg, #CMD.font-tt .section__display-inner-s4 .item__content sup.sign-reg, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.sign-reg, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.sign-reg, #CMD.font-tt .sections-wdcontent .content__link sup.sign-reg, #CMD.font-tt .sections-wdcontent .content__slogan sup.sign-reg, #CMD.font-tt .sections-wdcontent .content__title sup.sign-reg, #CMD.font-tt .sup__ttnormal sup.sign-reg, #CMD.font-tt .wd__content .content__link sup.sign-reg, #CMD.font-tt .wd__content .content__slogan sup.sign-reg, #CMD.font-tt .wd__content .content__title sup.sign-reg, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.sign-reg, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.sign-reg, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-reg, #CMD.font-tt .wdtile.wdtile-ksp * sup.sign-reg, #CMD.font-tt [class*=text__tt] sup.sign-reg { top: -.5em; font-size: 16.8px } #CMD.font-tt .ksp__layout .wd__content .sign-cr.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.sign-cr, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.sign-cr, #CMD.font-tt .section__display-inner-s4 .item__content sup.sign-cr, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.sign-cr, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.sign-cr, #CMD.font-tt .sections-wdcontent .content__link sup.sign-cr, #CMD.font-tt .sections-wdcontent .content__slogan sup.sign-cr, #CMD.font-tt .sections-wdcontent .content__title sup.sign-cr, #CMD.font-tt .sup__ttnormal sup.sign-cr, #CMD.font-tt .wd__content .content__link sup.sign-cr, #CMD.font-tt .wd__content .content__slogan sup.sign-cr, #CMD.font-tt .wd__content .content__title sup.sign-cr, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.sign-cr, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.sign-cr, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-cr, #CMD.font-tt .wdtile.wdtile-ksp * sup.sign-cr, #CMD.font-tt [class*=text__tt] sup.sign-cr { top: 0; vertical-align: unset } #CMD.font-tt .ksp__layout .wd__content .sign-tm.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.sign-tm, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.sign-tm, #CMD.font-tt .section__display-inner-s4 .item__content sup.sign-tm, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.sign-tm, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.sign-tm, #CMD.font-tt .sections-wdcontent .content__link sup.sign-tm, #CMD.font-tt .sections-wdcontent .content__slogan sup.sign-tm, #CMD.font-tt .sections-wdcontent .content__title sup.sign-tm, #CMD.font-tt .sup__ttnormal sup.sign-tm, #CMD.font-tt .wd__content .content__link sup.sign-tm, #CMD.font-tt .wd__content .content__slogan sup.sign-tm, #CMD.font-tt .wd__content .content__title sup.sign-tm, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.sign-tm, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.sign-tm, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-tm, #CMD.font-tt .wdtile.wdtile-ksp * sup.sign-tm, #CMD.font-tt [class*=text__tt] sup.sign-tm { top: 0; font-size: 38px } #CMD.font-tt .ksp__layout .wd__content .sign-star.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.sign-star, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.sign-star, #CMD.font-tt .section__display-inner-s4 .item__content sup.sign-star, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.sign-star, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.sign-star, #CMD.font-tt .sections-wdcontent .content__link sup.sign-star, #CMD.font-tt .sections-wdcontent .content__slogan sup.sign-star, #CMD.font-tt .sections-wdcontent .content__title sup.sign-star, #CMD.font-tt .sup__ttnormal sup.sign-star, #CMD.font-tt .wd__content .content__link sup.sign-star, #CMD.font-tt .wd__content .content__slogan sup.sign-star, #CMD.font-tt .wd__content .content__title sup.sign-star, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.sign-star, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.sign-star, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-star, #CMD.font-tt .wdtile.wdtile-ksp * sup.sign-star, #CMD.font-tt [class*=text__tt] sup.sign-star { top: 0; font-feature-settings: "numr" } #CMD.font-tt .ksp__layout .wd__content .sign-xe.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.sign-xe, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.sign-xe, #CMD.font-tt .section__display-inner-s4 .item__content sup.sign-xe, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.sign-xe, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.sign-xe, #CMD.font-tt .sections-wdcontent .content__link sup.sign-xe, #CMD.font-tt .sections-wdcontent .content__slogan sup.sign-xe, #CMD.font-tt .sections-wdcontent .content__title sup.sign-xe, #CMD.font-tt .sup__ttnormal sup.sign-xe, #CMD.font-tt .wd__content .content__link sup.sign-xe, #CMD.font-tt .wd__content .content__slogan sup.sign-xe, #CMD.font-tt .wd__content .content__title sup.sign-xe, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.sign-xe, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.sign-xe, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.sign-xe, #CMD.font-tt .wdtile.wdtile-ksp * sup.sign-xe, #CMD.font-tt [class*=text__tt] sup.sign-xe { top: .04em; font-size: .8em; vertical-align: super; font-feature-settings: "numr" } #CMD.font-tt .ksp__layout .wd__content .footnote-num.content__info, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.footnote-num, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.footnote-num, #CMD.font-tt .section__display-inner-s4 .item__content sup.footnote-num, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.footnote-num, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.footnote-num, #CMD.font-tt .sections-wdcontent .content__link sup.footnote-num, #CMD.font-tt .sections-wdcontent .content__slogan sup.footnote-num, #CMD.font-tt .sections-wdcontent .content__title sup.footnote-num, #CMD.font-tt .sup__ttnormal sup.footnote-num, #CMD.font-tt .wd__content .content__link sup.footnote-num, #CMD.font-tt .wd__content .content__slogan sup.footnote-num, #CMD.font-tt .wd__content .content__title sup.footnote-num, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.footnote-num, #CMD.font-tt .wdtile.wdtile-ksp * sup.footnote-num, #CMD.font-tt [class*=text__tt] sup.footnote-num { top: auto; vertical-align: baseline; font-size: 38px; font-feature-settings: "numr"; border-bottom: 1px solid transparent } #CMD.font-tt .ksp__layout .wd__content .footnote-num.content__info:hover, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup.footnote-num:hover, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup.footnote-num:hover, #CMD.font-tt .section__display-inner-s4 .item__content sup.footnote-num:hover, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup.footnote-num:hover, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup.footnote-num:hover, #CMD.font-tt .sections-wdcontent .content__link sup.footnote-num:hover, #CMD.font-tt .sections-wdcontent .content__slogan sup.footnote-num:hover, #CMD.font-tt .sections-wdcontent .content__title sup.footnote-num:hover, #CMD.font-tt .sup__ttnormal sup.footnote-num:hover, #CMD.font-tt .wd__content .content__link sup.footnote-num:hover, #CMD.font-tt .wd__content .content__slogan sup.footnote-num:hover, #CMD.font-tt .wd__content .content__title sup.footnote-num:hover, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup.footnote-num:hover, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup.footnote-num:hover, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup.footnote-num:hover, #CMD.font-tt .wdtile.wdtile-ksp * sup.footnote-num:hover, #CMD.font-tt [class*=text__tt] sup.footnote-num:hover { border-color: inherit } #CMD.font-tt .ksp__layout .wd__content .content__info .footnote-number-comma, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup .footnote-number-comma, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup .footnote-number-comma, #CMD.font-tt .section__display-inner-s4 .item__content sup .footnote-number-comma, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup .footnote-number-comma, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup .footnote-number-comma, #CMD.font-tt .sections-wdcontent .content__link sup .footnote-number-comma, #CMD.font-tt .sections-wdcontent .content__slogan sup .footnote-number-comma, #CMD.font-tt .sections-wdcontent .content__title sup .footnote-number-comma, #CMD.font-tt .sup__ttnormal sup .footnote-number-comma, #CMD.font-tt .wd__content .content__link sup .footnote-number-comma, #CMD.font-tt .wd__content .content__slogan sup .footnote-number-comma, #CMD.font-tt .wd__content .content__title sup .footnote-number-comma, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup .footnote-number-comma, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup .footnote-number-comma, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup .footnote-number-comma, #CMD.font-tt .wdtile.wdtile-ksp * sup .footnote-number-comma, #CMD.font-tt [class*=text__tt] sup .footnote-number-comma { vertical-align: super; font-size: .5em } #CMD.font-tt .ksp__layout .wd__content .content__info a, #CMD.font-tt .section__audioDolby-inner-s4 .wdtab__nav-btn sup a, #CMD.font-tt .section__display-inner-s1 .wdOledTable.oledTable .table_container sup a, #CMD.font-tt .section__display-inner-s4 .item__content sup a, #CMD.font-tt .section__ksp .wdtile.wdtile-ksp .wd__content .content__info sup a, #CMD.font-tt .section__spatialVision-outer-s2 .category_container .wd__content .content__info sup a, #CMD.font-tt .sections-wdcontent .content__link sup a, #CMD.font-tt .sections-wdcontent .content__slogan sup a, #CMD.font-tt .sections-wdcontent .content__title sup a, #CMD.font-tt .sup__ttnormal sup a, #CMD.font-tt .wd__content .content__link sup a, #CMD.font-tt .wd__content .content__slogan sup a, #CMD.font-tt .wd__content .content__title sup a, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__data sup a, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe sup a, #CMD.font-tt .wd__feature__list .wd__feature .wd__feature__describe__top sup a, #CMD.font-tt .wdblockimg .wd__content .content__title sup a, #CMD.font-tt .wdtile.wdtile-ksp * sup a, #CMD.font-tt [class*=text__tt] sup a { color: inherit !important; font-size: 17px !important; vertical-align: inherit !important } #CMD.font-helvetica .sup__base, #CMD.font-helvetica sup { position: relative; top: -.5em; font-size: 19.6px; font-feature-settings: "normal"; vertical-align: baseline; -webkit-text-size-adjust: none !important; text-size-adjust: none !important } #CMD.font-helvetica .sup__base, #CMD.font-helvetica .sup__base *, #CMD.font-helvetica sup, #CMD.font-helvetica sup * { -webkit-text-fill-color: initial !important; background-image: none !important; color: inherit !important; line-height: inherit !important; line-height: 0 !important } #CMD.font-helvetica [class*=sign-].sup__base, #CMD.font-helvetica sup[class*=sign-] { font-size: 38px; font-feature-settings: "numr" } #CMD.font-helvetica .sign-deg.sup__base, #CMD.font-helvetica sup.sign-deg { top: 0 } #CMD.font-helvetica .sign-reg.sup__base, #CMD.font-helvetica sup.sign-reg { top: -.1em; font-feature-settings: "numr"; font-size: .9em } #CMD.font-helvetica .sign-cr.sup__base, #CMD.font-helvetica sup.sign-cr { top: 0; vertical-align: unset } #CMD.font-helvetica .sign-tm.sup__base, #CMD.font-helvetica sup.sign-tm { top: .2em; font-size: 1.4em } #CMD.font-helvetica .sign-star.sup__base, #CMD.font-helvetica sup.sign-star { top: 0; font-feature-settings: "numr" } #CMD.font-helvetica .sign-xe.sup__base, #CMD.font-helvetica sup.sign-xe { top: 0; font-size: 19.6px; vertical-align: super } #CMD.font-helvetica .footnote-num.sup__base, #CMD.font-helvetica sup.footnote-num { top: auto; vertical-align: baseline; font-size: 38px; font-feature-settings: "numr"; line-height: inherit !important; border-bottom: 1px solid transparent } #CMD.font-helvetica .footnote-num.sup__base:hover, #CMD.font-helvetica sup.footnote-num:hover { border-color: inherit } #CMD.font-helvetica .sup__base a, #CMD.font-helvetica sup a { color: inherit !important; font-size: inherit !important; vertical-align: inherit !important } .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: #181818 } #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: #181818 } #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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/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: 50%; 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 } #CMD a[tabindex="0"] *, #CMD button[tabindex="0"] * { pointer-events: none } .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, .js-focus-visible #CMD .inner-modal .content__title:focus, .lity button:focus-visible { outline: 2px solid #248dff } #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; overflow-y: clip; 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 } .outer-view .block__scroll .block__scroll-item { /* opacity: 0; */ transform: translateY(100px) } @media all and (max-width:730.5px) { .outer-view .block__scroll .block__scroll-item { transform: translateY(60px); transform-origin: top } } .outer-view .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 } } /*! 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; 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%; max-width: 724px } } @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 * { line-height: 1.2 } .wd__content .content__slogan { position: relative; color: #595959; font-size: 25px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__slogan { font-size: 28px } } @media all and (max-width:730.5px) { .wd__content .content__slogan { padding-top: 0; padding-left: 0; font-size: 18px } } .wd__content .content__title { display: inline-block; position: relative; margin-top: 7px; padding-top: 5px; padding-bottom: 5px; font-size: 40px; -webkit-background-clip: text } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__title { margin-top: 5px; font-size: 40px } } @media all and (max-width:730.5px) { .wd__content .content__title { margin-top: 1px; width: 100%; font-size: 34px } } .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: 20px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__info { margin-top: 9px; font-size: 20px } } @media all and (max-width:730.5px) { .wd__content .content__info { margin-top: 6px; width: 100%; font-size: 18px } } .wd__content .content__info, .wd__content .content__info * { line-height: 1.4 } .wd__content .content__comment { margin-top: 11px; font-size: 20px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__comment { margin-top: 12px; font-size: 20px } } @media all and (max-width:730.5px) { .wd__content .content__comment { margin-top: 12px; font-size: 18px } } .wd__content .content__link { display: block; margin-top: -4px; padding: 5px 0; font-size: 20px; line-height: 1.4 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__link { font-size: 20px } } @media all and (max-width:730.5px) { .wd__content .content__link { font-size: 18px } } .wd__content .content__link.link--1 { margin-top: 10px } .wd__content .content__link span { display: inline; color: #174d71; 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 #174d71 } .wd__content .content__link.link-gradient { display: block; margin-top: 3px; padding: 5px 0; font-size: 20px; 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: 20px; 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, #5d5853, #5d5853 90%) } .wd__content .content__link.link-gradient:hover span { border-image: linear-gradient(to right, #5d5853, #5d5853 90%); border-image-slice: 1 } .wd__content .content__link.link-gradient::after { color: #67625b } @media all and (max-width:730.5px) { .wd__content .content__link.link-gradient { margin-top: 7px; font-size: 18px; line-height: 1.47; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #5d5853, #5d5853 90%) } .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: #67625b } } .wd__link__arrow::after { content: ">"; padding-left: 7px; color: #174d71 } @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: 35px } .wd__content.sections-wdcontent .content__info { margin-top: 4px; font-size: 20px } .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: 26px } .wd__content.sections-wdcontent .content__info { margin-top: 10px; font-size: 20px } .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: 28px } .wd__content.sections-wdcontent .content__info { margin-top: 5px; font-size: 18px } .wd__content.sections-wdcontent .modal-button-container { text-align: center } .wd__content.sections-wdcontent .modal-button-container .modal-button { margin-top: 14px } } .wd__section.theme-black .wd__content .content__comment { color: #999 } .wd__section.theme-white .wd__content .content__comment { color: #666 } @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; line-height: 1.2 } @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: 4px; line-height: 1.2 } .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 17px } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 17px } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 16px } } .wd__feature__list .wd__feature .wd__feature__data { line-height: 1.2; color: #242424 } .wd__feature__list .wd__feature .wd__feature__data, .wd__feature__list .wd__feature .wd__feature__data * { font-size: 48px } @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: 48px } } @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: 40px } } .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: 17px } .wd__feature__list .wd__feature .wd__feature__describe .comment { display: block; position: relative; margin-top: 4px; font-size: 17px } @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 * { font-size: 17px } } @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 * { font-size: 16px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe * { font-size: 17px } } @media all and (max-width:730.5px) { .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe * { font-size: 16px } } .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 } .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { margin-top: 8px; font-size: 2.875rem } @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 } .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { margin-top: 10px; font-size: 2.875rem } } @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 } .wd__feature__list .wd__feature .wd__feature__data.text__long-tw { padding-top: 5px; font-size: 2rem } } .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 } /*.slick-loading .slick-list { background: #fff url(ajax-loader.gif) center center no-repeat }*/ @font-face { font-family: slick; src: url(fonts/slick.eot); src: url(fonts/slick.eot?#iefix) format("embedded-opentype"), url(fonts/slick.woff) format("woff"), url(fonts/slick.ttf) format("truetype"), url(fonts/slick.svg#slick) format("svg"); font-weight: 400; font-style: normal } .slick-next, .slick-prev { display: block; position: absolute; cursor: pointer; top: 50%; padding: 0; width: 20px; height: 20px; color: transparent; font-size: 0; outline: 0; border: none; background: 0 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); line-height: 0 } .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover { color: transparent; outline: 0; background: 0 0 } .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-next::before, .slick-prev::before { opacity: .75; color: #fff; font-size: 20px; font-family: slick; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-prev { left: -25px } [dir=rtl] .slick-prev { right: -25px; left: auto } .slick-prev::before { content: "←" } [dir=rtl] .slick-prev::before { content: "→" } .slick-next { right: -25px } [dir=rtl] .slick-next { right: auto; left: -25px } .slick-next::before { content: "→" } [dir=rtl] .slick-next::before { content: "←" } .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { display: block; position: absolute; bottom: -25px; margin: 0; padding: 0; width: 100%; text-align: center; list-style: none } .slick-dots li { display: inline-block; position: relative; cursor: pointer; margin: 0 5px; padding: 0; width: 20px; height: 20px } .slick-dots li button { display: block; cursor: pointer; padding: 5px; width: 20px; height: 20px; color: transparent; font-size: 0; outline: 0; border: 0; background: 0 0; line-height: 0 } .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; opacity: .25; width: 20px; height: 20px; color: #000; font-size: 6px; font-family: slick; text-align: center; content: "•"; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button::before { opacity: .75; color: #000 } .slick-slider { display: block; position: relative; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { display: block; position: relative; overflow: hidden; 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 { display: block; position: relative; top: 0; left: 0; margin-right: auto; margin-left: auto } .slick-track::after, .slick-track::before { display: table; content: "" } .slick-track::after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } [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 } .section__comment.theme-black .footnotes .footnote li, .section__comment.theme-black .footnotes .footnote li * { color: #999 } .section__comment.theme-black .footnotes.footnote-item-star .footnote li { color: #999 } .section__comment.theme-black .footnotes.footnote-item-star .footnote li::before { color: #999 } .section__comment.theme-black .footnotes .footnote li.active, .section__comment.theme-black .footnotes .footnote li.active * { color: #fff } .section__comment.theme-black .footnotes.footnote-item-star .footnote li.active { color: #fff } .section__comment.theme-black .footnotes.footnote-item-star .footnote li.active::before { color: #fff } .section__comment.theme-white .footnotes .footnote li, .section__comment.theme-white .footnotes .footnote li * { color: #666 } .section__comment.theme-white .footnotes.footnote-item-star .footnote li { color: #666 } .section__comment.theme-white .footnotes.footnote-item-star .footnote li::before { color: #666 } .section__comment.theme-white .footnotes .footnote li.active, .section__comment.theme-white .footnotes .footnote li.active * { color: #000 } .section__comment.theme-white .footnotes.footnote-item-star .footnote li.active { color: #000 } .section__comment.theme-white .footnotes.footnote-item-star .footnote li.active::before { color: #000 } .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: 13px; line-height: 1.4 } .footnotes .footnote li { list-style-type: decimal; margin-bottom: 10px } .footnotes .footnote li, .footnotes .footnote li * { font-size: 13px; text-align: left; line-height: 1.5 } .footnotes.footnote-item-star .footnote li { position: relative; list-style-type: none } .footnotes.footnote-item-star .footnote li::before { display: block; position: absolute; top: 9px; left: -14px; content: "*"; line-height: 0 } @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: 13px; 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: 13px; line-height: 1.4 } .footnotes .footnote li { margin-bottom: 12px } .footnotes .footnote li, .footnotes .footnote li * { font-size: 13px } .footnotes.footnote-item-star .footnote li::before { top: 10px; left: -11px } } .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 } #overview-top-nav.popHide+#__nuxt .asusOfficialProductMenu { padding: 0 !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: #181818 } .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: 20px; 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: 20px } } @media (max-width:730.5px) { .modal-button-container .modal-button-text, .modal-button-container .modal-inner-text { font-size: 18px } } .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; 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: 18px } .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; opacity: .7; padding: 0; width: 36px; height: 36px; border-width: 0; background-color: transparent; transition: opacity 250ms } .wd__play__btn button.focus-visible, .wd__play__btn button:focus-visible, .wd__play__btn button:hover { opacity: 1 } .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_replay { position: absolute; top: 5%; left: 5%; width: 90%; height: 90% } .wd__play__btn button .svg_button_replay path { fill: #fff } .wd__play__btn button .svg_button_play .svg-step { transition: opacity 250ms linear 0s } .wd__play__btn button .svg_button_play .svg-step { opacity: 0 } .wd__play__btn button .svg_button_play .svg-pause-all { opacity: 1 } .wd__play__btn button .svg_button_replay { opacity: 0; user-select: none; transition: opacity .4s } .wd__play__btn button.show-play .svg_button_play .svg-step { opacity: 0 } .wd__play__btn button.show-play .svg_button_play .svg-triangle { opacity: 1 } .wd__play__btn button.show-replay .svg_button_play { opacity: 0; user-select: none } .wd__play__btn button.show-replay .svg_button_replay { opacity: 1; user-select: auto } .wd__play__btn .svg_button_play .svg-circle { stroke: #fff } .wd__play__btn .svg_button_play .svg-line { fill: #fff; stroke: #fff } .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: #174d71; 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: 20px; 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; border-bottom: 4px solid rgba(255, 255, 255, 0) } .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: #174d71; border-bottom: 4px solid #174d71 } .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: 20px; line-height: 1.5 } .wd__section .slick-tab-content .slick-info .slick-info-text .info__comment { display: inline-block; margin-top: 8px; font-size: 18px; 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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/playBtn.png); */ display: block; margin: 0 auto; width: 90px; height: 90px; background-size: cover; transform: rotate(0); transition: transform .4s ease } .wd__section .vidInterface .playBtn:hover { transform: rotate(120deg) } .wd__section .vidInterface span { display: block; margin-top: 20px; color: #fff; font-size: 28px; 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: 20px; 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: 16px; 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 #174d71 } .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 } } .wd__section .ksp__layout { padding-right: 16px; padding-left: 16px; box-sizing: border-box; max-width: 1268px; min-width: 1024px } .wd__section .ksp__layout .item__leftdesc { z-index: 10 } .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: #181818; font-size: 26px; line-height: 1.14 } .wd__section .ksp__layout .wd__content .content__title { margin: 0; color: #181818; font-size: 3.09375rem; line-height: 1.2 } .wd__section .ksp__layout .wd__content .content__info { margin-top: 13px; color: #181818; line-height: 1.2; font-size: 26px } .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.2; font-size: 26px } .wd__section .ksp__layout .wd__feature__list .wd__feature .wd__feature__data { font-size: 48px; 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: 34px } .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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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-reg { 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/image/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: 48px; line-height: 1.2 } .wd__section .ksp__layout .grid-item-wdContent .wd__content .content__info { margin-top: 6px; width: 100%; font-size: 26px } .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: 26px } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__data { font-size: 48px; 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: 34px } .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: 20px } .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: 20px } .wd__section .ksp__layout .grid-item-wdFeature .wd__feature__list .wd__feature .wd__feature__data { font-size: 2.3625rem; line-height: 1.2 } .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: 20px } .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: 25px } .wd__section .ksp__layout .grid-item-wdFeatureTopIcon .wd__feature__list.top-icon .wd__feature .wd__feature__describe { margin-top: 11px } } .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; 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; line-height: 1.4 } @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 } } @media all and (max-width:730.5px) { .section__kv .wd__content { margin-top: 55px } .section__kv .wd__content .content__slogan { display: block; text-align: center; margin-top: 7px; margin-left: auto; margin-right: auto; width: 90%; font-size: 2rem } .section__kv .wd__content .content__info { text-align: center; margin-top: 16px; margin-left: auto; margin-right: auto; width: 84%; font-size: 22px } } .kv__badge { display: block; position: relative; margin-top: 64px; margin-right: auto; margin-left: auto; width: 94%; max-width: 950px } .kv__badge .badge__container { display: flex; position: relative; align-items: center; justify-content: center; flex-wrap: wrap } .kv__badge .badge__container img { display: block; position: relative; margin: 0 25px; background-size: contain } .kv__badge .badge__container img.icon__badge-creator { width: 98px; height: 130px } #CMD .kv__badge .icon__badge-creator { background-image: url(../images/image/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/image/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/image/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/image/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/image/kv_badge_nvidiartx.png) } .kv__badge .badge__container img.icon__badge-nvidiartx-unverified { width: 204px; height: 62px } #CMD .kv__badge .icon__badge-nvidiartx-unverified { background-image: url(../images/image/kv_badge_nvidiartx_unverified.png) } .kv__badge .badge__container img.icon__badge-nvidiartx2023 { left: -8px; margin-right: 7px; width: 131px; height: 80px } #CMD .kv__badge .icon__badge-nvidiartx2023 { background-image: url(../images/image/kv_badge_nvidiartx2023.png) } .kv__badge .badge__container img.icon__badge-gamepass { width: 208px; height: 35px } #CMD .kv__badge .icon__badge-gamepass { background-image: url(../images/image/kv_badge_gamepass.png) } .kv__badge .badge__container img.icon__badge-timebest2022 { width: 92px; height: 130px } #CMD .kv__badge .icon__badge-timebest2022 { background-image: url(../images/image/kv_badge_timebest2022.png) } .kv__badge .badge__container img.icon__badge-ces2024 { width: 98px; height: 130px } /*#CMD .kv__badge .icon__badge-ces2024 { background-image: url(../images/image/kv_badge_ces2024.png) }*/ .kv__badge .badge__content { position: relative; margin-top: 30px; text-align: center } .kv__badge .badge__content .content-text { display: block; position: relative; margin-bottom: 5px; color: #999; font-size: 14px; 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-ces2024 { 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, .kv__badge .badge__container img.icon__badge-nvidiartx-unverified { width: 218px; height: 66px } .kv__badge .badge__container img.icon__badge-nvidiartx2023 { left: -9px; margin-right: 5px; width: 131px; height: 80px } .kv__badge .badge__container img.icon__badge-gamepass { width: 218px; height: 66px } .kv__badge .badge__container img.icon__badge-timebest2022 { width: 92px; height: 130px } .kv__badge .badge__content { margin-top: 30px } .kv__badge .badge__content .content-text { font-size: 14px; 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 30px } .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-ces2024 { 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, .kv__badge .badge__container img.icon__badge-nvidiartx-unverified { width: 203px; height: 63px } .kv__badge .badge__container img.icon__badge-nvidiartx2023 { left: -5px; margin-right: 3px; width: 114px; height: 70px } .kv__badge .badge__container img.icon__badge-gamepass { width: 203px; height: 63px } .kv__badge .badge__container img.icon__badge-timebest2022 { width: 75px; height: 106px } .kv__badge .badge__content { margin-top: -3px } .kv__badge .badge__content .content-text { margin-bottom: 8px; font-size: 14px; line-height: 1.2 } } .bg__badge { position: absolute; z-index: 7; top: 0; left: 50%; width: 0; height: 0 } .bg__badge .icon__bgBadge { display: block; position: absolute; background-size: contain } .bg__badge .icon__bgBadge { width: 140px; height: 160px } .bg__badge .icon__bgBadge-evoi7 { width: 140px; height: 160px } .bg__badge .icon__bgBadge-evoi7 { background-image: url(../images/image/evo_i7.png) } @media all and (min-width:1280px) { .bg__badge .icon__bgBadge-evoi7 { width: 140px; height: 160px } } @media all and (min-width:731px) and (max-width:1279.5px) { .bg__badge .icon__bgBadge-evoi7 { width: 115px; height: 135px } } @media all and (max-width:730.5px) { .bg__badge .icon__bgBadge-evoi7 { width: 88px; height: 78px } } @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: 1000 } .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 } @keyframes fadeInNav { from { opacity: 0 } to { opacity: 1 } } @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: 20px; 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/image/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/image/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 { display: none; right: 20px; left: unset; opacity: 0 } .cmd-sidenav.mobile-show { display: block; left: unset; opacity: 1; -webkit-animation: fadeinnav 1s; animation: fadeInNav 1s } } @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/image/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/image/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: 18px; text-align: center } .cmd-sidenav .container-items .item .item-label .label-name { color: #fff; font-size: 18px; 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 { display: none; left: 100%; opacity: 0 } .cmd-sidenav.mobile-show { display: block; left: unset; opacity: 1; -webkit-animation: fadeinnav 1s; animation: fadeInNav 1s } } @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/image/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/image/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-asusoled-lumina .img__icon { /* background-image: url(../images/image/icon_asusoled_lumina.png) */ } .wd__section .wd__feature__list .wd__feature.icon-asusoled-lumina .wd__feature__data { top: 19px; margin-bottom: 3px; width: 112px; height: 116px } .wd__feature.icon-blackdolbyvision .img__icon { background-image: url(../images/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/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/image/icon_blackcalmanverified.png) } .wd__feature.icon-calmanverified .img__icon { background-image: url(../images/image/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/image/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/image/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/image/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-asusoled-lumina .wd__feature__data { top: 14px } .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-asusoled-lumina .wd__feature__data { position: relative; top: 12px; 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 } } #CMD .colorful-text { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(315deg, #4e7c92 -150%, #4e7c92 -100%, #296590 -50%, #181818 0) } #CMD .colorful-text sup { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone !important; background-image: linear-gradient(315deg, #4e7c92 -150%, #4e7c92 -100%, #296590 -50%, #181818 0) } .text__split__show { display: flex; flex-wrap: wrap; gap: 0 .2em } .text__split__show .text__split__show-item sup { top: 0 !important; margin-left: -.1em } @media all and (min-width:1280px) { .wd__content.large__text-center .text__split__show { justify-content: center } .wd__content.large__text-left .text__split__show { justify-content: left } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content.medium__text-center .text__split__show { justify-content: center } .wd__content.medium__text-left .text__split__show { justify-content: left } } @media all and (max-width:730.5px) { .wd__content.small__text-center .text__split__show { justify-content: center } .wd__content.small__text-left .text__split__show { justify-content: left } } .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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_all_smiles.png) } .inner__page .icon.icon-auto { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_auto.png) } .inner__page .icon.icon-beautification { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_beautification.png) } .inner__page .icon.icon-depthOfField { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_depth_of_field.png) } .inner__page .icon.icon-effect { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_effect.png) } .inner__page .icon.icon-gif { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_gif.png) } .inner__page .icon.icon-hdrPro { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_hdr_pro.png) } .inner__page .icon.icon-kids { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_kids.png) } .inner__page .icon.icon-lowlight { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_lowlight.png) } .inner__page .icon.icon-miniature { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_miniature.png) } .inner__page .icon.icon-night { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_night.png) } .inner__page .icon.icon-qrCode { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_qr_code.png) } .inner__page .icon.icon-selfiePanorama { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_selfie_panorama.png) } .inner__page .icon.icon-selfie { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_selfie.png) } .inner__page .icon.icon-slowMotion { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_slow_motion.png) } .inner__page .icon.icon-smartRemove { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_smart_remove.png) } .inner__page .icon.icon-superResolution { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_super_resolution.png) } .inner__page .icon.icon-manual { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_manual.png) } .inner__page .icon.icon-timeLapse { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_time_lapse.png) } .inner__page .icon.icon-timeRewind { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_time_rewind.png) } .inner__page .icon.icon-youtube { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_youtube.png) } .inner__page .icon.icon-panaroma { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_panaroma.png) } .inner__page .icon.icon-pro { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/inner/icon/icon_pro.png) } .inner__page .icon.icon-portrait { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/inner/icon_open_black.png) } .wd__innerbtn.theme-black .inner__btn.active .toggleSlide { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/inner/icon_close_black.png) } */ .wd__innerbtn.theme-white .inner__btn span { color: #fff } /* .wd__innerbtn.theme-white .inner__btn .toggleSlide { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/inner/icon_open_white.png) } .wd__innerbtn.theme-white .inner__btn.active .toggleSlide { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/icon/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: 20px } .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: 20px } .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: 20px; border-color: inherit; vertical-align: middle } .wdtable tbody td { display: table-cell; vertical-align: middle; color: #181818; font-size: 20px } .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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/qrcode.png) */ } .wdtable .qr-text { display: block; position: relative; margin-top: 16px; color: #181818; font-size: 20px; 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: #181818; border: 1px solid #ffd633; border-radius: 15px; background-color: #ffd633 } .wdOledTable table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; border-collapse: collapse; border-spacing: 0 } .wdOledTable colgroup { display: table-column-group } .wdOledTable col { display: table-column } .wdOledTable tbody { display: table-row-group; vertical-align: middle; border-color: inherit } .wdOledTable tbody tr { display: table-row; color: #181818; font-size: 20px; border-color: inherit; vertical-align: middle } .wdOledTable tbody td { display: table-cell; vertical-align: middle; color: #181818; font-size: 20px } .wdOledTable tbody th { display: table-cell; vertical-align: middle; text-align: -internal-center } .wdOledTable tbody th, .wdOledTable tbody th span { font-weight: unset } .wdOledTable tbody td, .wdOledTable tbody th { border-bottom: 1px solid #c9c9c9 } .wdOledTable tbody td.no-bottom-line, .wdOledTable tbody th.no-bottom-line { border-bottom: 1px solid transparent } .wdOledTable tbody td .text__val, .wdOledTable tbody th .text__val { display: block } .wdOledTable .qr_container { position: relative; margin-top: 52px } .wdOledTable .qr_container .img__qrcode { left: 50%; margin-left: -60px; width: 120px; height: 120px } #CMD .wdOledTable .img__qrcode { /* background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/qrcode.png) */ } .wdOledTable .qr-text { display: block; position: relative; margin-top: 16px; color: #181818; font-size: 20px; line-height: 1.5 } .wdOledTable table { text-align: left } .wdOledTable table .tr-0 td { font-size: 0 !important } .wdOledTable ::-webkit-scrollbar { display: none; width: .5em; height: .5em } .wdOledTable ::-webkit-scrollbar-thumb { background-color: transparent } .wdOledTable ::-webkit-scrollbar-track { background-color: transparent } .wdOledTable ::-webkit-scrollbar-corner { background-color: transparent } .wdOledTable .table_fixed_container { position: relative; z-index: 5; top: 0; left: 0; opacity: 0 } .wdOledTable .table_fixed_container.show { opacity: 1 } .wdOledTable .table_fixed_container::after { position: absolute; z-index: 2; bottom: -1px; left: 0; opacity: 0; width: 100vw; height: 3px; background-color: #fff; content: "" } .wdOledTable .table_fixed_container.fixed { position: fixed; padding-top: 12px; padding-bottom: 2px } .wdOledTable .table_fixed_container.fixed::after { opacity: 1 } .wdOledTable .table_fixed_container.fixed .table_fixed { display: block; margin-top: 14px } .wdOledTable .table_fixed_container .table_fixed { display: none; overflow-x: scroll } .wdOledTable .table_fixed_container .table_fixed::before { position: absolute; z-index: -1; top: 0; left: 0; width: 100vw; height: 100%; background-color: #000; content: "" } .wdOledTable .table_fixed_container .table_fixed::after { position: absolute; z-index: 2; top: 0; left: 0; height: 100%; background-color: #000; content: "" } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list { display: flex; position: relative; margin-top: 9px; padding-left: 6px; width: auto; background-color: #000; list-style: none } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list .table_fixed__item { display: flex; align-items: center; padding-right: 22px; padding-bottom: 4px; color: #dbdbdb; font-size: 16px; line-height: 130% } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list .table_fixed__item .text__val { text-align: left } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list .table_fixed__item .img_fixed__item { margin-right: 15px; width: 48px; height: 48px; min-width: 48px } .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 } .wdblockimg .wdblockimg__container .block .block-content .wd__content .content__info { margin-top: 5px } .wdblockimg .wdblockimg__container .block .block-content .wd__content .content__link, .wdblockimg .wdblockimg__container .block .block-content .wd__content .content__link * { font-weight: 200 } .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.block-imgstyle-extend .block-img { position: absolute; overflow: hidden; bottom: 0 } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend .img__bg { top: unset; bottom: 0; left: 50%; padding-bottom: 0; transform: translate(-50%, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-6 .block-img { position: absolute; top: 50%; right: 0; width: auto; height: 630px; transform: translateY(-50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-6 .img__bg { position: relative; width: 1134px; height: 630px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.imageTop .block-img .img__bg { top: 50%; bottom: unset; left: 50%; padding-bottom: 0; transform: translate(-50%, -50%) } .wdblockimg .wdblockimg__container .block .block-video { position: absolute; bottom: 0; width: 100%; height: 100% } .wdblockimg .wdblockimg__container .block .block-video .video__container { position: absolute; bottom: 0; width: 100%; height: 100% } .wdblockimg .wdblockimg__container .block .block-video .video__container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top } .wdblockimg .wdblockimg__container .block .block-video .video-mask { position: absolute; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .6) } .wdblockimg .wdblockimg__container .block .block-video .wd__play__btn { position: absolute; z-index: 10; right: 12px; bottom: 12px; left: unset; margin-left: auto } .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 .block .modal-button-container .modal-button, .wdblockimg .wdblockimg__container .block .modal-button-container .modal-button * { font-weight: 200 } .wdblockimg .wdblockimg__container .block.imageTop .block-video { top: 0; bottom: unset } .wdblockimg .wdblockimg__container .block.imageTop .block-video .video__container { background-color: #000 } .wdblockimg .wdblockimg__container .block.imageTop .video-mask { display: none } .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-4 { grid-column-end: span 4 } .wdblockimg .wdblockimg__container .block.column-span-5 { grid-column-end: span 5 } .wdblockimg .wdblockimg__container .block.column-span-6 { grid-column-end: span 6 } .wdblockimg .ai__noise__container { --themecolor-main: 95, 95, 95; --themecolor-middle: 165, 165, 165; --themecolor-filter: 255, 0, 0; display: flex; position: relative; bottom: 0; align-items: center; width: 100%; transition: margin-top 1s ease 0s; flex-direction: column } .wdblockimg .block[data-blocktype=aiNoise] { display: flex; flex-direction: column; justify-content: space-between } .wdblockimg .ai__noise__container .noise__voice__container { height: var(--voice-iconSize); max-height: var(--voice-iconSize) } .wdblockimg .ai__noise__container .nav__noise { display: flex; position: absolute; z-index: 15; cursor: pointer; right: 12px; bottom: 12px; align-items: center; justify-content: center; margin-top: 0 } .wdblockimg .ai__noise__container .nav__noise .nav__item { display: flex; left: unset; align-items: center; justify-content: center; opacity: .7; margin: 0; padding: 0; transition: transform .3s ease-out } .wdblockimg .ai__noise__container .nav__noise .nav__item.focus-visible, .wdblockimg .ai__noise__container .nav__noise .nav__item.js-focus-visible, .wdblockimg .ai__noise__container .nav__noise .nav__item:focus-visible, .wdblockimg .ai__noise__container .nav__noise .nav__item:hover { opacity: 1 } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content { display: flex; align-items: center } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon { display: inline-block; margin-right: 10px } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play { width: 36px; height: 36px } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-rect { fill: none } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-circle, .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-line, .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-stop path { stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; fill-rule: evenodd } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-circle { fill: #fff; stroke-width: 4px } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon .svg_button_play .svg-triangle { clip-path: url(#clip-path) } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .nav__text { display: inline-block; width: 160px; letter-spacing: .02em } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .nav__text .content__title { font-size: 23px; font-weight: 300 } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .nav__text .content__info { font-size: 20px } .wdblockimg .ai__noise__container .nav__noise .nav__item.js-selected .nav__content .img__icon .svg_button_play .svg-triangle { opacity: 0 } .wdblockimg .ai__noise__container .nav__noise .nav__item.js-selected .nav__content .img__icon .svg_button_play .svg-line { opacity: 1 } .wdblockimg .ai__noise__container .noise__switcher { display: flex; position: relative; overflow: hidden; z-index: 13; bottom: 0; align-items: center; justify-content: center; opacity: 0; margin-top: 0; width: 80%; text-align: center; flex-direction: column } .wdblockimg .ai__noise__container .noise__switcher span { display: inline-block; margin-right: 10px; font-size: 28px; font-weight: 300 } .wdblockimg .ai__noise__container .noise__switcher .img__switcher { display: inline-block; cursor: pointer; margin: 20px 0; padding: 0; width: 90px; height: 42px; min-height: 42px; border: 0; background-color: transparent; background-size: contain } .wdblockimg .ai__noise__container .noise__switcher .img__switcher { background-image: url(../images/image/btn-off.png) } .wdblockimg .ai__noise__container .noise__switcher .img__switcher.js-active { background-image: url(../images/image/btn-on.png) } .wdblockimg .ai__noise__container .noise__switcher { overflow: hidden; max-height: 0 } .wdblockimg .ai__noise__container .noise__switcher.js-showed { opacity: 1 !important; height: auto; max-height: 500px; filter: unset; pointer-events: unset } .wdblockimg .ai__noise__container .noise__switcher .noise_desc { width: 100%; max-width: 800px; font-size: 16px; text-align: center; line-height: 1.5 } .wdblockimg .ai__noise__container .noise__voice__container { position: relative; top: 0; opacity: 1; height: 100%; max-height: 200px; pointer-events: none } .wdblockimg .ai__noise__container .noise__voice__container .noise__left { transform-origin: right center } .wdblockimg .ai__noise__container .noise__voice__container .noise__right { transform-origin: left center } .wdblockimg .ai__noise__container .noise__voice__container.js-active { opacity: 1; height: 240px; max-height: 700px; filter: unset; pointer-events: unset } .wdblockimg .ai__noise__container .img__noise { position: absolute; top: 50%; left: 50%; margin-top: 0; height: 400px; transform: translate(-50%, -50%); transform-origin: center } .wdblockimg .ai__noise__container .img__noise .img__voice { display: inline-block; position: absolute; z-index: 50; top: 50%; left: 50%; margin-top: -162px; margin-left: -162px; width: 324px; height: 324px; background-size: contain; transform-origin: center } .wdblockimg .ai__noise__container .img__noise .noise__left { position: absolute; z-index: 40; top: 0; left: 50%; margin-left: -880px } .wdblockimg .ai__noise__container .img__noise .noise__right { position: absolute; z-index: 40; top: 0; left: 50%; margin-left: 80px } .wdblockimg .ai__noise__container .nav__noise .nav__item { width: auto } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content { width: 100% } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .nav__text { width: 100% } .wdblockimg .ai__noise__container .nav__noise .nav__item .nav__content .img__icon { margin-right: 0; margin-left: 0 } .wdblockimg .ai__noise__container { --voice-iconSize: 280px } .wdblockimg .ai__noise__container .img__noise .img__voice { --voice-start: #9db9eb; --voice-end: #5a4f89; --voice-bgcolor: #fff; margin-top: calc(var(--voice-iconSize) * -.5); margin-left: calc(var(--voice-iconSize) * -.5); width: var(--voice-iconSize); height: var(--voice-iconSize) } .wdblockimg .ai__noise__container .svg_button_play .svg-step { transition: opacity 250ms linear 0s } .wdblockimg .ai__noise__container .svg_button_play .svg-step { opacity: 0 } .wdblockimg .ai__noise__container .svg_button_play .svg-triangle { opacity: 1 } .wdblockimg .ai__noise__container.js-active .svg_button_play .svg-step.svg-triangle { opacity: 0 } .wdblockimg .ai__noise__container.js-active .svg_button_play .svg-step.svg-stop { opacity: 1; transition: opacity 250ms linear .1s } .wdblockimg .ai__noise__container .img__icon { --img-icon-base-color: #4a47fe; --img-icon-bg-color: #fff } .wdblockimg .ai__noise__container .img__icon .svg_button_play .svg-circle { fill: var(--img-icon-bg-color) !important; stroke: var(--img-icon-base-color) !important } .wdblockimg .ai__noise__container .img__icon .svg_button_play .svg-line { fill: var(--img-icon-base-color) !important; stroke: transparent } .wdblockimg .ai__noise__container .img__icon .svg_button_play .svg-triangle .triangle { fill: var(--img-icon-base-color) !important } .wdblockimg .ai__noise__container .img__icon .svg_button_play .svg-stop { opacity: 0 } .wdblockimg .ai__noise__container .img__icon .svg_button_play .svg-stop path { fill: var(--img-icon-base-color) !important } @keyframes height-max { 0% { max-height: 0 } 100% { max-height: 2000px } } @keyframes height-min { 0% { max-height: 2000px } 100% { max-height: 0 } } @keyframes noise-switcher-margin-top { 0% { margin-top: 0 } 50% { margin-top: -20px } 100% { margin-top: -20px } } .wdblockimg .ai__noise__container { height: auto; max-height: 2000px } .wdblockimg .ai__noise__container .noise__switcher { animation-name: height-min; animation-duration: 580ms; animation-fill-mode: forwards; animation-delay: 0s; animation-timing-function: ease-out } .wdblockimg .ai__noise__container .noise__switcher[aria-hidden=true] button { display: none } .wdblockimg .ai__noise__container .noise__switcher.js-showed { transition: opacity .5s linear 450ms, margin-top 0s linear .2s, margin-bottom 0s linear .2s; animation-name: height-max; animation-duration: 3s; animation-fill-mode: forwards; animation-delay: 0; animation-timing-function: ease-in-out } .wdblockimg .ai__noise__container .noise__voice__container { transition: top 0 linear 0 } .wdblockimg .ai__noise__container .noise__voice__container.js-active { transition: top .31s ease-in-out .032s } .wdblockimg .ai__noise__container .img__voice { transition: transform .583s ease-in-out 0s } .wdblockimg .ai__noise__container.js-active { max-height: 2000px } .wdblockimg .ai__noise__container.js-active .img__voice { transition: transform .4s ease-in-out 301ms } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container { transition: margin-top 581ms linear 0s } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container .noise__switcher { animation-duration: .5s } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container.js-active { transition-delay: .13s } .wdblockimg .block[data-blocktype=aiNoise].column-span-3 .ai__noise__container { transition: margin-top 581ms linear 0s } .wdblockimg .block[data-blocktype=aiNoise].column-span-3 .ai__noise__container.js-active { transition-duration: .492s } .wdblockimg .block.theme-white { color: #404040 } .wdblockimg .block.theme-white .ai__noise__container { --themecolor-main: 64, 108, 172; --themecolor-middle: 64, 64, 64; --themecolor-filter: 116, 161, 211 } .wdblockimg .block.theme-white .ai__noise__container .noise_desc { color: #666 } .wdblockimg .block.theme-white .ai__noise__container .img__noise .img__voice { --voice-start: #74a1d3; --voice-end: #406cac; --voice-bgcolor: #fff } .wdblockimg .block.theme-white .ai__noise__container .img__icon { --img-icon-base-color: black; --img-icon-bg-color: #fff } .wdblockimg .block.theme-black { color: #fff } .wdblockimg .block.theme-black .ai__noise__container { --themecolor-main: 154, 122, 89; --themecolor-middle: 109, 109, 109; --themecolor-filter: 223, 201, 169 } .wdblockimg .block.theme-black .ai__noise__container .noise_desc { color: #999 } .wdblockimg .block.theme-black .ai__noise__container .img__noise .img__voice { --voice-start: #dfc9a9; --voice-end: #9a7a59; --voice-bgcolor: #000 } .wdblockimg .block.theme-black .ai__noise__container .img__icon { --img-icon-base-color: #fff; --img-icon-bg-color: #000 } .wdblockimg .block.theme-black { background-color: #000 } .wdblockimg .block.theme-black .block-content .content__title { color: #fff; 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 { color: #424242; 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: #181818 } .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: 20px; 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(../images/image/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%; outline-offset: -2px } .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(../images/image/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-reg { top: 0; font-size: .4em } .performance_chart sup.sign-tm { top: 0; font-size: 38px; 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: #174d71; background-position: top; background-size: contain; mask: url(../images/image/arrow.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/image/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: #174d71 } .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: 26px } .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: 16px; 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: 16px; 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__aiCopilot-outer-s1 { overflow: hidden } .section__aiCopilot-outer-s1 .wd__content .content__slogan { color: #fff } .section__aiCopilot-outer-s1 .wd__content .content__info { color: #fff } .section__aiCopilot-outer-s1 .wd__content .content__link { color: #fff } .section__aiCopilot-outer-s1 .wd__content .content__comment { color: #999 } .section__aiCopilot-outer-s1 .wd__content .content__comment { font-size: 13px } .section__aiCopilot-outer-s1 .btn_videoplay-aiCopilot { z-index: 1 } .section__aiCopilot-outer-s1 .wd__block__slick--outer { position: relative } .section__aiCopilot-outer-s1 .wd__block__slick--outer::before { position: absolute; height: 1px; background: #585858; content: "" } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_slickplay-aiCopilot { z-index: 1 } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text { opacity: 0; margin-right: auto; margin-left: auto; color: #fff; transition: .3s } .section__aiCopilot-outer-s1 .wd__block__slick__item { position: relative; opacity: .2; transition: opacity .3s; transition-delay: .8s } .section__aiCopilot-outer-s1 .wd__block__slick .item__info { line-height: 1.4 } .section__aiCopilot-outer-s1 .slick-slider { margin-bottom: 0 } .section__aiCopilot-outer-s1 .slick-list .slick-slide { position: relative } .section__aiCopilot-outer-s1 .slick-list .slick-slide:focus-visible { outline: 2px solid transparent !important } .section__aiCopilot-outer-s1 .slick-list .slick-slide:focus-visible::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: calc(100% - 2px); border: #248dff 1px solid; content: "" } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-container { position: relative } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-container .wd__play__btn { visibility: hidden; opacity: 0 } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-outer { position: relative; overflow: hidden; left: 50%; transform: translateX(-50%) } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-outer video { position: absolute; top: 50%; left: 50%; opacity: 0; height: auto; transform: translate(-50%, -50%); transition: .3s } .section__aiCopilot-outer-s1 .slick-list .slick-slide.slick-center .wd__block__slick__item { opacity: 1 } .section__aiCopilot-outer-s1 .slick-list .slick-slide.slick-center .wd__block__slick__item .slick__item--text { opacity: 1; transition-delay: .8s } .section__aiCopilot-outer-s1 .slick-list .slick-slide.slick-center .wd__block__slick__item .video-container { position: relative } .section__aiCopilot-outer-s1 .slick-list .slick-slide.slick-center .wd__block__slick__item .video-container video { opacity: 1; transition-delay: .8s } .section__aiCopilot-outer-s1 .slick-list .slick-slide.slick-center .wd__block__slick__item .video-container .wd__play__btn { visibility: visible; opacity: 1; transition-delay: .8s } .section__aiCopilot-outer-s1 .slick-dots { padding-top: 2px; padding-bottom: 2px } .section__aiCopilot-outer-s1 .slick-dots li { margin: 0; width: auto; height: 100% } .section__aiCopilot-outer-s1 .slick-dots li button { display: flex; position: relative; align-items: center; justify-content: flex-end; padding: 0; height: 100%; color: #949494; transition: color .3s; flex-direction: column-reverse } .section__aiCopilot-outer-s1 .slick-dots li button::before { display: block; top: auto; bottom: -7px; left: 50%; opacity: 1; width: 10px; height: 10px; border: 1px solid #585858; border-width: 1px; border-radius: 50%; background-color: #000; transform: translateX(-50%); transition: .3s; content: "" } .section__aiCopilot-outer-s1 .slick-dots li button p { display: flex; justify-content: center } .section__aiCopilot-outer-s1 .slick-dots li button:hover { color: #fff } .section__aiCopilot-outer-s1 .slick-dots li.slick-active button { color: #174d71 } .section__aiCopilot-outer-s1 .slick-dots li.slick-active button::before { border-color: #174d71; background-color: #174d71 } .section__aiCopilot-outer-s1 .wd__block__dots { position: absolute; overflow-x: scroll; overflow-y: hidden; z-index: 1; top: 251px; width: 100%; scroll-behavior: smooth; scroll-snap-type: x mandatory } .section__aiCopilot-outer-s1 .wd__block__dots::-webkit-scrollbar { display: none } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots { display: flex; position: relative; bottom: 0; align-items: center; justify-content: center; margin: 0; text-align: center } .section__aiCopilot-outer-s1 .btn_slickplay-aiCopilot button { width: 60px; height: 60px } .section__aiCopilot-outer-s1 .btn_slickplay-aiCopilot .svg-circle { stroke: transparent; fill: transparent } .section__aiCopilot-outer-s1 .img__laptop { position: absolute; top: 0 } .section__aiCopilot-outer-s2 { overflow: hidden } .section__aiCopilot-outer-s2 .wd__content .content__slogan { color: #fff } .section__aiCopilot-outer-s2 .wd__content .content__info { color: #fff } .section__aiCopilot-outer-s2 .wd__content .content__link { color: #fff } .section__aiCopilot-outer-s2 .wd__content .content__comment { color: #999 } .section__aiCopilot-outer-s2 .wd__content .content__comment { font-size: 13px } .section__aiCopilot-outer-s2 .btn_videoplay-aiCopilot { z-index: 1 } .section__aiCopilot-outer-s2 .wd__block__slick--outer { position: relative } .section__aiCopilot-outer-s2 .wd__block__slick--outer::before { position: absolute; height: 1px; background: #585858; content: "" } .section__aiCopilot-outer-s2 .wd__block__slick--outer .btn_slickplay-aiCopilot { z-index: 1 } .section__aiCopilot-outer-s2 .wd__block__slick .slick__item--text { opacity: 0; margin-right: auto; margin-left: auto; color: #fff; transition: .3s } .section__aiCopilot-outer-s2 .wd__block__slick__item { position: relative; opacity: .2; transition: opacity .3s; transition-delay: .8s } .section__aiCopilot-outer-s2 .wd__block__slick .item__info { line-height: 1.4 } .section__aiCopilot-outer-s2 .slick-slider { margin-bottom: 0 } .section__aiCopilot-outer-s2 .slick-list .slick-slide { position: relative } .section__aiCopilot-outer-s2 .slick-list .slick-slide:focus-visible { outline: 2px solid transparent !important } .section__aiCopilot-outer-s2 .slick-list .slick-slide:focus-visible::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: calc(100% - 2px); border: #248dff 1px solid; content: "" } .section__aiCopilot-outer-s2 .slick-list .slick-slide .video-container { position: relative; transform: scale(1.05) } .section__aiCopilot-outer-s2 .slick-list .slick-slide .video-container .wd__play__btn { visibility: hidden; opacity: 0 } .section__aiCopilot-outer-s2 .slick-list .slick-slide .video-outer { position: relative; overflow: hidden; left: 50%; transform: translateX(-50%) } .section__aiCopilot-outer-s2 .slick-list .slick-slide .video-outer video { position: absolute; top: 50%; left: 50%; opacity: 0; height: auto; transform: translate(-50%, -50%); transition: .3s } .section__aiCopilot-outer-s2 .slick-list .slick-slide.slick-center .wd__block__slick__item { opacity: 1 } .section__aiCopilot-outer-s2 .slick-list .slick-slide.slick-center .wd__block__slick__item .slick__item--text { opacity: 1; transition-delay: .8s } .section__aiCopilot-outer-s2 .slick-list .slick-slide.slick-center .wd__block__slick__item .video-container { position: relative } .section__aiCopilot-outer-s2 .slick-list .slick-slide.slick-center .wd__block__slick__item .video-container video { opacity: 1; transition-delay: .8s } .section__aiCopilot-outer-s2 .slick-list .slick-slide.slick-center .wd__block__slick__item .video-container .wd__play__btn { visibility: visible; opacity: 1; transition-delay: .8s } .section__aiCopilot-outer-s2 .slick-dots { padding-top: 2px; padding-bottom: 2px } .section__aiCopilot-outer-s2 .slick-dots li { margin: 0; width: auto; height: 100% } .section__aiCopilot-outer-s2 .slick-dots li button { display: flex; position: relative; align-items: center; justify-content: flex-end; padding: 0; height: 100%; color: #949494; outline: 2px solid transparent !important; transition: color .3s; flex-direction: column-reverse } .section__aiCopilot-outer-s2 .slick-dots li button::before { display: block; top: auto; bottom: -7px; left: 50%; opacity: 1; width: 10px; height: 10px; border: 1px solid #585858; border-width: 1px; border-radius: 50%; background-color: #000; transform: translateX(-50%); transition: .3s; content: "" } .section__aiCopilot-outer-s2 .slick-dots li button p { display: flex; justify-content: center } .section__aiCopilot-outer-s2 .slick-dots li button:hover { color: #fff } .section__aiCopilot-outer-s2 .slick-dots li.slick-active button { color: #174d71 } .section__aiCopilot-outer-s2 .slick-dots li.slick-active button::before { border-color: #174d71; background-color: #174d71 } .section__aiCopilot-outer-s2 .wd__block__dots { position: absolute; overflow-x: scroll; overflow-y: hidden; z-index: 1; top: 251px; width: 100%; scroll-behavior: smooth; scroll-snap-type: x mandatory } .section__aiCopilot-outer-s2 .wd__block__dots::-webkit-scrollbar { display: none } .section__aiCopilot-outer-s2 .wd__block__dots .slick-dots { display: flex; position: relative; bottom: 0; align-items: center; justify-content: center; margin: 0; text-align: center } .section__aiCopilot-outer-s2 .btn_slickplay-aiCopilot button { width: 60px; height: 60px } .section__aiCopilot-outer-s2 .btn_slickplay-aiCopilot .svg-circle { stroke: transparent; fill: transparent } .section__aiCopilot-outer-s2 .img__laptop { position: absolute; top: 0 } .section__aiCopilot-outer-s2 .img__laptop--0 { opacity: 0 !important } .section__aiCopilot-outer-s2 .img__0 { width: 100%; height: 100% } .section__aiCopilot-inner-s1 { background: #1d1e24 } .section__aiCopilot-inner-s1 .wd__content .content__slogan { color: #fff } .section__aiCopilot-inner-s1 .wd__content .content__info { color: #fff } .section__aiCopilot-inner-s1 .wd__content .content__link { color: #fff } .section__aiCopilot-inner-s1 .content__comment { color: #999 !important; font-size: 13px !important } .section__aiCopilot-inner-s1 .wd__feature__list .wd__feature .wd__feature__describe span, .section__aiCopilot-inner-s1 .wd__feature__list .wd__feature .wd__feature__describe__top span { color: #fff } .section__aiCopilot-inner-s1 .wd__feature__list .wd__feature .wd__feature__data { color: #fff } .section__aiCopilot-inner-s1 .wdtab .wdtab__nav { display: none } .section__aiCopilot-inner-s1 .wdtab .wdtab__panel { position: relative } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn { z-index: 1 } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { fill: transparent } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play, .section__aiCopilot-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play * { stroke: #fff } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .triangle { fill: #fff } .section__aiCopilot-inner-s1 .performance_chart { margin-top: 16px; padding-bottom: 120px } .section__aiCopilot-inner-s1 .performance_chart_container { margin-right: auto; margin-left: auto } .section__aiCopilot-inner-s1 .performance_chart_container .title { line-height: 1.3 } .section__aiCopilot-inner-s1 .img__container { position: relative } .section__aiCopilot-inner-s2 { background: #1d1e24; background-color: #191a20 } .section__aiCopilot-inner-s2 .wd__content .content__slogan { color: #fff } .section__aiCopilot-inner-s2 .wd__content .content__info { color: #fff } .section__aiCopilot-inner-s2 .wd__content .content__link { color: #fff } .section__aiCopilot-inner-s2 .performance_chart_container { margin-right: auto; margin-left: auto } .section__aiCopilot-inner-s2 .performance_chart_container .title { line-height: 1.3 } .section__aiCopilot-inner-s2 .img__container { position: relative; overflow: hidden; border-radius: 20px } .section__aiCopilot-inner-s2 .img__container .img__main { position: absolute; opacity: 1; background-size: cover; transform: translateY(50%); transition: 3s } .section__aiCopilot-inner-s2 .img__container .img__main.active { bottom: 48% } .modal-inner__sectionsBattery { background-color: #071019; padding-bottom: 0 } .modal-inner__sectionsBattery .wd__content .content__title { background-image: linear-gradient(to right, #fff 0, #fff 100%) } .modal-inner__sectionsBattery .wd__content .content__info { color: #fff } .LevelFourProductPage__wrapper__1C9P7 { padding-top: 0 } .section__battery { padding-top: 100px } .section__battery-inner-s1 .wd__content { z-index: 2 } .section__battery-inner-s2 { overflow: hidden } .section__battery-inner-s2 .wd__content { z-index: 2 } .section__battery-inner-s2 .battery_animate_container { width: 2560px; left: 50%; margin-left: -1280px; position: relative } .section__battery-inner-s2 .battery_animate_container .battery_animate { width: 100%; height: 800px; position: relative } .section__battery-inner-s2 .battery_animate_container .battery_animate .ani_enter_detect { top: 50% } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_container { border: 1px solid transparent; position: absolute; width: 1100px; left: 50%; margin-left: -550px; height: 200px; overflow: hidden } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_container .item_text { font-size: 110px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; line-height: .9; position: absolute; width: 1100px; left: 50%; margin-left: -550px; opacity: 0 } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_container__top { top: 96px; will-change: opacity, width, transform } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_container__top .item_text { background-image: linear-gradient(149deg, #74557d 30%, #ae7fbc 40%, #486790 60%) } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_container__bottom { top: 560px; will-change: opacity, width, transform } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_container__bottom .item_text { background-image: linear-gradient(91deg, #114776 30%, #9cb2d8 50%, #114776 100%) } .section__battery-inner-s2 .battery_animate_container .battery_animate .battery_box { width: 100%; height: 100% } .section__battery-inner-s2 .battery_animate_container .battery_animate .img__bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center 1000px; background-size: 2560px 1200px } #CMD .section__battery-inner-s2 .img__bg { background-image: url(../images/image/step0_s2.jpg) } .section__battery-inner-s2 .battery_animate_container .battery_animate .img__step0 { width: 650px; height: 292px; position: absolute; top: 275px; left: 50%; margin-left: -326px } #CMD .section__battery-inner-s2 .img__step0 { background-image: url(../images/image/empty_s2.png) } .section__battery-inner-s2 .battery_animate_container .battery_animate .img__ani80f { width: 1040px; height: 652px; position: absolute; top: 73px; left: calc(50% - 520px); background-size: 1040px 652px; background-position: 50% 0; border: 1px solid transparent; will-change: transform, width; opacity: 0 } #CMD .section__battery-inner-s2 .img__ani80f { background-image: url(../images/image/ani80f_s2.png) } .section__battery-inner-s2 .battery_animate_container .battery_animate .img__ani80 { width: 608px; height: 292px; position: absolute; top: 275px; left: 975px; background-size: 608px 292px; background-position: 0 0; opacity: 0 } #CMD .section__battery-inner-s2 .img__ani80 { background-image: url(../images/image/ani80_s2.png) } .section__battery-inner-s2 .battery_animate_container .battery_animate .img__ani100 { width: 608px; height: 292px; position: absolute; top: 275px; left: 975px; background-size: 608px 292px; background-position: 0 0; opacity: 0; will-change: opacity, width } #CMD .section__battery-inner-s2 .img__ani100 { background-image: url(../images/image/ani100_s2.png) } .section__battery-inner-s2 .battery_animate_container .battery_animate .img__clock { width: 1280px; height: 250px; position: absolute; top: 295px; left: 50%; margin-left: -640px; will-change: transform, width; opacity: 0 } #CMD .section__battery-inner-s2 .img__clock { background-image: url(../images/image/clock_s2.png) } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_percent_container { z-index: 10; font-size: 110px; text-align: center; color: #fff; position: absolute; width: 800px; top: 360px; left: calc(50% - 400px) } .section__battery-inner-s2 .battery_animate_container .battery_animate .text_percent_container .unit { font-size: .5em } .section__battery-inner-s2 .battery_animate_container .battery_animate .wd__play__btn { top: 104px; z-index: 5 } .section__battery-inner-s2 .battery_animate_container .battery_animate__2 { margin-top: -50px } .section__battery-inner-s3 .wd__content { z-index: 2 } .section__battery-inner-s3 .wd__content .content__title sup { color: #fff !important } #CMD.font-tt .section__battery-inner-s3 .wd__content .content__title sup { color: #fff !important } .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: 20px; line-height: 1.5 } .section__noise .modal-button-container { position: relative; z-index: 99; margin-top: 21px } .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: 28px; 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/image/btn-off.png) } #CMD .section__noise .noise__switcher .img__switcher.js-active { background-image: url(../images/image/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: 16px; 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/image/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 .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/image/blockimg_1_s1.jpg) } */ .section__conference-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3_s1.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__panel__item-image { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: repeat(2, 1fr) } .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; z-index: 3 } .section__conference-inner-s1 .wdtab__nav-btn .nav_icon { margin: 0 auto } .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/image/icon01.svg) no-repeat 50% 50%; mask: url(../images/image/icon01.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-1 .nav_icon { -webkit-mask: url(../images/image/icon02.svg) no-repeat 50% 50%; mask: url(../images/image/icon02.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-2 .nav_icon { -webkit-mask: url(../images/image/icon03.svg) no-repeat 50% 50%; mask: url(../images/image/icon03.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-3 .nav_icon { -webkit-mask: url(../images/image/icon04.svg) no-repeat 50% 50%; mask: url(../images/image/icon04.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-4 .nav_icon { -webkit-mask: url(../images/image/icon05.svg) no-repeat 50% 50%; mask: url(../images/image/icon05.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-5 .nav_icon { -webkit-mask: url(../images/image/icon06.svg) no-repeat 50% 50%; mask: url(../images/image/icon06.svg) no-repeat 50% 50% } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay { opacity: .7; z-index: 3 } .section__conference-inner-s1 .wdtab__nav::before { background-color: #4a47fe } .section__conference-inner-s1 .wdtab__nav-btn { color: #000 } .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: #000; fill: transparent } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-pause { fill: #000 } .section__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-play { fill: #000 } .section__conference-inner-s1 .wdtab .wdtab__nav-btn { outline-offset: -2px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn, .section__conference-inner-s1 .wdtab .wdtab__nav-btn * { color: #000 } .section__conference-inner-s1 .wdtab .wdtab__nav-btn .nav_icon { background-color: #000 } .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__conference-inner-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { stroke: #000 } .section__conference-inner-s1 .wdtab .wdtab__panel__item .wd__play__btn { z-index: 1 } .section__conference-inner-s1 .wdtab .wdtab__panel__item .svg_button_play .svg-circle { stroke: #fff; fill: transparent } .section__conference-inner-s1 .wdtab .wdtab__panel__item .svg_button_play .svg-pause { fill: #fff; stroke: #fff } .section__conference-inner-s1 .wdtab .wdtab__panel__item .svg_button_play .svg-play { fill: #fff; stroke: #fff } .section__conference-inner-s1 .wdtab .wdtab__panel__item .svg_button_play .svg-play .triangle { fill: #fff } .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/image/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/image/toggle-on_s3.png) } #CMD .section__conference-inner-s3 .toggle_off { background-image: url(../images/image/toggle-off_s3.png) } .conference-inner .wd__content .content__title, .conference-outer .wd__content .content__title { background-image: linear-gradient(to right, #67625b, #67625b 90%) } .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 } .modal-inner__conference { background-color: #fff } .section__display-outer-s1 { overflow: hidden; background-color: #000 } .section__display-outer-s1 .wd__content .content__slogan { color: #fff } .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 .theme-black { background-color: #12101b } .section__display-outer-s1 .wdblockimg .theme-white { background-color: #fefefe } .section__display-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/image/blockimg_1-s1.jpg) } /* .section__display-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/image/blockimg_2-s1.jpg) } */ .section__display-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3-s1.jpg) } /* .section__display-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/image/blockimg_4-s1.jpg) } */ .section__display-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/image/blockimg_5-s1.jpg) } .section__display-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images/image/blockimg_6-s1.jpg) } .section__display-outer-s1 .wdblockimg .block-7 .img__bg { background-image: url(../images/image/blockimg_7-s1.jpg) } /* .section__display-outer-s1 .wdblockimg .block-9 .img__bg { background-image: url(../images/image/blockimg_9-s1.jpg) } */ /* .section__display-outer-s1 .wdblockimg .block-10 .img__bg { background-image: url(../images/image/blockimg_10-s1.jpg) } */ /* .section__display-outer-s1 .wdblockimg .block-11 .img__bg { background-image: url(../images/image/blockimg_11-s1.jpg) } */ /* .section__display-outer-s1 .wdblockimg .block-21 .img__bg { background-image: url(../images/image/blockimg_21-s1.jpg) } */ .section__display-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images/image/blockimg_8-s1.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/image/blockimg-s1_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/image/blockimg8-s1.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: transparent } .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-2 { background-image: linear-gradient(to bottom, #e9ecf1 0, #e9ecf1 70%, #000 70.1%, #000 100%) } .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: 20px; 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; height: 100% } 30% { display: none; opacity: 0; height: 0 } 30.1% { display: none; opacity: 0; height: 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: 20px } .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: 34px } .section__display-inner-s1 .product_list .product .product-content .content-hidden .content-info { margin-top: 26px; font-size: 18px; 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 .wdOledTable.oledTable .table_container { text-align: left } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val { display: block; line-height: 1.2 } .section__display-inner-s1 .wdOledTable.oledTable .table_container td .text__val { line-height: 1.3 } .section__display-inner-s1 .wdOledTable.oledTable .table_container { position: relative } .section__display-inner-s1 .wdOledTable.oledTable .table_container table { border-collapse: collapse } .section__display-inner-s1 .wdOledTable.oledTable .table_container caption { opacity: 0; font-size: 0 } .section__display-inner-s1 .wdOledTable.oledTable .table_container td, .section__display-inner-s1 .wdOledTable.oledTable .table_container tr { color: #8a8a8a; font-size: 38px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-0 td { font-size: 0 !important } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 span { background-image: -moz-linear-gradient(0deg, #f8313f 0, #fc9828 30%, #ffff10 50%, #009cff 100%); background-image: -webkit-linear-gradient(0deg, #f8313f 0, #fc9828 30%, #ffff10 50%, #009cff 100%); background-image: -ms-linear-gradient(0deg, #f8313f 0, #fc9828 30%, #ffff10 50%, #009cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 { display: inline-flex; align-items: center } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 .img__table { position: relative; margin-top: 0; width: 72px; height: 72px; background-size: contain } .section__display-inner-s1 .h-col-1 .img__table { background-image: url(../images/image/icon_asusoled.png) } .section__display-inner-s1 .wdOledTable.oledTable .table_container .oled-text-gradient, .section__display-inner-s1 .wdOledTable.oledTable .table_container .oled-text-gradient * { color: #f09a5d; background: linear-gradient(to right, #e45746, #fff17c) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-2, .section__display-inner-s1 .wdOledTable.oledTable .table_container .td-1, .section__display-inner-s1 .wdOledTable.oledTable .table_container .td-2 { color: #dbdbdb } .section__display-inner-s1 .wdOledTable.oledTable .table_container tr td, .section__display-inner-s1 .wdOledTable.oledTable .table_container tr th { border-top: 1px solid #444; border-bottom: 0 solid transparent } .section__display-inner-s1 .wdOledTable.oledTable .table_container tr:first-child td, .section__display-inner-s1 .wdOledTable.oledTable .table_container tr:first-child th { border-top: 1px solid transparent } .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-1.tr-1 td, .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-1.tr-1 th { border-top: 3px solid #fff } .section__display-inner-s1 .wdOledTable.oledTable .table_fixed_container .table_fixed__item.item-1 span.text__val { background-image: -moz-linear-gradient(0deg, #f8313f 0, #fc9828 30%, #ffff10 50%, #009cff 100%); background-image: -webkit-linear-gradient(0deg, #f8313f 0, #fc9828 30%, #ffff10 50%, #009cff 100%); background-image: -ms-linear-gradient(0deg, #f8313f 0, #fc9828 30%, #ffff10 50%, #009cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__display-inner-s1 .wdOledTable table .tr-1.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 } .section__display-inner-s2 .image__container .imgItem-img { position: relative; overflow: hidden; border-radius: 20px } .section__display-inner-s2 .image__container .imgItem-title { position: relative; z-index: 9; top: 0; width: 100%; color: #fff; text-align: center } .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 } .section__display-inner-s21 { padding-top: 160px; background: #0e111b } .section__display-inner-s21 .wd__content { margin: 0 auto } .section__display-inner-s21 .wd__content .content__info { color: #fff } .section__display-inner-s21 .wd__content .content__link { color: #fff } .section__display-inner-s21 .wdtab { margin-top: 64px } .section__display-inner-s21 .wdtab__nav { background-color: transparent } .section__display-inner-s21 .wdtab__nav-btn { font-size: 1.875rem } .section__display-inner-s21 .wdtab__nav-btn.active, .section__display-inner-s21 .wdtab__nav-btn.focus-visible, .section__display-inner-s21 .wdtab__nav-btn:focus { color: #fff } .section__display-inner-s21 .wdtab__nav-btn.active::before, .section__display-inner-s21 .wdtab__nav-btn.focus-visible::before, .section__display-inner-s21 .wdtab__nav-btn:focus::before { background-image: linear-gradient(to right, #9ddaff, #6994ff 100%) } .section__display-inner-s21 .wdtab__panel { padding-top: 0; min-height: 754px } .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay { margin-left: 535px } .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { fill: transparent } .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play, .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play * { stroke: #fff } .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .triangle { fill: #fff } .section__display-inner-s21 .img_containter { position: relative; overflow: hidden; margin: 0 auto; width: 1144px; height: 596px; border-radius: 20px } .section__display-inner-s21 .img_containter>img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__display-inner-s21 .slider_step__containter { position: relative; margin: 60px auto 50px; width: 340px } .section__display-inner-s21 .slider_step__containter .step_icon { position: absolute; top: 50%; background-size: contain; transform: translateY(-50%) } .section__display-inner-s21 .slider_step__containter .beer-range::-webkit-slider-thumb { width: 30px } .section__display-inner-s21 .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__display-inner-s21 .slider_step__containter .beer-slider-2 { background-image: linear-gradient(to right, #ff4d00, #ffa839, #fff, #a6ddfc, #0083ff 100%) } .section__display-inner-s21 .slider_step__containter .beer-slider .beer-range { left: -15px; opacity: 0; margin-top: -25px; width: calc(100% + 30px); height: 50px } .section__display-inner-s21 .slider_step__containter .beer-slider .img { display: none } .section__display-inner-s21 .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__display-inner-s21 .slider_step__containter .beer-slider .beer-handle::before { display: none } .section__display-inner-s21 .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__display-inner-s21 .step_icon.dark { left: 5px; width: 25px; height: 25px } #CMD .section__display-inner-s21 .slider_step__containter .step_icon.dark { background-image: url(../images/image/slider_icon_dark_section21.png) } .section__display-inner-s21 .step_icon.light { right: 5px; width: 25px; height: 25px } #CMD .section__display-inner-s21 .slider_step__containter .step_icon.light { background-image: url(../images/image/slider_icon_light_section21.png) } .section__display-inner-s21 .step_icon.candle { left: 8px; width: 28px; height: 28px; filter: contrast(.1) } #CMD .section__display-inner-s21 .slider_step__containter .step_icon.candle { background-image: url(../images/image/slider_icon_candle_section21.png) } .section__display-inner-s21 .step_icon.cloud { right: 0; width: 28px; height: 28px; filter: contrast(.1) } #CMD .section__display-inner-s21 .slider_step__containter .step_icon.cloud { background-image: url(../images/image/slider_icon_cloud_section21.png) } #CMD .section__display-inner-s21 .img__inner3__1_dark { background-image: url(../images/image/ani_dark_section21.jpg) } #CMD .section__display-inner-s21 .img__inner3__1_light { background-image: url(../images/image/ani_light_section21.jpg) } #CMD .section__display-inner-s21 .img__inner3__1_warm { background-image: url(../images/image/ani_warm_section21.jpg) } #CMD .section__display-inner-s21 .img__inner3__1_cool { background-image: url(../images/image/ani_cool_section21.jpg) } .display-inner { background-color: #000 } .display-inner .wd__content .content__title { background-image: linear-gradient(to right, #67625b, #67625b 90%) } .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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/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/image/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/image/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/image/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, #5d5853, #5d5853 90%) } .section__environment-outer-s1 .wd__content .content__info { color: #181818 } .section__environment-outer-s1 .wd__content .content__link { 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-content .footnote-num { top: .3em !important } .section__environment-outer-s1 .wdblockimg .block-content .footnote-num a { line-height: 0 } .section__environment-outer-s1 .block-3 { display: none } .section__environment-outer-s1.use-FSC-imgs .block-2 { display: none } .section__environment-outer-s1.use-FSC-imgs .block-3 { display: block } .section__environment-outer-s1.use-two-column .block-1 { display: none } .section__environment-outer-s1.use-two-column .block.column-span-2 { grid-column-end: span 3 } .section__environment-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/image/blockimg_1_environment.jpg) } .section__environment-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/image/blockimg_2_environment.jpg) } .section__environment-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3_environment.jpg) } .section__environment-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/image/blockimg_4_environment.jpg) } .section__environment-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/image/blockimg_5_environment.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: #181818; background-color: #fff; min-height: auto } .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; transition: background .6s } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button:hover { background-color: #d4d3d3 } .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: 38px } */ .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.2 } .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.2 } .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::after, .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; -webkit-mask-image: url(../images/image/jumparrowMask.png); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat } .section__ksp .wdtile.wdtile-ksp .item__jumpto-button::before { content: "" } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button { right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; background-color: #393939 !important } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button::before { background-color: #fff; transition: transform .5s } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button::after { content: ""; transform: translateY(-40px) } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button:hover::before { transform: translateY(40px) } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button:hover::after { transform: translateY(0) } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button.reset::before { transform: translateY(0); transition: none } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button.reset::after { transform: translateY(-40px); transition: none } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button.active::before { transform: translateY(40px) } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button.active::after { transform: translateY(0) } /* .section__ksp.isBlockScroll .wdtile.wdtile-ksp .wdtile__item { opacity: 0 } */ .section__ksp.isBlockScroll .wdtile.wdtile-ksp [data-anim-header=true] { opacity: 0 } .section__ksp.test .item__image { background-color: #ccc } .section__ksp.test .img__item { background-color: #fc0 } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init { --gradient-duration: 0.75s } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init .gradient-text-item span sup[class*=sign-] { transition: background-position .75s ease-in; transition-delay: 0s; transition-duration: var(--gradient-duration) } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init .gradient-text-item span { display: inline-block; position: relative; overflow: hidden; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-down .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-], .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-up .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-size: calc(100% + 1px) calc(200% + 1px) } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-left .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-], .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-right .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-size: calc(260% + 1px) calc(100% + 1px) } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-up .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-position: 0 0 } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-down .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-] { background-position: 0 100% } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-left .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-] { background-position: 0 0 } .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-right .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .item__block.gradientTextPlay-init.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-position: 100% 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-up .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-position: 0 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-down .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-] { background-position: 0 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-left .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-] { background-position: 100% 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-right .gradient-text-item span, .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .item__block.gradientTextPlay-init.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-position: 0 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(2), .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(2) * { transition-delay: .35s !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(3), .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(3) * { transition-delay: .7s !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(4), .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(4) * { transition-delay: 1.05s !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(5), .section__ksp .wdtile.wdtile-ksp .wdtile__item.aniPlay .gradient-text-item span:nth-child(5) * { transition-delay: 1.4s !important } .section__ksp .wdtile.wdtile-ksp .item__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc } .section__ksp .wdtile.wdtile-ksp .item__video .item__video-part { position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%) } .section__ksp .wdtile.wdtile-ksp .item__video_btn { position: absolute; z-index: 9; top: 100%; left: 0 } .section__ksp .wdtile.wdtile-ksp .item__video_btn .wd__play__btn { bottom: 8px; left: 8px; margin-left: 0 } .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-up .gradient-text-item span, .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-color: #ffb6ff; background-image: linear-gradient(0deg, transparent 30%, #ccc 60%), linear-gradient(0deg, #b344ff 0, #ffb6ff 50%) } .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-down .gradient-text-item span, .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-] { background-color: #ffb6ff; background-image: linear-gradient(180deg, transparent 50%, #ccc 60%), linear-gradient(0deg, #b344ff 50%, #ffb6ff 100%) } .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-left .gradient-text-item span, .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-] { background-color: #ffb6ff; background-image: linear-gradient(270deg, transparent 50%, #ccc 60%), linear-gradient(180deg, #ffb6ff 0, #b344ff) } .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-right .gradient-text-item span, .gradientTextPlay-theme-deepPurple.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-color: #ffb6ff; background-image: linear-gradient(90deg, transparent 50%, #ccc 60%), linear-gradient(180deg, #ffb6ff 0, #b344ff) } .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-up .gradient-text-item span, .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-color: #2edcff; background-image: linear-gradient(0deg, transparent 30%, #c1c1c1 60%), linear-gradient(0deg, #002698 0, #2edcff 50%) } .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-down .gradient-text-item span, .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-] { background-color: #2edcff; background-image: linear-gradient(180deg, transparent 50%, #c1c1c1 60%), linear-gradient(0deg, #002698 50%, #2edcff 100%) } .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-left .gradient-text-item span, .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-] { background-color: #2edcff; background-image: linear-gradient(270deg, transparent 50%, #c1c1c1 60%), linear-gradient(180deg, #2edcff 0, #002698) } .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-right .gradient-text-item span, .gradientTextPlay-theme-deepBlue.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-color: #2edcff; background-image: linear-gradient(90deg, transparent 50%, #c1c1c1 60%), linear-gradient(180deg, #2edcff 0, #002698) } .section__military__grade .wd__content .content__slogan { color: #181818 } .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 .wdtile__item { background-color: #ccc } .section__military__grade .wdtile .item__head__slogan-text { color: #181818 } .section__military__grade .wdtile .item__content-main { color: #181818 } .section__military__grade .wdtile .item__content-sub { color: #afafaf } .section__military__grade.theme-black { background-color: #000 } .section__military__grade.theme-black .wdtile__item { background-color: #171717 } .section__military__grade.theme-black .wdtile .item__head__slogan-text span { display: block; -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%) } .section__military__grade.theme-black .wdtile .item__content-main { color: #fff } .section__military__grade.theme-black .wdtile .item__content-sub { color: #999 } @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 .wd__feature__list.features-icon { left: 0; margin-right: auto; margin-bottom: 870px; margin-left: auto; width: 100%; max-width: 1080px } /* .section__military__grade .features-icon .img__icon1 { background-image: url(../images/image/icon/icon_smilitary__grade_1.png) } .section__military__grade .features-icon .img__icon2 { background-image: url(../images/image/icon/icon_smilitary__grade_2.png) } .section__military__grade .features-icon .img__icon3 { background-image: url(../images/image/icon/icon_smilitary__grade_3.png) } .section__military__grade .features-icon .img__icon4 { background-image: url(../images/image/icon/icon_smilitary__grade_4.png) } .section__military__grade .features-icon .img__icon5 { background-image: url(../images/image/icon/icon_smilitary__grade_5.png) } */ .section__military__grade .wdtile .item__head { display: flex; align-items: center } .section__military__grade .wdtile .item__head__slogan-text { padding-left: 20px; text-align: left; line-height: 1.4 } .section__military__grade .wdtile .img__slogan { width: 84px; height: 76px } .section__military__grade .wdtile .item__content { text-align: left; line-height: 1.4 } .section__military__grade .wdtile .item__content-main { margin-bottom: 5px } .section__military__grade .wdtile .item__content-sub { margin-bottom: 15px; color: #afafaf } .section__military__grade .wdtile .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 .wdtile__item-0 .wdtile__item { background-image: url(../images/image/icon_0.png) } .section__military__grade .wdtile__item-1 .wdtile__item { background-image: url(../images/image/icon_1.png) } .section__military__grade .wdtile__item-2 .wdtile__item { background-image: url(../images/image/icon_2.png) } .section__military__grade .wdtile__item-3 .wdtile__item { background-image: url(../images/image/icon_3.png) } .section__military__grade .wdtile__item-4 .wdtile__item { background-image: url(../images/image/icon_4.png) } .section__military__grade .wdtile__item-5 .wdtile__item { background-image: url(../images/image/icon_5.png) } .section__military__grade .wdtile__item-6 .wdtile__item { background-image: url(../images/image/icon_6.png) } .section__military__grade .wdtile__item-7 .wdtile__item { background-image: url(../images/image/icon_7.png) } .section__military__grade .wdtile__item-8 .wdtile__item { background-image: url(../images/image/icon_8.png) } .section__military__grade .wdtile__item-9 .wdtile__item { background-image: url(../images/image/icon_9.png) } .section__military__grade .wdtile__item-10 .wdtile__item { background-image: url(../images/image/icon_10.png) } .section__military__grade .wdtile__item-11 .wdtile__item { background-image: url(../images/image/icon_11.png) } .section__military__grade .wdtile__item-12 .wdtile__item { background-image: url(../images/image/icon_12.png) } .section__military__grade .wdtile__item-13 .wdtile__item { background-image: url(../images/image/icon_13.png) } .section__military__grade .wdtile__item-14 .wdtile__item { background-image: url(../images/image/icon_14.png) } .section__military__grade .wdtile__item-15 .wdtile__item { background-image: url(../images/image/icon_15.png) } .section__military__grade .wdtile__item-16 .wdtile__item { background-image: url(../images/image/icon_16.png) } .section__military__grade .wdtile__item-17 .wdtile__item { background-image: url(../images/image/icon_17.png) } .section__military__grade .wdtile__item-18 .wdtile__item { background-image: url(../images/image/icon_18.png) } .section__military__grade .wdtile__item-19 .wdtile__item { background-image: url(../images/image/icon_19.png) } .section__military__grade .wdtile__item-20 .wdtile__item { background-image: url(../images/image/icon_20.png) } .section__military__grade .wdtile__item-21 .wdtile__item { background-image: url(../images/image/icon_21.png) } .section__military__grade .wdtile__item-22 .wdtile__item { background-image: url(../images/image/icon_22.png) } .section__military__grade .wdtile__item-23 .wdtile__item { background-image: url(../images/image/icon_23.png) } .section__military__grade .wdtile__item-24 .wdtile__item { background-image: url(../images/image/icon_24.png) } .section__military__grade .wdtile__item-25 .wdtile__item { background-image: url(../images/image/icon_25.png) } .section__military__grade .wdtile__item-26 .wdtile__item { background-image: url(../images/image/icon_26.png) } .section__military__grade .wdtile__item-27 .wdtile__item { background-image: url(../images/image/icon_27.png) } .section__military__grade .wdtile__item-28 .wdtile__item { background-image: url(../images/image/icon_28.png) } .section__military__grade .wdtile__item-29 .wdtile__item { background-image: url(../images/image/icon_29.png) } .section__military__grade .wdtile__item-30 .wdtile__item { background-image: url(../images/image/icon_30.png) } .section__military__grade .wdtile__item-31 .wdtile__item { background-image: url(../images/image/icon_31.png) } .section__military__grade .wdtile__item-32 .wdtile__item { background-image: url(../images/image/icon_32.png) } .section__military__grade .wdtile__item-33 .wdtile__item { background-image: url(../images/image/icon_33.png) } .section__military__grade .wdtile__item-34 .wdtile__item { background-image: url(../images/image/icon_34.png) } .section__military__grade .wdtile__item-35 .wdtile__item { background-image: url(../images/image/icon_35.png) } .section__military__grade .wdtile__item-36 .wdtile__item { background-image: url(../images/image/icon_36.png) } .section__military__grade .wdtile__item-37 .wdtile__item { background-image: url(../images/image/icon_37.png) } .section__military__grade .wdtile__item-38 .wdtile__item { background-image: url(../images/image/icon_38.png) } .section__military__grade .wdtile__item-39 .wdtile__item { background-image: url(../images/image/icon_39.png) } .section__military__grade .wdtile__item-40 .wdtile__item { background-image: url(../images/image/icon_40.png) } */ .section__military__grade .wdtile__item .icon-shocktest { background-image: url(../images/image/icon_shocktest.png) } .section__military__grade .wdtile__item .icon-vibrationtest { background-image: url(../images/image/icon_vibrationtest.png) } .section__military__grade .wdtile__item .icon-hightemperaturetest { background-image: url(../images/image/icon_hightemperaturetest.png) } .section__military__grade .wdtile__item .icon-lowtemperaturetest { background-image: url(../images/image/icon_lowtemperaturetest.png) } .section__military__grade .wdtile__item .icon-humiditytest { background-image: url(../images/image/icon_humiditytest.png) } .section__military__grade .wdtile__item .icon-temperatureshocktest { background-image: url(../images/image/icon_temperatureshocktest.png) } .section__military__grade .wdtile__item .icon-sandanddusttest { background-image: url(../images/image/icon_sandanddusttest.png) } .section__military__grade .wdtile__item .icon-freezethawtest { background-image: url(../images/image/icon_freezethawtest.png) } .section__military__grade .wdtile__item .icon-altitudetest { background-image: url(../images/image/icon_altitudetest.png) } .section__military__grade .wdtile__item .icon-solarradiationtest { background-image: url(../images/image/icon_solarradiationtest.png) } .section__military__grade .wdtile__item .icon-mechanicalvibrationtest { background-image: url(../images/image/icon_mechanicalvibrationtest.png) } .section__military__grade .wdtile__item .icon-explosiveatmospheretest { background-image: url(../images/image/icon_explosiveatmospheretest.png) } .section__military__grade .wdtile .img__slogan { background-size: contain } .section__security-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #000 } .section__security-outer-s1 .wd__content .content__slogan { color: #fff } .section__security-outer-s1 .wd__content .content__info { color: #fff } .section__security-outer-s1 .wd__content .content__link { color: #fff } .section__security-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__security-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__security-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__security-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__security-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__security-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__security-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__security-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images/image/blockimg_1_security.jpg) } .section__security-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/image/blockimg_2_security.jpg) } .section__security-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3_security.jpg) } .section__security-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/image/blockimg_4_security.jpg) } .section__security-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/image/blockimg_5_security.jpg) } .section__security-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images/image/blockimg_6_security.jpg) } .section__security-outer-s1 .wdblockimg .block-1 { background-color: #212121 } .section__security-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__security-outer-s1 .wdblockimg .block-2 { background-color: #212121 } .section__security-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__security-outer-s1 .wdblockimg .block-3 { background-color: #212121 } .section__security-outer-s1 .wdblockimg .block-3 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__security-outer-s1 .wdblockimg .block-4 { background-color: #212121 } .section__security-outer-s1 .wdblockimg .block-4 .modal-button-container .modal-button { border-color: #000; background-color: rgba(88, 44, 128, .6) } .section__security-outer-s1 .wdblockimg .block-5 { background-color: #212121 } .section__security-outer-s1 .wdblockimg .block-5 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__security-outer-s1 .wdblockimg .block-6 { background-color: #212121 } .section__security-outer-s1 .wdblockimg .block-6 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__security-inner-s1 { padding-top: 160px; padding-bottom: 0; background: #000 } .section__security-inner-s1 .wd__content { margin: 0 auto } .section__security-inner-s1 .wd__content .content__info { color: #fff } .section__security-inner-s1 .wd__content .content__link { color: #fff } .section__security-inner-s1 .security-inner-s1-figure { margin: 84px auto 0; max-width: 1144px } .section__security-inner-s1 .security-inner-s1-figure-item { overflow: hidden; border-radius: 20px } .section__security-inner-s1 .security-inner-s1-figure-item img { width: 100%; height: 340px } .section__security-inner-s1 .security-inner-s1-imgs { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: repeat(2, 1fr) } .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-1 { background-image: url(../images/image/img1_inner.jpg) } .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-2 { background-image: url(../images/image/img2_inner.jpg) } .section__security-inner-s2 { padding-top: 160px; padding-bottom: 0; background: #000 } .section__security-inner-s2 .wd__content { margin: 0 auto } .section__security-inner-s2 .wd__content .content__info { color: #fff } .section__security-inner-s2 .wd__content .content__link { color: #fff } .section__security-inner-s2 .security-inner-s2-figure { margin: 84px auto 0; max-width: 1144px } .section__security-inner-s2 .security-inner-s2-figure-item { overflow: hidden; border-radius: 20px } .section__security-inner-s2 .security-inner-s2-figure-item img { width: 100%; height: 340px } .section__security-inner-s2 .security-inner-s2-imgs { display: grid; grid-gap: 24px; gap: 24px; grid-template-columns: repeat(2, 1fr) } .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-1 { background-image: url(../images/image/img1_inner_1.jpg) } .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-2 { background-image: url(../images/image/img2_inner_1.jpg) } .modal-inner__sectionsSecurity { background: #000 } .section__software-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #000 } .section__software-outer-s1 .wd__content .content__slogan { color: #fff } .section__software-outer-s1 .wd__content .content__info { color: #fff } .section__software-outer-s1 .wd__content .content__link { color: #fff } .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 .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/image/main_software.jpg) } .section__software-outer-s1 .img__main { background-image: url(../images/image/main_software.jpg) } .section__software-outer-s1 .software-info1 .wd__feature__data { margin-left: 0 !important; width: 110px } #CMD .section__software-outer-s1 .software-info1 .img__icon0 { background-image: url(../images/image/icon1-0_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon1 { background-image: url(../images/image/icon1-1_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon2 { background-image: url(../images/image/icon1-2_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon3 { background-image: url(../images/image/icon1-3_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon4 { background-image: url(../images/image/icon1-4_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon5 { background-image: url(../images/image/icon1-5_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon6 { background-image: url(../images/image/icon1-6_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon7 { background-image: url(../images/image/icon1-7_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon8 { background-image: url(../images/image/icon1-8_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon9 { background-image: url(../images/image/icon1-9_software.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon10 { background-image: url(../images/image/icon1-10_software.png) } .section__software-outer-s1 .software-info2 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { margin-left: 0 !important; width: 130px } .section__software-outer-s1 .software-info2 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { max-width: 130px } .section__software-outer-s1 .software-info2 .img__icon0 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon0 { background-image: url(../images/image/icon2-0_software.png) } .section__software-outer-s1 .software-info2 .img__icon1 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon1 { background-image: url(../images/image/icon2-1_software.png) } .section__software-outer-s1 .software-info2 .img__icon2 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon2 { background-image: url(../images/image/icon2-2_software.png) } .section__software-outer-s1 .software-info2 .img__icon3 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon3 { background-image: url(../images/image/icon2-3_software.png) } .section__software-outer-s1 .software-info2 .img__icon4 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon4 { background-image: url(../images/image/icon2-4_software.png) } .section__software-outer-s1 .software-info2 .img__icon5 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon5 { background-image: url(../images/image/icon2-5_software.png) } .section__software-outer-s1 .software-info2 .img__icon6 { background-position: left center; background-size: cover } #CMD .section__software-outer-s1 .software-info2 .img__icon6 { background-image: url(../images/image/icon2-6_software.png) } .section__software-outer-s1 .software-info3 .wd__feature__data { margin-left: 0 !important; width: 110px } #CMD .section__software-outer-s1 .software-info3 .img__icon0 { background-image: url(../images/image/icon3-0_software.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon1 { background-image: url(../images/image/icon3-1_software.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon2 { background-image: url(../images/image/icon3-2_software.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon3 { background-image: url(../images/image/icon3-3_software.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon4 { background-image: url(../images/image/icon3-4_software.png) } #CMD .section__software-outer-s1 .software-info3 .img__icon5 { background-image: url(../images/image/icon3-5_software.png) } .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/image/blockimg_1_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images/image/blockimg_2_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images/image/blockimg_4_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images/image/blockimg_5_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images/image/blockimg_6_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-7 .img__bg { background-image: url(../images/image/blockimg_7_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images/image/blockimg_8_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-9 .img__bg { background-image: url(../images/image/blockimg_9_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-10 .img__bg { background-image: url(../images/image/blockimg_10_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-11 .img__bg { background-image: url(../images/image/blockimg_11_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-12 .img__bg { background-image: url(../images/image/blockimg_12_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-13 .img__bg { background-image: url(../images/image/blockimg_13_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-14 .img__bg { background-image: url(../images/image/blockimg_14_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-15 .img__bg { background-image: url(../images/image/blockimg_15_userExperience.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-16 .img__bg { background-image: url(../images/image/blockimg_16_userExperience.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(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-15 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .6) } .section__userexperience-outer-s1 .wdblockimg .block-16 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(200, 161, 223, .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/image/img1_userExperience.jpg) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-2 { background-image: url(../images/image/img2_userExperience.jpg) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-3 { background-image: url(../images/image/img3_userExperience.jpg) } .section__userExperience-inner-s2 { padding-top: 160px; padding-bottom: 100px; 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/image/img1_s2.jpg) } .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-2 { background-image: url(../images/image/img2_s2.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/image/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/image/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/image/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/image/slider_icon_cloud.png) } #CMD .section__userExperience-inner-s3 .img__inner3__1_dark { background-image: url(../images/image/ani_dark.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_light { background-image: url(../images/image/ani_light.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_warm { background-image: url(../images/image/ani_warm.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_cool { background-image: url(../images/image/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, #174d71 0, #174d71 100%); color: #174d71 } .section__userExperience-inner-s4 .wdblockimg { z-index: 10; margin-top: 73px } @media (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 { min-height: 463px } .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 .img__bg { top: 0; right: 0; width: 100%; height: 100%; background-position: center; background-size: 654px 470px; transform: unset; background-position-x: -153px; transform-origin: center } } .section__userExperience-inner-s4 .wdblockimg .block-1 .img__bg { background-image: url(../images/image/blockimg_1_inner.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-2 .img__bg { background-image: url(../images/image/blockimg_2_inner.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3_inner.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-4 .img__bg { background-image: url(../images/image/blockimg_4_inner.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-5 .img__bg { background-image: url(../images/image/blockimg_5_inner.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-6 .img__bg { background-image: url(../images/image/blockimg_6_inner.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/image/blockimg_6_inner-2.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/image/blockimg_6_inner-3.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, red 0, red 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, red 0, red 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, red 0, red 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, red 0, red 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, red 0, red 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, red 0, red 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: 100px; 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, #174d71 0, #174d71 100%); color: #174d71 } .section__userExperience-inner-s5 .btn__lity__video { margin-top: 73px } .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/image/play-1.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: 26px; 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/image/video_bg.jpg) } .section__userExperience-inner-s6 { padding-top: 100px; 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, #174d71 0, #174d71 100%); color: #174d71 } .section__userExperience-inner-s6 .wdblockimg { z-index: 10; margin-top: 73px } .section__userExperience-inner-s6 .wdblockimg .block-1 .img__bg { background-image: url(../images/image/blockimg_1_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-2 .img__bg { background-image: url(../images/image/blockimg_2_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-3 .img__bg { background-image: url(../images/image/blockimg_3_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-4 .img__bg { background-image: url(../images/image/blockimg_4_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-5 .img__bg { background-image: url(../images/image/blockimg_5_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-6 .img__bg { background-image: url(../images/image/blockimg_6_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-7 .img__bg { background-image: url(../images/image/blockimg_7_v1.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-8 .img__bg { /* background-image: url(../images/image/blockimg_8.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, red 0, red 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, red 0, red 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, red 0, red 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, red 0, red 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-s6 .wdblockimg .block-5 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-5 .block-content .content__title { background-image: linear-gradient(to right, red 0, red 100%) } .section__userExperience-inner-s6 .wdblockimg .block-5 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-5 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-5 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-5 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-6 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-6 .block-content .content__title { background-image: linear-gradient(to right, red 0, red 100%) } .section__userExperience-inner-s6 .wdblockimg .block-6 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-6 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-6 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-6 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-7 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-7 .block-content .content__title { background-image: linear-gradient(to right, red 0, red 100%) } .section__userExperience-inner-s6 .wdblockimg .block-7 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-7 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-7 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-7 .modal-button-container .modal-button .modal-inner-text { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-8 { background-color: #242424 } .section__userExperience-inner-s6 .wdblockimg .block-8 .block-content .content__title { background-image: linear-gradient(to right, red 0, red 100%) } .section__userExperience-inner-s6 .wdblockimg .block-8 .block-content .content__info, .section__userExperience-inner-s6 .wdblockimg .block-8 .block-content .content__info * { color: #fff } .section__userExperience-inner-s6 .wdblockimg .block-8 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__userExperience-inner-s6 .wdblockimg .block-8 .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, #174d71 0, #174d71 100%); color: #174d71 } .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, #174d71 0, #174d71 100%); color: #174d71 } .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/image/img1_v1.jpg) } .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-2 { background-image: url(../images/image/img2_v1.jpg) } .section__userExperience-inner-s9 { padding-bottom: 0; background: #0e111b } .section__userExperience-inner-s9 .wd__content { margin: 0 auto } .section__userExperience-inner-s9 .wd__content .content__info { color: #fff } .section__userExperience-inner-s9 .wd__content .content__link { color: #fff } .section__userExperience-inner-s9 .wdtab { padding: 2px } .section__userExperience-inner-s9 .wdtab .wdtab__panel .wdtab__panel__item-info__text { color: #fff } .section__userExperience-inner-s9 .wdtab .wdtab__nav { background-color: inherit } .section__userExperience-inner-s9 .wdtab__nav-btn { display: flex; flex-direction: column; align-items: center } .section__userExperience-inner-s9 .wdtab__nav-btn .nav_icon { margin: 0 auto } .section__userExperience-inner-s9 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #b8b8b8 } .section__userExperience-inner-s9 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .triangle { fill: #b8b8b8 } .section__userExperience-inner-s9 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #b8b8b8 } .section__userExperience-inner-s9 .single-nav { display: block; position: relative; margin-right: auto; margin-left: auto } .section__userExperience-inner-s9 .single-nav .wdtab__panel__item-info__text { display: none } #wdTab-userExperience-s9-tabnav-0 .nav_icon { -webkit-mask: url(../images/image/icon01.svg) no-repeat 50% 50%; mask: url(../images/image/icon01.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-1 .nav_icon { -webkit-mask: url(../images/image/icon02.svg) no-repeat 50% 50%; mask: url(../images/image/icon02.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-2 .nav_icon { -webkit-mask: url(../images/image/icon03.svg) no-repeat 50% 50%; mask: url(../images/image/icon03.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-3 .nav_icon { -webkit-mask: url(../images/image/icon04.svg) no-repeat 50% 50%; mask: url(../images/image/icon04.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-4 .nav_icon { -webkit-mask: url(../images/image/icon05.svg) no-repeat 50% 50%; mask: url(../images/image/icon05.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-5 .nav_icon { -webkit-mask: url(../images/image/icon06.svg) no-repeat 50% 50%; mask: url(../images/image/icon06.svg) no-repeat 50% 50% } .section__userExperience-inner-s9 .wdtab__nav::before { background-color: #4a47fe } .section__userExperience-inner-s9 .wdtab__nav-btn { color: #b8b8b8 } .section__userExperience-inner-s9 .wdtab__nav-btn:focus-visible { color: #4a47fe } .section__userExperience-inner-s9 .wdtab__nav-btn.active, .section__userExperience-inner-s9 .wdtab__nav-btn:hover { color: #4a47fe } .section__userExperience-inner-s9 .wdtab__nav-btn.active::before, .section__userExperience-inner-s9 .wdtab__nav-btn:hover::before { background-color: #4a47fe } .section__userExperience-inner-s9 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #b8b8b8; fill: transparent } .section__userExperience-inner-s9 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-pause { fill: #b8b8b8 } .section__userExperience-inner-s9 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-play { fill: #b8b8b8 } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn * { color: #b8b8b8 } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn .nav_icon { background-color: #b8b8b8 } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn.active, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn.active *, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:focus, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:focus *, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:focus-visible, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:focus-visible *, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:hover, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:hover * { color: #4a47fe } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn.active .nav_icon, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:focus .nav_icon, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:focus-visible .nav_icon, .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn:hover .nav_icon { background-color: #4a47fe } .modal-inner__sectionsUserExperience { background: #dadada } section { position: relative } .wd-outer-end { 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 } section #section__display-outer-s1 .col>.wd__content .content__slogan, section #section__display-outer-s1 .wd__content.main-content .content__slogan, section #section__display-outer-s1 .wd__content.wd__content-horz .content__slogan, section section .col>.wd__content .content__slogan, section section .wd__content.main-content .content__slogan, section section .wd__content.wd__content-horz .content__slogan { -webkit-text-fill-color: initial !important; background-image: none !important; color: #595959 } section #section__display-outer-s1 .col>.wd__content .content__title, section #section__display-outer-s1 .wd__content.main-content .content__title, section #section__display-outer-s1 .wd__content.wd__content-horz .content__title, section section .col>.wd__content .content__title, section section .wd__content.main-content .content__title, section section .wd__content.wd__content-horz .content__title { color: #67625b; background-image: linear-gradient(to right, #67625b, #67625b 90%) } section #section__display-outer-s1 .col>.wd__content .content__title sup.footnote-num, section #section__display-outer-s1 .wd__content.main-content .content__title sup.footnote-num, section #section__display-outer-s1 .wd__content.wd__content-horz .content__title sup.footnote-num, section section .col>.wd__content .content__title sup.footnote-num, section section .wd__content.main-content .content__title sup.footnote-num, section section .wd__content.wd__content-horz .content__title sup.footnote-num { -webkit-text-fill-color: initial !important; background-image: none !important; background-color: #67625b } section #section__display-outer-s1 .col>.wd__content .content__info, section #section__display-outer-s1 .wd__content.main-content .content__info, section #section__display-outer-s1 .wd__content.wd__content-horz .content__info, section section .col>.wd__content .content__info, section section .wd__content.main-content .content__info, section section .wd__content.wd__content-horz .content__info { margin-top: 4px; color: #181818 } section #section__display-outer-s1 .col>.wd__content .content__link, section #section__display-outer-s1 .wd__content.main-content .content__link, section #section__display-outer-s1 .wd__content.wd__content-horz .content__link, section section .col>.wd__content .content__link, section section .wd__content.main-content .content__link, section section .wd__content.wd__content-horz .content__link { display: inline-block; color: #174d71 } section #section__display-outer-s1 .col>.wd__content .content__link *, section #section__display-outer-s1 .wd__content.main-content .content__link *, section #section__display-outer-s1 .wd__content.wd__content-horz .content__link *, section section .col>.wd__content .content__link *, section section .wd__content.main-content .content__link *, section section .wd__content.wd__content-horz .content__link * { color: #174d71 } section #section__display-outer-s1 .col>.wd__content .content__link::after, section #section__display-outer-s1 .wd__content.main-content .content__link::after, section #section__display-outer-s1 .wd__content.wd__content-horz .content__link::after, section section .col>.wd__content .content__link::after, section section .wd__content.main-content .content__link::after, section section .wd__content.wd__content-horz .content__link::after { color: #174d71 } section #section__display-outer-s1 .col>.wd__content .content__link:link, section #section__display-outer-s1 .wd__content.main-content .content__link:link, section #section__display-outer-s1 .wd__content.wd__content-horz .content__link:link, section section .col>.wd__content .content__link:link, section section .wd__content.main-content .content__link:link, section section .wd__content.wd__content-horz .content__link:link { color: #174d71 } section #section__display-outer-s1 .col>.wd__content .content__link:hover span, section #section__display-outer-s1 .wd__content.main-content .content__link:hover span, section #section__display-outer-s1 .wd__content.wd__content-horz .content__link:hover span, section section .col>.wd__content .content__link:hover span, section section .wd__content.main-content .content__link:hover span, section section .wd__content.wd__content-horz .content__link:hover span { border-bottom: 1px solid #174d71 } section #section__display-outer-s1 .col>.wd__content .content__comment, section #section__display-outer-s1 .wd__content.main-content .content__comment, section #section__display-outer-s1 .wd__content.wd__content-horz .content__comment, section section .col>.wd__content .content__comment, section section .wd__content.main-content .content__comment, section section .wd__content.wd__content-horz .content__comment { color: #4f4f4f } section #section__display-outer-s1 .wd__content.content-colorful-text .content__info, section section .wd__content.content-colorful-text .content__info { color: #595959 } section #section__display-outer-s1 .wd__content.content-colorful-text .content__info .colorful-text, section section .wd__content.content-colorful-text .content__info .colorful-text { color: #181818 } .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__data, section #section__display-outer-s1 .col>.wd__feature__list .wd__feature .wd__feature__data, section #section__display-outer-s1 .wd__feature__list.main-featureList .wd__feature .wd__feature__data, section section .col>.wd__feature__list .wd__feature .wd__feature__data, section section .wd__feature__list.main-featureList .wd__feature .wd__feature__data { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #174d71 25%, #25616f 100%); background-image: linear-gradient(to right, #174d71 0, #296079 33%, #2e7186 66%, #318092 100%); color: #2e7186 } .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__describe, .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__describe *, .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__describe__top, .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__describe__top *, section #section__display-outer-s1 .col>.wd__feature__list .wd__feature .wd__feature__describe, section #section__display-outer-s1 .col>.wd__feature__list .wd__feature .wd__feature__describe *, section #section__display-outer-s1 .col>.wd__feature__list .wd__feature .wd__feature__describe__top, section #section__display-outer-s1 .col>.wd__feature__list .wd__feature .wd__feature__describe__top *, section #section__display-outer-s1 .wd__feature__list.main-featureList .wd__feature .wd__feature__describe, section #section__display-outer-s1 .wd__feature__list.main-featureList .wd__feature .wd__feature__describe *, section #section__display-outer-s1 .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top, section #section__display-outer-s1 .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top *, section section .col>.wd__feature__list .wd__feature .wd__feature__describe, section section .col>.wd__feature__list .wd__feature .wd__feature__describe *, section section .col>.wd__feature__list .wd__feature .wd__feature__describe__top, section section .col>.wd__feature__list .wd__feature .wd__feature__describe__top *, section section .wd__feature__list.main-featureList .wd__feature .wd__feature__describe, section section .wd__feature__list.main-featureList .wd__feature .wd__feature__describe *, section section .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top, section section .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top * { color: #595959 } section .modal-button-container .modal-button { background-color: #174d71; color: #fff; border-color: #174d71 } section .modal-button-container .modal-button:hover { background-color: #174d71; color: #fff; border-color: #174d71 } 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/image/icon_pause.svg) } #CMD .video_control-button.resume { background-image: url(../images/image/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: #727272; 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: 12px 20px; border-width: 2px } section .modal-button-container .modal-button, section .modal-button-container .modal-button * { font-size: 20px } section.theme-white { background-color: #fff !important } section.section__wdvideos { background-color: #f6f6f6 } section.section__wdvideos .item-salesvideo { background-color: #fff !important } .wdblockimg .block .modal-button-container .modal-button { border-color: transparent !important } .wdblockimg .block.theme-white .modal-button-container .modal-button { background: linear-gradient(to right, #d1c3ff, #d1c3ff) } .wdblockimg .block.theme-white .modal-button-container .modal-button span { background-image: linear-gradient(to right, #d1c3ff, #d1c3ff) } .wdblockimg .block.theme-white .modal-button-container .modal-button::before { background-color: #fff } .wdblockimg .block.theme-white .modal-button-container .modal-button:hover::before { background-color: #2a1766 } .wdblockimg .block.theme-black .modal-button-container .modal-button { background: linear-gradient(to right, #2a1766, #2a1766) } .wdblockimg .block.theme-black .modal-button-container .modal-button span { background-image: linear-gradient(to right, #2a1766, #2a1766) } .wdblockimg .block.theme-black .modal-button-container .modal-button::before { background-color: #000 } .wdblockimg .block.theme-black .modal-button-container .modal-button:hover::before { background-color: #d1c3ff } .wdblockimg .block.theme-white { color: #404040 } .wdblockimg .block.theme-white .ai__noise__container { --themecolor-main: 23, 77, 113; --themecolor-middle: 64, 64, 64; --themecolor-filter: 23, 77, 113 } .wdblockimg .block.theme-white .ai__noise__container .noise_desc { color: #666 } .wdblockimg .block.theme-white .ai__noise__container .img__noise .img__voice { --voice-start: #174d71; --voice-end: #318092; --voice-bgcolor: #E3DFD8 } .wdblockimg .block.theme-white .ai__noise__container .img__icon { --img-icon-base-color: black; --img-icon-bg-color: #fff } .wdblockimg .block.theme-black { color: #fff } .wdblockimg .block.theme-black .ai__noise__container { --themecolor-main: 154, 122, 89; --themecolor-middle: 109, 109, 109; --themecolor-filter: 223, 201, 169 } .wdblockimg .block.theme-black .ai__noise__container .noise_desc { color: #999 } .wdblockimg .block.theme-black .ai__noise__container .img__noise .img__voice { --voice-start: #dfc9a9; --voice-end: #9a7a59; --voice-bgcolor: #000 } .wdblockimg .block.theme-black .ai__noise__container .img__icon { --img-icon-base-color: #fff; --img-icon-bg-color: #000 } .section-media-top { display: block; position: relative; background-color: #f5f5f5 } .section__s8 .wd__play__btn .svg_button_play .svg-circle { fill: transparent; stroke: #000 } .section__s8 .wd__play__btn .svg_button_play .svg-line { fill: #000; stroke: #000 } .section__s8 .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #000 } .section__s8 .wd__play__btn .svg_button_replay path { fill: #000 } section .sentence { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(0deg, #f2ede8 0, #f4f2ef 50%, #efebe7 100%) } .section__pdc { z-index: 1; margin-bottom: -1px; background-color: #f6f6f6 } .section__pdc.section__pdc-bottom { background-color: #fff } .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: #174d71 } .section__pdc .splide__pagination li .splide__pagination__page.is-active::after { background-color: #174d71 !important } .section__pdc .product_awards .awards-container .awards-seeall { color: #174d71 } .section__pdc .product_awards .awards-container .awards-seeall { color: #174d71 } .section__pdc .product_videos .videos-container .videos-seeall { color: #174d71 } .section__pdc .product_videos .videos-container .videos-seeall { color: #174d71 } .section__pdc .product_medias .medias-container .medias-seeall { color: #174d71 } .section__pdc .product_medias .medias-container .medias-seeall { color: #174d71 } .section__pdc .arrow_link::before { background: #174d71 } .section__pdc .arrow_link::after { display: none } .section__pdc .seeall_arrow-svg { stroke: #174d71 !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: #f6f6f6 } .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: #f6f6f6 } .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: #f6f6f6 } @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: #f6f6f6 } } .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: -109px; 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__pdc.section__pdc-top .product_gallery.theme-white .gallery-container .part-1 .container-tools .tools .tool-magnifier { background-color: #fff } .section__pdc.section__pdc-top .product_gallery.theme-white .gallery-container .container-productcard { background-color: #fff } .section__kv { margin-top: 0; padding-top: 0; background-color: #f6f6f6 } .section__kv .col>.wd__content.main-content .content__slogan { margin-bottom: 0; color: #000 } .section__kv .col>.wd__content.main-content .content__title { margin-top: 0; color: #174d71; background-image: linear-gradient(117deg, #174d71 0, #25616f) } .section__kv .col>.wd__content.main-content .content__info { margin-top: 0; color: #000 } .section__kv .wd__play__btn { margin-left: 0 } .section__kv .wd__play__btn .svg_button_play .svg-circle { stroke: #000; fill: transparent } .section__kv .wd__play__btn .svg_button_play .svg-line { fill: #000; stroke: #000 } .section__kv .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #000 } .section__kv .item__video__group { position: relative } .section__kv .item__video_btn { position: absolute; z-index: 11; bottom: 0; width: 100% } .section__kv .item__video { position: relative; overflow: hidden; z-index: 9; margin-right: auto; margin-left: auto; width: 100%; height: 0 } .section__kv .item__video video { position: absolute; left: 0; width: 100%; height: 100% } .section__kv .kv__badge .badge__content .content-text { color: #333 } .section__kv.videoPlayEnd .item__video { opacity: 0; transition: opacity 1s linear 0s } @keyframes imgItemHandSprite { from { background-position: 0 0 } to { background-position: 0 100% } } .section__ksp { margin-top: 0; padding-top: 0; background-color: #f6f6f6 } #CMD.font-tt .wd__section .wdtile.wdtile-ksp .wdtile__item sup.sign-plus { top: -.6em; font-size: 16.8px } #CMD.font-tt .wd__section .wdtile.wdtile-ksp .wdtile__item .gradient-text-item sup { background: 0 0 !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item { background-color: #fff } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__content .wd__content .content__slogan { color: #181818 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__content .wd__content .content__title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #174d71 25%, #25616f 100%); color: #174d71 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__content .wd__content .content__title sup { color: inherit !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__content .wd__content .content__info { color: #525252 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__block--feature .item__content--title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #174d71 25%, #25616f 100%); color: #174d71 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__block--feature .item__content--title sup { color: inherit !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__block--feature .item__content--descBottom, .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__block--feature .item__content--descTop, .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__block--feature .item__leftdesc { color: #525252 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button { background-color: #eaeaea } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button:hover { background-color: #d4d3d3 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button::before { background-color: #727272 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .ksp_versatileModes_content .title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #174d71 25%, #25616f 100%); color: #174d71 } .section__ksp .wdtile.wdtile-ksp .wdtile__item .ksp_versatileModes_content .title sup { color: inherit !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item .ksp_versatileModes .item_title { color: #525252 } .section__ksp .item__image-Intuitivedesign_hand .img__item { background-image: url(../images/image/Intuitivedesign_hand_ksp.png) } .section__ksp .wdtile.wdtile-ksp .item__image-Intuitivedesign_hand .img__item { width: 140px; height: 4847px } .section__ksp .item__image-Intuitivedesign_pd .img__item { background-image: url(../images/image/Intuitivedesign_pd_ksp.png) } .section__ksp .wdtile.wdtile-ksp .item__image-Intuitivedesign_pd .img__item { width: 334px; height: 343px } .section__ksp .item__image-battery_bg .img__item { background-image: url(../images/image/battery_bg_ksp.jpg) } .section__ksp .wdtile.wdtile-ksp .item__image-battery_bg .img__item { width: 700px; height: 444px } .section__ksp .item__image-bg_shadow .img__item { background-image: url(../images/image/bg_shadow_ksp.jpg) } .section__ksp .wdtile.wdtile-ksp .item__image-bg_shadow .img__item { width: 1654px; height: 950px } .section__ksp .item__image-intelcore .img__item { background-image: url(../images/image/intelcore.png) } .section__ksp .wdtile.wdtile-ksp .item__image-intelcore .img__item { width: 157px; height: 157px } .section__ksp .item__image-intelevo .img__item { background-image: url(../images/image/intelevo.png) } .section__ksp .wdtile.wdtile-ksp .item__image-intelevo .img__item { width: 227px; height: 122px } .section__ksp .item__image-ioport_left .img__item { background-image: url(../images/image/ioport_left.png) } .section__ksp .wdtile.wdtile-ksp .item__image-ioport_left .img__item { width: 386px; height: 40px } .section__ksp .item__image-ioport_right .img__item { background-image: url(../images/image/ioport_right.png) } .section__ksp .wdtile.wdtile-ksp .item__image-ioport_right .img__item { width: 386px; height: 40px } .section__ksp .item__image-pen .img__item { background-image: url(../images/image/pen.png) } .section__ksp .wdtile.wdtile-ksp .item__image-pen .img__item { width: 98px; height: 90px } .section__ksp .item__image-productmain .img__item { background-image: url(../images/image/productmain.png) } .section__ksp .wdtile.wdtile-ksp .item__image-productmain .img__item { width: 440px; height: 360px } .section__ksp .item__image-productmain_bg .img__item { background-image: url(../images/image/productmain_bg.jpg) } .section__ksp .wdtile.wdtile-ksp .item__image-productmain_bg .img__item { width: 1145px; height: 500px } .section__ksp .item__image-productmain_mask .img__item { background-image: url(../images/image/productmain_mask.png) } .section__ksp .wdtile.wdtile-ksp .item__image-productmain_mask .img__item { width: 440px; height: 360px } /* .section__ksp .item__image-vmodes_1 .img__item { background-image: url(../images/image/vmodes_1.jpg) } */ .section__ksp .wdtile.wdtile-ksp .item__image-vmodes_1 .img__item { width: 210px; height: 170px } /* .section__ksp .item__image-vmodes_2 .img__item { background-image: url(../images/image/vmodes_2.jpg) } */ .section__ksp .wdtile.wdtile-ksp .item__image-vmodes_2 .img__item { width: 210px; height: 170px } /* .section__ksp .item__image-vmodes_3 .img__item { background-image: url(../images/image/vmodes_3.jpg) } */ .section__ksp .wdtile.wdtile-ksp .item__image-vmodes_3 .img__item { width: 210px; height: 170px } /* .section__ksp .item__image-vmodes_4 .img__item { background-image: url(../images/image/vmodes_4.jpg) } */ .section__ksp .wdtile.wdtile-ksp .item__image-vmodes_4 .img__item { width: 210px; height: 170px } /* .section__ksp .item__image-vmodes_5 .img__item { background-image: url(../images/image/vmodes_5.jpg) } */ .section__ksp .wdtile.wdtile-ksp .item__image-vmodes_5 .img__item { width: 210px; height: 170px } .section__ksp .wdtile.wdtile-ksp .item__block { padding: 44px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .img__bg { position: absolute; top: unset; right: 0; bottom: 0; width: 106%; height: 500px; background-size: 105% 100% } .section__ksp .wdtile__item-0 .img__bg { background-image: url(../images/image/productmain_bg.jpg) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title { background-image: linear-gradient(90deg, #fff 25%, #fff 100%); color: #fff } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .video__container { position: absolute; z-index: 9; left: 50%; margin-left: -205px; width: 440px; height: 360px; mask: url(../images/image/productmain_mask_ksp.png); -webkit-mask-position: center; mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/image/productmain_mask_ksp.png); -webkit-mask-size: contain } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .img__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(133deg, #5f98ab 25%, #2f5e6f 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__content .wd__content .content__title { background-image: linear-gradient(90deg, #fff 25%, #fff 100%); color: #fff } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .img__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #e5dccf } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .img__bg { position: absolute; top: unset; bottom: 0; left: 0; width: 1654px; height: 950px } /*.section__ksp .wdtile__item-3 .img__bg { background-image: url(../images/image/bg_shadow.jpg) }*/ .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .img__item-hand { position: absolute; top: unset; bottom: 60px; left: 50%; margin-left: -140px; padding-bottom: 0; width: 280px; height: 154px; background-position: 0 0; background-repeat: no-repeat; background-size: 100%; transform: scale(.6); transform-origin: center } .section__ksp .wdtile__item .img__item-hand { background-image: url(../images/image/Intuitivedesign_hand_ksp.png) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__image-Intuitivedesign_pd .img__item { transition: all .25s ease 0s } /*.section__ksp .item__image-Intuitivedesign_pd .img__item { background-image: url(../images/image/Intuitivedesign_pd_0.png) }*/ .section__ksp .wdtile.wdtile-ksp .wdtile__item-3.aniPlay .img__item-hand { animation: imgItemHandSprite 2s steps(43) .5s; animation-iteration-count: 1; animation-fill-mode: forwards } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3.aniPlay .item__image-Intuitivedesign_pd .img__item { transition: all .75s ease 2s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3.aniPlay .item__image-Intuitivedesign_pd .img__item { background-image: url(../images/image/Intuitivedesign_pd.png) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block { padding-top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block .item__image { height: 250px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block .img__item { z-index: 9; width: 98px; height: 90px; transform: translate(0, 0) } /*.section__ksp .wdtile__item-4 .img__item { background-image: url(../images/image/pen.png) }*/ .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block .video__container { position: absolute; top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 { color: #fcf8f3; background-color: #fcf8f3; background-image: linear-gradient(135deg, #fcf8f3 0, #e0d6c7 45%, #b5a895 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image { display: none } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__block--feature .item__content--descBottom, .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__block--feature .item__content--descBottom span { line-height: 1.2 !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6 { color: #fff; background-color: #bac3cc; background-image: linear-gradient(180deg, #bac3cc 0, #374f67 100%); background-size: 110% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6 .item__block--feature .item__content--title { color: #fff } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7 { color: #fff; background-color: #fdfcfb; background-image: linear-gradient(135deg, #fdfcfb 0, #dddddc 45%, #b1afaa 100%); background-size: 110% } .section__ksp .wdtile.wdtile-ksp .item__image-ioport .img__item { position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -193px; width: 386px; height: 370px; transform: unset } .section__ksp .wdtile.wdtile-ksp .item__image-ioport .img__item-left { margin-top: -332px; margin-left: -396px } .section__ksp .item__image-ioport .img__item-left { background-image: url(../images/image/ioport_left.png) } .section__ksp .wdtile.wdtile-ksp .item__image-ioport .img__item-right { margin-top: -332px; margin-left: 9px } .section__ksp .item__image-ioport .img__item-right { background-image: url(../images/image/ioport_right.png) } .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-up .gradient-text-item span, .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-color: #fff; background-image: linear-gradient(0deg, transparent 30%, #aaa 60%), linear-gradient(0deg, #fff 0, #fff 50%) } .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-down .gradient-text-item span, .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-] { background-color: #fff; background-image: linear-gradient(180deg, transparent 50%, #aaa 60%), linear-gradient(0deg, #fff 50%, #fff 100%) } .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-left .gradient-text-item span, .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-] { background-color: #fff; background-image: linear-gradient(270deg, transparent 50%, #aaa 60%), linear-gradient(180deg, #fff 0, #fff) } .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-right .gradient-text-item span, .gradientTextPlay-theme-kspWhite.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-color: #fff; background-image: linear-gradient(90deg, transparent 50%, #aaa 60%), linear-gradient(180deg, #fff 0, #fff) } .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-up .gradient-text-item span, .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-up .gradient-text-item span sup[class*=sign-] { background-color: #174d71; background-image: linear-gradient(0deg, transparent 30%, #aaa 60%), linear-gradient(0deg, #25616f 0, #174d71 50%) } .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-down .gradient-text-item span, .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-down .gradient-text-item span sup[class*=sign-] { background-color: #174d71; background-image: linear-gradient(180deg, transparent 50%, #aaa 60%), linear-gradient(0deg, #25616f 50%, #174d71 100%) } .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-left .gradient-text-item span, .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-left .gradient-text-item span sup[class*=sign-] { background-color: #174d71; background-image: linear-gradient(270deg, transparent 50%, #aaa 60%), linear-gradient(180deg, #174d71 0, #25616f) } .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-right .gradient-text-item span, .gradientTextPlay-theme-kspDark.gradientTextPlay-dir-right .gradient-text-item span sup[class*=sign-] { background-color: #174d71; background-image: linear-gradient(90deg, transparent 50%, #aaa 60%), linear-gradient(180deg, #174d71 0, #25616f) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .img__bg { /* transform: translate(5%, 0); */ transition: transform 3s ease-in-out; transform-origin: center } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .img__bg { transform: translate(0, 0) } .section__ksp .ksp_versatileModes .ksp_versatileModes_item { /* opacity: 0; */ transition: opacity .3s ease-out } .section__ksp .ksp_versatileModes .ksp_versatileModes_item .img__item { transform: translate(20px, -20px); transition: transform .75s ease-out; transform-origin: center } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-1 { transition-delay: 250ms } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-1 .img__item { transition-delay: 280ms } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-2 { transition-delay: .5s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-2 .img__item { transition-delay: 560ms } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-3 { transition-delay: 750ms } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-3 .img__item { transition-delay: 840ms } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-4 { transition-delay: 1s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-4 .img__item { transition-delay: 1.12s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-5 { transition-delay: 1.25s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-5 .img__item { transition-delay: 1.4s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-6 { transition-delay: 1.5s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-6 .img__item { transition-delay: 1.68s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-7 { transition-delay: 1.75s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-7 .img__item { transition-delay: 1.96s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-8 { transition-delay: 2s } .section__ksp .ksp_versatileModes .ksp_versatileModes_item-8 .img__item { transition-delay: 2.24s } .section__ksp .wdtile__item-2.aniPlay .ksp_versatileModes .ksp_versatileModes_item { opacity: 1 } .section__ksp .wdtile__item-2.aniPlay .ksp_versatileModes .ksp_versatileModes_item .img__item { transform: translate(0, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__block.gradientTextPlay-init { --gradient-duration: 1.5s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block.gradientTextPlay-init { --gradient-duration: 1.5s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5, .section__ksp .wdtile.wdtile-ksp .wdtile__item-7 { background-size: 600%; transition: background-size 1s ease-in-out } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5.aniPlay, .section__ksp .wdtile.wdtile-ksp .wdtile__item-7.aniPlay { background-size: 100%; transition-delay: .5s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6 { background-position: bottom; background-size: 100% 600%; transition: background-size 1s ease-in-out } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6 .item__image { transform-origin: center -110px; transform: scale(1.3) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6 .item__content--title { opacity: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6.aniPlay { background-size: 100% 110%; transition-delay: .5s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6.aniPlay .item__image { transform: scale(1); transition: transform 1s 0s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-6.aniPlay .item__content--title { opacity: 1; transition: opacity .5s 1s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7 { background-position: bottom; background-size: 100% 600%; transition: background-size 1s ease-in-out } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7 .item__image { transform-origin: center -110px; transform: scale(1.3) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7 .item__content--title { opacity: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7.aniPlay { background-size: 100% 110%; transition-delay: .5s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7.aniPlay .item__image { transform: scale(1); transition: transform 1s 0s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-7.aniPlay .item__content--title { opacity: 1; transition: opacity .5s 1s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__image { transform-origin: center center; transform: scale(1.3) } /* .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__content { opacity: 0 } */ .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__image-ioport .img__item { /* opacity: 0; */ transition: all .5s ease-out; transform-origin: center; transition-delay: 160ms } /* .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__image-ioport .img__item-left { transform: translate(-10px, 205px) scale(1) } */ /* .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__image-ioport .img__item-right { transform: translate(10px, 205px) scale(1) } */ .section__ksp .wdtile.wdtile-ksp .wdtile__item-9.aniPlay .item__content { opacity: 1; transition: opacity .5s ease-out .6s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9.aniPlay .item__image-ioport .img__item { transition: transform 1s 0s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9.aniPlay .item__image-ioport .img__item-left { opacity: 1; transform: translate(0, 0) scale(1) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9.aniPlay .item__image-ioport .img__item-right { opacity: 1; transform: translate(0, 0) scale(1) } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button { background-color: rgba(190, 190, 190, .5) !important } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item .item__jumpto-button::before { background-color: #fff; transition: transform .5s } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-2 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-2 .item__jumpto-button::before, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-3 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-3 .item__jumpto-button::before, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-4 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-4 .item__jumpto-button::before, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-7 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-7 .item__jumpto-button::before, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-8 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-8 .item__jumpto-button::before, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-9 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-9 .item__jumpto-button::before, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-99 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item-99 .item__jumpto-button::before { background-color: #686564 } .section__s3 { margin-top: 0; padding-top: 0; background-color: #ded9d3 } .section__s3 .sentence__point { position: relative; transform-origin: center; z-index: 21 } .section__s3 .sentence { position: absolute; top: 0; left: 50%; color: #f5efe9; font-size: 120px; transform: rotate(270deg); transform-origin: center } .section__s3 .content__container { z-index: 9 } .section__s3 .image__container { position: relative; z-index: 3; top: 0; left: 0; width: 100% } .section__s3 .image__container .img__left-outer, .section__s3 .image__container .img__right-outer { position: relative; overflow: hidden; left: 50%; margin-top: 0; margin-bottom: 0; border-radius: 20px; background-position: center } .section__s3 .img__left { background: linear-gradient(45deg, #b0a06a, transparent) } .section__s3 .img__right { background: linear-gradient(45deg, #afb06a, transparent) } .section__s4 { margin-top: 0; padding-top: 0; background-color: #ded9d3 } .section__s4 .card__content { opacity: 0; transition: opacity .3s } .section__s4 .card__content.js-show { z-index: 10; opacity: 1; transition: opacity .3s } .section__s4 .sentence { position: relative; top: 0; width: 100%; font-size: 120px; text-align: center; background-image: linear-gradient(90deg, #f2ede8 0, #f4f2ef 50%, #efebe7 100%) } .section__s4 .img__main { left: 50%; margin-left: -.5px; width: 1px; height: 1px } /* #CMD .section__s4 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/c4d8304d-d116-452b-be3d-0471d5260a27/v1/features/images/large/1x/ss4_main.jpg) } */ .section__s4 .card__container .card__sentence { color: #938f97 } .section__s4 .card__container .wd__content .content__title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #174d71, #25616f 90%) } .section__s4 .card__container .video__container { background-color: #ded9d3 } .section__s4 .card__container .video__container video { background-color: #fff } .section__s4 .wd__play__btn { display: none } .section__s4 .wd__play__btn .svg_button_play .svg-circle { stroke: #000; fill: transparent } .section__s4 .wd__play__btn .svg_button_play .svg-line { fill: #000; stroke: #000 } .section__s4 .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #000 } .section__s5 { z-index: 9; margin-top: 0; padding-top: 0; background-color: #ded9d3 } .section__s5 .sentence__point { position: absolute; z-index: 1; width: 0; height: 0; transform-origin: center } .section__s5 .sentence { position: absolute; top: 0; width: 100%; color: #f5efe9; font-size: 160px; transform-origin: center; text-align: center } .section__s5 .fold__container { display: flex; position: relative; align-items: flex-start; margin-right: auto; margin-left: auto; padding-top: 0; padding-bottom: 0; width: 100%; flex-direction: row } .section__s5 .fold__container .plus.icon { position: absolute; z-index: 9; top: 50%; right: 16px; margin-top: 0; margin-left: 0; color: #a8a39e; transform: translateY(-50%); transition: all .3s ease-in 0s } .section__s5 .fold__container .plus.icon::after, .section__s5 .fold__container .plus.icon::before { position: absolute; opacity: 1; width: 16px; height: 2px; background-color: currentColor; transition: all .3s ease-in 0s; transform-origin: center; content: "" } .section__s5 .fold__container .plus.icon::after { -webkit-transform: rotate(90deg); transform: rotate(90deg) } .section__s5 .video__container { position: relative; opacity: 0; width: 100%; height: 100%; background: #ded9d3; transition: opacity 1s ease-in .1s } .section__s5 .wd__play__btn { right: 18px; bottom: 18px; left: unset; margin-left: 0 } .section__s5 .fold__show__video { overflow: hidden; border-radius: 20px } .section__s5 .fold__show__video .video__container { opacity: 1 } .section__s5 .fold__items { display: flex; position: relative; left: 0; justify-content: flex-start; padding-top: 0; padding-left: 0; flex-basis: min-content; flex-grow: 1; flex-direction: column } .section__s5 .fold__item { position: relative } .section__s5 .fold__item .wd__content .content__title { display: block; padding: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #5d5853, #5d5853 90%) } .section__s5 .fold__item .wd__content .content__info { overflow: hidden; opacity: 0; margin-top: 0; padding-top: 0; max-height: 0 } .section__s5 .fold__item .wd__content .content__title.no-top-space { margin-top: 0 } .section__s5 .fold__item { cursor: pointer; padding-top: 0; padding-right: 0; padding-bottom: 0; border-bottom: 1px solid #a8a39e } .section__s5 .fold__item .hide { display: none } .section__s5 .fold__item.active .plus.icon { display: none; top: 29px; color: #365d73 } .section__s5 .fold__item.active .plus.icon::after { opacity: 0; transform: rotate(0) } .section__s5 .fold__item.active .content__title { background-image: linear-gradient(to right, #174d71, #25616f 90%) } .section__s5 .fold__item.active .content__info { opacity: 1; margin-top: 0; padding-top: 10px; max-height: 400px; transition: max-height 1.2s linear 0s, opacity 350ms ease-in-out 350ms } .section__s5 .fold__video { display: none } .section__s5 .wd__play__btn .svg_button_play .svg-circle { stroke: #fff; fill: transparent } .section__s5 .wd__play__btn .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__s5 .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #fff } .section__s6 { z-index: 1; margin-top: 0; padding-top: 0 } .section__s6 .animation__container .ani__text { height: 100vh } .section__s6 .animation__container .item__text { -webkit-background-clip: text; background-position: center; background-repeat: no-repeat; background-size: 100%; -webkit-text-fill-color: transparent; background-image: url(../images/image/textBg.jpg); transform-origin: center; line-height: 1 } .section__s6 .animation__container .ani__text__3d__container { perspective: 1000px; perspective-origin: 50% 50% } .section__s6 .animation__container .ani__text__3d__container .scroll__point { position: absolute; z-index: 999; top: 50%; left: 50%; margin-left: -1px; width: 2px; height: 2px } .section__s6 .animation__container .ani__text__transform { transform: rotateX(68deg) } .section__s6 .animation__container .ani__text__transform .item__text { transform: translateY(100px) } .section__s6 .item__img__group { position: relative; transform-origin: top center } .section__s6 .item__img__group .item__video { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100% } .section__s6 .item__img__group .item__img { position: relative; z-index: 1; width: 100%; height: 100% } .section__s7 { margin-top: 0; padding-top: 0 } .section__s7 .wd__feature__list .feature-8.feature-icon .wd__feature__describe { display: none } .section__s7 .wd__feature__list .feature-8.feature-icon .feature-icon-data { position: relative; width: 185px; height: 100px } .section__s7 .wd__feature__list .feature-8.feature-icon .img__icon { position: absolute; bottom: 0; left: 50%; margin-left: 0; width: 185px; height: 100px } /*.section__s7 .feature-icon .img__icon { background-image: url(../images/image/evo.png) }*/ .section__s7 .performance_chart .item__highline .highline_text { color: #184d71; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #184d71 25%, #317f92 100%) } .section__s7 .performance_chart .item__highline .img__highline_arrow { background-color: transparent; background-image: linear-gradient(0deg, #184d71 25%, #317f92 100%) } .section__s7 .performance_chart .item__content .bar__content { border-radius: 0 6px 6px 0 } .section__s7 .performance_chart .item__content .title { color: #fff } .section__s7 .performance_chart .item__content .bar__score__txt { color: #fff } .section__s7 .performance_chart .bar__content.main { background-image: linear-gradient(90deg, #184d71 25%, #317f92 100%) } .section__s7 .performance_chart .bar__content.main .bar__score__txt { color: #fff } .section__s7 .performance_chart .gray { background-image: linear-gradient(90deg, #707070 25%, #555 100%) } .section__s7 .performance_chart .gray .bar__score__txt { background-image: linear-gradient(90deg, #707070 25%, #555 100%) } .section__s7 .performance_chart .text_comment { color: #595959 } .section__s7 .performance_chart_container .main { background-image: linear-gradient(90deg, #184d71 0, #317f92 100%) } .section__s7 .performance_chart_container .item__content .title { color: #000 } .section__s7 .performance_chart_container .text_comment { color: #595959 } .section__s8 { margin-top: 0; padding-top: 0 } .section__s8 .animation__container { position: relative; left: 50%; transform: translateX(-50%) } .section__s8 .animation__container img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__s8 .text__container { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px } .section__s8 .text__container .text_item { position: absolute; top: 50%; left: 50%; line-height: 1.2 } .section__s8 .video__col { position: relative; left: 50%; margin-bottom: 0; border-radius: 20px } .section__s8 .video__container { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 20px; background-color: #ccc } .section__s8 .wd__play__btn { top: unset; right: 0; bottom: calc(100% + 18px); left: unset; margin-left: 0 } .section__s8 .scroll__container { display: block; position: relative; top: 0; left: 0 } .section__s8.aniInit .img__line, .section__s8.aniInit .text__container { opacity: 0 } .section__s8.aniInit img { background-size: contain } .section__discover { background-color: #e0ddd4 } .section__discover .discovery__container { position: relative; margin: 26px auto 40px; width: 100%; max-width: 1166px } .section__discover .discovery__container .item__content-dynamic-height { padding: 0 32px; background-color: #48494b } .section__discover .discovery__container .discovery__item { position: relative; overflow: hidden; margin: 0 12px; width: 364px; border-radius: 20px } .section__discover .discovery__container .discovery__item .item__img { position: relative; width: 364px; height: 216px } .section__discover .discovery__container .discovery__item .item__img .img__item { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__discover .discovery__container .item__content .wd__content { padding: 37px 0 } .section__discover .discovery__container .item__content .wd__content .content__slogan { color: #fff; font-size: 20px } .section__discover .discovery__container .item__content .wd__content .content__title { margin-top: 10px; color: #fff; background-image: linear-gradient(to right, #fff, #fff); font-size: 26px } .section__discover .discovery__container .item__content .wd__content .content__info { margin-top: 0; color: #fff; font-size: 20px } .section__discover .discovery__container .item__content .wd__content .content__link { margin-top: 16px; font-size: 20px } .section__discover .discovery__container .item__content .wd__content .content__title, .section__discover .discovery__container .item__content .wd__content .content__title * { line-height: 1.3 } .section__discover .discovery__container .item__content .wd__content .content__link span { color: #fff } .section__discover .discovery__container .item__content .wd__content .content__link::after { color: #fff } .section__discover .discovery__container .item__content .wd__content .content__link:hover { color: #ccbb9c } .section__discover .discovery__container .item__content .wd__content .content__link:hover::after { color: #ccbb9c } .section__discover .discovery__container .item__content .wd__content .content__link:hover span { color: #ccbb9c; border-color: #ccbb9c } .section__discover .slick-next, .section__discover .slick-prev { margin-top: -5px; width: 50px; height: 50px; border-radius: 50%; background-color: rgba(53, 54, 56, .8) } .section__discover .slick-next.slick-disabled, .section__discover .slick-prev.slick-disabled { display: none !important } .section__discover .slick-next::before, .section__discover .slick-prev::before { top: 11px; width: 14px; height: 28px; background-repeat: no-repeat; background-size: contain; content: ""; background-image: url(../images/image/arrow_ksp.png) } .section__discover .slick-prev { left: -24px } .section__discover .slick-prev::before { right: 20px; transform: rotate(180deg) } .section__discover .slick-next { right: -24px } .section__discover .slick-dots { position: relative; bottom: -30px } .section__discover .slick-dots li { width: 45px; height: 20px } .section__discover .slick-dots li button { position: absolute; padding: 0; width: 45px; height: 20px } .section__discover .slick-dots li button::before { top: 9px; left: 0; width: 45px; height: 4px; border-radius: 10px; background: linear-gradient(to right, #181818, #181818); content: "" } .section__discover .slick-dots li.slick-active button::before { background: linear-gradient(to right, #174d71, #174d71) } .section__discover .item-0 .item__img .img__item { background-image: url(../images/image/item_0.jpg) } .section__discover .item-1 .item__img .img__item { background-image: url(../images/image/item_1.jpg) } .section__discover .item-2 .item__img .img__item { background-image: url(../images/image/item_2.jpg) } .section__discover .item-3 .item__img .img__item { background-image: url(../images/image/item_3.jpg) } .section__discover .item-4 .item__img .img__item { background-image: url(../images/image/item_4.jpg) } /* .section__discover .item-5 .item__img .img__item { background-image: url(../images/image/item_5.jpg) } */ .section__comment { width: 100%; background-color: #f5f5f5 } .section__comment .footnote-item, .section__comment .footnote-item * { color: #666 } .antmateText { color: #000; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-image: linear-gradient(124deg, #6f848e 30%, #17242c 50%, #999784 70%, #4e5358 80%) } .section__battery { background: #e3ded7 } .section__battery .opening { position: relative; left: 50%; margin-left: -640px; width: 1280px; height: 330px; border: 1px solid transparent; transform-origin: center center } .section__battery .opening .battery_type { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__battery .opening .battery_type .title { margin-bottom: 0 !important; color: #181818; font-size: 200px; line-height: 1 } .section__battery .opening .battery_type .info { margin-bottom: 0 !important; color: #181818; font-size: 50px; letter-spacing: 3px } .section__battery .opening .battery_type__1 svg, .section__battery .opening .battery_type__2 svg { top: 50%; left: 50%; width: 1200px; height: 400px; transform: translate(-50%, -50%) } .section__battery .opening .battery_type__1 .svg-inverted-mask, .section__battery .opening .battery_type__2 .svg-inverted-mask { position: absolute } .section__battery .opening .battery_type__1 .mask__shape, .section__battery .opening .battery_type__2 .mask__shape { fill: #fff } .section__battery .opening .battery_type__1 .box-with-text, .section__battery .opening .battery_type__2 .box-with-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .section__battery .opening .battery_type__1 .text-fill, .section__battery .opening .battery_type__2 .text-fill { position: absolute; overflow: hidden; top: 50%; left: 50%; margin: auto; width: 1200px; height: 399px; transform: translate(-50%, -50%) } .section__battery .opening .battery_type__1 .shape--fill, .section__battery .opening .battery_type__2 .shape--fill { fill: #e3ded7 } .section__battery .opening .battery_type__1 .text--transparent, .section__battery .opening .battery_type__2 .text--transparent { fill: transparent } .section__battery .opening .battery_type__1 .outter, .section__battery .opening .battery_type__2 .outter { display: flex; position: absolute; top: 0; left: calc(50% - 600px); width: 1200px; height: 100%; gap: 5px } .section__battery .opening .battery_type__1 .fill-bar, .section__battery .opening .battery_type__2 .fill-bar { --fill-bar-step: 40; position: relative; left: -1200px; opacity: 1; width: 1200px; height: 98%; background-repeat: repeat; background-size: 30px; background-image: linear-gradient(to right, #1fd71f 0, #1fd71f 90%, #e3ded8 90.1%, #e3ded8 100%) } .section__battery .opening .battery_type__2 { z-index: 3; top: 0; opacity: 0 } .section__battery .opening .battery_type__2 .fill-bar { position: relative; left: 0; opacity: 1; width: 1200px; height: 98%; background-repeat: repeat; background-size: contain; background-image: linear-gradient(124deg, #6f848e 30%, #17242c 50%, #999784 70%, #4e5358 80%) } .section__battery .main-content { position: relative; opacity: 1; margin: 0 auto; border: 1px solid transparent } .section__battery .main-content .img__icon1 { width: 145px !important; height: 73px !important; background-size: contain } /* #CMD .section__battery .img__icon1 { background-image: url(../images/image/icon75w.png) } */ .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__describe, .section__battery .wd__feature__list.sub-featureList .wd__feature .wd__feature__describe span { color: #595959 } .section__battery .wd__feature__list.sub-featureList .wd__feature-1 .wd__feature__describe, .section__battery .wd__feature__list.sub-featureList .wd__feature-1 .wd__feature__describe span { color: #67625b } .section__battery .sub-featureList-1 .img__icon1 { width: 82px; height: 80px; background-position: left; background-size: contain } /* #CMD .section__battery .sub-featureList-1 .img__icon1 { background-image: url(../images/image/iconSingleScreen.png) } */ .section__battery .sub-featureList-2 .img__icon1 { width: 82px; height: 80px; background-position: left; background-size: contain } /*#CMD .section__battery .sub-featureList-2 .img__icon1 { background-image: url(../images/image/iconDualScreen.png) }*/ .section__battery .sentence__point { position: absolute; z-index: 1; width: 0; height: 0; transform-origin: center } .section__battery .sentence__point .scroll__point { position: absolute; z-index: 1; width: 0; height: 0; transform-origin: center } .section__battery .sentence { position: absolute; top: 0; width: 100%; color: #f5efe9; font-size: 160px; transform-origin: center; text-align: center } .section__battery .img__1, .section__battery .img__2 { overflow: hidden; border-radius: 20px } .section__audio { z-index: 10 } .section__audio.theme-white .wd__content .content__slogan { color: #595959 !important } .section__audio .animation_container { position: relative; overflow: hidden; left: 0; margin-left: 0; width: 100%; height: 721px } .section__audio .animation_container .audio_wave { position: absolute; z-index: 3; top: 399px; left: 50%; margin-left: -821px; width: 1313px; height: 112px; mask: url(../images/image/pccover_mask.png); mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url(../images/image/pccover_mask.png); -webkit-mask-position: center } .section__audio .animation_container .audio_wave .wave_item { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; transform-origin: center } .section__audio .animation_container .audio_wave .wave_item .img { width: 100%; height: 100%; background-size: contain } .section__audio .animation_container .img__pc { position: absolute; z-index: 2; top: 269px; left: 50%; margin-left: -614px; width: 940px; height: 331px } #CMD .section__audio .img__pc { background-image: url(../images/image/pc.jpg) } #CMD .section__audio .img__pc { mask: url(../images/image/pc_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/image/pc_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__audio .audio_wave .img__wave { background-image: url(../images/image/ware1.png) } @keyframes audioWave { 0% { transform: scale(.3) } 100% { transform: scale(1) } } @keyframes audioWaveOpacity { 0% { opacity: 0 } 20% { opacity: 1 } 100% { opacity: 0 } } .section__audio .animation_container.js-active .audio_wave .wave_item__1 { animation: audioWave 3s infinite 0s linear, audioWaveOpacity 3s infinite 0s ease-in-out } .section__audio .animation_container.js-active .audio_wave .wave_item__2 { animation: audioWave 3s infinite 1s linear, audioWaveOpacity 3s infinite 1s ease-in-out } .section__audio .animation_container.js-active .audio_wave .wave_item__3 { animation: audioWave 3s infinite 2s linear, audioWaveOpacity 3s infinite 2s ease-in-out } .section__audio .wd__feature.hl1 .img__icon { width: 187px !important; height: 70px !important } /*#CMD .section__audio .wd__feature.hl1 .img__icon { background-image: url(../images/image/hl1.png) }*/ .section__audio .wd__feature.hl2 .img__icon { width: 256px !important; height: 47px !important } /*#CMD .section__audio .wd__feature.hl2 .img__icon { background-image: url(../images/image/hl2.png) }*/ .section__bigAudio { position: relative; z-index: 10 } .section__bigAudio .scroll__container { height: 100vh; min-height: 2000px } .section__bigAudio .text__container { position: relative; top: 0; left: calc(50% - 570px); width: 1140px } .section__bigAudio .text__container .cover_item { position: absolute; top: 210px; opacity: .5; width: 400px; height: 300px; background-color: #fff } .section__bigAudio .text__container .text__item { display: inline-block; position: relative; top: 0; margin-bottom: 0 !important; color: #37585e; font-size: 323px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.15 !important; background-image: linear-gradient(134deg, #0f3665, #427c97 90%); transform-origin: center } .section__bigAudio .text__container .ani__text__main { position: relative; z-index: 9; top: 0; left: 50%; transform: translateX(-50%); transform-origin: center } .section__bigAudio .text__container .text__item_main { position: relative; margin-left: 0; font-size: 240px; letter-spacing: 2px } .section__bigAudio .text__container .ani__text__bottom { --mask--position: -100%; display: flex; position: relative; z-index: 1; top: 0; justify-content: center; margin-top: -26px; width: 100%; flex-direction: row; mask: linear-gradient(to right, #011722 0, #011722 50%, transparent 50%, transparent 100%); mask-position: var(--mask--position); mask-size: 200%; -webkit-mask-image: linear-gradient(to right, #011722 0, #011722 50%, transparent 50%, transparent 100%); -webkit-mask-position: var(--mask--position); -webkit-mask-size: 200% } .section__bigAudio .text__container .text_bottom { position: relative; top: 0; left: 16px; color: #37585e; font-size: 105px; text-align: center; -webkit-background-clip: text; letter-spacing: 1px; -webkit-text-fill-color: transparent; background-image: linear-gradient(134deg, #0f3665, #427c97 90%) } .section__bigAudio .text__container .img__logo { position: relative; top: 3px; left: 26px; width: 253px; height: 108px } #CMD .section__bigAudio .img__logo { background-image: url(../images/image/logo.png) } .section__bigAudio .text__container .white_box { display: none; position: absolute; top: 0; left: 280px; width: 1000px; height: 110px; background-color: #fff } .section__connectivity .bg { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; content: ""; background-image: linear-gradient(0deg, #e3ded7 28%, #fff 100%) } .section__connectivity .wd__content .content__info { color: #595959 } .section__connectivity .text_container { position: absolute; left: 50%; border: 1px solid transparent } .section__connectivity .text_container .line { color: #000; -webkit-background-clip: text; background-color: #103b5d; background-position: 100% 45%; background-repeat: no-repeat; background-size: 119%; background-image: url(../images/image/textBg.jpg); -webkit-text-fill-color: transparent; letter-spacing: normal !important; line-height: 1 !important } .section__connectivity .text_container .line.all { background-position: -300% 45% } .section__connectivity .img_container { opacity: 0; border: 1px solid transparent } .section__connectivity .line_container { position: relative; left: 50%; border: 1px solid transparent } .section__connectivity .line_container .text_item { position: absolute; color: #181818 } .section__connectivity .line_container .text_item sup.sign-reg { top: -.4em !important; font-size: .8em !important } .section__performance { overflow: hidden; background-color: #dddbcf } .section__performance .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #25616f 90%) } .section__performance::before { content: ""; position: absolute; background-position: center top; background-repeat: no-repeat; background-size: 2560px auto; width: 2560px; height: 1211px; left: 50%; margin-left: -1280px; top: 0 } #CMD .section__performance.loadImg::before { background-image: url(../images/image/bg.jpg) } .section__performance .main-content { position: relative; z-index: 2 } .section__performance .wd__feature__list .wd__feature__data { background-image: linear-gradient(to right, #174d71, #25616f 90%) } .section__performance .wd__feature__list .wd__feature__data sup { color: #174d71 !important; background-image: linear-gradient(to right, #174d71, #25616f 90%); -webkit-background-clip: text } .section__performance .wd__feature__list .feature-1 .wd__feature__describe, .section__performance .wd__feature__list .feature-1 .wd__feature__describe__top { display: none } .section__performance .wd__feature__list .feature-3 .wd__feature__describe__top, .section__performance .wd__feature__list .feature-4 .wd__feature__describe__top { display: none } .section__performance .video_container { border: 1px solid transparent; position: absolute; left: 50%; top: 38px; width: 1300px; height: 1100px; margin-left: -420px } .section__performance .video_container .img__pc { width: 1300px; height: 1100px } #CMD .section__performance .img__pc { background-image: url(../images/image/pc_features.jpg) } #CMD .section__performance .img__pc { mask: url(../images/image/pc_mask_features.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/image/pc_mask_features.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__performance .video_container .img__pc__top { width: 1300px; height: 604px; position: absolute; left: 0; top: 0 } #CMD .section__performance .img__pc__top { background-image: url(../images/image/pc_top.png) } .section__performance .video_container .img__chip { width: 396px; height: 275px; position: absolute; left: 238px; top: 540px; transform: translate(50px, 50px); opacity: 0; z-index: 4 } #CMD .section__performance .img__chip { background-image: url(../images/image/chip.png) } .section__performance .video_container .img__evo { width: 185px; height: 100px; position: absolute; left: 800px; top: 930px } #CMD .section__performance .img__evo { background-image: url(../images/image/evo.png) } .section__performance .video_container .video_box { width: 750px; height: 421px; position: absolute; left: -300px; top: 0; transform: matrix3d(.05061, -.249531, 0, -.000383, -.348322, .779464, 0, -.000132, 0, 0, 1, 0, 938.506066, 235.168042, 0, 1); transform-origin: -114px -41px 0 } .section__performance .video_container .wd__play__btn { top: 800px; left: 50%; z-index: 5; margin-left: 250px } .section__performance .video_container .wd__play__btn .svg_button_play .svg-circle { stroke: #595959; fill: transparent } .section__performance .video_container .wd__play__btn .svg_button_play .svg-line { fill: #595959; stroke: #595959 } .section__performance .video_container .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #595959 } .section__performance.js-active .video_container .img__chip { transform: translate(0, 0); opacity: 1; transition: all .5s ease-in-out } .section__performance .performance_chart_container { position: relative } .section__performance .performance_chart_container .main { background-image: linear-gradient(90deg, #184d71 0, #317f92 100%) } .section__performance .performance_chart_container .item__content .title { color: #000 } .section__performance .performance_chart_container .text_comment { color: #595959 } .section__aiCopilot-outer-s1 { background-color: inherit } .section__aiCopilot-outer-s1.theme-black .wd__content .content__comment { color: #4f4f4f } .section__aiCopilot-outer-s1.theme-black .wd__content .content__comment a { color: #00a3e7 } .section__aiCopilot-outer-s1.theme-black .wd__content .content__comment a:hover { text-decoration: underline } .section__aiCopilot-outer-s1 .wd__block__dots { z-index: 100 } .section__aiCopilot-outer-s1 .slick-slide { height: auto } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text { color: #181818 } .section__aiCopilot-outer-s1 .slick-dots li button { color: #174d71 } .section__aiCopilot-outer-s1 .slick-dots li button.focus-visible, .section__aiCopilot-outer-s1 .slick-dots li button:focus, .section__aiCopilot-outer-s1 .slick-dots li button:focus-visible, .section__aiCopilot-outer-s1 .slick-dots li button:hover { color: #174d71 } .section__aiCopilot-outer-s1 .slick-dots li button::before { background-color: #fff } .section__aiCopilot-outer-s1 .slick-dots li button { color: #666 } .section__aiCopilot-outer-s1 .wd__play__btn { width: 36px; height: 36px } .section__aiCopilot-outer-s1 .wd__play__btn .svg_button_play .svg-circle { stroke: transparent; fill: transparent } .section__aiCopilot-outer-s1 .wd__play__btn .svg_button_play .svg-line { fill: #000; stroke: #000 } .section__aiCopilot-outer-s1 .wd__play__btn .svg_button_play .svg-triangle .triangle { fill: #000 } .aiCopilot-inner .wd__content .content__title { color: #fff; background-image: linear-gradient(to right, #fff, #fff 90%) } .aiCopilot-inner .wd__feature__list .wd__feature .wd__feature__data { -webkit-background-clip: unset; background-image: none; -webkit-text-fill-color: unset } .aiCopilot-inner .performance_chart_container .performance_chart .item__highline .highline_text { color: #fff } .aiCopilot-inner .performance_chart_container .performance_chart .item__highline .img__highline_arrow { background-color: #fff } .aiCopilot-inner .performance_chart_container .performance_chart .item__content .bar__score__txt { font-size: 16px } .aiCopilot-inner .performance_chart_container .performance_chart .bar__content.main { background-image: linear-gradient(90deg, #184d71 0, #317f92 100%) } .modal-inner__aiCopilot { background-color: #1d1e24 } .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 .wd__section.aiCopilot-inner .col>.wd__content .content__slogan, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__slogan, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__slogan, .inner-view .wd__section.battery-inner .col>.wd__content .content__slogan, .inner-view .wd__section.battery-inner .wd__content.main-content .content__slogan, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__slogan, .inner-view .wd__section.display-inner .col>.wd__content .content__slogan, .inner-view .wd__section.display-inner .wd__content.main-content .content__slogan, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__slogan { -webkit-text-fill-color: initial !important; background-image: none !important; color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__title, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__title, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__title, .inner-view .wd__section.battery-inner .col>.wd__content .content__title, .inner-view .wd__section.battery-inner .wd__content.main-content .content__title, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__title, .inner-view .wd__section.display-inner .col>.wd__content .content__title, .inner-view .wd__section.display-inner .wd__content.main-content .content__title, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__title { margin-top: 0; padding-top: 0; color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__title, .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__title *, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__title, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__title *, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__title, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__title *, .inner-view .wd__section.battery-inner .col>.wd__content .content__title, .inner-view .wd__section.battery-inner .col>.wd__content .content__title *, .inner-view .wd__section.battery-inner .wd__content.main-content .content__title, .inner-view .wd__section.battery-inner .wd__content.main-content .content__title *, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__title, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__title *, .inner-view .wd__section.display-inner .col>.wd__content .content__title, .inner-view .wd__section.display-inner .col>.wd__content .content__title *, .inner-view .wd__section.display-inner .wd__content.main-content .content__title, .inner-view .wd__section.display-inner .wd__content.main-content .content__title *, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__title, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__title * { -webkit-text-fill-color: initial !important; background-image: none !important } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__title sup.footnote-num, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__title sup.footnote-num, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__title sup.footnote-num, .inner-view .wd__section.battery-inner .col>.wd__content .content__title sup.footnote-num, .inner-view .wd__section.battery-inner .wd__content.main-content .content__title sup.footnote-num, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__title sup.footnote-num, .inner-view .wd__section.display-inner .col>.wd__content .content__title sup.footnote-num, .inner-view .wd__section.display-inner .wd__content.main-content .content__title sup.footnote-num, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__title sup.footnote-num { color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__info, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__info, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__info, .inner-view .wd__section.battery-inner .col>.wd__content .content__info, .inner-view .wd__section.battery-inner .wd__content.main-content .content__info, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__info, .inner-view .wd__section.display-inner .col>.wd__content .content__info, .inner-view .wd__section.display-inner .wd__content.main-content .content__info, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__info { margin-top: 4px; color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__info:first-child, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__info:first-child, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__info:first-child, .inner-view .wd__section.battery-inner .col>.wd__content .content__info:first-child, .inner-view .wd__section.battery-inner .wd__content.main-content .content__info:first-child, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__info:first-child, .inner-view .wd__section.display-inner .col>.wd__content .content__info:first-child, .inner-view .wd__section.display-inner .wd__content.main-content .content__info:first-child, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__info:first-child { margin-top: 0 } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__link, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__link, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__link, .inner-view .wd__section.battery-inner .col>.wd__content .content__link, .inner-view .wd__section.battery-inner .wd__content.main-content .content__link, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__link, .inner-view .wd__section.display-inner .col>.wd__content .content__link, .inner-view .wd__section.display-inner .wd__content.main-content .content__link, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__link { display: inline-block; color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__link *, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__link *, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__link *, .inner-view .wd__section.battery-inner .col>.wd__content .content__link *, .inner-view .wd__section.battery-inner .wd__content.main-content .content__link *, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__link *, .inner-view .wd__section.display-inner .col>.wd__content .content__link *, .inner-view .wd__section.display-inner .wd__content.main-content .content__link *, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__link * { color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__link::after, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__link::after, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__link::after, .inner-view .wd__section.battery-inner .col>.wd__content .content__link::after, .inner-view .wd__section.battery-inner .wd__content.main-content .content__link::after, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__link::after, .inner-view .wd__section.display-inner .col>.wd__content .content__link::after, .inner-view .wd__section.display-inner .wd__content.main-content .content__link::after, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__link::after { color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__link:link, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__link:link, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__link:link, .inner-view .wd__section.battery-inner .col>.wd__content .content__link:link, .inner-view .wd__section.battery-inner .wd__content.main-content .content__link:link, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__link:link, .inner-view .wd__section.display-inner .col>.wd__content .content__link:link, .inner-view .wd__section.display-inner .wd__content.main-content .content__link:link, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__link:link { color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__content .content__link:hover span, .inner-view .wd__section.aiCopilot-inner .wd__content.main-content .content__link:hover span, .inner-view .wd__section.aiCopilot-inner .wd__content.wd__content-horz .content__link:hover span, .inner-view .wd__section.battery-inner .col>.wd__content .content__link:hover span, .inner-view .wd__section.battery-inner .wd__content.main-content .content__link:hover span, .inner-view .wd__section.battery-inner .wd__content.wd__content-horz .content__link:hover span, .inner-view .wd__section.display-inner .col>.wd__content .content__link:hover span, .inner-view .wd__section.display-inner .wd__content.main-content .content__link:hover span, .inner-view .wd__section.display-inner .wd__content.wd__content-horz .content__link:hover span { border-bottom: 1px solid #fff } .inner-view .wd__section.aiCopilot-inner .wd__content.content-colorful-text .content__info, .inner-view .wd__section.battery-inner .wd__content.content-colorful-text .content__info, .inner-view .wd__section.display-inner .wd__content.content-colorful-text .content__info { color: #595959 } .inner-view .wd__section.aiCopilot-inner .wd__content.content-colorful-text .content__info .colorful-text, .inner-view .wd__section.battery-inner .wd__content.content-colorful-text .content__info .colorful-text, .inner-view .wd__section.display-inner .wd__content.content-colorful-text .content__info .colorful-text { color: #181818 } .inner-view .wd__section.aiCopilot-inner .col>.wd__feature__list .wd__feature .wd__feature__data, .inner-view .wd__section.aiCopilot-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__data, .inner-view .wd__section.battery-inner .col>.wd__feature__list .wd__feature .wd__feature__data, .inner-view .wd__section.battery-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__data, .inner-view .wd__section.display-inner .col>.wd__feature__list .wd__feature .wd__feature__data, .inner-view .wd__section.display-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__data { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #fff 25%, #fff 100%); color: #fff } .inner-view .wd__section.aiCopilot-inner .col>.wd__feature__list .wd__feature .wd__feature__describe, .inner-view .wd__section.aiCopilot-inner .col>.wd__feature__list .wd__feature .wd__feature__describe *, .inner-view .wd__section.aiCopilot-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top, .inner-view .wd__section.aiCopilot-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top *, .inner-view .wd__section.aiCopilot-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe, .inner-view .wd__section.aiCopilot-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe *, .inner-view .wd__section.aiCopilot-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top, .inner-view .wd__section.aiCopilot-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top *, .inner-view .wd__section.battery-inner .col>.wd__feature__list .wd__feature .wd__feature__describe, .inner-view .wd__section.battery-inner .col>.wd__feature__list .wd__feature .wd__feature__describe *, .inner-view .wd__section.battery-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top, .inner-view .wd__section.battery-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top *, .inner-view .wd__section.battery-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe, .inner-view .wd__section.battery-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe *, .inner-view .wd__section.battery-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top, .inner-view .wd__section.battery-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top *, .inner-view .wd__section.display-inner .col>.wd__feature__list .wd__feature .wd__feature__describe, .inner-view .wd__section.display-inner .col>.wd__feature__list .wd__feature .wd__feature__describe *, .inner-view .wd__section.display-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top, .inner-view .wd__section.display-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top *, .inner-view .wd__section.display-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe, .inner-view .wd__section.display-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe *, .inner-view .wd__section.display-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top, .inner-view .wd__section.display-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top * { color: #fff } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__slogan, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__slogan, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__slogan { -webkit-text-fill-color: initial !important; background-image: none !important; color: #181818 } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__title, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__title, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__title { margin-top: 0; padding-top: 0; color: #181818 } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__title, .inner-view .wd__section.userExperience-inner .col>.wd__content .content__title *, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__title, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__title *, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__title, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__title * { -webkit-text-fill-color: initial !important; background-image: none !important } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__title sup.footnote-num, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__title sup.footnote-num, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__title sup.footnote-num { color: #181818 } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__info, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__info, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__info { margin-top: 4px; color: #181818 } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__info:first-child, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__info:first-child, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__info:first-child { margin-top: 0 } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__link, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__link, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__link { display: inline-block; color: #fff } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__link *, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__link *, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__link * { color: #fff } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__link::after, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__link::after, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__link::after { color: #fff } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__link:link, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__link:link, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__link:link { color: #fff } .inner-view .wd__section.userExperience-inner .col>.wd__content .content__link:hover span, .inner-view .wd__section.userExperience-inner .wd__content.main-content .content__link:hover span, .inner-view .wd__section.userExperience-inner .wd__content.wd__content-horz .content__link:hover span { border-bottom: 1px solid #fff } .inner-view .wd__section.userExperience-inner .wd__content.content-colorful-text .content__info { color: #595959 } .inner-view .wd__section.userExperience-inner .wd__content.content-colorful-text .content__info .colorful-text { color: #181818 } .inner-view .wd__section.userExperience-inner .col>.wd__feature__list .wd__feature .wd__feature__data, .inner-view .wd__section.userExperience-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__data { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(90deg, #fff 25%, #fff 100%); color: #2e7186 } .inner-view .wd__section.userExperience-inner .col>.wd__feature__list .wd__feature .wd__feature__describe, .inner-view .wd__section.userExperience-inner .col>.wd__feature__list .wd__feature .wd__feature__describe *, .inner-view .wd__section.userExperience-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top, .inner-view .wd__section.userExperience-inner .col>.wd__feature__list .wd__feature .wd__feature__describe__top *, .inner-view .wd__section.userExperience-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe, .inner-view .wd__section.userExperience-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe *, .inner-view .wd__section.userExperience-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top, .inner-view .wd__section.userExperience-inner .wd__feature__list.main-featureList .wd__feature .wd__feature__describe__top * { color: #fff } .section__conference-outer-s1 { background-color: transparent } .section__conference-outer-s1 .wdblockimg .block.theme-white { background-color: #e3dfd8 } .section__conference-outer-s1 .wdblockimg .block.theme-white .block-content .content__title { background-image: linear-gradient(to right, #174d71 0, #296079 33%, #2e7186 66%, #318092 100%) } .section__conference-outer-s1 .wdblockimg .block.theme-white .block-content .content__title, .section__conference-outer-s1 .wdblockimg .block.theme-white .block-content .content__title * { color: #174d71 } .section__conference-outer-s1 .wdblockimg .block.theme-white .ai__noise__container .img__icon { --img-icon-bg-color: transparent } .section__conference-outer-s1 .wdblockimg .block.theme-white .modal-button-container .modal-button, .section__conference-outer-s1 .wdblockimg .block.theme-white .modal-button-container .modal-button * { color: #fff; background: linear-gradient(to right, #174d71, #174d71) !important } .conference-inner .wd__content .content__title { background-image: linear-gradient(to right, #181818, #181818 90%) !important } .section__conference-inner-s1 .wdtab__nav::before { background-color: #174d71 } .section__conference-inner-s1 .wdtab__nav-btn { color: #666 } .section__conference-inner-s1 .wdtab__nav-btn:focus-visible { color: #174d71 } .section__conference-inner-s1 .wdtab__nav-btn.active, .section__conference-inner-s1 .wdtab__nav-btn:hover { color: #174d71 } .section__conference-inner-s1 .wdtab__nav-btn.active::before, .section__conference-inner-s1 .wdtab__nav-btn:hover::before { background-color: #174d71 } .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: #174d71 } .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: #174d71 } .section__display-outer-s1 .wd__feature__list.list-icon .wd__feature.icon-dolbyvision .img__icon { filter: invert(1) } .section__display-outer-s1 { background-color: #fff } .section__display-outer-s1 .scroll__container { position: relative } .section__display-outer-s1 .scroll__container .scrolltrigger-end { position: absolute; bottom: 130px } .section__display-outer-s1 .animation__container { height: 100vh; min-height: 2000px } .section__display-outer-s1 .ani__text { position: relative; top: 0; margin-right: auto; margin-left: auto; width: 100%; height: 370px } .section__display-outer-s1 .ani__text .ani__text-1 { left: 50%; opacity: 1; width: 100%; font-size: 184px; text-align: center; -webkit-background-clip: text; background-position: 50% 100%; background-size: 2200px auto; will-change: auto; line-height: 1 !important; transform-origin: center; letter-spacing: normal !important; -webkit-text-fill-color: transparent } .section__display-outer-s1 .ani__text .ani__text-1.loadImg { background-image: url(../images/image/textBg2x_new.jpg) } .section__display-outer-s1 .img__main { position: absolute; left: 50%; background-size: contain } #CMD .section__display-outer-s1 .img__main { background-image: url(../images/image/pc_features_1.jpg) } #CMD .section__display-outer-s1 .img__main { mask: url(../images/image/pc_mask_features_1.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/image/pc_mask_features_1.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__display-outer-s1 .wdblockimg .block.block-9 { background-color: #47758d } .section__display-outer-s1 .wdblockimg .block.block-9 .modal-button-container .modal-button, .section__display-outer-s1 .wdblockimg .block.block-9 .modal-button-container .modal-button * { color: #385068; background: linear-gradient(to right, #e3e0d9, #e3e0d9) !important } .section__display-outer-s1 .wdblockimg .block.block-10 { background-color: #683d46 } .section__display-outer-s1 .wdblockimg .block.block-11 { background-color: #3d4469 } .section__display-outer-s1 .wdblockimg .block.block-2 { background-color: #ded2cc; background-image: linear-gradient(to bottom, #ded2cc 0, #ded2cc 100%) } .section__display-outer-s1 .wdblockimg .block.block-2 .block-content .content__title { background-image: linear-gradient(to right, #174d71 0, #296079 33%, #2e7186 66%, #318092 100%) } .section__display-outer-s1 .wdblockimg .block.block-2 .block-content .content__title, .section__display-outer-s1 .wdblockimg .block.block-2 .block-content .content__title * { color: #174d71 } .section__display-outer-s1 .wdblockimg .block.block-2 .modal-button-container .modal-button, .section__display-outer-s1 .wdblockimg .block.block-2 .modal-button-container .modal-button * { color: #fff; background: linear-gradient(to right, #174d71, #174d71) !important } .section__display-outer-s1 .wdblockimg .block.block.block-21 { background-color: #cfc9c3 } .section__display-outer-s1 .wdblockimg .block.block.block-21 .block-content .content__title { background-image: linear-gradient(to right, #174d71 0, #296079 33%, #2e7186 66%, #318092 100%) } .section__display-outer-s1 .wdblockimg .block.block.block-21 .block-content .content__title, .section__display-outer-s1 .wdblockimg .block.block.block-21 .block-content .content__title * { color: #174d71 } .section__display-outer-s1 .wdblockimg .block.block.block-21 .modal-button-container .modal-button, .section__display-outer-s1 .wdblockimg .block.block.block-21 .modal-button-container .modal-button * { color: #fff; background: linear-gradient(to right, #174d71, #174d71) !important } .section__display-outer-s1 .wdblockimg .block.block-4 { background-color: #c3bfc6 } .section__display-outer-s1 .wdblockimg .block.block-4 .block-content .content__title { background-image: linear-gradient(to right, #174d71 0, #296079 33%, #2e7186 66%, #318092 100%) } .section__display-outer-s1 .wdblockimg .block.block-4 .block-content .content__title, .section__display-outer-s1 .wdblockimg .block.block-4 .block-content .content__title * { color: #174d71 } .section__display-outer-s1 .wdblockimg .block.block-4 .modal-button-container .modal-button, .section__display-outer-s1 .wdblockimg .block.block-4 .modal-button-container .modal-button * { color: #fff; background: linear-gradient(to right, #174d71, #174d71) !important } .section__display-outer-s1 .wdblockimg .block.block-4 .wd__content .content__info { color: #424242 } .section__display-inner-s4 .wd__content .content__title sup { -webkit-text-fill-color: inherit !important; background-image: inherit !important } .display-inner .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff 90%) } .display-inner .wd__feature__list .wd__feature .wd__feature__data { background-image: linear-gradient(to right, #fff, #fff 90%) } .section__display-inner-s21 .wdtab { margin-top: 0 } .section__display-inner-s21 .wdtab .wdtab__nav { display: none } .section__display-inner-s21 .wdtab .wd__play__btn { display: none } .section__display-inner-s21 .wdtab .wdtab__nav-btn.active::before, .section__display-inner-s21 .wdtab .wdtab__nav-btn.focus-visible::before, .section__display-inner-s21 .wdtab .wdtab__nav-btn:focus::before { background-image: linear-gradient(to right, #67625b, #67625b 90%) } .section__environment-outer-s1 { background-color: #eeece7 } .section__environment-outer-s1 .wd__content .content__link span { color: #174d71 } .section__environment-outer-s1 .wd__content .content__link::after { color: #174d71 } #CMD.font-tt .section__environment-outer-s1 sup.footnote-num { top: -.1em !important } .section__environment-outer-s1 .icon-fsc { width: 90px; height: 132px } #CMD .section__environment-outer-s1 .wd__feature.icon-fsc .img__icon { background-image: url(../images/image/icon_fsc.png) } .section__military__grade { z-index: 100; background-color: #eeece7 } .section__military__grade.theme-white .wd__feature__list .wd__feature .wd__feature__describe span { color: #595959 !important } .section__military__grade .wd__feature.hl1 .img__icon { width: 85px !important; height: 80px !important } /*#CMD .section__military__grade .wd__feature.hl1 .img__icon { background-image: url(../images/image/hl1_militaryGrade.png) }*/ .section__military__grade .wd__feature.hl2 .img__icon { width: 85px !important; height: 80px !important } /*#CMD .section__military__grade .wd__feature.hl2 .img__icon { background-image: url(../images/image/hl2_militaryGrade.png) }*/ .section__military__grade .wd__feature.hl3 .img__icon { width: 85px !important; height: 80px !important } /*#CMD .section__military__grade .wd__feature.hl3 .img__icon { background-image: url(../images/image/hl3_militaryGrade.png) }*/ .section__military__grade .wd__feature.hl4 .img__icon { width: 85px !important; height: 80px !important } /*#CMD .section__military__grade .wd__feature.hl4 .img__icon { background-image: url(../images/image/hl4_militaryGrade.png) }*/ .section__military__grade .wd__feature.hl5 .img__icon { width: 85px !important; height: 80px !important } /*#CMD .section__military__grade .wd__feature.hl5 .img__icon { background-image: url(../images/image/hl5_militaryGrade.png) }*/ .section__security-outer-s1 { background-color: transparent } .section__security-outer-s1 .wdblockimg .block { background-color: #48494b !important } .section__security-outer-s1 .wd__content .content__slogan { color: #666 } .section__security-outer-s1 .wd__content .content__info { color: #181818 } .section__software-outer-s1 { background-color: #f4f4f4 } .section__software-outer-s1 .wd__content .content__slogan { color: #181818 } .section__software-outer-s1 .wd__content .content__info { color: #181818 } .section__software-outer-s1 .software-info { background: linear-gradient(to top, #e3dfd8 0, #e3dfd8 30%) padding-box } .section__software-outer-s1 .software-info .wd__content .content__title { background-image: linear-gradient(to right, #67625b, #67625b 90%) !important } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe * { color: #595959 !important } .section__userExperience-inner-s4 .wdblockimg .block .block-content .content__title, .section__userExperience-inner-s4 .wdblockimg .block .block-content .content__title * { -webkit-text-fill-color: initial !important; background-image: none !important; color: #fff } .section__userExperience-inner-s6 .wdblockimg .block .block-content .content__title, .section__userExperience-inner-s6 .wdblockimg .block .block-content .content__title * { -webkit-text-fill-color: initial !important; background-image: none !important; color: #fff } 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 } } .section__scrollPageVideo-frames { position: relative; overflow: hidden; z-index: 9; margin-top: 0; padding-top: 0 } .section__scrollPageVideo-frames .on-top { z-index: 9 } .section__scrollPageVideo-frames.guideLine [class*=item-productvideo]::before { display: block; position: absolute; z-index: 9999; top: 50%; width: 100%; height: 1px; background-color: red; transform: translateY(-50%); content: "" } .section__scrollPageVideo-frames.guideLine [class*=item-productvideo]::after { display: block; position: absolute; z-index: 9999; left: 50%; width: 1px; height: 100%; background-color: red; transform: translateX(-50%); content: "" } .section__scrollPageVideo-frames.guideLine .page__item::before { display: block; position: absolute; z-index: 9999; top: 50%; width: 100%; height: 1px; background-color: green; transform: translateY(-50%); content: "" } .section__scrollPageVideo-frames.guideLine .page__item::after { display: block; position: absolute; z-index: 9999; left: 50%; width: 1px; height: 100%; background-color: green; transform: translateX(-50%); content: "" } .section__scrollPageVideo-frames.guideLine .page__video__container::after, .section__scrollPageVideo-frames.guideLine .page__video__container::before { display: block; position: absolute; z-index: 1; top: 50%; left: 50%; margin-top: -1px; margin-left: -50vw; width: 100vw; height: 2px; background-color: #00fff7; content: ""; transform-origin: center } .section__scrollPageVideo-frames.guideLine .page__video__container::after { margin-left: -25px; width: 50px; transform: rotate(90deg) } .section__scrollPageVideo-frames .scroll__container { z-index: 1 } .section__scrollPageVideo-frames .page__video__container { position: relative; z-index: 9; width: 100%; height: 100vh } .section__scrollPageVideo-frames .page__video__container .item-productvideo { position: relative; width: 100%; height: 100% } .section__scrollPageVideo-frames .page__video__container .page__video { width: 100%; height: 100vh } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer { width: 100%; height: 100% } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer [class*=item-productvideo-] { opacity: 0 } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer .video__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer .video__mask::before { --border-width: 3px; display: block; position: absolute; position: relative; z-index: 3; top: 50%; left: 50%; width: calc(100% - var(--border-width)); height: calc(100% - var(--border-width)); border: var(--border-width) solid #fff; background: 0 0; transform: translateX(-50%) translateY(-50%); content: "" } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer .video__mask .video__mask-keyboard { position: absolute; right: 0; bottom: 0; opacity: 0; width: 100%; height: 260px; background: linear-gradient(to top, #fff 30%, #fff 37%, transparent 100%); transform: translate(0, 0) rotate(0) } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer .frameCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer .item-productvideo-2 { display: none } .section__scrollPageVideo-frames .page__video__container .video__scrollContainer .item-productvideo-2 .video__mask .video__mask-keyboard { display: none; position: absolute; right: 0; bottom: 0; width: 100%; height: 1130px; background: linear-gradient(to top, #fff 30%, #fff 37%, transparent 51%, transparent 60%); transform: translate(350px, 310px) rotate(0) } .section__scrollPageVideo-frames .page__items { position: absolute; z-index: 9; top: 0; width: 100%; height: 100vh } .section__scrollPageVideo-frames .page__item { position: absolute; top: 0; left: 0; margin-top: 0; margin-left: 0; width: 100%; height: 100%; transform-origin: center } .section__scrollPageVideo-frames .page__item .page__item__content { position: absolute; top: 50%; left: 0; margin-top: -10px; width: 100%; height: 20px } .section__scrollPageVideo-frames .page__item .wd__content__group { position: relative; top: 0; left: 0; margin: 0; padding: 0 } .section__scrollPageVideo-frames .page__item .wd__content { position: relative; top: 0; left: 0; margin: 0; padding: 0 } .section__scrollPageVideo-frames .page__item .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #25616f 90%); color: #174d71 } .section__scrollPageVideo-frames .page__item .wd__content .content__info { color: #181818 } .section__scrollPageVideo-frames .page__item .wd__feature__list .wd__feature__describe, .section__scrollPageVideo-frames .page__item .wd__feature__list .wd__feature__describe__top { color: #666 } .section__scrollPageVideo-frames .page__item-3 .wd__feature__list .wd__feature__data { position: relative } .section__scrollPageVideo-frames .page__item-3 .wd__feature__list .wd__feature__data .img__icon { width: 100%; height: 100% } .section__scrollPageVideo-frames .page__item-3 .wd__feature__list .wd__feature__data .img__icon { position: absolute; top: -10px; left: 50%; background-size: contain; transform: translateX(-50%); background-position-x: left } .section__scrollPageVideo-frames .item-productvideo-3 { left: 50%; margin-left: -322px; width: 644px; height: 494px; position: absolute } .section__scrollPageVideo-frames .img__light { position: absolute; z-index: 9; top: 50%; left: 50%; opacity: 0; margin-top: 162px; margin-left: -75px; width: 128px; height: 32px } .section__scrollPageVideo-frames .img__light { background-image: url(../images/image/light_1.png) } .section__scrollPageVideo-frames .img__end { position: relative; margin-top: 0; width: 100%; height: 100% } .section__scrollPageVideo-frames .img__end { background-image: url(../images/image/videoEnd.jpg) } .section__scrollPageVideo-frames .img__end { mask: url(../images/image/videoEnd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/image/videoEnd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__scrollPageVideo-frames .img__pen { position: relative; margin-top: 0; width: 100%; height: 100% } .section__scrollPageVideo-frames .img__pen { background-image: url(../images/image/pen_1.png) } /*.section__scrollPageVideo-frames .wd__feature__list .bluetooth .img__icon { background-image: url(../images/image/bluetooth.png) }*/ .section__scrollPageVideo-frames .page__item .wd__feature__list .feature-icon.bluetooth .wd__feature__data { min-height: 61px; min-width: 32px } /*.section__scrollPageVideo-frames .wd__feature__list .emoji .img__icon { background-image: url(../images/image/emoji.png) }*/ .section__scrollPageVideo-frames .page__item .wd__feature__list .feature-icon.emoji .wd__feature__data { min-height: 61px; min-width: 61px } /*.section__scrollPageVideo-frames .wd__feature__list .keyboard .img__icon { background-image: url(../images/image/keyboard.png) }*/ .section__scrollPageVideo-frames .page__item .wd__feature__list .feature-icon.keyboard .wd__feature__data { min-height: 61px; min-width: 90px } /*.section__scrollPageVideo-frames .wd__feature__list .touchpad .img__icon { background-image: url(../images/image/touchpad.png) }*/ .section__scrollPageVideo-frames .page__item .wd__feature__list .feature-icon.touchpad .wd__feature__data { min-height: 61px; min-width: 70px } .section__scrollPageVideo-frames .animation__container .ani__text { height: 50vh } .section__scrollPageVideo-frames .animation__container .ani__text__transform { position: relative } .section__scrollPageVideo-frames .animation__container .item__text { -webkit-background-clip: text; background-position: center; background-repeat: no-repeat; background-size: 100%; -webkit-text-fill-color: transparent; background-image: url(../images/image/bg_pageVideo.jpg); transform-origin: center; line-height: 1 } .section__scrollPageVideo-frames .animation__container .ani__text__3d__container .scroll__point { position: absolute; z-index: 999; top: 50%; left: 50%; margin-left: -1px; width: 2px; height: 2px }