body #CMD { font-size: 16px; /*line-height: 1;*/ } #CMD #section__bigAudio, #CMD #section__keyboard, #CMD .section__battery{ 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; } } #CMD .footnote-num{ font-size: 36px; } .text_info_fr { font-size: 13.92px; top: 594px; left: 299px; position: absolute; text-align: center; color: #666; background-image: linear-gradient(to right,#174d71,#318092 90%); clip-path: inset(1px); background-clip: text; -webkit-text-fill-color: transparent; } @media screen and (max-width: 730px){ .text_info_fr { font-size: 22.4px; } } @media (min-width: 1280px){ #CMD .main_image, #CMD .main_image_1{ max-width: 100%!important; } } #CMD .row { position: relative; margin-left: auto; margin-right: auto; display: block; } #CMD .row .col.l12 { width: 100%; margin-left: auto; left: auto; right: auto; } #CMD .row .col { float: left; box-sizing: border-box; padding: 0; margin: 0; } .inline__block { display: inline-block } #CMD.font-tt .sup__base, #CMD.font-tt sup { position: relative; top: -.5em; font-size: .7em; 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: 16px; 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: .7em; vertical-align: super } #CMD.font-tt .footnote-num.sup__base, #CMD.font-tt sup.footnote-num { top: auto; vertical-align: baseline; font-size: 16px; 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; 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: .7em; 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: 16px; 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: .6em } #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: 16px } #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: 16px; 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: inherit !important; vertical-align: inherit !important } #CMD.font-helvetica .sup__base, #CMD.font-helvetica sup { position: relative; top: -.5em; font-size: .7em; 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: 16px; 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: .7em; vertical-align: super } #CMD.font-helvetica .footnote-num.sup__base, #CMD.font-helvetica sup.footnote-num { top: auto; vertical-align: baseline; font-size: 16px; 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(../images_1/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 } .wd-outer-end { position: relative } body { background-attachment: scroll !important; -moz-osx-font-smoothing: grayscale; font-synthesis: none; -webkit-font-smoothing: antialiased } #CMD { -webkit-transition-duration: .7s; -khtml-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s; -webkit-transition-property: opacity; -khtml-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -khtml-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -moz-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -ms-transition-timing-function: cubic-bezier(.25, .46, .33, .98); -o-transition-timing-function: cubic-bezier(.25, .46, .33, .98); transition-timing-function: cubic-bezier(.25, .46, .33, .98); position: relative; overflow-x: hidden; margin-bottom: 0; width: 100%; text-align: center; -webkit-tap-highlight-color: transparent } #CMD * { box-sizing: border-box } section { position: relative; margin-right: auto; margin-left: auto; width: 100% } section .img { display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover } section .wd__feature .img__icon { background-size: contain } .section__pdc, .section__wdvideos, .wd__section { max-width: 2560px } .section__content { margin-right: auto; margin-left: auto; width: 100%; height: 100% } .progressive-image { background-image: none !important; mask: none !important; -webkit-mask-image: none !important } .section__pdc, .section__wdvideos { font-size: 0 } @media all and (min-width:1px) { .grace-show { -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; transition: opacity .8s linear } .grace-show.show { -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; transform: translate3d(0, 0, 0); will-change: opacity } .grace-show.animated { transform: none; transition: none } } .in.moving__element { will-change: transform, opacity } .wd__animation__easeout { -webkit-transition-duration: .5s, .5s; -khtml-transition-duration: .5s, .5s; -moz-transition-duration: .5s, .5s; -ms-transition-duration: .5s, .5s; -o-transition-duration: .5s, .5s; transition-duration: .5s, .5s; -webkit-transition-property: opacity, -webkit-transform; -khtml-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -webkit-transform; -ms-transition-property: opacity, -webkit-transform; -o-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; -webkit-transition-timing-function: cubic-bezier(0, 0, .58, 1); -khtml-transition-timing-function: cubic-bezier(0, 0, .58, 1); -moz-transition-timing-function: cubic-bezier(0, 0, .58, 1); -ms-transition-timing-function: cubic-bezier(0, 0, .58, 1); -o-transition-timing-function: cubic-bezier(0, 0, .58, 1); transition-timing-function: cubic-bezier(0, 0, .58, 1); -moz-transition-duration: .5s; -moz-transition-property: all } @keyframes ripple { 0% { opacity: 0 } 10% { opacity: 0 } 50% { opacity: 1 } 90% { opacity: 0 } 100% { opacity: 0 } } .text__animation>a, .text__animation>div, .text__animation>figure, .text__animation>h1, .text__animation>h2, .text__animation>h3, .text__animation>h4, .text__animation>img, .text__animation>span { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1) } .wd__content.text__animation>a, .wd__content.text__animation>div, .wd__content.text__animation>figure, .wd__content.text__animation>h1, .wd__content.text__animation>h2, .wd__content.text__animation>h3, .wd__content.text__animation>h4, .wd__content.text__animation>img, .wd__content.text__animation>span { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1) } .wd__content.text__animation.text-showed .content__comment, .wd__content.text__animation.text-showed .content__info, .wd__content.text__animation.text-showed .content__link, .wd__content.text__animation.text-showed .content__slogan, .wd__content.text__animation.text-showed .content__title, .wd__content.text__animation.text-showed .wd__feature__list { transform: none } .wd__content.wd__content-horz.text__animation { opacity: 0; transform: translateZ(0) translateY(30px); transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1) } .wd__content.wd__content-horz.text__animation>a, .wd__content.wd__content-horz.text__animation>div, .wd__content.wd__content-horz.text__animation>figure, .wd__content.wd__content-horz.text__animation>h1, .wd__content.wd__content-horz.text__animation>h2, .wd__content.wd__content-horz.text__animation>h3, .wd__content.wd__content-horz.text__animation>h4, .wd__content.wd__content-horz.text__animation>img, .wd__content.wd__content-horz.text__animation>span { opacity: 1; transform: unset; transition: unset } .outer-view { opacity: 1; transition: opacity 0 linear } .outer-view.is-hide { opacity: 0 } .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 } } #overview-top-nav .inner .nav>li.has-submenu>a { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFIGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDUtMjFUMTQ6MTk6MzgrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA1LTIxVDE0OjIyOjAyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA1LTIxVDE0OjIyOjAyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmU2ZmNmNTc0LWE0YWUtNDZkMC05MzUyLTZiMjViMjdlYmQyMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDplNmZjZjU3NC1hNGFlLTQ2ZDAtOTM1Mi02YjI1YjI3ZWJkMjMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplNmZjZjU3NC1hNGFlLTQ2ZDAtOTM1Mi02YjI1YjI3ZWJkMjMiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmU2ZmNmNTc0LWE0YWUtNDZkMC05MzUyLTZiMjViMjdlYmQyMyIgc3RFdnQ6d2hlbj0iMjAxOS0wNS0yMVQxNDoxOTozOCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+moGVIwAAAJVJREFUGJVtkCELAkEQRt95cF3kmpisZn+Zf8FusVttJi1mu2CziFgMolguCM8yh8t6AwvLvvcNO1OodNQAeAGfHPQ65ClwAXZA9UfV9EzUp7/aqGXqpPJQvYY4V49xX6lFHqjVUwjLpME53hZpoFQPAdbZF8bqLdisDfTVRt2rVTZTO9dD3aoUsdYRcAearh0DdbD3FwUC138WqUD3AAAAAElFTkSuQmCC) } #overview-top-nav.to-submenu .inner .features-menu .close-btn { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzYwLCAyMDIwLzAyLzEzLTAxOjA3OjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDYtMTdUMTQ6MzQ6MzQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTA2LTE3VDE0OjM0OjUzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTA2LTE3VDE0OjM0OjUzKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMwNWI5NTg0LTQyZjAtNDVlYy1iMjIxLWY4ODAxZjQxODcwNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozMDViOTU4NC00MmYwLTQ1ZWMtYjIyMS1mODgwMWY0MTg3MDQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozMDViOTU4NC00MmYwLTQ1ZWMtYjIyMS1mODgwMWY0MTg3MDQiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjMwNWI5NTg0LTQyZjAtNDVlYy1iMjIxLWY4ODAxZjQxODcwNCIgc3RFdnQ6d2hlbj0iMjAyMC0wNi0xN1QxNDozNDozNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Lv/Y4AAAAJJJREFUKJF1kcENhEAIRR9TgSVYgi1YCIlW5iYUoiXYwbZgCXthNkgYToT/PhAQM/sCM7Cr6ocizGwDDuBuwOT1w4URDDA3YAWeypTgB1jFhQU4w7S9N4iwqt4SumUTGQaQqBSmFwzQUrclTZi89o+40pZ27gYIJ5cBvHp+ZpNUcN+5ul4bwQCev/7UgKuCB6brB24YT+NnPIKZAAAAAElFTkSuQmCC) } @media (max-width:768px) and (min-width:720px) { #rog_black_style .page-title { background: #222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABWCAYAAAAjbNN8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF52lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA1LTExVDE1OjI5OjUyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphYmYzM2VmNi05ODYwLTQ2ZGItODU2NC1kMzU1ODE4Y2FkMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NThERTEwNzlFRTZCMTFFNjkzNkNFQjU4RTUwM0REQzkiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OERFMTA3OUVFNkIxMUU2OTM2Q0VCNThFNTAzRERDOSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4REUxMDc2RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4REUxMDc3RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5Ii8+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFiZjMzZWY2LTk4NjAtNDZkYi04NTY0LWQzNTU4MThjYWQxOCIgc3RFdnQ6d2hlbj0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzXgSYAAAJqSURBVHic7dzRbdNQGIbhN4gBvAEdwUzQdAPYIEwATEA2KJ2AjJANajYwG3gEbxAuTi5ycWpO8UnPl1/fI1WqHFv6pVc+SWPXm9PptAUGTNK71gPYMgcS50DiHEicA4lzIHEOJM6BxDmQOAcS50DiHEicA4lzIHEOJM6BxDmQuGiBtsCp4GffZrzXixioxP01h6jpfesBrughs+0R6N94jlUiBxoy2+bCYz8Bv4Cuzij/ZQQeoi1xtXylbRxIZ/rOgfKm1gOcjZGXuDW+A39ov8QNkQM9Z7b1hcfOwM9ag6wRLdB88fu2cD9p0QIdgA8snykT8PQGs1QRLdBMev8Iw5/ixDmQOAcS50DiHEicA4lzIHEOJC7aH6qQruX0C69PwJEb+bonWqAd6ULbv9wDX647Sh3Rlri7yvs1F+0MurTJbHum/MaSnrbXgyZgihxojT3wo/EMM/Ax2hJXi8JtWR2+J+FFv1sPQDqDDl7i8vakj+Jdwxkmgr8HnVYeP9YYYq1oS9xUeb/mop1BB9La3S/sM5GWr5uw8fPitEVb4sJxIHEOJM6BxDmQOAcS50DiHEhctG8SOtJ1nH5hn4n03w3j1aepIFqgHfCtYL8O+HzNQWqJFqi7+H3IvN6f9+kyr0mKFuhS7jkJpfckdKSzsas2zeuNwDFyoDUeSYFa83MSXnDXeoCz3oHynmh/5+lI8HsStpltXeGxR0Qu6kUOlHtOws2JtsQNhfsp3FZVJNoZNJC/5fdmRTuDwnEgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcX8BVn1OSUK1/rIAAAAASUVORK5CYII=) 96% center no-repeat; background-size: 48px } } @media (max-width:719px) { #overview-top-nav .page-title { background: #222 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABWCAYAAAAjbNN8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF52lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTA1LTExVDE1OjI5OjUyKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphYmYzM2VmNi05ODYwLTQ2ZGItODU2NC1kMzU1ODE4Y2FkMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NThERTEwNzlFRTZCMTFFNjkzNkNFQjU4RTUwM0REQzkiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1OERFMTA3OUVFNkIxMUU2OTM2Q0VCNThFNTAzRERDOSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4REUxMDc2RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4REUxMDc3RUU2QjExRTY5MzZDRUI1OEU1MDNEREM5Ii8+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFiZjMzZWY2LTk4NjAtNDZkYi04NTY0LWQzNTU4MThjYWQxOCIgc3RFdnQ6d2hlbj0iMjAxOC0wNS0xMVQxNTozMToxNCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkzXgSYAAAJqSURBVHic7dzRbdNQGIbhN4gBvAEdwUzQdAPYIEwATEA2KJ2AjJANajYwG3gEbxAuTi5ycWpO8UnPl1/fI1WqHFv6pVc+SWPXm9PptAUGTNK71gPYMgcS50DiHEicA4lzIHEOJM6BxDmQOAcS50DiHEicA4lzIHEOJM6BxDmQuGiBtsCp4GffZrzXixioxP01h6jpfesBrughs+0R6N94jlUiBxoy2+bCYz8Bv4Cuzij/ZQQeoi1xtXylbRxIZ/rOgfKm1gOcjZGXuDW+A39ov8QNkQM9Z7b1hcfOwM9ag6wRLdB88fu2cD9p0QIdgA8snykT8PQGs1QRLdBMev8Iw5/ixDmQOAcS50DiHEicA4lzIHEOJC7aH6qQruX0C69PwJEb+bonWqAd6ULbv9wDX647Sh3Rlri7yvs1F+0MurTJbHum/MaSnrbXgyZgihxojT3wo/EMM/Ax2hJXi8JtWR2+J+FFv1sPQDqDDl7i8vakj+Jdwxkmgr8HnVYeP9YYYq1oS9xUeb/mop1BB9La3S/sM5GWr5uw8fPitEVb4sJxIHEOJM6BxDmQOAcS50DiHEhctG8SOtJ1nH5hn4n03w3j1aepIFqgHfCtYL8O+HzNQWqJFqi7+H3IvN6f9+kyr0mKFuhS7jkJpfckdKSzsas2zeuNwDFyoDUeSYFa83MSXnDXeoCz3oHynmh/5+lI8HsStpltXeGxR0Qu6kUOlHtOws2JtsQNhfsp3FZVJNoZNJC/5fdmRTuDwnEgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcQ4kzoHEOZA4BxLnQOIcSJwDiXMgcX8BVn1OSUK1/rIAAAAASUVORK5CYII=) 96% center no-repeat; background-size: 48px } } @media (max-width:768px) and (min-width:0) { body#rog_black_style #overview-top-nav .nav-tabs>.active { background-color: #222 !important } body #overview-top-nav .inner .features-menu .nav-sub>li.active { background: #222 !important } } /*! Lity - v2.4.1 - 2020-04-26 * http://sorgalla.com/lity/ * Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */ .lity { position: fixed; z-index: 1000000000; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; white-space: nowrap; outline: auto; background: #0b0b0b; background: rgba(0, 0, 0, .9); -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease } .lity.lity-opened { opacity: 1 } .lity.lity-closed { opacity: 0 } .lity * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .lity-wrap { position: fixed; z-index: 9990; top: 0; right: 0; bottom: 0; left: 0; text-align: center; outline: 0 !important } .lity-wrap::before { display: inline-block; margin-right: -.25em; height: 100%; content: ""; vertical-align: middle } .lity-loader { position: absolute; z-index: 9991; top: 50%; opacity: 0; margin-top: -.8em; width: 100%; color: #fff; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-align: center; -webkit-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease } .lity-loading .lity-loader { opacity: 1 } .lity-container { display: inline-block; position: relative; z-index: 9992; max-width: 100%; max-height: 100%; text-align: left; white-space: normal; outline: 0 !important; vertical-align: middle } .lity-content { z-index: 9993; width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .3s ease; -o-transition: -o-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease } .lity-closed .lity-content, .lity-loading .lity-content { -webkit-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8) } .lity-content::after { display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; content: ""; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6) } .lity-close { position: fixed; z-index: 9994; cursor: pointer; top: 0; right: 0; padding: 0; width: 35px; height: 35px; color: #fff; font-size: 35px; font-family: Arial, Baskerville, monospace; text-align: center; text-decoration: none; border: 0; background: 0 0; -webkit-appearance: none; font-style: normal; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); -webkit-box-shadow: none; box-shadow: none } .lity-close::-moz-focus-inner { padding: 0; border: 0 } .lity-close:active, .lity-close:focus, .lity-close:hover, .lity-close:visited { padding: 0; color: #fff; font-size: 35px; font-family: Arial, Baskerville, monospace; text-align: center; text-decoration: none; outline: auto; border: 0; background: 0 0; font-style: normal; line-height: 35px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); -webkit-box-shadow: none; box-shadow: none } .lity-close:active { top: 1px } .lity-image img { display: block; max-width: 100%; border: 0; line-height: 0 } .lity-facebookvideo .lity-container, .lity-googlemaps .lity-container, .lity-iframe .lity-container, .lity-vimeo .lity-container, .lity-youtube .lity-container { width: 100%; max-width: 964px } .lity-iframe-container { overflow: auto; padding-top: 56.25%; width: 100%; height: 0; -webkit-transform: translateZ(0); transform: translateZ(0); pointer-events: auto; -webkit-overflow-scrolling: touch } .lity-iframe-container iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6); box-shadow: 0 0 8px rgba(0, 0, 0, .6) } .lity-hide { display: none } .beer-slider { display: inline-block; position: relative; overflow: hidden } .beer-slider *, .beer-slider ::after, .beer-slider ::before, .beer-slider::after, .beer-slider::before { box-sizing: border-box } .beer-slider img, .beer-slider svg { vertical-align: bottom } .beer-slider>* { height: 100% } .beer-slider>img { max-width: 100%; height: auto } .beer-reveal { position: absolute; overflow: hidden; z-index: 1; top: 0; right: 50%; left: 0; opacity: 0; transition: opacity .35s } .beer-reveal>:first-child { width: 200%; max-width: none; height: 100% } .beer-reveal>img:first-child { height: auto } .beer-range { position: absolute; z-index: 5; cursor: pointer; top: 0; bottom: 0; left: -1px; opacity: 0; margin: 0; width: calc(100% + 2px); height: 100%; -webkit-appearance: slider-horizontal !important; -moz-appearance: none; -ms-touch-action: auto; touch-action: auto } .beer-range::-webkit-slider-thumb { cursor: pointer; width: 36px; height: 100%; min-height: 36px; background: #fff; -webkit-appearance: none } .beer-range::-moz-range-thumb { cursor: pointer; width: 36px; height: 100%; min-height: 36px; background: fff } .beer-range::-ms-tooltip { cursor: pointer; width: 36px; height: 100%; min-height: 36px; background: #fff } .beer-handle { position: absolute; z-index: 2; top: calc(50% - 30px); opacity: 0; width: 60px; height: 60px; transform: translateX(-15px) } .beer-handle::before { position: absolute; top: -273px; left: 50%; width: 1px; height: 606px; background-color: #fff; content: "" } .beer-handle::after { position: absolute; top: 15px; left: 15px; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; content: "" } .beer-range:focus~.beer-handle::after { outline: 5px auto -webkit-focus-ring-color } .beer-ready .beer-handle, .beer-ready .beer-reveal { opacity: 1 } #CMD::before { display: block; position: absolute; visibility: hidden; width: 0; height: 0 } @media all and (min-width:1280px) { #CMD::before { content: "desktop" } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD::before { content: "tablet" } } @media all and (max-width:730.5px) { #CMD::before { content: "mobile" } } .wd__content { position: relative; color: #242424 } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content { left: 0; margin-right: auto; margin-left: auto; padding-left: 0; width: 88%; 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: #666; font-size: 1.5625rem } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__content .content__slogan { font-size: 1.75rem } } @media all and (max-width:730.5px) { .wd__content .content__slogan { padding-top: 0; padding-left: 0; font-size: 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: 38px } } .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, #174d71, #318092 90%) } .wd__content .content__link.link-gradient:hover span { border-image: linear-gradient(to right, #174d71, #318092 90%); border-image-slice: 1 } .wd__content .content__link.link-gradient::after { color: #318092 } @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, #174d71, #318092 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: #318092 } } .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: 2.1875rem } .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: 1.75rem } .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: 32px } } .wd__feature__list .wd__feature .wd__feature__data.plus { position: relative; margin-right: 32px } .wd__feature__list .wd__feature .wd__feature__data.plus span { position: absolute; top: 4px; right: -33px; font-size: 3.1875rem } @font-face { font-family: slick; font-weight: 400; font-style: normal } .slick-next, .slick-prev { display: block; position: absolute; cursor: pointer; top: 50%; margin-top: -10px; padding: 0; width: 20px; height: 20px; color: transparent; font-size: 0; border: none; line-height: 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-prev { left: -25px } [dir=rtl] .slick-prev { right: -25px; left: auto } .slick-next { right: -25px } [dir=rtl] .slick-next { right: auto; left: -25px } .slick-slider { margin-bottom: 30px } .slick-dots { display: block; position: absolute; bottom: -45px; 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; border: 0; background: 0 0; line-height: 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: .8; 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; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { 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 } .slick-track::after, .slick-track::before { display: table; content: "" } .slick-track::after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { 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-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(../images_1/playBtn.png); display: block; margin: 0 auto; width: 90px; height: 90px; background-size: cover; transform: rotate(0); transition: transform .4s ease } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .wd__section .vidInterface .playBtn { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/icon/playBtn.png) } } .wd__section .vidInterface .playBtn:hover { transform: rotate(120deg) } .wd__section .vidInterface span { display: block; margin-top: 20px; color: #fff; font-size: 1.75rem; line-height: 2.0625rem } @media all and (min-width:1280px) { .wd__section .slick-tab-content .slick-title .title-nav { display: flex; align-content: stretch; flex-direction: row; align-items: stretch } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { display: block; flex-shrink: 1; flex-grow: 1; flex-wrap: nowrap } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn .nav__title-text { display: flex; flex-direction: column; justify-content: flex-end; height: 100% } } @media all and (min-width:731px) and (max-width:1279.5px) { .wd__section .slick-tab-content .scroll_container { overflow-x: scroll; overflow-y: hidden; width: 100%; scroll-behavior: smooth } .wd__section .slick-tab-content .scroll_container::-webkit-scrollbar { display: none } .wd__section .slick-tab-content .scroll_container .scrollPos { position: absolute; top: 0; left: 0; width: 1px; height: 100px; background-color: red } .wd__section .slick-tab-content { margin-top: 62px; max-width: 100% } .wd__section .slick-tab-content .slick-title .title-nav .slick-nav-btn { padding: 8px 25px; font-size: 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: 38px } .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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/ksp/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: 38px } .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: 1.5625rem } .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: 3.9375rem; text-transform: none } .section__kv .wd__content .content__title { margin-top: 26px; font-size: 4.0625rem } .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: 32px } .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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/kv_badge_timebest2022.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-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-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_1/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: #f4f4f4 } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name { padding: 0 23px 0 0; height: 100%; color: #fff; font-size: 20px; background: #f4f4f4 } .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: #f4f4f4 } .cmd-sidenav .sidenav-container .container-items .item .item-dot.enter::after { background: #f4f4f4; 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_1/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_1/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: 19px; text-align: center } .cmd-sidenav .container-items .item .item-label .label-name { color: #fff; font-size: 19px; 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_1/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_1/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_1/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_1/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__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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/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_1/icon_blackcalmanverified.png) } .wd__feature.icon-calmanverified .img__icon { background-image: url(../images_1/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_1/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_1/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_1/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(90deg, #184d71 -150%, #184d71 -100%, #317f92 -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(90deg, #184d71 -150%, #184d71 -100%, #317f92 -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(../images_1/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_auto.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-auto { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_auto.png) } } .inner__page .icon.icon-beautification { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_beautification.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-beautification { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_beautification.png) } } .inner__page .icon.icon-depthOfField { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_depth_of_field.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-depthOfField { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_depth_of_field.png) } } .inner__page .icon.icon-effect { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_effect.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-effect { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_effect.png) } } .inner__page .icon.icon-gif { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_gif.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-gif { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_gif.png) } } .inner__page .icon.icon-hdrPro { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_hdr_pro.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-hdrPro { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_hdr_pro.png) } } .inner__page .icon.icon-kids { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_kids.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-kids { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_kids.png) } } .inner__page .icon.icon-lowlight { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_lowlight.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-lowlight { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_lowlight.png) } } .inner__page .icon.icon-miniature { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_miniature.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-miniature { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_miniature.png) } } .inner__page .icon.icon-night { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_night.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-night { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_night.png) } } .inner__page .icon.icon-qrCode { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_qr_code.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-qrCode { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_qr_code.png) } } .inner__page .icon.icon-selfiePanorama { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_selfie_panorama.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-selfiePanorama { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_selfie_panorama.png) } } .inner__page .icon.icon-selfie { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_selfie.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-selfie { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_selfie.png) } } .inner__page .icon.icon-slowMotion { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_slow_motion.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-slowMotion { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_slow_motion.png) } } .inner__page .icon.icon-smartRemove { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_smart_remove.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-smartRemove { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_smart_remove.png) } } .inner__page .icon.icon-superResolution { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_super_resolution.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-superResolution { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_super_resolution.png) } } .inner__page .icon.icon-manual { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_manual.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-manual { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_manual.png) } } .inner__page .icon.icon-timeLapse { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_time_lapse.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-timeLapse { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_time_lapse.png) } } .inner__page .icon.icon-timeRewind { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_time_rewind.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-timeRewind { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_time_rewind.png) } } .inner__page .icon.icon-youtube { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_youtube.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-youtube { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_youtube.png) } } .inner__page .icon.icon-panaroma { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_panaroma.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-panaroma { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_panaroma.png) } } .inner__page .icon.icon-pro { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_pro.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-pro { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_pro.png) } } .inner__page .icon.icon-portrait { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/1x/inner/icon/icon_portrait.png) } @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) { .inner__page .icon.icon-portrait { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/images/large/2x/inner/icon/icon_portrait.png) } } */ @media all and (min-width:731px) and (max-width:1279.5px) { .inner__nav { margin: 0 auto; width: 100% } .inner__nav .nav__heading { font-size: 21px } .inner__nav .nav__switch__btn { bottom: -63px; left: 50%; margin-left: -20px; width: 40px; height: 40px } .inner__nav .nav__switch__btn .icon__switch { position: absolute; top: 0; left: 0; width: 40px; height: 40px } .inner__nav .nav__switch__btn.clicked { transform: translate3d(0, 210px, 0) } .inner__nav .nav__switch__btn.clicked .icon__switch { transform-origin: center; transform: rotate(405deg) translate3d(0, 0, 0) } .inner__nav .nav__switch__btn.fixed { top: -30px; left: 50%; margin-left: -20px } .inner__page .wd__content .content__title { font-size: 27px; line-height: 1.2 } .inner__page .section__content { padding-bottom: 205px } .inner__page .section__content.theme-gray { max-width: 1300px; max-width: 722px } .inner__page .section__content.theme-gray .wd__content { padding-top: 39px } .inner__page .section__content.theme-gray .col.always__on__top { background-color: #fff } .inner__page .icon { margin-bottom: 11px; width: 120px; height: 120px } } @media all and (max-width:730.5px) { .inner__nav { margin: 0 auto; width: 100% } .inner__nav .nav__heading { font-size: 15px; letter-spacing: .2px } .inner__nav .nav__switch__btn { bottom: -55px; left: 50%; margin-left: -19px; width: 38px; height: 38px } .inner__nav .nav__switch__btn .icon__switch { position: absolute; top: 0; left: 0; width: 38px; height: 38px } .inner__nav .nav__switch__btn.clicked { transform: translate3d(0, 210px, 0) } .inner__nav .nav__switch__btn.clicked .icon__switch { transform-origin: center; transform: rotate(405deg) translate3d(0, 0, 0) } .inner__nav .nav__switch__btn.fixed { top: -30px; left: 50%; margin-left: -19px } .inner__page .wd__content .content__title { font-size: 20px; line-height: 1.1 } .inner__page .section__content { padding-bottom: 205px } .inner__page .section__content.theme-gray { max-width: 414px } .inner__page .section__content.theme-gray .col.always__on__top { background-color: #fff } .inner__page .icon { margin-bottom: 11px; width: 120px; height: 120px } } .wd__innerbtn { position: relative; z-index: 2; margin-right: auto; margin-left: auto; padding: 0; max-width: 2560px } .wd__innerbtn.blackTheme { margin-top: -2px; background: #0f0d10 } .wd__innerbtn .inner__btn { position: absolute; margin: 0 auto; width: 100%; height: 80px } .wd__innerbtn .inner__btn span { display: block; opacity: 1; margin-bottom: 22px; font-size: 21px; text-align: center; transition: opacity .4s } .wd__innerbtn .inner__btn .toggleSlide { position: absolute; cursor: pointer; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; transform: translateY(0) translateZ(0) rotate(0); transition: transform .8s 50ms, background-image .3s ease-out; transform-origin: center center } .wd__innerbtn .inner__btn .toggleSlide.fixed { position: fixed; top: -100px } .wd__innerbtn .inner__btn.active .toggleSlide { transform: translateY(180px) translateZ(0) rotate(0) } .wd__innerbtn .inner__btn.active span { opacity: 0 } .wd__innerbtn.theme-black .inner__btn span { color: #333 } /* .wd__innerbtn.theme-black .inner__btn .toggleSlide { background-image: url(../images_1/inner/icon_open_black.png) } .wd__innerbtn.theme-black .inner__btn.active .toggleSlide { background-image: url(../images_1/inner/icon_close_black.png) } */ .wd__innerbtn.theme-white .inner__btn span { color: #fff } /* .wd__innerbtn.theme-white .inner__btn .toggleSlide { background-image: url(../images_1/inner/icon_open_white.png) } .wd__innerbtn.theme-white .inner__btn.active .toggleSlide { background-image: url(../images_1/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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: 1.75rem; 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_1/btn-off.png) } .wdblockimg .ai__noise__container .noise__switcher .img__switcher.js-active { background-image: url(../images_1/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_1/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: #f4f4f4; font-size: 17px } .section__wdvideos .sales_button span::before { display: block; position: absolute; bottom: -5px; left: 0; width: 0; height: 1.5px; background: #f4f4f4; transition: width .3s; content: "" } .section__wdvideos .sales_button:hover span { color: #f4f4f4 } .section__wdvideos .sales_button:hover span::before { width: 100% } .section__wdvideos .sales_button:hover .seeall_arrow-svg { stroke: #f4f4f4 } .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: #f4f4f4; stroke-width: 3px } .section__wdvideos .video_btn { position: absolute; z-index: 9; top: 0; left: 0; width: 100%; height: 100% } .section__wdvideos .youtube_btn { position: absolute; z-index: 9; cursor: pointer; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; width: 60px; height: 60px; border-width: 0; background-image: url(../images_1/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: 16px; 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_1/arrow.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/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__adobebanner-outer-s1 { overflow: hidden; background-color: #fff } .section__adobebanner-outer-s1 .banner__container .wd__content { position: relative; z-index: 9 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__title { margin-top: 0; background-image: linear-gradient(to right, #3050cb, #22137a) } .section__adobebanner-outer-s1 .banner__container .wd__content .content__info { color: #181818 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__info, .section__adobebanner-outer-s1 .banner__container .wd__content .content__info * { -webkit-background-clip: unset; -webkit-text-fill-color: unset } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link, .section__adobebanner-outer-s1 .banner__container .wd__content .content__link * { color: #181818 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link::after { color: #181818 } .section__adobebanner-outer-s1 .banner__container .wd__content .content__link:hover span { border-bottom: 1px solid #000 } .section__adobebanner-outer-s1 .banner__container .banner__item { position: relative; background-color: #fef8e0 } .section__adobebanner-outer-s1 .banner__container .img__main { z-index: 1; font-size: 0; background-size: contain } .section__antimicrobial-outer-s1 { overflow: hidden; background-color: #000 } .section__antimicrobial-outer-s1 .wd__content .content__slogan { color: #737778 } .section__antimicrobial-outer-s1 .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .section__antimicrobial-outer-s1 .wd__content .content__info { color: #fff } .section__antimicrobial-outer-s1 .wd__content .content__link { -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__antimicrobial-outer-s1::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background-color: #140929; content: "" } .section__antimicrobial-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature { top: 0 } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon { top: -7px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { top: 0; margin-bottom: 12px; width: 73px; height: 73px; background-size: contain } .antimicrobial-outer .wd__feature.icon-iso21702 .img__icon { background-image: url(../images_1/icon_iso21702.png) } .antimicrobial-outer .wd__feature.icon-iso22196 .img__icon { background-image: url(../images_1/icon_iso22196.png) } .section__antimicrobial-outer-s1 .wd__content_2 { left: 50%; margin-top: -303px; margin-left: -577px; width: 360px } .section__antimicrobial-outer-s1 .wd__content_2 .content__comment { position: relative; padding-left: 16px; color: #999 !important; font-size: 13px } .section__antimicrobial-outer-s1 .wd__content_2 .content__comment::before { display: block; position: absolute; top: 9px; left: 6px; color: #999 !important; content: "*"; line-height: 0 } .section__antimicrobial-outer-s1.wd__section .modal-button-container .modal-button { background-color: rgba(0, 0, 0, 0); color: #efc4ff; border-color: #efc4ff } .section__antimicrobial-outer-s1.wd__section .modal-button-container .modal-button:hover { background-color: #000; color: rgba(239, 196, 255, .8); border-color: rgba(239, 196, 255, .6) } .section__antimicrobial-inner-s1 { margin-top: 0; padding-top: 0 } .section__antimicrobial-inner-s1 .img__main { display: block; position: absolute; margin-right: auto; margin-left: auto; width: 100% } .section__antimicrobial-inner-s1 .image__container { margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s1 .image__container .imgItem { display: flex; position: relative; margin-bottom: 0; width: 100% } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/virus_0.png) } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/virus_1.png) } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/virus_2.png) } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-img-3 { background-image: url(../images_1/virus_3.png) } .section__antimicrobial-inner-s1 .image__container .imgItem-title { box-sizing: border-box; color: #fff; text-align: left } .section__antimicrobial-inner-s1 .image__container .imgItem-info { box-sizing: border-box; color: #fff; text-align: left } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-img-1 { width: 320px; height: 320px } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-content { padding-top: 92px; padding-left: 54px; width: 500px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 { flex-direction: row-reverse; margin-top: -127px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-img-2 { width: 324px; height: 324px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-content { padding-top: 98px; padding-right: 40px; width: 405px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 { margin-top: -114px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-img-3 { width: 588px; height: 332px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-content { padding-top: 123px; padding-left: 8px; width: 360px } .section__antimicrobial-inner-s2 { margin-top: 0; padding-top: 0; background-color: transparent !important } .section__antimicrobial-inner-s2 .detect-point-enter, .section__antimicrobial-inner-s2 .detect-point-out { position: absolute } .section__antimicrobial-inner-s2 .steps { position: relative; margin-top: 52px } .section__antimicrobial-inner-s2 .steps .step { display: inline-block; position: relative; vertical-align: top } .section__antimicrobial-inner-s2 .steps .step .step-img { position: relative } .section__antimicrobial-inner-s2 .steps .step .step-content { position: relative; margin-top: 29px } .section__antimicrobial-inner-s2 .steps .step .step-content .content-info { color: #fff; font-size: 20px; line-height: 1.5 } .section__antimicrobial-inner-s2 .steps .step.step-arrow { z-index: 10; margin: 0 -14px 0 45px; user-select: none; pointer-events: none } .section__antimicrobial-inner-s2 .steps .step.step-arrow .img__arrow { position: relative; top: 189px; left: -21px; width: 90px; height: 40px } .section__antimicrobial-inner-s2 .steps .step.step-1 { z-index: 10; width: 280px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img { margin-top: 62px; width: 280px; height: 273px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img { position: absolute } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-line { top: 0; left: 0; width: 280px; height: 266px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub { position: absolute; top: 50%; left: 50%; background-size: contain; offset-rotate: 30deg } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub1 { margin-top: -141px; margin-left: -138px; width: 60px; height: 60px; transform: scale(1); offset-distance: 7% } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub2 { margin-top: -139px; margin-left: -142px; width: 60px; height: 60px; transform: scale(.3); animation: move1 5s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub3 { margin-top: -139px; margin-left: -142px; width: 60px; height: 60px; transform: scale(.5); offset-distance: 58% } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub4 { margin-top: -138px; margin-left: -138px; width: 60px; height: 60px; transform: scale(.7); animation: move2 10s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub5 { margin-top: -138px; margin-left: -138px; width: 60px; height: 60px; transform: scale(.4); animation: move2 7s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub6 { margin-top: -133px; margin-left: -135px; width: 60px; height: 60px; transform: scale(.2) } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub7 { margin-top: -133px; margin-left: -135px; width: 60px; height: 60px; transform: scale(.8); animation: move3 7s infinite forwards linear } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.img__step-sub8 { margin-top: -27px; margin-left: -61px; width: 20px; height: 20px; animation: float 12s ease-in-out infinite } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-sub.animation-stop { animation-play-state: paused } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img .img__step-main { z-index: 10; top: 0; left: 0; width: 280px; height: 266px } .section__antimicrobial-inner-s2 .steps .step.step-2 { z-index: 1; width: 610px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img { width: 610px; height: 334px } .section__antimicrobial-inner-s2 .video__area { position: relative } .section__antimicrobial-inner-s2 .video__area .video__container { position: relative } .section__antimicrobial-inner-s2 .video__area .video__container .video-item { position: relative; left: 50% } .section__antimicrobial-inner-s2 .table__container { left: 50%; margin-left: -600px; width: 1200px; height: 560px; position: relative } .section__antimicrobial-inner-s2 .table__container .img__bg { left: 50%; margin-left: -600px; width: 1200px; height: 560px } #CMD .section__antimicrobial-inner-s2 .table__container .img__bg { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/chart.jpg) } .section__antimicrobial-inner-s2 .table__container .vertical { display: flex; position: absolute; top: 11px; left: 30px; width: 1142px; height: 100% } .section__antimicrobial-inner-s2 .table__container .vertical span { position: absolute; color: #fff; font-size: 20px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem { width: 220px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 { width: 240px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-1 { top: 155px; left: 75px; width: 160px; font-size: 1.5rem; text-align: left; background-image: linear-gradient(to right, #efc4ff, #b757f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-2 { top: 373px; left: 75px; width: 160px; font-size: 1.5rem; text-align: left } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 { display: flex; justify-content: center } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { line-height: 1.5; top: 45px; width: 180px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content { display: flex; position: relative; top: 266px; justify-content: center; width: 220px; height: 270px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info { color: #bababa } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info-2 { top: 218px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-5 span { top: 260px; right: 39px; width: 220px; font-size: 32px; background-image: linear-gradient(to right, #efc4ff, #b757f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } @keyframes float { 0% { transform: translateY(0) } 50% { transform: translateY(20px) } 100% { transform: translateY(0) } } @keyframes heartbeat { 0% { transform: scale(1) } 50% { transform: scale(.9) } 100% { transform: scale(1) } } @keyframes move1 { 0% { offset-distance: 0; z-index: 11 } 14% { z-index: 11 } 15% { z-index: 9 } 50% { z-index: 9 } 51% { z-index: 11 } 100% { z-index: 11; offset-distance: 100% } } @keyframes move2 { 0% { offset-distance: 0; z-index: 11 } 71% { z-index: 11 } 78% { z-index: 9 } 99% { z-index: 9 } 100% { z-index: 11; offset-distance: 100% } } @keyframes move3 { 0% { offset-distance: 0; z-index: 30 } 30% { z-index: 1 } 60% { z-index: 1 } 100% { z-index: 30; offset-distance: 100% } } #section__antimicrobial-inner-s2 .track-1 { offset-path: path("M57.99,24.24c10.55-7.47,65.9,50.26,104.51,100.27,35.67,46.19,78.95,114.14,70.56,120.95-8.33,6.77-66.77-47.4-109.55-100.53-28.34-35.2-47.8-67.45-60.21-90.19-8.66-21.56-8.05-28.56-5.31-30.5Z") } #section__antimicrobial-inner-s2 .track-2 { offset-path: path("M183.19,78.35c9.12-7.17,49.04-38.56,54.91-32.89,6.6,6.38-29.87,59.76-73.21,103.45-46.61,46.98-105.45,87.05-111.94,80.11-8.49-9.08,74.29-97.04,92.31-116.18,3.54-3.76,17.29-18.26,37.93-34.48Z") } #section__antimicrobial-inner-s2 .track-3 { offset-path: path("M78.15,178.62c-4.89,.18-68.18,2.3-68.97-4.51-.86-7.44,73.01-24.43,144.3-31.56,52.08-5.21,116.25-6.52,116.98-.27,.92,7.94-100.88,24.97-127.59,29.44-15.56,2.6-36.87,5.9-64.72,6.9Z") } #CMD #section__antimicrobial-inner-s2 .step-1 .img__step-line { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/ag_line.png) } #CMD #section__antimicrobial-inner-s2 .step-1 .img__step-main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/ag_main.png) } #CMD #section__antimicrobial-inner-s2 .step-1 .img__step-sub { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/ag_float_balll.png) } #CMD #section__antimicrobial-inner-s2 .step-arrow .img__arrow { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/arrow.png) } .antimicrobial-inner { background-color: #000 } .antimicrobial-inner .wd__content .content__slogan { color: #6b6e70 } .antimicrobial-inner .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .antimicrobial-inner .wd__content .content__info { color: #fff } .antimicrobial-inner .wd__content .content__link { linkColor: #b757f0 } .antimicrobial-inner .wd__content .content__link { color: #b757f0 } .antimicrobial-inner .wd__content .content__link *, .antimicrobial-inner .wd__content .content__link span { color: #b757f0 } .antimicrobial-inner .wd__content .content__link::after { color: #b757f0 } .antimicrobial-inner .wd__content .content__link:link { color: #b757f0 } .antimicrobial-inner .wd__content .content__link:hover span { border-bottom: 1px solid #b757f0 } .modal-inner__sectionsAntimicrobial { background-color: #000 } .section__audiodirac-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #12111b } .section__audiodirac-outer-s1 .wd__content .content__slogan { color: #fff } .section__audiodirac-outer-s1 .wd__content .content__info { color: #fff } .section__audiodirac-outer-s1 .wd__content .content__link { color: #fff } .section__audiodirac-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__audiodirac-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__audiodirac-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__audiodirac-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images_1/blockimg_1.jpg) } .section__audiodirac-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2.jpg) } .section__audiodirac-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__audiodirac-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .modal-inner__sectionsAudioDirac { background-color: #0d0d0d } .modal-inner__sectionsAudioDirac .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .modal-inner__sectionsAudioDirac .wd__content .content__info { color: #fff } .modal-inner__sectionsAudioDirac .wd__content .content__link { color: #fff } .section__audioDirac-inner-s1 .compare_text { width: 100%; color: #bababa; text-align: center } .section__audioDirac-inner-s1 .compare_pic { background-position: 50%; background-repeat: no-repeat; background-size: cover } .section__audioDirac-inner-s1 .dirac_compare__with, .section__audioDirac-inner-s1 .dirac_compare__without { position: relative; overflow: hidden } .section__audioDirac-inner-s1 .dirac_compare__with .compare_text { color: #44b2ff } .section__audioDirac-inner-s2 .audio__chart_containter { margin: 0 auto } .section__audioDirac-inner-s2 .audio__chart_0 { position: relative; margin: 0 auto; margin-top: 70px; width: 1144px; height: 617px } .section__audioDirac-inner-s2 .audio__chart_0 .img-slick { overflow: hidden; width: 100%; height: 100%; border-radius: 20px } .section__audioDirac-inner-s2 .audio__chart_0 .top .topLeft { position: absolute; top: 45px; left: 80px; width: 40%; color: #bababa; font-size: 24px; text-align: center } .section__audioDirac-inner-s2 .audio__chart_0 .top .topRight { position: absolute; top: 45px; right: 157px; width: 40%; color: #44b2ff; font-size: 24px; text-align: center } .section__audioDirac-inner-s2 .audio__chart_0 .left { position: absolute; top: 190px; left: -40px; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotateZ(270deg) } .section__audioDirac-inner-s2 .audio__chart_0 .right { position: absolute; right: 160px; bottom: 45px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDirac-inner-s2 .audio__chart_0 .num { position: absolute; top: 48%; right: -10px; width: 200px; color: #44b2ff; font-size: 42px; font-weight: 700; text-align: center; transform: rotate(270deg) } .section__audiodolby-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #12101b } .section__audiodolby-outer-s1 .wd__content .content__slogan { color: #fff } .section__audiodolby-outer-s1 .wd__content .content__info { color: #fff } .section__audiodolby-outer-s1 .wd__content .content__link { color: #fff } .section__audiodolby-outer-s1 .img__main { display: block; position: relative; margin-right: auto; margin-left: auto; width: 100% } .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__data, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__data *, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe *, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top, .section__audiodolby-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } .section__audiodolby-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { background-size: contain } .section__audiodolby-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images_1/blockimg_1_s1.jpg) } .section__audiodolby-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_s1.jpg) } .section__audiodolby-outer-s1 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__audiodolby-outer-s1 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .section__audiodolby-outer-s2 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #12101b } .section__audiodolby-outer-s2 .wd__content .content__info { color: #fff } .section__audiodolby-outer-s2 .wd__content .content__link { color: #fff } .section__audiodolby-outer-s2 .wdblockimg .block-1 .img__bg { background-image: url(../images_1/blockimg_1_s2.jpg) } .section__audiodolby-outer-s2 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_s2.jpg) } .section__audiodolby-outer-s2 .wdblockimg .block-1 .modal-button-container .modal-button { border-color: #000; background-color: rgba(195, 180, 239, .6) } .section__audiodolby-outer-s2 .wdblockimg .block-2 .modal-button-container .modal-button { border-color: #fff; background-color: rgba(193, 177, 235, .6) } .modal-inner__sectionsAudioDolby { background-color: #0d0d0d } .modal-inner__sectionsAudioDolby .wd__content .content__info { color: #fff } .modal-inner__sectionsAudioDolby .wd__content .content__link { color: #fff } .section__audioDolby-inner-s1 .wd__content { z-index: 3 } .section__audioDolby-inner-s2 .compare_text { width: 100%; color: #bababa; text-align: center } .section__audioDolby-inner-s2 .compare_pic { background-position: 50%; background-repeat: no-repeat; background-size: cover } .section__audioDolby-inner-s2 .ainoise_compare__with, .section__audioDolby-inner-s2 .ainoise_compare__without { position: relative; overflow: hidden } .section__audioDolby-inner-s2 .ainoise_compare__with .compare_text { color: #44b2ff } .section__audioDolby-inner-s3 .audio__chart_containter { margin: 0 auto } .section__audioDolby-inner-s3 .audio__chart_0 { position: relative; margin: 0 auto; margin-top: 80px; width: 1144px; height: 617px } .section__audioDolby-inner-s3 .audio__chart_0 .img-slick { overflow: hidden; width: 100%; height: 100%; border-radius: 20px } .section__audioDolby-inner-s3 .audio__chart_0 .top .topLeft { position: absolute; top: 45px; left: 80px; width: 40%; color: #bababa; font-size: 24px; text-align: center } .section__audioDolby-inner-s3 .audio__chart_0 .top .topRight { position: absolute; top: 45px; right: 157px; width: 40%; color: #44b2ff; font-size: 24px; text-align: center } .section__audioDolby-inner-s3 .audio__chart_0 .left { position: absolute; top: 186px; left: -40px; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotateZ(270deg) } .section__audioDolby-inner-s3 .audio__chart_0 .right { position: absolute; right: 160px; bottom: 45px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDolby-inner-s3 .audio__chart_0 .num { position: absolute; top: 300px; right: -10px; width: 200px; color: #44b2ff; font-size: 42px; font-weight: 700; text-align: center; transform: rotate(270deg) } .section__audioDolby-inner-s4 .wdtab .wdtab__nav { background-color: transparent } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn { color: #bababa; font-size: 1.5rem } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn:hover { color: #fff } .section__audioDolby-inner-s4 .wdtab .wdtab__autoPlay { margin-left: 536px } .section__audioDolby-inner-s4 .wdtab .wdtab__panel__item-info__text { padding-bottom: 27px !important; color: #fff; line-height: 1.5 } .section__audioDolby-inner-s4 .wdtab__panel__item-info { margin: 0 auto; width: 90%; max-width: 880px } .section__audioDolby-inner-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #fff; fill: #000 } .section__audioDolby-inner-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { stroke: #fff } .section__audioDolby-inner-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg-play .triangle { fill: #fff } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.active, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.focus-visible, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn:focus { color: #fff } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.active::before, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn.focus-visible::before, .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn:focus::before { background-image: linear-gradient(to right, #43b1fe, #00518b 100%) } .section__audioDolby-inner-s4 .audio__chart_containter { margin: 0 auto } .section__audioDolby-inner-s4 .audio__chart { margin: 0 auto; width: 1146px } .section__audioDolby-inner-s4 .audio__chart .slick-image { width: 100%; height: 100% } .section__audioDolby-inner-s4 .audio__chart .slick-image>.img-slick { width: 100%; height: 100%; border-radius: 20px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 { position: relative; height: 696px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .title { position: absolute; top: 40px; width: 100%; color: #fff; font-size: 24px; text-align: center } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .y { position: absolute; top: 198px; left: 0; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotate(270deg) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .x { position: absolute; right: 110px; bottom: 60px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav { position: absolute; bottom: 40px; left: 0; width: 100% } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item { position: relative; margin: 0 10px; padding-left: 50px; color: #bababa; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item::after { position: absolute; bottom: calc(50% - 2px); left: 0; width: 40px; border-bottom: 3px solid #fff; content: "" } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item--0::after { border-color: #628bff } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item--1::after { border-color: #a4e4ff } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 { position: relative; height: 678px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .title { position: absolute; top: 40px; width: 100%; color: #fff; font-size: 24px; text-align: center } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .y { position: absolute; top: 206px; left: 38px; width: 200px; color: #bababa; font-size: 18px; text-align: right; transform: rotate(270deg) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .x { position: absolute; right: 128px; bottom: 100px; width: 200px; color: #bababa; font-size: 18px; text-align: right } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .red { position: absolute; top: 113px; left: 302px; width: 200px; color: #ff3860; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav { position: absolute; bottom: 44px; left: 0; width: 100% } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item { position: relative; margin: 0 10px; padding-left: 50px; color: #bababa; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item::after { position: absolute; bottom: calc(50% - 2px); left: 0; width: 40px; content: "" } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--0::after { border-bottom: 2px solid #00728a } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--1::after { left: -1px; height: 2px; background-position: top; background-repeat: repeat-x; background-size: 10px 2px; background-image: linear-gradient(to right, #ff3860 40%, rgba(255, 255, 255, 0) 0) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--2::after { border-bottom: 2px solid #00f2fe } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item--3::after { left: 4px; height: 2px; background-position: top; background-repeat: repeat-x; background-size: 8px 2px; background-image: linear-gradient(to right, #bababa 26%, rgba(255, 255, 255, 0) 0) } .section__noise { color: #181818 } .section__noise .sub__content { margin-top: 80px; margin-right: auto; margin-left: auto; max-width: 870px } .section__noise .sub__content .content__title { color: #181818; font-size: 32px; 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: 1.75rem; font-weight: 300 } .section__noise .noise__switcher .img__switcher { display: inline-block; cursor: pointer; margin: 10px 0; padding: 0; width: 90px; height: 42px; border: 0; background-color: transparent; background-size: contain } #CMD .section__noise .noise__switcher .img__switcher { background-image: url(../images_1/btn-off.png) } #CMD .section__noise .noise__switcher .img__switcher.js-active { background-image: url(../images_1/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_1/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_1/blockimg_1_mobile.jpg) } .section__conference-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3_s.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_1/icon01.svg) no-repeat 50% 50%; mask: url(../images_1/icon01.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-1 .nav_icon { -webkit-mask: url(../images_1/icon02.svg) no-repeat 50% 50%; mask: url(../images_1/icon02.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-2 .nav_icon { -webkit-mask: url(../images_1/icon03.svg) no-repeat 50% 50%; mask: url(../images_1/icon03.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-3 .nav_icon { -webkit-mask: url(../images_1/icon04.svg) no-repeat 50% 50%; mask: url(../images_1/icon04.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-4 .nav_icon { -webkit-mask: url(../images_1/icon05.svg) no-repeat 50% 50%; mask: url(../images_1/icon05.svg) no-repeat 50% 50% } #wdTab-conference-tabnav-5 .nav_icon { -webkit-mask: url(../images_1/icon06.svg) no-repeat 50% 50%; mask: url(../images_1/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_1/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_1/toggle-on.png) } #CMD .section__conference-inner-s3 .toggle_off { background-image: url(../images_1/toggle-off.png) } .conference-inner .wd__content .content__title, .conference-outer .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 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 } #active__modal-inner__corningGlass .modal-button-container .modal-button { color: #fff; border-color: #fff } .wd__section.section__corningGlass { background-color: #000 } .section__corningGlass .inner_block__1 .antiglare_containter { position: relative } .section__corningGlass .inner_block__1 .antiglare_containter .content { display: flex; position: absolute; z-index: 2; justify-content: center } .section__corningGlass .inner_block__1 .antiglare_containter .content .item { display: block; width: 50%; color: #181818; text-align: center } .section__corningGlass .inner_block__1 .antiglare_containter .content .content__right.item { color: #fff } .section__corningGlass .inner_block__2 .campare_containter .item { text-align: center } .section__corningGlass .inner_block__2 .campare_containter .item .img { margin: 0 auto } .section__corningGlass .inner_block__2 .campare_containter .item .info, .section__corningGlass .inner_block__2 .campare_containter .item .title { color: #fff } .modal-corningGlass { background-color: #000 } .section__corningGlass .content__info, .section__corningGlass .content__title, .section__corningGlass .wd__feature__describe * { color: #fff !important } .section__corningGlass.wd__section .wd__feature__list .wd__feature .wd__feature__data { color: #fff !important } .section__display-outer-s1 { overflow: hidden; background-color: #000 } .section__display-outer-s1 .wd__content .content__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_1/blockimg_1_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images_1/blockimg_4_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images_1/blockimg_5_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images_1/blockimg_6_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-7 .img__bg { background-image: url(../images_1/blockimg_7_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-9 .img__bg { background-image: url(../images_1/blockimg_9_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-10 .img__bg { background-image: url(../images_1/blockimg_10_sa.jpg) } /*.section__display-outer-s1 .wdblockimg .block-11 .img__bg { background-image: url(../images_1/blockimg_11_sa.jpg) }*/ .section__display-outer-s1 .wdblockimg .block-21 .img__bg { background-image: url(../images_1/blockimg_21_sa.jpg) } .section__display-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images_1/blockimg_8_sa.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_1/blockimg_8_sa.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_1/blockimg_8_sa.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: 19px } .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: 32px } .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: 38px } .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: 16px; } .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_1/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_1/slider_icon_dark.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_1/slider_icon_light.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_1/slider_icon_candle.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_1/slider_icon_cloud.png) } #CMD .section__display-inner-s21 .img__inner3__1_dark { background-image: url(../images_1/ani_dark.jpg) } #CMD .section__display-inner-s21 .img__inner3__1_light { background-image: url(../images_1/ani_light.jpg) } #CMD .section__display-inner-s21 .img__inner3__1_warm { background-image: url(../images_1/ani_warm.jpg) } #CMD .section__display-inner-s21 .img__inner3__1_cool { background-image: url(../images_1/ani_cool.jpg) } .display-inner { background-color: #000 } .display-inner .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 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-epeat .img__icon { background-image: url(../images_1/icon_epeat.png) } .environment-outer .wd__feature__list .wd__feature.icon-asusoled .wd__feature__data { width: 112px; height: 116px } .environment-outer .wd__feature.icon-energystar .img__icon { background-image: url(../images_1/icon_energystar.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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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/ea5bde46-a344-49d0-8bcc-befd7351d88b/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_1/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_1/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_1/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, #174d71, #318092 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_1/blockimg_1s.jpg) } .section__environment-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2s.jpg) } .section__environment-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3s.jpg) } .section__environment-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images_1/blockimg_4s.jpg) } .section__environment-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images_1/blockimg_5s.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: 16px; } .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_1/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-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 } .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(-45deg, transparent 30%, #ccc 60%), linear-gradient(-45deg, #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(-45deg, transparent 30%, #c1c1c1 60%), linear-gradient(-45deg, #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(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon/icon_smilitary__grade_1.png) } .section__military__grade .features-icon .img__icon2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon/icon_smilitary__grade_2.png) } .section__military__grade .features-icon .img__icon3 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon/icon_smilitary__grade_3.png) } .section__military__grade .features-icon .img__icon4 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon/icon_smilitary__grade_4.png) } .section__military__grade .features-icon .img__icon5 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/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(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_0.png) } .section__military__grade .wdtile__item-1 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_1.png) } .section__military__grade .wdtile__item-2 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_2.png) } .section__military__grade .wdtile__item-3 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_3.png) } .section__military__grade .wdtile__item-4 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_4.png) } .section__military__grade .wdtile__item-5 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_5.png) } .section__military__grade .wdtile__item-6 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_6.png) } .section__military__grade .wdtile__item-7 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_7.png) } .section__military__grade .wdtile__item-8 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_8.png) } .section__military__grade .wdtile__item-9 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_9.png) } .section__military__grade .wdtile__item-10 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_10.png) } .section__military__grade .wdtile__item-11 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_11.png) } .section__military__grade .wdtile__item-12 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_12.png) } .section__military__grade .wdtile__item-13 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_13.png) } .section__military__grade .wdtile__item-14 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_14.png) } .section__military__grade .wdtile__item-15 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_15.png) } .section__military__grade .wdtile__item-16 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_16.png) } .section__military__grade .wdtile__item-17 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_17.png) } .section__military__grade .wdtile__item-18 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_18.png) } .section__military__grade .wdtile__item-19 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_19.png) } .section__military__grade .wdtile__item-20 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_20.png) } .section__military__grade .wdtile__item-21 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_21.png) } .section__military__grade .wdtile__item-22 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_22.png) } .section__military__grade .wdtile__item-23 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_23.png) } .section__military__grade .wdtile__item-24 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_24.png) } .section__military__grade .wdtile__item-25 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_25.png) } .section__military__grade .wdtile__item-26 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_26.png) } .section__military__grade .wdtile__item-27 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_27.png) } .section__military__grade .wdtile__item-28 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_28.png) } .section__military__grade .wdtile__item-29 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_29.png) } .section__military__grade .wdtile__item-30 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_30.png) } .section__military__grade .wdtile__item-31 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_31.png) } .section__military__grade .wdtile__item-32 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_32.png) } .section__military__grade .wdtile__item-33 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_33.png) } .section__military__grade .wdtile__item-34 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_34.png) } .section__military__grade .wdtile__item-35 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_35.png) } .section__military__grade .wdtile__item-36 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_36.png) } .section__military__grade .wdtile__item-37 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_37.png) } .section__military__grade .wdtile__item-38 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_38.png) } .section__military__grade .wdtile__item-39 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_39.png) } .section__military__grade .wdtile__item-40 .wdtile__item { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/militaryGrade/images/outer/large/1x/icon_40.png) } */ .section__military__grade .wdtile__item .icon-shocktest { background-image: url(../images_1/icon_shocktest.png) } .section__military__grade .wdtile__item .icon-vibrationtest { background-image: url(../images_1/icon_vibrationtest.png) } .section__military__grade .wdtile__item .icon-hightemperaturetest { background-image: url(../images_1/icon_hightemperaturetest.png) } .section__military__grade .wdtile__item .icon-lowtemperaturetest { background-image: url(../images_1/icon_lowtemperaturetest.png) } .section__military__grade .wdtile__item .icon-humiditytest { background-image: url(../images_1/icon_humiditytest.png) } .section__military__grade .wdtile__item .icon-temperatureshocktest { background-image: url(../images_1/icon_temperatureshocktest.png) } .section__military__grade .wdtile__item .icon-sandanddusttest { background-image: url(../images_1/icon_sandanddusttest.png) } .section__military__grade .wdtile__item .icon-freezethawtest { background-image: url(../images_1/icon_freezethawtest.png) } .section__military__grade .wdtile__item .icon-altitudetest { background-image: url(../images_1/icon_altitudetest.png) } .section__military__grade .wdtile__item .icon-solarradiationtest { background-image: url(../images_1/icon_solarradiationtest.png) } .section__military__grade .wdtile__item .icon-mechanicalvibrationtest { background-image: url(../images_1/icon_mechanicalvibrationtest.png) } .section__military__grade .wdtile__item .icon-explosiveatmospheretest { background-image: url(../images_1/icon_explosiveatmospheretest.png) } .section__military__grade .wdtile .img__slogan { background-size: contain } .section__creatorhub-outer-s1 { overflow: hidden } .section__creatorhub-outer-s1 .wdtab__nav { z-index: -1; top: 40px; visibility: hidden; opacity: 0; height: 0 } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay { z-index: 6 } .section__creatorhub-outer-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: #fff; fill: #000 } .section__creatorhub-outer-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s1 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s1 .wdtab__panel__item .img__main { margin: 0 auto; background-position: 50%; background-repeat: no-repeat; background-size: contain } .section__creatorhub-outer-s2 { overflow: hidden } .section__creatorhub-outer-s2 .wd__feature__list { z-index: 2 } .section__creatorhub-outer-s2 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: transparent; fill: transparent } .section__creatorhub-outer-s2 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s2 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s2 .wdtab .wdtab__nav { background-color: transparent } .section__creatorhub-outer-s2 .wdtab .wdtab__nav::before { display: none } .section__creatorhub-outer-s2 .wdtab .wdtab__nav .wdtab__nav-btn { margin: 0 20px; padding: 11px 0; color: grey; border: 2px solid grey; border-radius: 40px } .section__creatorhub-outer-s2 .wdtab .wdtab__nav .wdtab__nav-btn::before { display: none } .section__creatorhub-outer-s2 .wdtab .slick-info-text { color: #fff; line-height: 1.5 } .section__creatorhub-outer-s2 .wdtab .wdtab__nav-btn.active, .section__creatorhub-outer-s2 .wdtab .wdtab__nav-btn.focus-visible, .section__creatorhub-outer-s2 .wdtab .wdtab__nav-btn:hover { color: #fff; outline: 0; border-color: #9ecaed; box-shadow: 0 0 12px #9ecaed; background-color: rgba(255, 255, 255, .15) } .section__creatorhub-outer-s3 { position: relative; overflow: hidden } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay { z-index: 10 } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { stroke: transparent; fill: transparent } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s3 .wdtab__nav { z-index: 10; background-color: transparent } .section__creatorhub-outer-s3 .wdtab__nav::before { display: none } .section__creatorhub-outer-s3 .wdtab__nav .wdtab__nav-btn { margin: 0 20px; padding: 11px 0; color: grey; border: 2px solid grey; border-radius: 40px } .section__creatorhub-outer-s3 .wdtab__nav .wdtab__nav-btn::before { display: none } .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn.active, .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn.focus-visible, .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn:hover { color: #fff; outline: 0; border-color: #9ecaed; background-color: rgba(255, 255, 255, .15); box-shadow: 0 0 12px #9ecaed } .section__creatorhub-outer-s3 .wdtab .wdtab__panel__item { position: relative; transition: opacity 1s ease 0s; transition-delay: .8s } .section__creatorhub-outer-s3 .wdtab .wdtab__panel__item.active { transition-delay: 0s } .section__creatorhub-outer-s3 .wdtab .slick-info { position: relative; z-index: 2; margin: 0 auto; padding-bottom: 50px; width: 90%; max-width: 800px; color: #fff } .section__creatorhub-outer-s3 .wdtab .slick-info .slick-info-text { font-size: 18px text-align: center; line-height: 1.5 } .section__creatorhub-outer-s3 .wdtab .slick-image { overflow: visible; top: 0; left: 50%; margin: 0; margin-top: 0; width: 2560px; height: 714px; transform: translateX(-50%) } .section__creatorhub-outer-s3 .wdtab .img-slick { left: 50%; margin-left: -1280px; width: 2560px; height: 714px; position: absolute; z-index: 3; top: 0; background-color: #fff } /* #CMD .section__creatorhub-outer-s3 .img-slick { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s3/pd.jpg) } #CMD .section__creatorhub-outer-s3 .img-slick { mask: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s3/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s3/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s3/pd.jpg) } #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { mask: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s3/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s3/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } */ .section__creatorhub-outer-s3 .wdtab .bigScreen { position: absolute; z-index: 2; top: 147px; width: 100%; height: 264px; background-color: rgba(0, 0, 0, .5) } .section__creatorhub-outer-s3 .wdtab .smallScreen { position: absolute; bottom: 0; width: 100%; height: 253px; background: #000; background-size: contain } #wdTab-screenpad-0 .nav__icon { -webkit-mask-image: url(../images_1/icon0.png); mask-image: url(../images_1/icon0.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-1 .nav__icon { -webkit-mask-image: url(../images_1/icon1.png); mask-image: url(../images_1/icon1.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-2 .nav__icon { -webkit-mask-image: url(../images_1/icon2.png); mask-image: url(../images_1/icon2.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-3 .nav__icon { -webkit-mask-image: url(../images_1/icon3.png); mask-image: url(../images_1/icon3.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-4 .nav__icon { -webkit-mask-image: url(../images_1/icon4.png); mask-image: url(../images_1/icon4.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-5 .nav__icon { -webkit-mask-image: url(../images_1/icon5.png); mask-image: url(../images_1/icon5.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-6 .nav__icon { -webkit-mask-image: url(../images_1/icon6.png); mask-image: url(../images_1/icon6.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-7 .nav__icon { -webkit-mask-image: url(../images_1/icon7.png); mask-image: url(../images_1/icon7.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } #wdTab-screenpad-8 .nav__icon { -webkit-mask-image: url(../images_1/icon8.png); mask-image: url(../images_1/icon8.png); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; mask-position: center; mask-repeat: no-repeat } .section__creatorhub-outer-s4 { overflow: hidden; margin-top: 0; padding-top: 0 } .section__creatorhub-outer-s4 .wdtab { margin: 63px auto 0; margin-top: 620px; padding-bottom: 0; width: 100%; max-width: 1128px; min-height: 438px } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay { z-index: 10 } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { fill: transparent; stroke: transparent } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg-line { fill: #fff; stroke: #fff } .section__creatorhub-outer-s4 .wdtab .wd__play__btn.wdtab__autoPlay .svg-triangle .triangle { fill: #fff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav { z-index: 10; padding-top: 40px; background-color: transparent } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container { position: relative; z-index: 3 } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__icon { margin: 0 auto; width: 80px; height: 80px; pointer-events: none; background-color: #fff; background-size: contain } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__text { text-transform: none !important; padding-top: 9px; padding-bottom: 17px; color: #fff; pointer-events: none; line-height: 1.2 } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn::before { display: block; position: absolute; bottom: -5px; left: calc(50% - 5.5px); width: 10px; height: 10px; border: 1px solid #fff; border-radius: 20px; background-color: #000; transform: none !important; transition: all .3s ease; content: "" } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active::before, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.focus-visible::before, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn:hover::before { border-color: #7e57ff; background-color: #7e57ff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active .nav__icon, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.focus-visible .nav__icon, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn:hover .nav__icon { background-color: #7e57ff } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.active .nav__text, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn.focus-visible .nav__text, .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn:hover .nav__text { color: #7e57ff } .section__creatorhub-outer-s4 .wdtab .wdtab__panel { overflow: visible; z-index: 1 } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item { position: relative; transition: opacity 1s ease 0s; transition-delay: .8s } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item.active { transition-delay: 0s } .section__creatorhub-outer-s4 .wdtab .slick-info { margin: 0 auto; padding-bottom: 100px; width: 90%; max-width: 800px; color: #fff } .section__creatorhub-outer-s4 .wdtab .slick-info .slick-info-text { position: relative; z-index: 3; line-height: 1.5 } .section__creatorhub-outer-s4 .wdtab .slick-info::before { display: block; position: absolute; z-index: 1; top: -190px; left: 50%; margin-left: -720px; width: 1440px; height: calc(100% + 132px); background: linear-gradient(to left, rgba(25, 35, 52, 0) 0, rgba(25, 35, 52, .87) 15%, rgba(25, 35, 52, .87) 85%, rgba(25, 35, 52, 0) 100%); content: "" } .section__creatorhub-outer-s4 .wdtab .slick-image { position: absolute !important; overflow: visible; z-index: -1; top: -920px; left: 50%; margin: 0; margin-top: 0; width: 2560px; height: 1200px; transform: translateX(-50%) } .section__creatorhub-outer-s4 .wdtab .img-slick { left: 50%; margin-left: -1280px; width: 2560px; height: 1200px; position: absolute; z-index: 9; top: unset; bottom: 0; background-color: #fff } #CMD .section__creatorhub-outer-s4 .img-slick { background-image: url(../images_1/pd.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { background-image: url(../images_1/pd.jpg) } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4 .img-slick-1 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-1 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4 .img-slick-2 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-2 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__creatorhub-outer-s4 .wdtab .bigScreen { position: absolute; z-index: 3; top: 147px; width: 100%; height: 260px; background: #000 } .section__creatorhub-outer-s4 .wdtab .smallScreen { position: absolute; bottom: 500px; width: 100%; height: 253px; background: #000; background-size: contain } .section__creatorhub-outer-s4 .wdtab .monitorScreen { position: absolute; top: 199px; left: 1280px; width: 1060px; height: 329px; background: #000 } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .bigScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .bigScreen { top: 376px; left: 669px; width: 560px; height: 160px } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .smallScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .smallScreen { top: 558px; left: 731px; width: 495px; height: 148px } .creatorhub-outer .wd__content .content__slogan { color: #888a8c } .creatorhub-outer .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .creatorhub-outer .wd__content .content__info { color: #fff } .creatorhub-outer sup.sign-deg, .creatorhub-outer sup.sign-reg, .creatorhub-outer sup.sign-star, .creatorhub-outer sup.sign-tm { color: #fff } .creatorhub-outer .wdtab .wdtab__autoPlay { opacity: .5 !important } .creatorhub-outer .wdtab .wdtab__autoPlay:hover { opacity: 1 !important } .creatorhub-outer .tab__video_control .tab__video_control_button { position: relative; cursor: pointer; opacity: 0; padding: 0; width: 36px; height: 36px; border-width: 0; background-color: transparent } .creatorhub-outer .tab__video_control .tab__video_control_button svg { opacity: .5 } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-circle, .creatorhub-outer .tab__video_control .tab__video_control_button .svg-line { stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; fill-rule: evenodd } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-circle { fill: transparent; stroke: #fff } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-line { fill: #fff; stroke: #fff } .creatorhub-outer .tab__video_control .tab__video_control_button .svg-triangle { opacity: 0; fill: #fff } .creatorhub-outer .tab__video_control .tab__video_control_button.show { opacity: 1 } .creatorhub-outer .tab__video_control .tab__video_control_button.resume .svg-line { opacity: 0 } .creatorhub-outer .tab__video_control .tab__video_control_button.resume .svg-triangle { opacity: 1 } .creatorhub-outer .tab__video_control .tab__video_control_button:hover svg { opacity: 1 } .section__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_1/blockimg_1_k.jpg) } .section__security-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_k.jpg) } .section__security-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3_k.jpg) } .section__security-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images_1/blockimg_4_k.jpg) } .section__security-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images_1/blockimg_5_k.jpg) } .section__security-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images_1/blockimg_6_k.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_1/img1_s1.jpg) } .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-2 { background-image: url(../images_1/img2_s1.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_1/img1_s2.jpg) } .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-2 { background-image: url(../images_1/img2_s2.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_1/main_s1.jpg) } .section__software-outer-s1 .img__main { background-image: url(../images_1/main_s1.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_1/icon1-0_s1.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon1 { background-image: url(../images_1/icon1-1_s1.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon2 { background-image: url(../images_1/icon1-2_s1.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon3 { background-image: url(../images_1/icon1-3_s1.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon4 { background-image: url(../images_1/icon1-4_s1.png) } #CMD .section__software-outer-s1 .software-info1 .img__icon5 { background-image: url(../images_1/icon1-5_s1.png) } /*#CMD .section__software-outer-s1 .software-info1 .img__icon6 { background-image: url(../images_1/icon1-6_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info1 .img__icon7 { background-image: url(../images_1/icon1-7_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info1 .img__icon8 { background-image: url(../images_1/icon1-8_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info1 .img__icon9 { background-image: url(../images_1/icon1-9_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info1 .img__icon10 { background-image: url(../images_1/icon1-10_s1.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_1/icon2-0_s1.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_1/icon2-1_s1.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_1/icon2-2_s1.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_1/icon2-3_s1.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_1/icon2-4_s1.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_1/icon2-5_s1.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_1/icon2-6_s1.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_1/icon3-0_s1.png) } /*#CMD .section__software-outer-s1 .software-info3 .img__icon1 { background-image: url(../images_1/icon3-1_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info3 .img__icon2 { background-image: url(../images_1/icon3-2_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info3 .img__icon3 { background-image: url(../images_1/icon3-3_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info3 .img__icon4 { background-image: url(../images_1/icon3-4_s1.png) }*/ /*#CMD .section__software-outer-s1 .software-info3 .img__icon5 { background-image: url(../images_1/icon3-5_s1.png) }*/ .section__spatialVision-outer-s1 { overflow: hidden; background-color: #000 } .section__spatialVision-outer-s1 .image_container { position: relative; left: 50%; margin-top: 22px; margin-left: -1280px; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .image_container .ani_enter_detect { top: 50% } .section__spatialVision-outer-s1 .image_container .img__bg { position: absolute !important; top: 0; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .image_container .img__explode_back { position: absolute !important; top: 0; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .image_container .img__explode { position: absolute !important; top: 0; width: 2560px; height: 830px; /* mask: url(../images_1/explode_mask.png); */ mask-position: center; mask-size: contain; /* -webkit-mask-image: url(../images_1/explode_mask.png); */ -webkit-mask-position: top; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat } .section__spatialVision-outer-s1 .image_container .img__explode_1 { position: absolute !important; z-index: 2; top: -1px; left: 50%; margin-left: -285px; width: 1008px; height: 710px } /* .section__spatialVision-outer-s1 .img__explode_1 { background-image: url(../images_1/explode_1.jpg) } */ .section__spatialVision-outer-s1 .img__explode_1 { /* mask: url(../images_1/explode_1_mask.png); */ mask-position: center; mask-size: contain; /* -webkit-mask-image: url(../images_1/explode_1_mask.png); */ -webkit-mask-position: center; -webkit-mask-size: contain } .section__spatialVision-outer-s1 .image_container .img__explode_2 { position: absolute !important; z-index: 4; top: 49px; left: 50%; margin-left: 18px; width: 704px; height: 642px } /* .section__spatialVision-outer-s1 .img__explode_2 { background-image: url(../images_1/explode_2.jpg) } */ .section__spatialVision-outer-s1 .img__explode_2 { /* mask: url(../images_1/explode_2_mask.png); */ mask-position: center; mask-size: contain; /* -webkit-mask-image: url(../images_1/explode_2_mask.png); */ -webkit-mask-position: center; -webkit-mask-size: contain } .section__spatialVision-outer-s1 .image_container .img__explode_3 { position: absolute !important; z-index: 3; top: 36px; left: 50%; margin-left: -50px; width: 781px; height: 673px } /* .section__spatialVision-outer-s1 .img__explode_3 { background-image: url(../images_1/explode_3.jpg) } */ .section__spatialVision-outer-s1 .img__explode_3 { /* mask: url(../images_1/explode_3_mask.png); */ mask-position: center; mask-size: contain; /* -webkit-mask-image: url(../images_1/explode_3_mask.png); */ -webkit-mask-position: center; -webkit-mask-size: contain } .section__spatialVision-outer-s1 .image_container .img__shadow { position: absolute !important; z-index: 1; top: 0; width: 2560px; height: 830px } .section__spatialVision-outer-s1 .img__shadow { background-image: url(../images_1/shadow.png) } .section__spatialVision-outer-s1 .wd__feature__list { display: flex; justify-content: center; margin-top: -30px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon { margin: 0 11px 40px; padding: 56px 32px; width: 366px; border-radius: 20px; background-image: linear-gradient(125deg, #042736, #1c0e2d) } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top { display: block; margin-bottom: 23px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top .img__icon { margin: 0 auto; width: 126px; height: 91px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { font-size: 38px; line-height: 1.2; background-image: linear-gradient(to right, #174d71, #318092 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data * { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #318092, #318092 90%) } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: 8px; line-height: 1.5; max-width: 280px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe, .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe * { color: #fff; font-size: 20px } .section__spatialVision-outer-s1 .wd__feature .img__icon1 { background-image: url(../images_1/icon_glassesFree.png) } .section__spatialVision-outer-s1 .wd__feature .img__icon2 { background-image: url(../images_1/icon_crosstalk.png) } .section__spatialVision-outer-s1 .wd__feature .img__icon3 { background-image: url(../images_1/icon_switch.png) } .section__spatialVision-outer-s1 .img__explode_back { opacity: 0; transition: opacity 0s } .section__spatialVision-outer-s1 .img__explode_1 { opacity: 0; transform: scale(.8); transition: transform 0s, opacity 0s; transform-origin: right 60% } .section__spatialVision-outer-s1 .img__explode_2 { opacity: 0; transform: scale(.7) rotate(5deg); transition: transform 0s, opacity 0s; transform-origin: 70% 50% } .section__spatialVision-outer-s1 .img__explode_3 { opacity: 0; transform: scale(.8); transition: transform 0s, opacity 0s; transform-origin: 47% 89% } .section__spatialVision-outer-s1 .img__shadow { opacity: 0; transform: translate(30px); transition: transform 0s, opacity 0s; transform-origin: right 60% } .section__spatialVision-outer-s1 .image_container.playAni .img__explode_back { opacity: 1; transition: opacity .2s linear .3s } .section__spatialVision-outer-s1 .image_container.playAni .img__explode_1 { opacity: 1; transform: scale(1); transition: transform .5s cubic-bezier(.04, 0, .08, .96) 470ms, opacity .2s linear 450ms } .section__spatialVision-outer-s1 .image_container.playAni .img__shadow { opacity: 1; transform: translate(0); transition: transform 2s cubic-bezier(.04, 0, .08, .96) .5s, opacity .2s linear 450ms } .section__spatialVision-outer-s2 { overflow: hidden; background-color: #000 } .section__spatialVision-outer-s2 .category_container { display: flex; position: relative; z-index: 20; justify-content: space-between; margin: 0 auto; margin-top: 62px; width: 1140px } .section__spatialVision-outer-s2 .category_container .category-item { width: 216px } .section__spatialVision-outer-s2 .category_container .category-item-2 { margin-top: 58px } .section__spatialVision-outer-s2 .category_container .category-item-3 { margin-top: 22px } .section__spatialVision-outer-s2 .category_container .category-item-4 { margin-top: 82px } .section__spatialVision-outer-s2 .category_container .category-item-5 { margin-top: 22px } .section__spatialVision-outer-s2 .category_container .wd__content { padding-left: 16px } .section__spatialVision-outer-s2 .category_container .wd__content::before { display: block; position: absolute; top: 5px; left: 0; width: 1px; height: calc(100% - 13px); background-color: #848484; content: "" } .section__spatialVision-outer-s2 .category_container .wd__content .content__title { font-size: 1.5625rem } .section__spatialVision-outer-s2 .category_container .wd__content .content__info { margin-top: 5px; color: #848484; font-size: 16px; } .section__spatialVision-outer-s2 .category_container .category_img { margin-top: 16px; width: 216px; height: 250px; border-radius: 20px } .section__spatialVision-outer-s2 .category_container .category-item-1 .category_img_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg1_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-1 .category_img_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg1_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-2 .category_img_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg2_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-2 .category_img_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg2_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-3 .category_img_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg3_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-3 .category_img_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg3_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-4 .category_img_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg4_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-4 .category_img_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg4_2.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-5 .category_img_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg5_1.jpg) } .section__spatialVision-outer-s2 .category_container .category-item-5 .category_img_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s2/blockimg5_2.jpg) } .section__spatialVision-outer-s3 { z-index: 10; background-color: #000 } .section__spatialVision-outer-s3 .imgAni { position: relative } .section__spatialVision-outer-s3 .image_container { position: relative; overflow: hidden; margin-top: -913px } .section__spatialVision-outer-s3 .image_container .ani_enter_detect { top: 50% } .section__spatialVision-outer-s3 .image_container .img_bg { left: 50%; margin-left: -1280px; width: 2560px; height: 1204px } .section__spatialVision-outer-s3 .image_container .img_3d_left { position: absolute !important; top: 0; left: 50%; margin-left: -1280px; width: 2560px; height: 1204px } .section__spatialVision-outer-s3 .image_container .img_3d_right { position: absolute !important; top: 0; left: 50%; margin-left: -1280px; width: 2560px; height: 1204px } .section__spatialVision-outer-s3 .image_container .img_ani_text { position: absolute; top: 679px; left: 50%; width: 50px; color: #fff; font-size: 1.4375rem } .section__spatialVision-outer-s3 .image_container .img_ani_text_left { margin-left: 140px } .section__spatialVision-outer-s3 .image_container .img_ani_text_right { margin-left: 265px } .section__spatialVision-outer-s3 .info_box { position: absolute; z-index: 10; top: 933px; left: 50%; margin-left: -62px; padding: 21px 20px 20px 30px; border: 1px solid #fff } .section__spatialVision-outer-s3 .info_box .text_right::before { display: block; position: absolute; top: 15px; left: 16px; width: 10px; height: 31px; background-color: #006cff; content: "" } .section__spatialVision-outer-s3 .info_box .text_left::before { display: block; position: absolute; top: 46px; left: 16px; width: 10px; height: 31px; background-color: #00ffea; content: "" } .section__spatialVision-outer-s3 .info_box .info_text { padding-left: 7px; color: #fff; font-size: .96875rem; text-align: left; line-height: 1.4 } .section__spatialVision-outer-s3 .info_box .info_text_right { padding-bottom: 8px } .section__spatialVision-outer-s3 .img_3d_left { opacity: 0 } .section__spatialVision-outer-s3 .img_3d_right { opacity: 0 } .section__spatialVision-outer-s3 .img_ani_text_left, .section__spatialVision-outer-s3 .img_ani_text_right { opacity: 0 } .section__spatialVision-outer-s3 .image_container.playAni .img_3d_left, .section__spatialVision-outer-s3 .image_container.playAni .img_ani_text_left { opacity: 1; transition: opacity .2s linear 1s } .section__spatialVision-outer-s3 .image_container.playAni .img_3d_right, .section__spatialVision-outer-s3 .image_container.playAni .img_ani_text_right { opacity: 1; transition: opacity .2s linear 2s } .section__spatialVision-outer-s4 { overflow: hidden; background-color: #000 } .section__spatialVision-outer-s4 .nav_container { margin: 62px auto 0; width: 820px } .section__spatialVision-outer-s4 .nav_container .home { margin: 0 auto; width: 380px } .section__spatialVision-outer-s4 .nav_container .home .icon_home { margin: 0 auto; width: 93px; height: 100px } /*.section__spatialVision-outer-s4 .icon_home { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/icon_3DHub.png) }*/ .section__spatialVision-outer-s4 .nav_container .home .text__ttnormal { margin-top: 17px; color: #fff; font-size: 26px } .section__spatialVision-outer-s4 .nav_container .icon_line { margin: 30px auto 0; width: 647px; height: 26px; background-size: contain } /*.section__spatialVision-outer-s4 .icon_line { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/icon_line.png) }*/ .section__spatialVision-outer-s4 .nav_container .child_container { display: flex; justify-content: space-between; margin-top: 25px } .section__spatialVision-outer-s4 .nav_container .child_container .child_item { width: 170px } .section__spatialVision-outer-s4 .nav_container .child_container .child_icon { margin: 0 auto 12px; width: 110px; height: 106px } /*.section__spatialVision-outer-s4 .child_container .child_item_1 .icon_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/icon_1.png) } .section__spatialVision-outer-s4 .child_container .child_item_2 .icon_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/icon_2.png) } .section__spatialVision-outer-s4 .child_container .child_item_3 .icon_3 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/icon_3.png) } .section__spatialVision-outer-s4 .child_container .child_item_4 .icon_4 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/icon_4.png) }*/ .section__spatialVision-outer-s4 .nav_container .child_container .nav_text { color: #fff; font-size: 26px } .section__spatialVision-outer-s4 .carousel_container { margin: 80px auto 0; width: 1260px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box { overflow: hidden; width: 454px; border-radius: 40px; box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .8784313725); background-image: linear-gradient(125deg, #042736, #1c0e2d) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content { padding: 51px 30px 30px; min-height: 238px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__title { font-size: 38px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__info { margin-top: 6px } .section__spatialVision-outer-s4 .carousel_container .carousel_img { width: 454px; height: 363px } /*.section__spatialVision-outer-s4 .carousel_container .carousel-item-1 .carousel_img_1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/card_1.jpg) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-2 .carousel_img_2 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/card_2.jpg) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-3 .carousel_img_3 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/card_3.jpg) } .section__spatialVision-outer-s4 .carousel_container .carousel-item-4 .carousel_img_4 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/spatialVision/images/outer/large/1x/s4/card_4.jpg) }*/ .section__spatialVision-outer-s4 .slick-list { overflow: initial } .section__spatialVision-outer-s4 .slick-track { transition: all .1s linear 0s } .section__spatialVision-outer-s4 .slick-slide { position: relative; cursor: pointer; margin-right: -30px; margin-left: -30px; width: 454px !important } .section__spatialVision-outer-s4 .slick-center { z-index: 4 } .section__spatialVision-outer-s4 .level-1 { z-index: 3; transform: scale(.9) } .section__spatialVision-outer-s4 .level-2 { z-index: 2; margin-right: -50px; margin-left: -50px; transform: scale(.8) } .section__spatialVision-outer-s4 .level-3 { z-index: 1; margin-right: -70px; margin-left: -70px; transform: scale(.7) } .spatialVision-outer .wd__content .content__slogan { color: #737778 } .spatialVision-outer .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .spatialVision-outer .wd__content .content__info { color: #fff } .spatialVision-outer .wd__content .content__title .footnote-num a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #318092, #318092 90%) } .spatialVision-inner { background-color: #000 } .spatialVision-inner .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .spatialVision-inner .wd__content .content__info { color: #fff } .spatialVision-inner .wd__content .content__link { color: #fff } .modal-inner__sectionsSpatialVision { background-color: #000 } .section__userexperience-outer-s1 { overflow: hidden; padding-top: 80px; padding-bottom: 90px; background-color: #e9eef2 } .section__userexperience-outer-s1 .wd__content .content__info { color: #181818 } .section__userexperience-outer-s1 .wd__content .content__link { color: #181818 } .section__userexperience-outer-s1 .wdblockimg .block-1 .img__bg { background-image: url(../images_1/blockimg_1_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-4 .img__bg { background-image: url(../images_1/blockimg_4_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-5 .img__bg { background-image: url(../images_1/blockimg_5_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-6 .img__bg { background-image: url(../images_1/blockimg_6_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-7 .img__bg { background-image: url(../images_1/blockimg_7_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-8 .img__bg { background-image: url(../images_1/blockimg_8_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-9 .img__bg { background-image: url(../images_1/blockimg_9_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-10 .img__bg { background-image: url(../images_1/blockimg_10_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-11 .img__bg { background-image: url(../images_1/blockimg_11_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-12 .img__bg { background-image: url(../images_1/blockimg_12_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-13 .img__bg { background-image: url(../images_1/blockimg_13_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-14 .img__bg { background-image: url(../images_1/blockimg_14_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-15 .img__bg { background-image: url(../images_1/blockimg_15_1.jpg) } .section__userexperience-outer-s1 .wdblockimg .block-16 .img__bg { background-image: url(../images_1/blockimg_16_1.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_1/img1_s1.jpg) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-2 { background-image: url(../images_1/img2_s1.jpg) } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-3 { background-image: url(../images_1/img3_s1.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_1/img1.jpg) } .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-2 { background-image: url(../images_1/img2.jpg) } .section__userExperience-inner-s3 { padding-top: 160px; padding-bottom: 100px; background: #0e111b } .section__userExperience-inner-s3 .wd__content { margin: 0 auto } .section__userExperience-inner-s3 .wd__content .content__info { color: #fff } .section__userExperience-inner-s3 .wd__content .content__link { color: #fff } .section__userExperience-inner-s3 .wdtab { margin-top: 64px } .section__userExperience-inner-s3 .wdtab__nav { background-color: transparent } .section__userExperience-inner-s3 .wdtab__nav-btn { font-size: 1.875rem } .section__userExperience-inner-s3 .wdtab__nav-btn.active, .section__userExperience-inner-s3 .wdtab__nav-btn.focus-visible, .section__userExperience-inner-s3 .wdtab__nav-btn:focus { color: #fff } .section__userExperience-inner-s3 .wdtab__nav-btn.active::before, .section__userExperience-inner-s3 .wdtab__nav-btn.focus-visible::before, .section__userExperience-inner-s3 .wdtab__nav-btn:focus::before { background-image: linear-gradient(to right, #9ddaff, #6994ff 100%) } .section__userExperience-inner-s3 .wdtab__panel { padding-top: 0; min-height: 754px } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay { margin-left: 535px } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .svg-circle { fill: transparent } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play, .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play * { stroke: #fff } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay .svg_button_play .triangle { fill: #fff } .section__userExperience-inner-s3 .img_containter { position: relative; overflow: hidden; margin: 0 auto; width: 1144px; height: 596px; border-radius: 20px } .section__userExperience-inner-s3 .img_containter>img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__userExperience-inner-s3 .slider_step__containter { position: relative; margin: 60px auto 50px; width: 340px } .section__userExperience-inner-s3 .slider_step__containter .step_icon { position: absolute; top: 50%; background-size: contain; transform: translateY(-50%) } .section__userExperience-inner-s3 .slider_step__containter .beer-range::-webkit-slider-thumb { width: 30px } .section__userExperience-inner-s3 .slider_step__containter .beer-slider { position: relative; overflow: initial; margin-right: auto; margin-left: auto; box-sizing: border-box; width: 240px; height: 2px; height: 2px; font-size: 0; background-color: #fff } .section__userExperience-inner-s3 .slider_step__containter .beer-slider-2 { background-image: linear-gradient(to right, #ff4d00, #ffa839, #fff, #a6ddfc, #0083ff 100%) } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-range { left: -15px; opacity: 0; margin-top: -25px; width: calc(100% + 30px); height: 50px } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .img { display: none } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-handle { top: calc(50% - 15px); width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; background: #0e111b } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-handle::before { display: none } .section__userExperience-inner-s3 .slider_step__containter .beer-slider .beer-handle::after { top: 2px; left: 2px; width: 22px; height: 22px; background-image: linear-gradient(to right, #9ddaff, #6994ff 100%) } .section__userExperience-inner-s3 .step_icon.dark { left: 5px; width: 25px; height: 25px } #CMD .section__userExperience-inner-s3 .slider_step__containter .step_icon.dark { background-image: url(../images_1/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_1/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_1/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_1/slider_icon_cloud.png) } #CMD .section__userExperience-inner-s3 .img__inner3__1_dark { background-image: url(../images_1/ani_dark.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_light { background-image: url(../images_1/ani_light.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_warm { background-image: url(../images_1/ani_warm.jpg) } #CMD .section__userExperience-inner-s3 .img__inner3__1_cool { background-image: url(../images_1/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_1/blockimg_1_s4.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_s4.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3_s4.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-4 .img__bg { background-image: url(../images_1/blockimg_4_s4.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-5 .img__bg { background-image: url(../images_1/blockimg_5_s4.jpg) } .section__userExperience-inner-s4 .wdblockimg .block-6 .img__bg { background-image: url(../images_1/blockimg_6_s4.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_1/blockimg_6_s4.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_1/blockimg_6_s4.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_1/plays5.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_1/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_1/blockimg_1_s6.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-2 .img__bg { background-image: url(../images_1/blockimg_2_s6.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-3 .img__bg { background-image: url(../images_1/blockimg_3_s6.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-4 .img__bg { background-image: url(../images_1/blockimg_4_s6.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-5 .img__bg { background-image: url(../images_1/blockimg_5_s6.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-6 .img__bg { background-image: url(../images_1/blockimg_6_s6.jpg) } .section__userExperience-inner-s6 .wdblockimg .block-7 .img__bg { background-image: url(../images_1/blockimg_7_s6.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_1/img1_s8.jpg) } .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-2 { background-image: url(../images_1/img2_s8.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_1/icon01_s9.svg) no-repeat 50% 50%; mask: url(../images_1/icon01_s9.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-1 .nav_icon { -webkit-mask: url(../images_1/icon02_s9.svg) no-repeat 50% 50%; mask: url(../images_1/icon02_s9.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-2 .nav_icon { -webkit-mask: url(../images_1/icon03_s9.svg) no-repeat 50% 50%; mask: url(../images_1/icon03_s9.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-3 .nav_icon { -webkit-mask: url(../images_1/icon04_s9.svg) no-repeat 50% 50%; mask: url(../images_1/icon04_s9.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-4 .nav_icon { -webkit-mask: url(../images_1/icon05_s9.svg) no-repeat 50% 50%; mask: url(../images_1/icon05_s9.svg) no-repeat 50% 50% } #wdTab-userExperience-s9-tabnav-5 .nav_icon { -webkit-mask: url(../images_1/icon06_s9.svg) no-repeat 50% 50%; mask: url(../images_1/icon06_s9.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 } .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_1/step0.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_1/empty.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_1/ani80f.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_1/ani80.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_1/ani100.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_1/clock.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__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, .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, .section__aiCopilot-outer-s1 .slick-list .slick-slide:focus::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 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; outline: 2px solid transparent !important; 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::after { display: block; position: absolute; top: 0; left: 50%; width: 100%; height: calc(100% - 2px); border: 1px solid transparent; transform: translate(-50%); 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 button.js-focus-visible::after, .section__aiCopilot-outer-s1 .slick-dots li button:focus-visible::after { border-color: #248dff } .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; padding: 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-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 .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_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 } .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% } section { position: relative } section.is-hidden { display: none } section.is-hidden * { background-image: none !important } section .sectionnNavPosition { transform: none !important; transition: all 0s } section .row .col[class*=pull-], section .row .col[class*=push-] { position: relative } section .always__on__top { position: relative; z-index: 888 } section .no__wrap { display: inline-block; white-space: nowrap } section .slick-dots li { margin-right: 10px; margin-left: 10px } section .slick-dots li button::before { color: #1c1b19; font-size: 41px } section .slick-dots li button:hover::before { color: #1c1b19 } section .detect-point-out { position: absolute; top: 0; left: 50%; width: 1px; height: 100% } section .detect-point-enter { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px } section .large_use, section .medium_use, section .small_use { display: none } section .hide { position: absolute; opacity: 0; height: 0 } section .ani_enter_detect { position: absolute; z-index: 99; left: 50%; width: 10px; height: 10px } .outer-view { background-color: #f4f4f4 } .wd__content .content__slogan { color: #595959 } .wd__content .content__title { margin-top: 9px; color: #318092; background-image: linear-gradient(to right, #174d71, #318092 90%) } .wd__content .content__info { margin-top: 4px; color: #181818 } .wd__content .content__title sup { background-image: linear-gradient(to right, #174d71, #318092 90%) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important } .wd__content .content__title sup.footnote-num { -webkit-text-fill-color: initial !important; background-image: none !important; background-color: rgba(0, 0, 0, 0) } .wd__feature__list .wd__feature .wd__feature__data { color: #318092; background-image: linear-gradient(to right, #174d71, #318092 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe *, .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #595959 } section .modal-button-container .modal-button { background-color: rgba(0, 0, 0, 0); color: #b95000; border-color: #b95000 } section .modal-button-container .modal-button:hover { background-color: rgba(0, 0, 0, 0); color: rgba(185, 80, 0, .8); border-color: rgba(185, 80, 0, .6) } section .modal-button-container.theme-black .modal-button { background-color: #000; color: #000; border-color: #000 } section .modal-button-container.theme-black .modal-button:hover { background-color: #000; color: rgba(0, 0, 0, .8); border-color: rgba(0, 0, 0, .6) } section .sectionnNavPosition { position: relative; z-index: 1; top: -140px; opacity: 1; width: 100%; height: 1px } #CMD .svgDefs { position: absolute; overflow: hidden; z-index: -1; top: 0; left: 0; opacity: 0; height: 0 } .wd__section .video_control { display: block; position: absolute; z-index: 9; top: 0; left: 0; width: 100% } .wd__section .video_control .video_control-button { position: absolute; top: -50px; left: 50%; transform: translateX(-50%) } #CMD .video_control-button { z-index: 9; cursor: pointer; opacity: 0; margin-bottom: 36px; width: 36px; height: 36px; border-width: 0; background-color: transparent; transition: opacity .3s ease } #CMD .video_control-button.show { opacity: 1 } #CMD .video_control-button.pause { background-image: url(../images_1/icon_pause.svg) } #CMD .video_control-button.resume { background-image: url(../images_1/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.theme-white .wd__content .content__slogan { color: #545454 } section.theme-white .wd__content .content__info, section.theme-white .wd__content .content__info * { color: #181818 } section.theme-white .wd__content .content__info.wd__link__arrow::after { color: #181818 } section.theme-white .wd__content .content__info:hover span { color: #181818 } section.theme-white .wd__content .content__info:hover.wd__link__arrow::after { color: #181818 } section.theme-white .wd__feature__list .wd__feature .wd__feature__data, section.theme-white .wd__feature__list .wd__feature .wd__feature__data *, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe *, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe__top, section.theme-white .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #050505 } section.theme-black .wd__content .content__slogan { color: #fff } section.theme-black .wd__content .content__title { background-image: linear-gradient(to right, #fff, #fff 100%) } section.theme-black .wd__content .content__info { color: #fff } section.theme-black .wd__content .content__comment { color: #fff } section.theme-black .wd__content .content__title, section.theme-black .wd__content .content__title * { color: #fff; background-image: linear-gradient(to right, #fff, #fff 100%) } section.theme-black .wd__content .content__link, section.theme-black .wd__content .content__link * { color: #fff } section.theme-black .wd__content .content__link.wd__link__arrow::after { color: #fff } section.theme-black .wd__content .content__link:hover span { color: #fff; border-bottom: 1px solid #fff } section.theme-black .wd__content .content__link:hover.wd__link__arrow::after { color: #fff } section.theme-black .wd__feature__list .wd__feature .wd__feature__data, section.theme-black .wd__feature__list .wd__feature .wd__feature__data *, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe *, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe__top, section.theme-black .wd__feature__list .wd__feature .wd__feature__describe__top * { color: #fff } section .audioDolby-inner { background-color: unset !important } section.section__wdvideos { background-color: #f5f5f5 } #CMD section .wdblockimg .block .modal-button-container .modal-button { border-color: transparent !important } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button { background: linear-gradient(to right, #d1c3ff, #d1c3ff) } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button span { background-image: linear-gradient(to right, #d1c3ff, #d1c3ff) } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button::before { background-color: #fff } #CMD section .wdblockimg .block.theme-white .modal-button-container .modal-button:hover::before { background-color: #2a1766 } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button { background: linear-gradient(to right, #2a1766, #2a1766) } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button span { background-image: linear-gradient(to right, #2a1766, #2a1766) } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button::before { background-color: #000 } #CMD section .wdblockimg .block.theme-black .modal-button-container .modal-button:hover::before { background-color: #d1c3ff } .section-media-top { display: block; position: relative; background-color: #f5f5f5 } #CMD { background-color: #fff } section .modal-button-container .modal-button { border-width: 2px; border-color: #174d71; border: 1px solid #174d71; background-color: #174d71; color: #fff; font-size: 20px } section .modal-button-container .modal-button:hover { opacity: .8; background-color: #fff; border-color: #174d71; color: #174d71 } section .wdblockimg .block.theme-white { color: #404040 } section .wdblockimg .block.theme-white .ai__noise__container { --themecolor-main: 23, 77, 113; --themecolor-middle: 64, 64, 64; --themecolor-filter: 23, 77, 113 } section .wdblockimg .block.theme-white .ai__noise__container .noise_desc { color: #666 } section .wdblockimg .block.theme-white .ai__noise__container .img__noise .img__voice { --voice-start: #174d71; --voice-end: #318092; --voice-bgcolor: #E3DFD8 } section .wdblockimg .block.theme-white .ai__noise__container .img__icon { --img-icon-base-color: black; --img-icon-bg-color: #fff } section .wdblockimg .block.theme-black { color: #fff } section .wdblockimg .block.theme-black .ai__noise__container { --themecolor-main: 154, 122, 89; --themecolor-middle: 109, 109, 109; --themecolor-filter: 223, 201, 169 } section .wdblockimg .block.theme-black .ai__noise__container .noise_desc { color: #999 } section .wdblockimg .block.theme-black .ai__noise__container .img__noise .img__voice { --voice-start: #dfc9a9; --voice-end: #9a7a59; --voice-bgcolor: #000 } section .wdblockimg .block.theme-black .ai__noise__container .img__icon { --img-icon-base-color: #fff; --img-icon-bg-color: #000 } section .modal-button-container .modal-button { padding: 13px 20px } .section__pdc { z-index: 1; margin-bottom: -1px; background-color: #f4f4f4 } .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_gallery .gallery-container .part-1 .container-tools .tools .tool-magnifier { background-color: #fff !important } .section__pdc .product_gallery.theme-white .gallery-container .part-2 { background-color: #fff !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: #fff } .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: #fff } .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: #fff } @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: #fff } } .section__pdc .active::nth-last-child(1) { margin-bottom: 0 } .section__pdc.section__pdc-top { z-index: 9 } @media all and (min-width:1280px) { .section__pdc.section__pdc-top .pdc-space-start { margin-top: 0; padding-top: 114px } .section__pdc.section__pdc-top .pdc-space-end { margin-bottom: -81px; padding-bottom: 0 } .section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 128px } .section__pdc.section__pdc-bottom .pdc-space-end { margin-bottom: -82px; padding-bottom: 0 } } @media all and (max-width:1279.5px) and (min-width:731px) { .section__pdc.section__pdc-top .pdc-space-start { margin-top: 0; padding-top: 100px } .section__pdc.section__pdc-top .pdc-space-end { margin-bottom: -59px; padding-bottom: 0 } .section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 109px } .section__pdc.section__pdc-bottom .pdc-space-end { margin-bottom: -63px; padding-bottom: 0 } } @media all and (max-width:730.5px) { .section__pdc.section__pdc-top .pdc-space-start { margin-top: 0; padding-top: 58px } .section__pdc.section__pdc-top .pdc-space-end { margin-bottom: -58px; padding-bottom: 0 } .section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 58px } .section__pdc.section__pdc-bottom .pdc-space-end { margin-bottom: -62px; padding-bottom: 0 } } @media all and (min-width:1280px) { .section__pdc.section__pdc-top+.section__wdvideos .wdVideos.active { padding-top: 128px } .section__wdvideos .wdVideos.active+.section__pdc.section__pdc-bottom .pdc-space-start { padding-top: 128px } .section__wdvideos .wdVideos.active+.section__pdc.section__pdc-bottom .pdc-space-start { padding-top: 128px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__pdc.section__pdc-top+.section__wdvideos .wdVideos.active { padding-top: 100px } .section__ksp+.section__pdc.section__pdc-bottom .pdc-space-start { margin-top: 0; padding-top: 0 } .section__wdvideos .wdVideos.active+.section__pdc.section__pdc-bottom .pdc-space-start { padding-top: 100px } } @media all and (max-width:730.5px) { .section__pdc.section__pdc-top+.section__wdvideos .wdVideos.active { padding-top: 58px } } .section__kv { background-color: #ded9d3 } .section__kv .wd__content .content__slogan { color: #030000 } .section__kv .wd__content .content__title { background-image: linear-gradient(to right, #000, #000 90%) } .section__kv .kv__badge .badge__content .content-text { color: #333 } .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: #174d71; background-image: linear-gradient(-45deg, transparent 30%, #317f91 60%), linear-gradient(-45deg, #174d71 0, #174d71 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: #174d71; background-image: linear-gradient(180deg, transparent 50%, #317f91 60%), linear-gradient(0deg, #174d71 50%, #174d71 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: #174d71; background-image: linear-gradient(270deg, transparent 50%, #317f91 60%), linear-gradient(180deg, #174d71 0, #174d71) } .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: #174d71; background-image: linear-gradient(90deg, transparent 50%, #317f91 60%), linear-gradient(180deg, #174d71 0, #174d71) } .section__ksp .wdtile.wdtile-ksp { background-color: #f4f4f4 } .section__ksp .wdtile.wdtile-ksp .wdtile__item { background-image: linear-gradient(135deg, #eae4dc 2%, #b5a895 85%, #b5a895 100%) } .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 { color: #194f71; background-image: linear-gradient(-45deg, #3ea4bb 0, #174d71 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__content .wd__content .content__title sup { color: #194f71 } .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 { color: #194f71; background-image: linear-gradient(-45deg, #3ea4bb 0, #174d71 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent } .section__ksp .wdtile.wdtile-ksp .wdtile__item .item__block--feature .item__content--title sup { color: #fff !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent !important; background-image: linear-gradient(-45deg, #174d71 0, #174d71 100%) !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.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 } .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item.wdtile__item-4 .item__jumpto-button::after, .section__ksp.style-hw .wdtile.wdtile-ksp .wdtile__item.wdtile__item-4 .item__jumpto-button::before { background-color: #686564 } #CMD .section__ksp .wdtile.wdtile-ksp .item__image-ksp_01__pc_bottom .img__item { background-image: url(../images_1/ksp_01__pc_bottom.png); max-width: none; } .section__ksp .wdtile.wdtile-ksp .item__image-ksp_01__pc_bottom .img__item { width: 771px; height: 467px } #CMD .section__ksp .wdtile.wdtile-ksp .item__image-ksp_03__icon .img__item { background-image: url(../images_1/ksp_03__icon.jpg) } .section__ksp .wdtile.wdtile-ksp .item__image-ksp_03__icon .img__item { width: 157px; height: 157px } #CMD .section__ksp .wdtile.wdtile-ksp .item__image-battery_bg .img__item { background-image: url(../images_1/battery_bg.jpg) } .section__ksp .wdtile.wdtile-ksp .item__image-battery_bg .img__item { width: 562px; height: 410px } /*#CMD .section__ksp .wdtile.wdtile-ksp .item__image-ksp_05__pd .img__item { background-image: url(../images_1/ksp_05__pd.png) }*/ .section__ksp .wdtile.wdtile-ksp .item__image-ksp_05__pd .img__item { width: 506px; height: 280px; /* width: 100%; height: 100%;*/ } #CMD .section__ksp .wdtile.wdtile-ksp .item__image-ksp_08__pc .img__item { background-image: url(../images_1/ksp_08__pc.png) } .section__ksp .wdtile.wdtile-ksp .item__image-ksp_08__pc .img__item { width: 900px; height: 130px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title { opacity: 0; color: #fff; transform: translate3d(-20px, 0, 0); background-image: linear-gradient(150deg, #fff 0, #fff 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title sup { background-image: linear-gradient(150deg, #fff 0, #fff 100%) !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__info { opacity: 0; color: #fff; transform: translate3d(-20px, 0, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image { width: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .ani-item-1 { position: absolute; top: -195px; left: 50%; margin-left: -1060px; width: 1226px; height: 626px; background-size: contain } #CMD .section__ksp .wdtile__item-0 .item__image .ani-item-1 { background-image: url(../images_1/ksp_01__bg.jpg) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .ani-item-3 { position: absolute; top: -288px; left: 50%; margin-left: -660px; width: 771px; height: 467px; background-size: contain; transform: rotate(-70deg); transform-origin: 510px 440px } #CMD .section__ksp .wdtile__item-0 .item__image .ani-item-3 { background-image: url(../images_1/ksp_01__pc_top.png) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .img { margin-top: -149px; margin-left: -277px; z-index: 2 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__content .wd__content .content__title { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .5s .5s, transform 1s .5s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__content .wd__content .content__info { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .5s .8s, transform 1s .8s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__image .ani-item-1 { margin-left: -1110px; transition: margin-left 3.5s linear } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__image .ani-item-3 { transform: rotate(0); transition: transform 2s ease } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 { background-image: linear-gradient(112deg, #5f98ab 0, #2f5e6f 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__content .wd__content .content__title { background-image: linear-gradient(150deg, #fff 0, #fff 100%); color: #fff } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2::before { position: absolute; top: 0; left: 0; width: 100%; height: 150%; content: ""; background-image: linear-gradient(180deg, #b9c1cb 0, #395169 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title { color: #fff !important; background-image: linear-gradient(180deg, #fff 0, #fff 100%) !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__image .img__item { transform: scale(1.3) translate3d(-60px, -20px, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content .item__content--title { opacity: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2.aniPlay::before { top: -50%; transition: top 3s linear 450ms } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2.aniPlay .item__image .img__item { transform: scale(1) translate(-50%, -50%); transition: transform 2s ease } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2.aniPlay .item__content .item__content--title { opacity: 1; transition: opacity .5s 1s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 { background-image: linear-gradient(135deg, #e1dfe8 1%, #e1dfe8 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .img__item { margin-left: 130px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title span { font-size: 3.75rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title sup { background-image: linear-gradient(-45deg, #174d71 0, #174d71 100%) !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title sup a { outline-offset: -2px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 { background-position: 50%; background-repeat: no-repeat; background-size: cover } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content { opacity: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content .wd__content .content__title { background-image: linear-gradient(-45deg, #466a72 0, #2b495d 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image { position: relative } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .ani-item-1 { position: absolute; top: 50%; left: 50%; transform: scale(1.2); background-size: cover } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .img__item { left: 50%; transform: translateY(-50%); transform-origin: center } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5.aniPlay .item__content { opacity: 1; transition: opacity .5s 1s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5.aniPlay .ani-item-1 { transform: scale(1); transition: transform 2s linear } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5.aniPlay .item__image .img__item { transform: translateY(0); transition: transform 2s ease } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__image { opacity: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .img__pc1 { position: absolute; top: 65px; left: 50%; margin-left: -380px; width: 450px; height: 32px; transform: scale(1.3) translate3d(0, 50px, 0) } #CMD .section__ksp .wdtile__item-8 .img__pc1 { background-image: url(../images_1/ksp_08__pc_1.png) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .img__pc2 { position: absolute; top: 140px; left: 50%; margin-left: -66px; width: 450px; height: 32px; transform: scale(1.3) translate3d(0, 50px, 0) } #CMD .section__ksp .wdtile__item-8 .img__pc2 { background-image: url(../images_1/ksp_08__pc_2.png) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__content { opacity: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8.aniPlay .img__pc1 { transform: scale(1) translate3d(0, 0, 0); transition: transform 2s ease } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8.aniPlay .img__pc2 { transform: scale(1) translate3d(0, 0, 0); transition: transform 2s ease } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8.aniPlay .item__content { opacity: 1; transition: opacity .5s 1s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 { background-image: linear-gradient(112deg, #5f98ab 0, #2f5e6f 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--title { color: #fff; background-image: linear-gradient(180deg, #fff 0, #fff 100%) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--descBottom { color: #fff } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content::after { content: ""; position: absolute; top: 293px; left: 50%; width: 179px; height: 33px; background-size: contain; background-repeat: no-repeat; margin-left: -90px } #CMD .section__ksp .wdtile__item-9 .item__content::after { background-image: url(../images_1/ksp_09__icon2.png) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__image { min-height: 0; margin: 0 } .ksp_audio_wave { position: absolute; top: 31px; left: calc(50% - 150px) } .ksp_audio_wave svg { width: 300px; height: 155px } .ksp_audio_wave #line1 { animation: wave 1s infinite; animation-delay: .15s } .ksp_audio_wave #line1.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line1.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line2 { animation: wave 1s infinite; animation-delay: .3s } .ksp_audio_wave #line2.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line2.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line3 { animation: wave 1s infinite; animation-delay: .45s } .ksp_audio_wave #line3.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line3.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line4 { animation: wave 1s infinite; animation-delay: .6s } .ksp_audio_wave #line4.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line4.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line5 { animation: wave 1s infinite; animation-delay: .75s } .ksp_audio_wave #line5.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line5.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line6 { animation: wave 1s infinite; animation-delay: .9s } .ksp_audio_wave #line6.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line6.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line7 { animation: wave 1s infinite; animation-delay: 1.05s } .ksp_audio_wave #line7.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line7.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line8 { animation: wave 1s infinite; animation-delay: 1.2s } .ksp_audio_wave #line8.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line8.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line9 { animation: wave 1s infinite; animation-delay: 1.35s } .ksp_audio_wave #line9.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line9.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line10 { animation: wave 1s infinite; animation-delay: 1.5s } .ksp_audio_wave #line10.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line10.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line11 { animation: wave 1s infinite; animation-delay: 1.65s } .ksp_audio_wave #line11.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line11.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line12 { animation: wave 1s infinite; animation-delay: 1.8s } .ksp_audio_wave #line12.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line12.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line13 { animation: wave 1s infinite; animation-delay: 1.95s } .ksp_audio_wave #line13.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line13.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line14 { animation: wave 1s infinite; animation-delay: 2.1s } .ksp_audio_wave #line14.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line14.waveRunning { animation-play-state: running !important } .ksp_audio_wave #line15 { animation: wave 1s infinite; animation-delay: 2.25s } .ksp_audio_wave #line15.wavePaused { animation-play-state: paused !important } .ksp_audio_wave #line15.waveRunning { animation-play-state: running !important } @keyframes wave { 0% { transform: scaleY(1); transform-origin: 50% 50% } 50% { transform: scaleY(.7); transform-origin: 50% 50% } 100% { transform: scaleY(1); transform-origin: 50% 50% } } .section__color { overflow: hidden } .section__color .animate__container .card__container { position: relative; border: 1px solid transparent; border-radius: 30px; overflow: hidden } .section__color .animate__container .card__container .card_item { position: absolute; top: 0; left: 0; width: 100%; background-size: 2560px 1400px; background-position: 50% 50% } .section__color .animate__container .card__container .card_item .item_pc { position: absolute; will-change: opacity } .section__color .animate__container .card__container .card_item .item_pc .img__pc { width: 100%; height: 100%; background-size: 100% auto; background-position: 50% 50% } .section__color .animate__container .card__container .card_item .item_title { position: relative; z-index: 2; will-change: opacity, color } .section__color .animate__container .card__container .card_item__1 .item_title { color: #fff } .section__color .animate__container .card__container .card_item__2 .item_title { color: #a7a7a7 } .section__color .animate__container .card__container .nav__container { position: absolute; bottom: 0; border: 1px solid transparent; display: flex } .section__color .animate__container .card__container .nav__container .nav_item { width: 50%; color: #000 } .section__color .animate__container .card__container .nav__container .nav_item.active { color: #fff } #CMD .section__color.loadImg .card_item__1 { background-image: url(../images_1/bg_01.jpg) } #CMD .section__color.loadImg .item_pc__1 .img__pc { background-image: url(../images_1/pc_1.png) } #CMD .section__color.loadImg .card_item__2 { background-image: url(../images_1/bg_02.jpg) } #CMD .section__color.loadImg .item_pc__2 .img__pc { background-image: url(../images_1/pc_2.png) } .section__thin .wd__content .content__info { color: #595959 } .section__thin .animate__container { border: transparent 1px solid; width: 1300px; height: 600px; left: 50%; margin-left: -650px; position: relative } .section__thin .animate__container .img__text { left: 50%; margin-left: -650px; width: 1300px; height: 250px } #CMD .section__thin .img__text { background-image: url(../images_1/text.png) } .section__thin .animate__container .img__pc { width: 1128px; height: 529px; position: absolute; left: 84px; top: -287px; opacity: 0 } #CMD .section__thin .img__pc { background-image: url(../images_1/pc.png) } .section__thin .animate__container .img__hand { width: 1388px; height: 666px; position: absolute; left: 210px; top: -130px; opacity: 0 } #CMD .section__thin .img__hand { background-image: url(../images_1/hand.jpg) } #CMD .section__thin .img__hand { mask: url(../images_1/hand_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/hand_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .section__thin .animate__container .img__bg { width: 1388px; height: 666px; position: absolute; left: 210px; top: -130px; opacity: 0 } #CMD .section__thin .img__bg { background-image: url(../images_1/bg.jpg) } .antmateText, .section__battery .opening .battery_type__2 .info, .section__battery .opening .battery_type__2 .title { 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%); padding: 1px; clip-path: inset(1px) } .section__battery .opening { width: 1280px; left: 50%; margin-left: -640px; border: 1px solid transparent; height: 330px; position: relative; transform-origin: center center } .section__battery .opening .battery_type { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .section__battery .opening .battery_type .title { font-size: 200px; line-height: 1; color: #181818; margin-bottom: 0 !important } .section__battery .opening .battery_type .info { font-size: 50px; letter-spacing: 3px; color: #181818 } .section__battery .opening .battery_type__1 svg { top: 50%; left: 50%; width: 1200px; height: 400px; transform: translate(-50%, -50%) } .section__battery .opening .battery_type__1 .svg-inverted-mask { position: absolute } .section__battery .opening .battery_type__1 .mask__shape { fill: #fff } .section__battery .opening .battery_type__1 .box-with-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .section__battery .opening .battery_type__1 .text-fill { position: absolute; top: 50%; left: 50%; width: 1200px; height: 399px; margin: auto; overflow: hidden; transform: translate(-50%, -50%) } .section__battery .opening .battery_type__1 .shape--fill { fill: #f4f4f4 } .section__battery .opening .battery_type__1 .text--transparent { fill: transparent } .section__battery .opening .battery_type__1 .outter { position: absolute; top: 0; width: 1200px; left: calc(50% - 600px); height: 100%; display: flex; gap: 2px } .section__battery .opening .battery_type__1 .inner { background-color: #1fd71f; height: 100%; opacity: 0; flex: 1; border-radius: 2px } .section__battery .opening .battery_type__2 { z-index: 3; opacity: 0; top: 72px } .section__battery .opening .battery_type__2 .info, .section__battery .opening .battery_type__2 .title { margin-top: -1.5px } .section__battery .main-content { margin: 0 auto; position: relative; border: 1px solid transparent; opacity: 0 } .section__battery .main-content .img__icon1 { width: 145px !important; height: 73px !important; background-size: contain } #CMD .section__battery .img__icon1 { background-image: url(../images_1/icon75w.png) } #CMD.font-tt .section__battery-inner-s3 .wd__content .content__title sup { background-image: linear-gradient(to right, #fff, #fff 90%) !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/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 .video_container { border: 1px solid transparent; position: absolute; left: 50%; width: 1300px; height: 1100px } .section__performance .video_container .img__pc { width: 1300px; height: 1100px } #CMD .section__performance .img__pc { background-image: url(../images_1/pc_performance.jpg) } #CMD .section__performance .img__pc { mask: url(../images_1/pc_mask_performance.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pc_mask_performance.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_1/pc_top_performance.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_1/chip_performance.png) } .section__performance .video_container .img__evo { width: 185px; height: 100px; position: absolute; left: 722px; top: 910px } #CMD .section__performance .img__evo { background-image: url(../images_1/evo_performance.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: 720px; left: 50%; z-index: 5; margin-left: 223px } .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 .5s } .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__s_aiCopilot { background-color: #dddbcf } .section__aiCopilot-outer-s1 { background-color: #000 } .section__aiCopilot-outer-s1 .slick-slide { height: auto } .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 } .section__display-outer-s1 { background-color: #dddbcf } .section__display-outer-s1 .wd__content.main-content--bottom .content__info, .section__display-outer-s1 .wd__content.main-content--bottom .content__slogan, .section__display-outer-s1 .wd__content.main-content--top .content__info, .section__display-outer-s1 .wd__content.main-content--top .content__slogan { color: #595959 !important } .section__display-outer-s1 .wd__feature__list .wd__feature .wd__feature__describe * { color: #595959 } .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 { will-change: auto; left: 50%; opacity: 1; width: 100%; text-align: center; line-height: 1 !important; transform-origin: center; letter-spacing: normal !important; font-size: 184px; -webkit-background-clip: text; background-position: 50% 100%; background-size: 2200px auto; -webkit-text-fill-color: transparent } #CMD .section__display-outer-s1 .ani__text .ani__text-1.loadImg { background-image: url(../images_1/textBg2x_new.jpg) } .section__display-outer-s1 .img__main { background-size: contain; position: absolute; left: 50% } #CMD .section__display-outer-s1 .img__main { background-image: url(../images_1/pc_display.jpg) } #CMD .section__display-outer-s1 .img__main { mask: url(../images_1/pc_mask_display.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pc_mask_display.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 * { background: linear-gradient(to right, #e3e0d9, #e3e0d9) !important; color: #385068 } .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, #318092 90%) } .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 * { background: linear-gradient(to right, #174d71, #174d71) !important; color: #fff } .section__display-outer-s1 .wdblockimg .block.block-21 { background-color: #cfc9c3 } .section__display-outer-s1 .wdblockimg .block.block-21 .block-content .content__title { background-image: linear-gradient(to right, #174d71, #318092 90%) } .section__display-outer-s1 .wdblockimg .block.block-21 .modal-button-container .modal-button, .section__display-outer-s1 .wdblockimg .block.block-21 .modal-button-container .modal-button * { background: linear-gradient(to right, #174d71, #174d71) !important; color: #fff } .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, #318092 90%) } .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 * { background: linear-gradient(to right, #174d71, #174d71) !important; color: #fff } .section__display-outer-s1 .wdblockimg .block.block-4 .wd__content .content__info { color: #424242 } #CMD.font-tt .section__display-outer-s1 .wdblockimg .block.block-4 .block-content .content__title sup { background-image: linear-gradient(to right, #174d71, #318092 90%) !important; -webkit-text-fill-color: transparent !important } #CMD.font-tt .section__display-inner-s4 .wd__content .content__title sup { background-image: linear-gradient(to right, #fff, #fff 90%) !important; -webkit-text-fill-color: transparent !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__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, #174d71, #318092 90%) } .section__bigAudio { position: relative } .section__bigAudio .wave__container { border: 1px solid transparent; width: 1140px; height: 720px; display: flex; justify-content: center; align-items: center; position: relative; left: calc(50% - 570px); top: -30px } .section__bigAudio .wave__container .wave_item__container { height: 100%; width: 16px; border: 1px solid transparent; position: relative; margin-right: 20px; display: flex; align-items: center; justify-content: center } .section__bigAudio .wave__container .wave_item { width: 16px; position: absolute; opacity: 0; transform-origin: center } .section__bigAudio .wave__container .wave_item__1 { width: 16px; height: 40px; background: #328189; left: 0 } .section__bigAudio .wave__container .wave_item__2 { width: 16px; height: 63px; background: #388186; left: 0 } .section__bigAudio .wave__container .wave_item__3 { width: 16px; height: 86px; background: #408183; left: 0 } .section__bigAudio .wave__container .wave_item__4 { width: 16px; height: 124px; background: #46817f; left: 0 } .section__bigAudio .wave__container .wave_item__5 { width: 16px; height: 143px; background: #4e817b; left: -5px } .section__bigAudio .wave__container .wave_item__6 { width: 16px; height: 160px; background: #5f8171; left: -8px } .section__bigAudio .wave__container .wave_item__7 { width: 16px; height: 137px; background: #68816b; left: -8px } .section__bigAudio .wave__container .wave_item__8 { width: 22px; height: 78px; background: linear-gradient(90deg, #69816b 0, #69816b 100%); left: -10px } .section__bigAudio .wave__container .wave_item__9 { width: 16px; height: 134px; background: #718165; left: -14px } .section__bigAudio .wave__container .wave_item__10 { width: 16px; height: 162px; background: #798160; left: -19px } .section__bigAudio .wave__container .wave_item__11 { width: 16px; height: 182px; background: #81815b; left: -21px } .section__bigAudio .wave__container .wave_item__12 { width: 16px; height: 121px; background: #898155; left: -21px } .section__bigAudio .wave__container .wave_item__13 { width: 16px; height: 124px; background: #90814e; left: -22px } .section__bigAudio .wave__container .wave_item__14 { width: 16px; height: 115px; background: #978149; left: -25px } .section__bigAudio .wave__container .wave_item__15 { width: 16px; height: 50px; background: #9e8144; left: -29px } .section__bigAudio .text__container { border: 1px solid transparent; width: 1140px; height: 720px; position: absolute; top: -30px; left: calc(50% - 570px) } .section__bigAudio .text__container .cover_item { background-color: #f4f4f4; opacity: .5; border: 1px solid transparent; width: 400px; height: 300px; position: absolute; top: 210px } .section__bigAudio .text__container .text__item { font-size: 323px; color: #37585e; display: inline-block; position: absolute; top: 185px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 1px; clip-path: inset(1px); line-height: 1.15 !important; margin-bottom: 0 !important } .section__bigAudio .text__container .text__item_b { left: 269px; background-image: linear-gradient(133deg, #174d71, #30667d 90%) } .section__bigAudio .text__container .text__item_g { right: 283px; background-image: linear-gradient(133deg, #2e657d, #377f91 90%); z-index: 3 } .section__bigAudio .text__container .text_bottom { font-size: 93px; color: #37585e; top: 482px; position: absolute; left: 292px; text-align: center; letter-spacing: 1px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 1px; clip-path: inset(1px); background-image: linear-gradient(to right, #174d71, #318092 90%) } .section__bigAudio .text__container .img__logo { left: 690px !important; } .section__bigAudio .text__container .img__logo { position: absolute; left: 664px; top: 484px; width: 223px; height: 96px } #CMD .section__bigAudio .img__logo { background-image: url(../images_1/logo.png) } .section__bigAudio .text__container .white_box { width: 1000px; position: absolute; background-color: #f4f4f4; /*height: 110px;*/ height: 158px; left: 280px; top: 480px } .section__audio.theme-white .wd__content .content__slogan { color: #595959 !important } .section__audio .animation_container { position: relative; left: 50%; margin-left: -640px; width: 100%; height: 800px } .section__audio .animation_container .audio_wave { position: absolute; width: 1313px; height: 112px; z-index: 3; top: 463px; left: -217px; mask: url(../images_1/pccover_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pccover_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } .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; top: 331px; left: 84px; width: 940px; height: 331px; z-index: 2 } #CMD .section__audio .img__pc { background-image: url(../images_1/pc_audio.jpg) } #CMD .section__audio .img__pc { mask: url(../images/pc_mask-1.png); mask-position: center; /*mask-size: contain;*/ -webkit-mask-image: url(../images/pc_mask-1.png); -webkit-mask-position: center; /*-webkit-mask-size: contain*/ } #CMD .section__audio .audio_wave .img__wave { background-image: url(../images_1/ware1_audio.png) } @keyframes audioWave { 0% { opacity: 0; transform: scale(.3) } 35% { opacity: .8; transform: scale(.5) } 90% { opacity: 0; transform: scale(1) } 95% { opacity: 0; transform: scale(.5) } } .section__audio .animation_container.js-active .audio_wave .wave_item__1 { animation: audioWave 3s infinite 0s linear } .section__audio .animation_container.js-active .audio_wave .wave_item__2 { animation: audioWave 3s infinite 1s linear } .section__audio .animation_container.js-active .audio_wave .wave_item__3 { animation: audioWave 3s infinite 2s linear } .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_1/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_1/hl2.png) }*/ .section__keyboard .wd__content .content__info { color: #595959 } .section__keyboard .typing_text { position: relative; width: 1100px; height: 300px; left: 50%; margin-left: -550px; border: 1px solid transparent } .section__keyboard .typing_text__content { position: absolute; left: 0; top: 0; width: 100% } .section__keyboard .typing_text__content .block { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background-color: #f4f4f4; opacity: 0 } .section__keyboard .typing_text__content p.line { display: block; width: 100%; text-align: center } .section__keyboard .typing_text__content .text_item { font-size: 120px; color: #000; letter-spacing: 6px; background-image: linear-gradient(to right, #174d71, #318092 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent } .section__keyboard .typing_text__content .text_cursor { animation: cursorBlink .5s alternate infinite; color: #318092; font-size: 120px } @keyframes cursorBlink { from { opacity: 0 } to { opacity: 100% } } .section__keyboard .main-content { position: relative; opacity: 0 } .section__keyboard .main-content .pic_container { background-position: 50% 100%; background-size: cover; overflow: hidden } #CMD .section__keyboard.loadImg .pic_container { background-image: url(../images_1/pc_bg_keyboard.jpg) } .section__keyboard .main-content .pic_container .img__pc { position: relative; left: 50%; width: 1275px; height: 795px } #CMD .section__keyboard .pic_container .img__pc { background-image: url(../images/pc-3.jpg) } #CMD .section__keyboard .pic_container .img__pc { mask: url(../images/pc_mask-2.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pc_mask-2.png); -webkit-mask-position: center; -webkit-mask-size: contain; max-width: none; } .section__connectivity .bg { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, #e7e6e2 0, #f4f4f4 100%); opacity: 0 } .section__connectivity .wd__content .content__info { color: #595959 } .section__connectivity .text_container { left: 50%; border: 1px solid transparent; position: absolute } .section__connectivity .text_container .line { color: #000; background-image: linear-gradient(to right, #174d71, #318092 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: normal !important; line-height: 1 !important } .section__connectivity .img_container { border: 1px solid transparent; opacity: 0 } .section__connectivity .line_container { border: 1px solid transparent; left: 50%; position: relative } .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__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, #318092 90%) } .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 * { background: linear-gradient(to right, #174d71, #174d71) !important; color: #fff } .conference-inner .wd__content .content__title { background-image: linear-gradient(to right, #174d71, #174d71 90%) !important } .section__conference-inner-s1 .wdtab__nav::before { background-color: #174d71 } .section__conference-inner-s1 .wdtab__nav-btn { color: #000 } .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: #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, .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: #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__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__userExperience-inner-s4, .section__userExperience-inner-s5, .section__userExperience-inner-s6 { background-color: #fff !important } .section__userExperience-inner-s4 .wd__content .content__title, .section__userExperience-inner-s5 .wd__content .content__title, .section__userExperience-inner-s6 .wd__content .content__title { background-image: linear-gradient(to right, #174d71 0, #174d71 100%) } .section__userExperience-inner-s4 .wdblockimg .block-1 .block-content .content__title, .section__userExperience-inner-s4 .wdblockimg .block-2 .block-content .content__title, .section__userExperience-inner-s4 .wdblockimg .block-3 .block-content .content__title, .section__userExperience-inner-s4 .wdblockimg .block-4 .block-content .content__title, .section__userExperience-inner-s4 .wdblockimg .block-5 .block-content .content__title { background-image: linear-gradient(to right, #fff, #fff 90%) } .section__userExperience-inner-s6 .wdblockimg .block-1 .block-content .content__title, .section__userExperience-inner-s6 .wdblockimg .block-2 .block-content .content__title { background-image: linear-gradient(to right, #fff, #fff 90%) } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content .content__title { background-image: linear-gradient(to right, #174d71 0, #174d71 100%) !important } .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%) !important } .section__environment-outer-s1 { background-color: #eeece7 } .section__environment-outer-s1 .block .wd__content .content__title sup { background-image: linear-gradient(to right, #424242, #424242 90%) !important } .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_1/icon_fsc.png) } .section__military__grade { 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_1/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_1/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_1/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_1/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_1/hl5_militaryGrade.png) } .section__software-outer-s1 { background-color: #f5f5f5 } .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, #174d71, #318092 90%) !important } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe * { color: #595959 !important } .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__comment { width: 100% } .inner-view { background: rgba(0, 0, 0, 0) } .inner-view .inner-view-container .modal-button-container .modal-button { background-color: #174d71; color: #fff; border-color: #174d71 } .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-modal.modal-innerIoport { background-color: #e1e1e1 } .inner-modal.modal-innerIoport .wd__content { z-index: 3 } .inner-modal.modal-innerIoport .wd__content .content__title { background-image: linear-gradient(to right, #181818, #181818 90%) } body #CMD{ font-size: 16px; } .inline__block { display: inline-block } @media all and (min-width:1280px) and (min-width:1280px) { .wdtab .wdtab__nav::before { width: 1128px } .wdtab .wdtab__nav-scrollouter { margin: 0 auto; width: 1128px } .wdtab .wdtab__nav-container { display: flex; align-content: stretch; flex-direction: row; align-items: stretch } .wdtab .wdtab__nav-btn { display: block; flex-shrink: 1; flex-grow: 1; flex-wrap: nowrap } .wdtab .wdtab__nav-btn .nav__title-text { display: flex; flex-direction: column; justify-content: flex-end; height: 100% } .wdtab .wdtab__panel { padding-top: 30px } .wdtab .wdtab__panel__item-info { margin-bottom: 30px } } @media all and (min-width:1280px) { .wdOledTable .table_fixed_container.fixed { left: calc(50% - 618px) } .wdOledTable .table_fixed_container .table_fixed { padding-left: 306px; width: 1236px } .wdOledTable .table_fixed_container .table_fixed::after { width: 306px } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list .table_fixed__item { width: 233px } } @media all and (min-width:1280px) { .wdOledTable .table_fixed_container.tdWidth_1 .table_fixed_list { width: 100% !important } .wdOledTable .table_fixed_container.tdWidth_1 .table_fixed_list .table_fixed__item { justify-content: flex-start; width: 100% } .wdOledTable .table_fixed_container.tdWidth_2 .table_fixed_list { width: 100% !important } .wdOledTable .table_fixed_container.tdWidth_2 .table_fixed_list .table_fixed__item { width: 50% !important } .wdOledTable .table_fixed_container.tdWidth_3 .table_fixed_list { width: 100% !important } .wdOledTable .table_fixed_container.tdWidth_3 .table_fixed_list .table_fixed__item { width: 33.3333% !important } .wdOledTable .table_fixed_container.tdWidth_4 .table_fixed_list { width: 100% !important } .wdOledTable .table_fixed_container.tdWidth_4 .table_fixed_list .table_fixed__item { width: 25% } } @media all and (min-width:1280px) { .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-content { min-height: 0; padding-bottom: 240px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-content { min-height: 0; padding-bottom: 370px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 { min-height: 350px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-content { padding-right: 13px; max-width: 50% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-img { position: relative; width: 100% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .img__bg { position: relative; padding-bottom: 100%; width: 100%; height: 0 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-img { position: absolute; bottom: -1px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-img { position: absolute; bottom: -1px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-img { position: absolute; overflow: hidden; top: unset; right: 0; bottom: 0; width: calc(50% - 13px); height: 100%; transform: translate(0, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-img .img__bg { position: absolute; bottom: 0; left: 50%; width: 580px; height: 580px; transform: translate(-50%, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .img__bg { padding-bottom: 0; height: 237px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .block-content { padding: 278px 36px 47px; min-height: 500px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-3 .block-img { overflow: hidden; height: 237px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-2 .block-img .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-3 .block-img .img__bg { top: 50%; left: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-6 .block-content { padding-top: 46px; min-height: 395px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-6 .block-img .img__bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-2 .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-3 .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-content { padding-bottom: 340px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-3 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-img { height: 580px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-2 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-3 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .img__bg { width: 580px; height: 580px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-2.imageTop .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-3.imageTop .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].imageTop .block-img { height: 237px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-2.imageTop .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-3.imageTop .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].imageTop .block-content { padding: 278px 40px 40px; min-height: 500px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-6 { min-height: 350px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-6 .block-content { padding-top: 40px; padding-right: 13px; padding-bottom: 40px; max-width: 50% } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-6 .block-img { top: unset; right: 0; bottom: 0; width: calc(50% - 13px); height: 100%; transform: translate(0, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-6 .img__bg { position: absolute; top: unset; bottom: 0; left: 50%; padding-bottom: 0; height: 580px; transform: translate(-50%, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-6.imageTop .block-img .img__bg { top: 50%; transform: translate(-50%, -50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-6.imageTop .block-content { padding-top: 40px; min-height: unset } } @media all and (min-width:1280px) { .wdblockimg .wdblockimg__container .block.column-span-2 .block-video .video__container, .wdblockimg .wdblockimg__container .block.column-span-3 .block-video .video__container { left: 50%; width: 560px; height: 560px; transform: translateX(-50%) } .wdblockimg .wdblockimg__container .block.column-span-6 .block-video .video__container { top: 50%; right: 0; bottom: unset; width: 100%; height: 100%; transform: translateY(-50%) } .wdblockimg .wdblockimg__container .block.imageTop .block-video { max-height: 237px } .wdblockimg .wdblockimg__container .block.imageTop.column-span-2 .block-video .video__container { width: 366px; height: 237px } .wdblockimg .wdblockimg__container .block.imageTop.column-span-3 .block-video .video__container { width: 560px; height: 237px } .wdblockimg .wdblockimg__container .block.imageTop.column-span-6 .block-video .video__container { top: 0; width: 1144px; height: 237px; transform: unset } } @media all and (min-width:1280px) { .wdblockimg .block[data-blocktype=aiNoise] .ai__noise__container { --voice-iconSize: 280px } .wdblockimg .block[data-blocktype=aiNoise] .ai__noise__container .noise__voice__container { height: var(--voice-iconSize); max-height: var(--voice-iconSize) } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-], .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] { min-height: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .block-content, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .block-content { padding-bottom: 30px; min-height: unset } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container { margin-top: 0; padding-bottom: 40px } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__switcher.js-showed, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__switcher.js-showed { margin-top: 0; margin-bottom: 0; padding-top: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__voice__container, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__voice__container { top: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__voice__container .noise__right, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__voice__container .noise__right { transform: scale(.3, 1.4) } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__voice__container.js-active, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__voice__container.js-active { top: 0; margin-top: 0; max-height: 280px } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice { transform: scale(.7) } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__switcher { top: -17px; margin-top: 0; margin-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__switcher .noise_desc, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__switcher .noise_desc { margin-top: 0; padding-top: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn { margin-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-2[class*=block-imgstyle-] .ai__noise__container.js-active, .wdblockimg .block[data-blocktype=aiNoise].column-span-3[class*=block-imgstyle-] .ai__noise__container.js-active { margin-top: -40px; transition-delay: 20ms } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container { --voice-iconSize: 180px } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container .noise__left { margin-left: -860px } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container .noise__right { margin-left: 60px } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container.js-active .noise__switcher { top: -2px; animation-delay: 0s; animation-duration: 3s } .wdblockimg .block[data-blocktype=aiNoise].column-span-2 .ai__noise__container.js-active .img__voice { transition-delay: .394s } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container { min-height: 340px; padding-bottom: 15px } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .img__noise { margin-top: 0 } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .block-content { padding-bottom: 0; min-height: unset } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__switcher { animation-duration: .5s } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__switcher.js-showed { animation-duration: 1.5s } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__voice__container { margin-bottom: 30px; height: 280px; min-height: 280px } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__voice__container .noise__right { transform: scale(.7, 1.8) } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__voice__container .noise__left { transform-origin: right } .wdblockimg .block[data-blocktype=aiNoise].column-span-6 .ai__noise__container .noise__voice__container .noise__right { transform-origin: left } } @media all and (min-width:1280px) { .wdItemList { display: flex; justify-content: space-between; margin-top: 67px; margin-right: auto; margin-left: auto; width: 1128px; flex-wrap: nowrap } .wdItemList .item__block { width: 342px } .wdItemList .item__block__img { width: 100%; height: 210px } .wdItemList .item__block__img .item__img { width: 100%; height: 100%; height: 210px; background-position: center; background-size: 342px 210px } .wdItemList .wd__content.item-content { margin-top: 40px } .wdItemList .wd__content.item-content .content__title { font-size: 22px } .wdItemList .wd__content.item-content .content__info { font-size: 20px } } @media all and (min-width:1280px) { .section__wdvideos { display: inline-block } .section__wdvideos .item-productvideo { padding-bottom: 82px } .section__wdvideos .item-productvideo .detect-point-out { margin-top: -429px; height: 830px } .section__wdvideos .item-productvideo .detect-point-enter { margin-top: -240px } .section__wdvideos .item-productvideo .video__play__btn { bottom: 55px; left: 5%; margin-left: auto } .section__wdvideos .item-productvideo .video__play__btn .svg-circle { fill: transparent } .section__wdvideos .item-productvideo .video__group { position: relative; overflow: hidden; margin-right: auto; margin-left: auto; padding-bottom: 56.25%; width: 100%; height: 0 } .section__wdvideos .item-productvideo .video__group .video__container { position: absolute; left: 0; width: 100%; height: 100% } .section__wdvideos .item-productvideo .video__group .video__container video { position: absolute; left: 0; width: 100%; height: 100% } .section__wdvideos .item-productvideo .btn__youtube { bottom: 45px; transition: background .4s } .section__wdvideos .item-productvideo .btn__youtube:hover { background-color: rgba(0, 0, 0, .5) } } @media all and (min-width:1280px) { .section__wdvideos .sales__containter { padding-bottom: 71px } .section__wdvideos .sales__containter .sales__item { margin-bottom: 16px; padding: 0 6px } .section__wdvideos .sales__containter .sales__item:hover .video_info { opacity: 1 } .section__wdvideos .video_info { left: 6px; opacity: 0; width: calc(100% - 12px) } } @media all and (min-width:1280px) { .section__adobebanner-outer-s1 { margin-top: 0; padding-top: 0; padding-bottom: 0 } .section__adobebanner-outer-s1 .banner__container .banner__item { min-height: 664px } .section__adobebanner-outer-s1 .banner__container .wd__content { top: 0; left: 50%; margin-left: -560px; padding-top: 149px; padding-bottom: 60px; width: 450px } .section__adobebanner-outer-s1 .banner__container { margin-right: auto; margin-left: auto; width: 100%; max-width: 2560px } .section__adobebanner-outer-s1 .banner__container .banner__item { position: relative; margin-right: auto; margin-left: auto; width: 100%; max-width: 2560px } .section__adobebanner-outer-s1 .banner__container .image__container { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 664px } .section__adobebanner-outer-s1 .banner__container .img__main { position: absolute; top: 0; left: 50%; margin-left: -1280px; width: 2560px; height: 664px; background-position: bottom } .section__adobebanner-outer-s1 .img__main { background-image: url(../images_1/main.jpg) } } @media all and (min-width:1280px) { .section__adobebanner-outer-s1+.section__comment { margin-top: 0 } } @media all and (min-width:1280px) { .section__antimicrobial-outer-s1 { padding-top: 80px; padding-bottom: 90px } .section__antimicrobial-outer-s1 .img__main { margin: -722px auto 0; max-width: 2560px; height: 1735px } .section__antimicrobial-outer-s1 .img__main { background-image: url(../images_1/main.jpg) } } @media all and (min-width:1280px) { .section__antimicrobial-outer-s1 .wd__feature__list { margin-top: 73px; max-width: 1180px } } @media all and (min-width:1280px) { .section__antimicrobial-outer-s1 .wdblockimg { margin-top: 37px } } @media all and (min-width:1280px) { .section__antimicrobial-outer-s1 .modal-button-container { margin-top: 5px } } @media all and (min-width:1280px) { .modal-inner__sectionsDisplay { padding-bottom: 1px } .modal-inner__sectionsDisplay section.wd__section { padding-top: 129px } .modal-inner__sectionsDisplay section.wd__section .wd__content { margin-top: -.4em } .modal-inner__sectionsDisplay section.wd__section:last-child { margin-bottom: 149px } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s1 { padding-top: 140px } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s1 .wd__content { margin-top: -.4em } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s1 .img__main { margin: -386px auto 0; max-width: 2560px; height: 1850px } .section__antimicrobial-inner-s1 .img__main { background-image: url(../images_1/main.jpg) } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s1 .image__container { margin-top: 0; width: 1144px } .section__antimicrobial-inner-s1 .imgItem-title { padding-bottom: 11px; font-size: 1.875rem } .section__antimicrobial-inner-s1 .imgItem-info { font-size: 20px; line-height: 1.5 } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s2 { padding-top: 93px; padding-bottom: 140px } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s2 .colItem-2 .colItem-content .colItem_info-1, .section__antimicrobial-inner-s2 .colItem-2 .colItem-content .colItem_info-2 { transform: translateX(3.5px) } .section__antimicrobial-inner-s2 .colItem-4 .colItem-content .colItem_info-2 { transform: translateX(3.5px) } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s2 .video__area .video__container .detect-point-out { margin-top: -459px; height: 830px } .section__antimicrobial-inner-s2 .video__area .video__container .detect-point-enter { margin-top: -240px } .section__antimicrobial-inner-s2 .video__area .video__container .video-item { margin-left: -305px; width: 610px; height: 334px } .section__antimicrobial-inner-s2 .video__area .video__container .video__play__btn { bottom: 16px; margin-left: 303px } .section__antimicrobial-inner-s2 .imgItem-img { width: 364px; height: 600px } .section__antimicrobial-inner-s2 .imgItem-1 { margin-left: 60px } .section__antimicrobial-inner-s2 .imgItem-1 .imgItem-img-1 { width: 280px; height: 266px } #CMD .section__antimicrobial-inner-s2 .image__container .imgItem-1 .imgItem-img-1 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/ag_static.png) } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s2 .image__container .imgItem-title { padding: 15px 20px; box-sizing: border-box; font-size: 20px } } @media all and (min-width:1280px) { .section__antimicrobial-inner-s2 .table__container { margin-top: 77px } .section__antimicrobial-inner-s2 .table__container .img__bg { left: 50%; margin-left: -600px; width: 1200px; height: 560px } /* #CMD .section__antimicrobial-inner-s2 .table__container .img__bg { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section2/large/1x/chart.jpg) } */ } @media all and (min-width:1280px) { .modal-inner__sectionsAntimicrobial section.wd__section:last-child { padding-bottom: 121px } } @media all and (min-width:1280px) { .section__audiodirac-outer-s1 .img__main { margin: -325px auto 0; max-width: 2560px; height: 1304px } .section__audiodirac-outer-s1 .img__main { background-image: url(../images_1/main_audioDirac.jpg) } } @media all and (min-width:1280px) { .section__audiodirac-outer-s1 .wd__feature__list { max-width: 1200px } .section__audiodirac-outer-s1 .wd__feature__list.list-icon { margin-top: 30px } } @media all and (min-width:1280px) { .section__audiodirac-outer-s1 .wdblockimg { margin-top: -215px } } @media all and (min-width:1280px) { .modal-inner__sectionsAudioDirac section.wd__section:last-child { padding-bottom: 128px } } @media all and (min-width:1280px) { .section__audioDirac-inner-s1 { padding-top: 50px; padding-bottom: 100px } .section__audioDirac-inner-s1 .dirac_compare { display: flex; justify-content: center; margin-top: 80px } .section__audioDirac-inner-s1 .dirac_compare .dirac_compare__with, .section__audioDirac-inner-s1 .dirac_compare .dirac_compare__without { margin: 0 12px; border-radius: 20px } .section__audioDirac-inner-s1 .dirac_compare .compare_pic { width: 560px; height: 650px } .section__audioDirac-inner-s1 .dirac_compare .compare_text { position: absolute; top: 580px; font-size: 24px } } @media all and (min-width:1280px) { #CMD .section__audioDirac-inner-s1 .dirac_compare__without .compare_pic { background-image: url(../images_1/pic1_audioDirac.jpg) } } @media all and (min-width:1280px) { #CMD .section__audioDirac-inner-s1 .dirac_compare__with .compare_pic { background-image: url(../images_1/pic2_audioDirac.jpg) } } @media all and (min-width:1280px) { .section__audioDirac-inner-s2 { padding-top: 117px; padding-bottom: 100px } } @media all and (min-width:1280px) { #CMD .section__audioDirac-inner-s2 .audio__chart_0 .img-slick-1 { background-image: url(../images_1/pic_audioDirac.jpg) } } @media all and (min-width:1280px) { .section__audiodolby-outer-s1 .img__main { margin: -325px auto -241px; max-width: 2560px; height: 1304px } .section__audiodolby-outer-s1 .img__main { background-image: url(../images_1/main_audioDirac.jpg) } } @media all and (min-width:1280px) { .section__audiodolby-outer-s1 .wd__feature__list { max-width: 1200px } .section__audiodolby-outer-s1 .wd__feature__list.list-icon { margin-top: 30px } } @media all and (min-width:1280px) { .section__audiodolby-outer-s1 .wdblockimg { margin-top: 26px } } @media all and (min-width:1280px) { .section__audiodolby-outer-s2 .wdblockimg { margin-top: 79px } } @media all and (min-width:1280px) { .modal-inner__sectionsAudioDolby section.wd__section:last-child { padding-bottom: 128px } } @media all and (min-width:1280px) { .section__audioDolby-inner-s1 { padding-top: 160px } } @media all and (min-width:1280px) { .section__audioDolby-inner-s1 .img__main { left: 50%; margin-left: -1280px; width: 2560px; height: 824px; margin-top: -94px } #CMD .section__audioDolby-inner-s1 .img__main { background-image: url(../images_1/pic_audioDirac.jpg) } } @media all and (min-width:1280px) { .section__audioDolby-inner-s2 { padding-top: 50px; padding-bottom: 100px } .section__audioDolby-inner-s2 .ainoise_compare { display: flex; justify-content: center; margin-top: 74px } .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__with, .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__without { margin: 0 12px; border-radius: 20px } .section__audioDolby-inner-s2 .ainoise_compare .compare_pic { width: 560px; height: 462px } .section__audioDolby-inner-s2 .ainoise_compare .compare_text { position: absolute; top: 40px; font-size: 24px } } @media all and (min-width:1280px) { #CMD .section__audioDolby-inner-s2 .ainoise_compare__without .compare_pic { background-image: url(../images_1/pic1_audioDolby.jpg) } } @media all and (min-width:1280px) { #CMD .section__audioDolby-inner-s2 .ainoise_compare__with .compare_pic { background-image: url(../images_1/pic2_audioDolby.jpg) } } @media all and (min-width:1280px) { .section__audioDolby-inner-s3 { padding-top: 55px; padding-bottom: 100px } } @media all and (min-width:1280px) { .section__audioDolby-inner-s1+.section__audioDolby-inner-s3 { padding-top: 100px } } @media all and (min-width:1280px) { #CMD .section__audioDolby-inner-s3 .audio__chart_0 .img-slick-1 { background-image: url(../images_1/pic_audioDolby.jpg) } } @media all and (min-width:1280px) { .section__audioDolby-inner-s4 { padding-top: 55px; padding-bottom: 100px } .section__audioDolby-inner-s4 .wdtab { margin-top: 65px } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn { font-size: 1.875rem } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-scrollouter, .section__audioDolby-inner-s4 .wdtab .wdtab__nav::before { width: 1144px } } @media all and (min-width:1280px) { #CMD .section__audioDolby-inner-s4 .audio__chart_1 .img-slick-1 { background-image: url(../images_1/pic1_inner.jpg) } } @media all and (min-width:1280px) { #CMD .section__audioDolby-inner-s4 .audio__chart_2 .img-slick-2 { background-image: url(../images_1/pic2_inner.jpg) } } @media all and (min-width:1280px) { .section__conference-outer-s1 .wdblockimg { margin-top: 72px } .section__conference-outer-s1 .wdblockimg .block-3.column-span-2 .block-content { padding-bottom: 315px } .section__conference-outer-s1 .noise__switcher { padding-bottom: 2px } } @media all and (min-width:1280px) { .section__conference-inner-s1 { padding-top: 160px } .section__conference-inner-s1 .wd__content .content__info { paddinng-top: 4px } .section__conference-inner-s1 .wdtab__panel { height: 460px } .section__conference-inner-s1 .wdtab { overflow: hidden; margin: 47px auto 0; width: 1144px } .section__conference-inner-s1 .wdtab .wdtab__autoPlay { margin-left: 535px } .section__conference-inner-s1 .wdtab .wdtab__nav-scrollouter { width: 1144px } .section__conference-inner-s1 .wdtab .wdtab__nav::before { width: 1144px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn .nav_icon { margin-bottom: 14px; width: 74px; height: 74px; pointer-events: none } .section__conference-inner-s1 .wdtab .wdtab__nav-btn span { font-size: 16px } .section__conference-inner-s1 .wdtab__panel__item-info { margin: 0 auto 30px; width: 100%; max-width: 800px; line-height: 1.5 } .section__conference-inner-s1 .wdtab__panel__item-image { display: flex; justify-content: center } .section__conference-inner-s1 .wdtab__panel__item-image .img__main1, .section__conference-inner-s1 .wdtab__panel__item-image .img__main2 { width: 100%; height: 340px } .section__conference-inner-s1 .single-nav { margin-top: 73px } .section__conference-inner-s1 .video-container .video__outer { margin: 0 auto; max-width: 496px; height: 340px } .section__conference-inner-s1 .video-container .wd__play__btn { bottom: 10px; margin-left: -238px } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_0 .img__main1 { background-image: url(../images_1/tab01-1_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_1 .img__main1 { background-image: url(../images_1/tab02-1_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_2 .img__main1 { background-image: url(../images_1/tab03-1_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_3 .img__main1 { background-image: url(../images_1/tab04-1_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_4 .img__main1 { background-image: url(../images_1/tab05-1_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_5 .img__main1 { background-image: url(../images_1/tab06-1_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_0 .img__main2 { background-image: url(../images_1/tab01-2_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_1 .img__main2 { background-image: url(../images_1/tab02-2_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_2 .img__main2 { background-image: url(../images_1/tab03-2_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_3 .img__main2 { background-image: url(../images_1/tab04-2_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_4 .img__main2 { background-image: url(../images_1/tab05-2_conference.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s1 .conference_inner__img_5 .img__main2 { background-image: url(../images_1/tab06-2_conference.jpg) } } @media all and (min-width:1280px) { .section__noise { margin-bottom: -41px; padding-top: 160px } .section__noise .wd__content { max-width: 1080px } .section__noise .nav__noise { margin-top: 36px } .section__noise .noise__switcher { margin-top: 0 } .section__noise .noise__switcher.js-showed { padding-top: 60px; padding-bottom: 0 } .section__noise .noise__voice__container { margin-top: 30px } .section__noise .sub__content { margin-top: 66px } .section__noise .sub__content .content__title { font-size: 1.875rem } .section__noise .modal-button-container { margin-top: 17px } } @media all and (min-width:1280px) { .section__conference-inner-s3 { padding-top: 160px; padding-bottom: 154px } .section__conference-inner-s3 .mode_container { margin: 0 auto; margin-top: 66px; width: 970px } .section__conference-inner-s3 .mode_container .title { margin-bottom: 10px; font-size: 1.875rem } .section__conference-inner-s3 .mode_container .info { font-size: 20px; line-height: 1.5 } .section__conference-inner-s3 .mode_container .img_containter .mode_img img { background-size: contain } .section__conference-inner-s3 .mode_container .img_containter .mode_img .img_text { padding-bottom: 15px; font-size: 1.5rem; line-height: 1.5 } .section__conference-inner-s3 .mode_container__1 .img_containter { display: flex; justify-content: center; margin-top: 16px } .section__conference-inner-s3 .mode_container__1 .img_containter .mode_img { width: 50% } .section__conference-inner-s3 .mode_container__1 .mode1 { margin: 0 auto; width: 450px; height: 263px } .section__conference-inner-s3 .mode_container__1 .mode2 { margin: 0 auto; width: 450px; height: 263px } .section__conference-inner-s3 .mode_container__2 .img_containter { position: relative; margin-top: 20px } .section__conference-inner-s3 .mode_container__2 .img_containter .img_text { position: absolute; top: 40px; left: calc(50% - 200px); width: 400px } .section__conference-inner-s3 .mode_container__2 .img_containter .toggle_on { position: absolute; top: 90px; left: calc(50% - 42.5px) } .section__conference-inner-s3 .mode_container__2 .mode3 { width: 970px; height: 480px } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s3 .mode1 { background-image: url(../images_1/mode1_s3.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s3 .mode2 { background-image: url(../images_1/mode2_s3.jpg) } } @media all and (min-width:1280px) { #CMD .section__conference-inner-s3 .mode3 { background-image: url(../images_1/mode3_s3.jpg) } } @media all and (min-width:1280px) { .modal-inner__conference section.wd__section:last-child { padding-bottom: 80px } } @media all and (min-width:1280px) { .section__corningGlass { padding-top: 100px; padding-bottom: 200px } .section__corningGlass .wd__content { max-width: 900px; margin: 0 auto } } @media all and (min-width:1280px) { .section__corningGlass .inner_block__1 { margin-bottom: 35px } .section__corningGlass .inner_block__1 .feature-0 { transform: translateY(6px) } .section__corningGlass .inner_block__1 .antiglare_containter { margin-top: -60px } .section__corningGlass .inner_block__1 .antiglare_containter .content { top: 110px; left: calc(50% - 440px); width: 880px } .section__corningGlass .inner_block__1 .antiglare_containter .content .item .title { font-size: 32px } .section__corningGlass .inner_block__1 .antiglare_containter .content .item .info { font-size: 1.5rem } .section__corningGlass .inner_block__1 .antiglare_containter .img__main { left: 50%; margin-left: -640px; width: 1280px; height: 800px } #CMD .section__corningGlass .antiglare_containter .img__main { background-image: url(../images_1/img01_corningGlass.jpg) } } @media all and (min-width:1280px) { .section__corningGlass .inner_block__2 .campare_containter { display: flex; justify-content: space-between; margin: 0 auto; width: 1210px } .section__corningGlass .inner_block__2 .campare_containter .item { width: 600px } .section__corningGlass .inner_block__2 .campare_containter .item .img { width: 600px; height: 375px } .section__corningGlass .inner_block__2 .campare_containter .item .title { margin-top: 40px; font-size: 32px } .section__corningGlass .inner_block__2 .campare_containter .item .info { margin-top: 5px; font-size: 17px } .section__corningGlass .inner_block__2 .campare_containter__1 { margin-top: 30px } .section__corningGlass .inner_block__2 .campare_containter__2 { margin-top: 80px } } @media all and (min-width:1280px) { #CMD .section__corningGlass .campare_containter__1 .img_grid_0 { background-image: url(../images_1/campare1_01_corningGlass.jpg) } } @media all and (min-width:1280px) { #CMD .section__corningGlass .campare_containter__1 .img_grid_1 { background-image: url(../images_1/campare1_02_corningGlass.jpg) } } @media all and (min-width:1280px) { #CMD .section__corningGlass .campare_containter__2 .img_grid_0 { background-image: url(../images_1/campare2_01_corningGlass.jpg) } } @media all and (min-width:1280px) { #CMD .section__corningGlass .campare_containter__2 .img_grid_1 { background-image: url(../images_1/campare2_02_corningGlass.jpg) } } @media all and (min-width:1280px) { .section__display-outer-s1 { padding-top: 80px; padding-bottom: 90px } .section__display-outer-s1 .img__main { margin: -342px auto 0; max-width: 2560px; height: 1200px } .section__display-outer-s1 .img__main { background-image: url(../images_1/main_display.jpg) } } @media all and (min-width:1280px) { .section__display-outer-s1 .wd__feature__list { max-width: 1180px } .section__display-outer-s1 .wd__feature__list.list-icon { margin-top: 22px } } @media all and (min-width:1280px) { .section__display-outer-s1.is-top-main .wd__feature__list { margin-top: 63px } .section__display-outer-s1.is-top-main .wd__feature__list.list-icon { margin-top: 29px } } @media all and (min-width:1280px) { .section__display-outer-s1.no-top-main .wd__feature__list { margin-top: 63px } .section__display-outer-s1.no-top-main .wd__feature__list.list-icon { margin-top: 29px } } @media all and (min-width:1280px) { .section__display-outer-s1.is-bottom-main .wdblockimg { margin-top: -128px } } @media all and (min-width:1280px) { .section__display-outer-s1.no-bottom-main .wdblockimg { margin-top: 37px } } @media all and (min-width:1280px) { .modal-inner__sectionsDisplay { padding-bottom: 169px } .modal-inner__sectionsDisplay section.wd__section { padding-top: 100px; padding-bottom: 60px } .modal-inner__sectionsDisplay section.wd__section .wd__content { margin-top: -.4em } .modal-inner__sectionsDisplay section.wd__section:last-child { margin-bottom: 124px } } @media all and (min-width:1280px) { .section__display-inner-s1 .wd__content { margin-top: -.4em } } @media all and (min-width:1280px) { .section__display-inner-s1 .product_list { margin-top: 69px; max-width: 1144px } } /* @media all and (min-width:1280px) { .section__display-inner-s1 .imgItem-img-0 { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/display/images/inner/section1/large/1x/pic_0.jpg) } } */ @media all and (min-width:1280px) { .section__display-inner-s1 .imgItem-img-1 { background-image: url(../images_1/pic_1_section1.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s1 .imgItem-img-2 { background-image: url(../images_1/pic_2_section1.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s1 .imgItem-img-3 { background-image: url(../images_1/pic_3_section1.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s1 .imgItem-img-4 { background-image: url(../images_1/pic_4_section1.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s1 .imgItem-img-5 { background-image: url(../images_1/pic_5_section1.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s1 .wdOledTable.oledTable .table_container { margin-top: 96px; margin-right: auto; margin-left: auto; padding-bottom: 0; width: 1128px } .section__display-inner-s1 .wdOledTable.oledTable .table_container tr td, .section__display-inner-s1 .wdOledTable.oledTable .table_container tr th { padding: 19px 14px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col] { padding: 0 0 0 58px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=td-] { padding-right: 0; padding-left: 58px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col], .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=td-] { width: 320px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col]:last-child, .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=td-]:last-child { padding-right: 10px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .rol-1, .section__display-inner-s1 .wdOledTable.oledTable .table_container .td-0 { width: 170px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val { font-size: 20px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col-] { padding-bottom: 25px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col-], .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col-] * { font-size: 20px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val+.text__val { padding-top: 6px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 .img__table { margin-left: -11px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 .text__val { padding-left: 13px } } @media all and (min-width:1280px) { .section__display-inner-s2 .image__container { display: flex; justify-content: space-between; margin-top: 73px; margin-right: auto; margin-left: auto; width: 1144px } .section__display-inner-s2 .imgItem-img { width: 364px; height: 600px } .section__display-inner-s2 .image__container .imgItem-title { padding: 33px 20px 0; box-sizing: border-box; font-size: 1.5rem } } @media all and (min-width:1280px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0_section2.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1_section2.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2_section2.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s3 { margin-top: 0 } } @media all and (min-width:1280px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0_section3.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1_section3.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2_section3.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-3 { background-image: url(../images_1/pic_3_section3.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s3 .image__container { margin-top: 80px; width: 1144px } .section__display-inner-s3 .imgItem { position: relative; margin-bottom: 0; width: 308px } .section__display-inner-s3 .imgItem-title { padding: 0 20px; padding-bottom: 18px; font-size: 48px } .section__display-inner-s3 .imgItem-info { padding: 30px 20px 0; font-size: 20px } .section__display-inner-s3 .imgItem-img { width: 286px; height: 560px; background-size: contain } } @media all and (min-width:1280px) { .section__display-inner-s4 .campare_containter { display: flex; justify-content: space-between; margin: 0 auto; width: 1144px } .section__display-inner-s4 .campare_containter .item { width: 565px } .section__display-inner-s4 .campare_containter .item .img { width: 565px; height: 353px; background-size: contain } .section__display-inner-s4 .campare_containter .item .title { margin-top: 40px; font-size: 32px } .section__display-inner-s4 .campare_containter .item .info { margin-top: 5px; font-size: 20px } .section__display-inner-s4 .campare_containter__1 { margin-top: 30px } .section__display-inner-s4 .campare_containter__2 { margin-top: 80px } } @media all and (min-width:1280px) { .section__display-inner-s4 .campare_containter__1 .img_grid-0 { background-image: url(../images_1/campare1_0_section4.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s4 .campare_containter__1 .img_grid-1 { background-image: url(../images_1/campare1_1_section4.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s4 .campare_containter__2 .img_grid-0 { background-image: url(../images_1/campare2_0_section4.jpg) } } @media all and (min-width:1280px) { .section__display-inner-s4 .campare_containter__2 .img_grid-1 { background-image: url(../images_1/campare2_1_section4.jpg) } } @media all and (min-width:1280px) { .section__environment-outer-s1 { padding-top: 97px; padding-bottom: 90px } .section__environment-outer-s1 .img__main { margin: -829px auto 0; max-width: 2560px; height: 1300px } .section__environment-outer-s1 .img__main { background-image: url(../images_1/main_environment.jpg) } } @media all and (min-width:1280px) { .section__environment-outer-s1 .wd__feature__list { margin-top: -196px; max-width: 1000px } .section__environment-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { height: 116px } .section__environment-outer-s1 .wd__feature__list.list-icon { margin-top: 60px } } @media all and (min-width:1280px) { .section__environment-outer-s1 .wdblockimg { margin-top: 87px } } @media all and (min-width:1280px) { .section__ksp { padding-top: 128px; padding-bottom: 0 } } @media all and (min-width:1280px) { .section__ksp+.section__wdvideos .wdVideos.active { padding-top: 128px } } @media all and (min-width:1280px) { .section__ksp .wdtile { margin-right: auto; margin-left: auto; width: 1144px } .section__ksp .wdtile .item__block { justify-content: center; padding: 58px 0 } .section__ksp .wdtile .item__block .item__content--title, .section__ksp .wdtile .item__block .item__content--title *, .section__ksp .wdtile .item__block .wd__content .content__title, .section__ksp .wdtile .item__block .wd__content .content__title * { font-size: 38px; line-height: 1.2 } .section__ksp .wdtile .item__block .item__content--descBottom, .section__ksp .wdtile .item__block .item__content--descBottom *, .section__ksp .wdtile .item__block .item__content--descTop, .section__ksp .wdtile .item__block .item__content--descTop *, .section__ksp .wdtile .item__block .item__leftdesc, .section__ksp .wdtile .item__block .item__leftdesc *, .section__ksp .wdtile .item__block .wd__content .content__info, .section__ksp .wdtile .item__block .wd__content .content__info * { font-size: 21px; line-height: 1.4 } .section__ksp .wdtile .item__block--content { padding-right: 100px; padding-left: 100px } .section__ksp .wdtile .item__block--feature { padding-right: 50px; padding-left: 50px } .section__ksp .wdtile .item__block--feature .item__leftdesc { padding: 18px 24px 24px } .section__ksp .wdtile .item__block--feature .item__image { min-height: 118px; margin-bottom: 22px } .section__ksp .wdtile .item__block--feature .item__content--descTop { margin-bottom: 12px } .section__ksp .wdtile .item__block--feature .item__content--descBottom { margin-top: 12px } .section__ksp .wdtile .item__block--feature .item__content--descBottom span+span { margin-top: 2px } } @media all and (min-width:1280px) { .section__ksp .item__block.large-v-top { justify-content: flex-start } .section__ksp .item__block--feature, .section__ksp .item__block[class*=large-img-v-], .section__ksp .item__block[class*=large-txt-v-] { flex-direction: column; flex-wrap: wrap } .section__ksp .item__block--content, .section__ksp .item__block[class*=large-img-h-], .section__ksp .item__block[class*=large-txt-h-] { flex-direction: row; flex-wrap: nowrap; align-items: stretch } .section__ksp .item__block--content .item__content { width: 50% } .section__ksp .item__block--content .item__image { width: 50% } .section__ksp .item__block--feature .item__content { width: 100% } .section__ksp .item__block--feature .item__image { width: 100% } .section__ksp .item__block--content.large-img-v-txt .item__content, .section__ksp .item__block--feature.large-img-v-txt .item__content { width: 100%; order: 2 } .section__ksp .item__block--content.large-img-v-txt .item__image, .section__ksp .item__block--feature.large-img-v-txt .item__image { width: 100%; order: 1 } .section__ksp .item__block--content.large-txt-v-img .item__content, .section__ksp .item__block--feature.large-txt-v-img .item__content { width: 100%; order: 1 } .section__ksp .item__block--content.large-txt-v-img .item__image, .section__ksp .item__block--feature.large-txt-v-img .item__image { margin-bottom: 0; width: 100%; order: 2 } .section__ksp .item__block--content.large-img-h-txt .item__content, .section__ksp .item__block--feature.large-img-h-txt .item__content { width: auto; order: 2; flex-basis: auto; flex-grow: 1; flex-shrink: 1 } .section__ksp .item__block--content.large-img-h-txt .item__image, .section__ksp .item__block--feature.large-img-h-txt .item__image { margin-bottom: 0; width: 50%; order: 1; flex-grow: 0; flex-shrink: 0 } .section__ksp .item__block--content.large-txt-h-img .item__content, .section__ksp .item__block--feature.large-txt-h-img .item__content { width: auto; order: 1; flex-basis: auto; flex-grow: 1; flex-shrink: 1 } .section__ksp .item__block--content.large-txt-h-img .item__image, .section__ksp .item__block--feature.large-txt-h-img .item__image { margin-bottom: 0; width: 50%; order: 2; flex-grow: 0; flex-shrink: 0 } .section__ksp .item__block--content.large-img-v-txt .item__image, .section__ksp .item__block--feature.large-img-v-txt .item__image { margin-bottom: 26px } .section__ksp .item__block--content.large-txt-v-img .item__image, .section__ksp .item__block--feature.large-txt-v-img .item__image { margin-top: 26px } } @media all and (min-width:1280px) { .section__ksp .item__block.large-txt-left, .section__ksp .item__block.large-txt-left * { text-align: left } .section__ksp .item__block.large-txt-center, .section__ksp .item__block.large-txt-center * { text-align: center } .section__ksp .item__block.large-txt-right, .section__ksp .item__block.large-txt-right * { text-align: right } } @media all and (min-width:1280px) { .section__ksp .wdtile__item .item__block.item__block--content .content__title { margin-top: 0; padding: 0 } .section__ksp .wdtile__item .item__block.item__block--content .wd__content .content__info { margin-top: 12px } .section__ksp .wdtile__item .item__block.item__block--content .wd__content .content__info+.content__info { margin-top: 0 } } @media all and (min-width:1280px) { .section__military__grade { margin-top: 0; padding-top: 0 } } @media all and (min-width:1280px) { .section__military__grade .wd__content { position: relative; z-index: 5; margin-right: auto; margin-left: auto } } @media all and (min-width:1280px) { .section__military__grade .wd__feature__list { position: relative; left: 50%; margin-bottom: 280px; margin-left: 140px; width: 380px } .section__military__grade .wd__feature__list .wd__feature .wd__feature__describe { margin-right: auto; margin-left: auto; width: 170px } .section__military__grade .wd__feature__list.features-icon { left: 0; margin-right: auto; margin-bottom: 870px; margin-left: auto; width: 100%; max-width: 1080px } } @media all and (min-width:1280px) { .section__military__grade .image__container { margin-top: -1020px } .section__military__grade .img__main { left: 50%; margin-left: -1280px; width: 2560px; height: 1310px } } @media all and (min-width:1280px) { .section__military__grade .wdtile { margin-right: auto; margin-left: auto; width: 1146px } .section__military__grade .wdtile__item { padding: 39px 34px } } @media all and (min-width:1280px) { .section__military__grade .wdtile { margin-top: -270px; margin-right: auto; margin-left: auto; width: 1146px } .section__military__grade .wdtile__item { padding: 39px 34px } .section__military__grade .wdtile .item__head__slogan-text { font-size: 20px } .section__military__grade .wdtile .item__content { margin-top: 15px; margin-bottom: -6px } .section__military__grade .wdtile .item__content-main { padding-right: 4px; font-size: 18px } .section__military__grade .wdtile .item__content-sub { font-size: 18px } } @media all and (min-width:1280px) { .section__creatorhub-outer-s1 { padding-top: 100px } .section__creatorhub-outer-s1 .wdtab .wdtab__panel { margin-top: -15px; padding-top: 0 } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay { margin-top: 0; margin-left: 425px } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 0 } .section__creatorhub-outer-s1 .wdtab .wdtab__panel__item-image .img__main { width: 743px; height: 467px } } @media all and (min-width:1280px) { .section__creatorhub-outer-s1 .img__containter { margin: 0 auto; margin-top: 76px; width: 1031px; height: 593px; background-position: 0 50%; background-repeat: none; background-size: cover } #CMD .section__creatorhub-outer-s1 .img__containter { background-image: url(../images_1/pc.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .img__containter { background-image: url(../images_1/pc.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-0 .img__main { background-image: url(../images_1/screen1.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-0 .img__main { background-image: url(../images_1/screen1.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-1 .img__main { background-image: url(../images_1/screen2.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-1 .img__main { background-image: url(../images_1/screen2.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-2 .img__main { background-image: url(../images_1/screen3.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-2 .img__main { background-image: url(../images_1/screen3.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-3 .img__main { background-image: url(../images_1/screen4.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-3 .img__main { background-image: url(../images_1/screen4.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-4 .img__main { background-image: url(../images_1/screen5.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-4 .img__main { background-image: url(../images_1/screen5.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-5 .img__main { background-image: url(../images_1/screen6.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-5 .img__main { background-image: url(../images_1/screen6.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-6 .img__main { background-image: url(../images_1/screen7.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-6 .img__main { background-image: url(../images_1/screen7.jpg) } } @media all and (min-width:1280px) { .section__creatorhub-outer-s2 { padding-top: 160px } .section__creatorhub-outer-s2 .s2__containter { position: relative; margin: 0 auto; width: 1120px; height: 520px } .section__creatorhub-outer-s2 .s2__containter .wd__feature__list { position: absolute; top: 170px; left: 30px; width: 20% } .section__creatorhub-outer-s2 .s2__containter .img__main { left: 50%; margin-top: -100px; margin-left: -530px; width: 1276px; height: 689px } #CMD .section__creatorhub-outer-s2 .s2__containter .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s2/img1.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s2.use-page-imgs .s2__containter .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/large/1x/s2/img1.jpg) } } @media all and (min-width:1280px) { .section__creatorhub-outer-s2 .wdtab { margin-top: 73px } .section__creatorhub-outer-s2 .wdtab .wdtab__nav-scrollouter { width: 700px } .section__creatorhub-outer-s2 .wdtab .wdtab__autoPlay { margin-left: 348px; width: 60px; height: 60px } .section__creatorhub-outer-s2 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: -57px; width: 60px; height: 60px } .section__creatorhub-outer-s2 .wdtab .wdtab__panel { padding-top: 45px } .section__creatorhub-outer-s2 .wdtab .slick-info { padding-bottom: 38px } .section__creatorhub-outer-s2 .wdtab .slick-info .slick-info-text { font-size: 20px } } @media all and (min-width:1280px) { .section__creatorhub-outer-s2 .tab__video_control { margin: 0 auto; width: 960px; height: 0 } .section__creatorhub-outer-s2 .tab__video_control .tab__video_control_button { position: relative; top: -540px; left: 50%; margin-left: 120px } } @media all and (min-width:1280px) { .section__creatorhub-outer-s2 .video_box { margin: 0 auto; width: 960px; height: 540px } } @media all and (min-width:1280px) { .section__creatorhub-outer-s3 { padding-top: 160px } .section__creatorhub-outer-s3 .wdtab { margin-top: 73px } .section__creatorhub-outer-s3 .wdtab .wdtab__nav-scrollouter { width: 700px } .section__creatorhub-outer-s3 .wdtab .wdtab__autoPlay { margin-left: 348px; width: 60px; height: 60px } .section__creatorhub-outer-s3 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: -57px; width: 60px; height: 60px } .section__creatorhub-outer-s3 .wdtab .wdtab__panel { padding-top: 45px } .section__creatorhub-outer-s3 .wdtab .slick-info { padding-bottom: 52px } .section__creatorhub-outer-s3 .wdtab .slick-info .slick-info-text { font-size: 20px; line-height: 1.5 } .section__creatorhub-outer-s3 .wdtab .slick-image { margin-top: -130px } .section__creatorhub-outer-s3 .tab__video_control { margin: 0 auto; width: 960px } .section__creatorhub-outer-s3 .tab__video_control .tab__video_control_button { position: relative; z-index: 20; top: -275px; left: 481px; margin-left: 0 } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s3.use-img .wdtab__panel__item-0 .smallScreen { background-image: url(../images_1/s3__adobe_screenpad.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s3.use-img .wdtab__panel__item-1 .smallScreen { background-image: url(../images_1/s3__ppt_screenpad.jpg) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s3.use-img .wdtab__panel__item-2 .smallScreen { background-image: url(../images_1/s3__music_screenpad.jpg) } } @media all and (min-width:1280px) { .section__creatorhub-outer-s4 { padding-top: 160px } } @media all and (min-width:1280px) { .section__creatorhub-outer-s4 .tab__video_control .tab__video_control_button { position: relative; z-index: 20; top: 390px; left: 481px } .section__creatorhub-outer-s4 .tab__video_control .tab__video_control_button.type1 { top: 550px; left: 19px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav .wdtab__nav-container { display: flex; align-items: stretch; align-content: stretch } .section__creatorhub-outer-s4 .wdtab .wdtab__autoPlay { margin-left: 463px; width: 60px; height: 60px } .section__creatorhub-outer-s4 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 10px; width: 60px; height: 60px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav .wdtab__nav-container .wdtab__nav-btn { display: flex; align-items: stretch; justify-content: flex-start; padding: 0 30px 5px; box-sizing: border-box; width: 140px; font-size: 16px; flex-direction: column; align-content: space-between } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item .slick-info-text { font-size: 18px text-align: center } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item .slick-info::before { top: -204px; height: calc(100% + 152px) } } @media all and (min-width:1280px) { #CMD .section__creatorhub-outer-s4.use-img .wdtab__panel__item-7 .smallScreen { background-image: url(../images_1/controlPanel_screenpad.jpg) } } @media all and (min-width:1280px) { .section__security-outer-s1 .wdblockimg { margin-top: 67px } } @media all and (min-width:1280px) { .section__security-inner-s2 { padding-top: 160px } } @media all and (min-width:1280px) { .section__security-inner-s2 .img__main { left: 50%; margin-left: -1280px; width: 2560px; height: 824px; margin-top: -94px } #CMD .section__security-inner-s2 .img__main { background-image: url(../images_1/pic_s2.jpg) } } @media all and (min-width:1280px) { .modal-inner__sectionsSecurity section.wd__section:last-child { padding-bottom: 103px } } @media all and (min-width:1280px) { .section__software-outer-s1 .software-infos .wd__content .content__title { margin-top: 0 } .section__software-outer-s1 .software-infos .wd__content .content__info { margin-right: 75px } .section__software-outer-s1 .wd__feature__list { margin-top: 27px } .section__software-outer-s1 .wd__feature__list .wd__feature__data { height: 90px } .section__software-outer-s1 .wd__feature__list .wd__feature__data .img__icon { top: 5px } .section__software-outer-s1 .wd__feature__list .wd__feature { margin-right: 24px !important; margin-left: 0 !important } .section__software-outer-s1 .wd__feature__list .wd__feature__describe { margin-top: 4px; text-align: left } .section__software-outer-s1 .software-info1 .feature-1 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-2 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-3 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-4 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-5 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-6 .wd__feature__data { width: 56px !important } .section__software-outer-s1 .software-info1 .feature-7 .wd__feature__data { width: 70px !important } .section__software-outer-s1 .software-info1 .feature-8 .wd__feature__data { width: 54px !important } .section__software-outer-s1 .software-info1 .feature-9 .wd__feature__data { width: 56px !important } .section__software-outer-s1 .software-info1 .feature-10 .wd__feature__data { width: 64px !important } .section__software-outer-s1 .software-info1 .wd__feature__describe { max-width: 135px !important } .section__software-outer-s1 .software-info2 .wd__feature.feature-1 .img__icon, .section__software-outer-s1 .software-info2 .wd__feature.feature-2 .img__icon, .section__software-outer-s1 .software-info2 .wd__feature.feature-5 .img__icon, .section__software-outer-s1 .software-info2 .wd__feature.feature-6 .img__icon { left: -4px } .section__software-outer-s1 .software-info2 .feature-1 .wd__feature__data { width: 118px !important } .section__software-outer-s1 .software-info2 .feature-2 .wd__feature__data { width: 108px !important } .section__software-outer-s1 .software-info2 .feature-3 .wd__feature__data { width: 112px !important } .section__software-outer-s1 .software-info2 .feature-4 .wd__feature__data { width: 90px !important } .section__software-outer-s1 .software-info2 .feature-5 .wd__feature__data { width: 120px !important } .section__software-outer-s1 .software-info2 .feature-6 .wd__feature__data { width: 120px !important } .section__software-outer-s1 .software-info2 .wd__feature__describe { max-width: 112px !important } .section__software-outer-s1 .software-info3 .feature-1 .wd__feature__data { width: 66px !important } .section__software-outer-s1 .software-info3 .feature-2 .wd__feature__data { width: 60px !important } .section__software-outer-s1 .software-info3 .feature-3 .wd__feature__data { width: 58px !important } .section__software-outer-s1 .software-info3 .feature-4 .wd__feature__data { width: 54px !important } .section__software-outer-s1 .software-info3 .feature-5 .wd__feature__data { width: 52px !important } .section__software-outer-s1 .software-info3 .wd__feature__describe { max-width: 137px !important } } @media all and (min-width:1280px) { #section__software-outer-s1 .wd__feature__list .icon-1 .img__icon { background-image: url(../images_1/icon_ssoftware-outer-s1_1.png) } } @media all and (min-width:1280px) { .wd__feature__list .wd__feature.icon-1 .img__icon { width: 100px } } @media all and (min-width:1280px) { .wd__feature__list .wd__feature .img__icon { top: 0; margin-right: auto; margin-left: auto; /*height: 100px*/ } } @media all and (min-width:1280px) { .section__spatialVision-outer-s1 { padding-top: 70px; padding-bottom: 30px } .section__spatialVision-outer-s1 .wd__feature__list { max-width: 1140px } } @media all and (min-width:1280px) { .section__spatialVision-outer-s2 { padding-top: 80px; padding-bottom: 90px } .section__spatialVision-outer-s2 .wd__feature__list { max-width: 1140px } } @media all and (min-width:1280px) { .section__spatialVision-outer-s3 { padding-top: 80px; padding-bottom: 0 } .section__spatialVision-outer-s3 .wd__content { left: 50%; margin-top: 90px; margin-left: -537px !important; width: 400px } } @media all and (min-width:1280px) { .section__spatialVision-outer-s4 { padding-top: 13px; padding-bottom: 90px } .section__spatialVision-outer-s4 .wd__feature__list { max-width: 1140px } .section__spatialVision-outer-s4 .child_item_1 { transform: translateX(2px) } .section__spatialVision-outer-s4 .child_item_4 { transform: translateX(-2px) } } @media all and (min-width:1280px) { .section__userexperience-outer-s1 .wdblockimg { margin-top: 67px } } @media all and (min-width:1280px) { .section__userExperience-inner-s4 .wdblockimg__container .block.block__scroll-item.block-6 .block-content { max-width: 571px } .section__userExperience-inner-s4 .wdblockimg__container .block.block__scroll-item.block-6 .block-img { height: auto } .section__userExperience-inner-s4 .wdblockimg__container .block.block__scroll-item.block-6 .block-img img { margin-left: auto; width: 572px; height: 340px } } @media all and (min-width:1280px) { .section__userExperience-inner-s7 { padding-top: 160px; padding-bottom: 174px; 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, #683aff 0, #683aff 100%); color: #683aff } .section__userExperience-inner-s7 .userExperience-inner-s7-main { margin: 73px 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 { font-size: 2.1875rem; 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-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 { font-size: 1.875rem; background-image: linear-gradient(to right, #333 0, #333 100%) } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list .wd__content .block-content { padding-top: 312px } .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 } } @media all and (min-width:1280px) { .section__userExperience-inner-s7 .wdblockimg__container .block.imageTop.block-1 img.img__bg { height: 275px } .section__userExperience-inner-s7 .wdblockimg__container .block.imageTop.block-1 .block-content { padding-top: 312px } .section__userExperience-inner-s7 .wdblockimg__container .block.imageTop.block-1 .content__title { text-align: center } .section__userExperience-inner-s7 .wdblockimg__container .block.imageTop.block-2 img.img__bg { height: 275px } .section__userExperience-inner-s7 .wdblockimg__container .block.imageTop.block-2 .block-content { padding-top: 312px } .section__userExperience-inner-s7 .wdblockimg__container .block.imageTop.block-2 .content__title { text-align: center } } @media all and (min-width:1280px) { .section__userExperience-inner-s9 { padding-top: 160px } .section__userExperience-inner-s9 .wd__content .content__info { paddinng-top: 4px } .section__userExperience-inner-s9 .wdtab__panel { height: auto } .section__userExperience-inner-s9 .wdtab { overflow: hidden; margin: 47px auto 0; width: 1100px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-scrollouter { width: 1030px } .section__userExperience-inner-s9 .wdtab .wdtab__nav::before { width: 1030px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn .nav_icon { margin-bottom: 14px; width: 74px; height: 74px; pointer-events: none } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn span { font-size: 16px } .section__userExperience-inner-s9 .wdtab__panel__item-info { margin: 0 auto 30px; width: 100%; max-width: 800px; line-height: 1.5 } .section__userExperience-inner-s9 .wdtab__panel__item-image { display: flex; justify-content: center } .section__userExperience-inner-s9 .wdtab__panel__item-image .img__main1, .section__userExperience-inner-s9 .wdtab__panel__item-image .img__main2 { margin: 0 12px; width: 496px; height: 340px } .section__userExperience-inner-s9 .single-nav { margin-top: 73px } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_0 .img__main1 { background-image: url(../images_1/tab01-1_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_1 .img__main1 { background-image: url(../images_1/tab02-1_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_2 .img__main1 { background-image: url(../images_1/tab03-1_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_3 .img__main1 { background-image: url(../images_1/tab04-1_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_4 .img__main1 { background-image: url(../images_1/tab05-1_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_5 .img__main1 { background-image: url(../images_1/tab06-1_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_0 .img__main2 { background-image: url(../images_1/tab01-2_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_1 .img__main2 { background-image: url(../images_1/tab02-2_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_2 .img__main2 { background-image: url(../images_1/tab03-2_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_3 .img__main2 { background-image: url(../images_1/tab04-2_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_4 .img__main2 { background-image: url(../images_1/tab05-2_s9.jpg) } } @media all and (min-width:1280px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_5 .img__main2 { background-image: url(../images_1/tab06-2_s9.jpg) } } @media all and (min-width:1280px) { .modal-inner__sectionsUserExperience section.wd__section:last-child { padding-bottom: 103px } } @media all and (min-width:1280px) { .modal-inner__sectionsBattery .wd__content { max-width: 850px } .modal-inner__sectionsBattery .wd__content .content__title { font-size: 2.875rem; margin-bottom: 10px } } @media all and (min-width:1280px) { .section__battery-inner-s1 .img__main { left: 50%; margin-left: -1280px; width: 2560px; height: 1200px; margin-top: -216px } #CMD .section__battery-inner-s1 .img__main { background-image: url(../images_1/main_battery.jpg) } } @media all and (min-width:1280px) { .section__battery-inner-s2 { margin-top: -110px } } @media all and (min-width:1280px) { .section__battery-inner-s3 { margin-top: 140px } .section__battery-inner-s3 .img__main { left: 50%; margin-left: -650px; width: 1300px; height: 800px; margin-top: -90px } #CMD .section__battery-inner-s3 .img__main { background-image: url(../images_1/main_battery_1.jpg) } } @media all and (min-width:1280px) { .section__aiCopilot-outer-s1 .wd__block__slick--outer { margin-top: 74px } .section__aiCopilot-outer-s1 .wd__block__slick--outer::before { top: 591px; left: 0; width: 100vw } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_slickplay-aiCopilot { top: 612px; margin-left: 389px } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_videoplay-aiCopilot { top: 20px; margin-left: 402px } .section__aiCopilot-outer-s1 .wd__block__slick { display: flex; flex-direction: row-reverse } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text { margin-top: 109px; max-width: 680px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__title { font-size: 1.5625rem } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__info { font-size: 20px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__info--1 { margin-top: 15px } .section__aiCopilot-outer-s1 .wd__block__slick__item { padding: 0 10px; padding-top: 19px; width: 900px; min-width: 900px } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-container .wd__play__btn { top: 360px; margin-left: -437px } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-outer { position: absolute; top: 0; width: 676px; height: 422px } .section__aiCopilot-outer-s1 .wd__block__dots { overflow: visible; top: 526px; left: 50%; transform: translateX(-50%) } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots { height: 65px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button { display: block; position: relative; padding-bottom: 22px; width: 140px; font-size: 20px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button::after { top: -10px; height: calc(100% + 10px) } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button p { position: absolute; bottom: 22px; left: 50%; margin-top: 0; width: 100%; max-width: 140px; transform: translate(-50%); line-height: 1.2 } } @media all and (min-width:1280px) { .section__aiCopilot-outer-s1 .img__laptop { left: 50%; margin-left: -450px; width: 900px; height: 500px; position: relative; top: -18px } #CMD .section__aiCopilot-outer-s1 .img__laptop--0 { background-image: url(../images_1/laptop_0.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--0 { mask: url(../images_1/laptop_0_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_0_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--1 { background-image: url(../images_1/laptop_1.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--1 { mask: url(../images_1/laptop_1_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_1_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--2 { background-image: url(../images_1/laptop_2.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--2 { mask: url(../images_1/laptop_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--3 { background-image: url(../images_1/laptop_3.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--3 { mask: url(../images_1/laptop_3_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_3_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--4 { background-image: url(../images_1/laptop_4.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--4 { mask: url(../images_1/laptop_4_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_4_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--5 { background-image: url(../images_1/laptop_5.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--5 { mask: url(../images_1/laptop_5_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_5_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { .modal-inner__aiCopilot { margin-bottom: 0; padding-bottom: 0 } .modal-inner__aiCopilot section.wd__section { padding-top: 160px } .modal-inner__aiCopilot section.wd__section .wd__content { margin-top: -.4em } .modal-inner__aiCopilot section.wd__section:last-child { padding-bottom: 140px } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s1 .wd__feature__list { left: 50%; margin-top: 140px; margin-left: 210px; max-width: 330px } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s1 .wdtab { margin-top: -506px } .section__aiCopilot-inner-s1 .wdtab .wdtab__panel { top: -213px; left: 50%; margin-left: -272px } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn { top: 160px; margin-left: -320px } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s1 .performance_chart_container { margin-top: -40px; max-width: 1080px } .section__aiCopilot-inner-s1 .performance_chart_container .item__content .title { width: calc(32% + 44px) } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s1 .img__container { margin-top: -507px; margin-right: 190px } .section__aiCopilot-inner-s1 .img__bg { left: 50%; margin-left: -1000px; width: 2000px; height: 1000px } #CMD .section__aiCopilot-inner-s1 .img__bg { background-image: url(../images_1/bg_aiCopilot.jpg) } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s1 .img__main-0 { width: 516px; height: 388px } #CMD .section__aiCopilot-inner-s1 .img__main-0 { background-image: url(../images_1/main0_aiCopilot.jpg) } #CMD .section__aiCopilot-inner-s1 .img__main-0 { mask: url(../images_1/main0_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/main0_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s1 .img__main-1 { width: 516px; height: 388px } #CMD .section__aiCopilot-inner-s1 .img__main-1 { background-image: url(../images_1/main1.jpg) } #CMD .section__aiCopilot-inner-s1 .img__main-1 { mask: url(../images_1/main1_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/main1_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s2 { padding-top: 160px } .section__aiCopilot-inner-s2 .wd__content { max-width: 830px } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s2 .performance_chart_container { margin-top: 84px; max-width: 1080px } .section__aiCopilot-inner-s2 .performance_chart .item__content .title { display: flex; align-items: center; justify-content: flex-end; width: calc(11.5% + 45px); min-height: 57px } } @media all and (min-width:1280px) { .section__aiCopilot-inner-s2 .img__container { left: 50%; margin-left: -451px; width: 902px; height: 416px; margin-top: 84px } .section__aiCopilot-inner-s2 .img__container .img__main { left: 50%; margin-left: -619px; width: 1238px; height: 696px; bottom: 16.5% } #CMD .section__aiCopilot-inner-s2 .img__main { background-image: url(../images_1/main_aiCopilot.jpg) } } @media all and (min-width:1280px) { section .large_use { display: block !important } section .large_unuse { display: none } section .small_use { display: none } section .colSpace { height: 230px } section .slick-tab-content .slick-info-item { padding-top: 20px } section .wd__content.wd__content-horz { max-width: 1150px } section .wd__content.wd__content-horz .content-col-1 { width: 37% } section .wd__content.wd__content-horz .content-col-2 { padding-top: 37px; padding-left: 30px } .wd__content .content__slogan { font-size: 20px } .wd__content .content__title { font-size: 62px; margin-top: 5px } .wd__content .content__info { font-size: 20px } .wd__content .content__link.link-gradient { margin-top: -4px !important } .wd__content .content__link.link-gradient.link--1 { margin-top: 10px !important } .wd__feature__list { margin-top: 65px } .wd__feature__list .wd__feature .wd__feature__data { font-size: 48px } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe *, .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 17px } .inner-modal .wd__content.wd__content-horz .content-col-2 { padding-top: 0 } .cmd-sidenav .container-bg { background-color: transparent } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name { background-color: #174d71; padding-left: 16px; border-radius: 10px 0 0 10px; padding-right: 55px; font-size: 1.5rem } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name::after { content: ""; position: absolute; right: 21px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-name::before { content: ""; position: absolute; right: 33px; top: 50%; width: 12px; height: 1px; background-color: #fff } .cmd-sidenav .sidenav-container .container-items .item .item-label .label-triangle { display: none } .cmd-sidenav .sidenav-container .container-items .item .item-dot.enter::after { background: #174d71 } .cmd-sidenav .sidenav-container .container-items .item .item-label { width: 440px } } @media all and (min-width:1280px) { .section__kv { padding-bottom: 100px } .section__kv .wd__content { max-width: 920px; margin: -620px auto 0 } .section__kv .wd__content .content__slogan { font-size: 49px } .section__kv .wd__content .content__title { font-size: 57px; margin-top: -3px } .section__kv .wd__content .content__info { margin-top: 25px; line-height: 1.5 } .section__kv .img__main { width: 2560px; height: 1360px; position: relative; left: 50%; margin-left: -1280px; margin-top: -140px } .section__kv .kv__badge { margin-top: 50px } } @media all and (min-width:1280px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content { min-height: 190px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content { width: 700px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title span { font-size: 66px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__block { padding-left: 20px; padding-right: 20px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__content .wd__content .content__title span { font-size: 62px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__block { padding: 80px 30px 50px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title { margin-top: 32px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title span { font-size: 38px !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__block { padding-left: 20px; padding-right: 20px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__content .wd__content .content__title span { font-size: 62px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__content .wd__content .content__info { font-size: 38px; line-height: 1.2 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block { padding-left: 20px; padding-right: 20px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content { justify-content: center; align-items: center; display: flex } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content { width: 260px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title span { font-size: 38px !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title .plus { position: relative; top: -8px; font-size: .7em } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__info { margin-top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__block { flex-direction: column-reverse } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content { width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content--title span { font-size: 2.25rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image { height: 190px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .ani-item-1 { margin-top: -404px; margin-left: -378px; width: 756px; height: 573px } #CMD .section__ksp .wdtile__item-5 .ani-item-1 { background-image: url(../images_1/ksp_05__bg_ksp.jpg) } } @media all and (min-width:1280px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .img__item { top: calc(16% - 12px); margin-left: -253px; /*margin-left: -91px;*/ } } @media all and (min-width:1280px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block { padding-top: 118px; padding-bottom: 45px; padding-left: 40px; padding-right: 40px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__content { width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__image { height: 99px } } @media all and (min-width:1280px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block { padding-top: 14px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content { width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--title span { font-size: 4.8125rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--descBottom { font-size: 26px; margin-top: 0 } } @media all and (min-width:1280px) { .section__color { padding-top: 160px } .section__color .animate__container { margin-top: 70px } .section__color .animate__container .card__container { max-width: 2560px; width: 1200px; height: 100vh; max-height: 1080px; left: 50%; margin-left: -960px } .section__color .animate__container .card__container .card_item { height: 100vh; max-height: 1080px } .section__color .animate__container .card__container .card_item .item_pc { width: 1211px; height: 1500px; top: calc(50% - 800px); left: calc(50% - 705.5px) } .section__color .animate__container .card__container .card_item .item_title { font-size: 58px; letter-spacing: 30px; top: calc(50% - 33px) } .section__color .animate__container .card__container .nav__container { height: 110px; left: calc(50% - 450px); width: 900px } .section__color .animate__container .card__container .nav__container .nav_item { letter-spacing: 4px; font-size: 32px } } @media all and (min-width:1280px) { .section__thin { padding-top: 160px } .section__thin .wd__content .content__info { font-size: 22px } .section__thin .wd__content.wd__content-horz .content-col-2 { width: 44% } .section__thin .wd__feature__list { width: 500px; left: 50%; margin-left: -575px; margin-top: 50px } .section__thin .wd__feature__list .wd__feature { margin-bottom: 49px } } @media all and (min-width:1280px) { .section__battery { padding-top: 35px; padding-bottom: 86px } .section__battery .sectionnNavPosition.first { top: 500px } .section__battery .main-content { width: 1280px; min-height: 1050px; margin-top: 150px } .section__battery .main-content .wd__content { width: 540px; margin-top: 560px; left: 71px } .section__battery .main-content .wd__feature__list { width: 540px; position: absolute; top: 0; left: 670px; margin-top: 0 } .section__battery .main-content .wd__feature__list .feature-1 .wd__feature__describe { margin-top: 13px } .section__battery .main-content .img__1 { position: absolute; left: -167px; top: -8px; width: 740px; height: 500px; background-position: 50% 50%; border: 1px solid transparent } /* #CMD .section__battery .img__1 { background-image: url(../images_1/pic01_ksp.jpg) }*/ } @media all and (min-width:1280px) { .section__battery .main-content .img__2 { position: absolute; left: 674px; top: 332px; width: 540px; height: 700px; background-position: 50% 50%; border: 1px solid transparent } /* #CMD .section__battery .img__2 { background-image: url(../images_1/pic02_ksp.jpg) }*/ } @media all and (min-width:1280px) { .section__battery .main-content .modal-button-container { width: 540px; display: flex; padding-left: 69px; margin-top: 37px } .section__battery .main-content .modal-button-container .modal-button { padding: 13px 20px } } @media all and (min-width:1280px) { .section__performance .main-content { width: 600px; left: 50%; margin-left: -580px; padding-top: 100px; min-height: 1138px } .section__performance .main-content .wd__feature__list { width: 760px; margin-left: 0 } .section__performance .main-content .wd__feature__list .wd__feature.feature-4 { margin-right: 160px } .section__performance .main-content .wd__feature__list .wd__feature.feature-6 { width: 130px } .section__performance .main-content .wd__feature__list .wd__feature.feature-7 { display: block } .section__performance .video_container { margin-left: -340px; top: 150px } .section__performance .performance_chart_container { width: 1160px; left: 50%; margin-left: -586px; margin-top: 150px } .section__performance .performance_chart_container .item__content .title { font-size: 20px } .section__performance .performance_chart_container .text_comment { padding-left: 6px } } @media all and (min-width:1280px) { .section__s_aiCopilot { padding-top: 90px; padding-bottom: 100px } } @media all and (min-width:1280px) { .section__aiCopilot-outer-s1 { padding-top: 100px; padding-bottom: 100px } .section__aiCopilot-outer-s1 .slick-slider { margin-bottom: 0 } } @media all and (min-width:1280px) { .modal-inner__aiCopilot section.wd__section:last-child { padding-bottom: 140px } } @media all and (min-width:1280px) { .section__display-outer-s1 { padding-bottom: 100px } .section__display-outer-s1 .sectionnNavPosition.first { top: 1270px } .section__display-outer-s1 .wd__content.main-content--top { position: absolute; top: -150px; width: 1000px; left: 50%; margin-left: -500px } .section__display-outer-s1 .wd__content.main-content--bottom { max-width: 800px; margin-top: 250px } .section__display-outer-s1 .wd__content.main-content--bottom .content__slogan, .section__display-outer-s1 .wd__content.main-content--bottom .content__title { display: none } .section__display-outer-s1 .wd__content.main-content--bottom .content__info { font-size: 22px } .section__display-outer-s1 .wdblockimg { margin-top: 40px } .section__display-outer-s1 .img__main { width: 1250px; height: 650px; margin-left: -625px; top: 640px } .section__display-outer-s1 .wd__content.wd__content-horz .content-col-1 { width: 69% } .section__display-outer-s1 .wd__feature__list.list-icon { margin-top: 50px; max-width: 1200px } } @media all and (min-width:1280px) { .section__display-inner-s1 .wd__content.wd__content-horz .content-col-1 { width: 100% } } @media all and (min-width:1280px) { .section__audio { margin-top: -140px } .section__audio .sectionnNavPosition { top: -510px } .section__audio .wd__content .content__info { font-size: 22px } .section__audio .wd__content .content__title { font-size: 40px } .section__audio .img__main { left: 50%; margin-left: -1263px; width: 2560px; height: 721px } #CMD .section__audio .img__main { background-image: url(../images_1/main_audio.jpg) } } @media all and (min-width:1280px) { .section__audio .wd__feature__list { margin-top: 70px !important; margin-bottom: 60px } .section__audio .wd__feature__list .wd__feature { margin: 0 30px } .section__audio .wd__feature__list .feature-2 { margin-top: 10px } } @media all and (min-width:1280px) { .section__keyboard { padding-top: 60px } .section__keyboard .wd__content .content__info { font-size: 22px } .section__keyboard .wd__content .content__title { font-size: 40px } } @media all and (min-width:1280px) { .section__keyboard .main-content { width: 1280px; margin-left: -640px; margin-top: 82px; left: 50% } .section__keyboard .main-content .pic_container { position: absolute; width: 1070px; height: 640px; left: -460px } .section__keyboard .main-content .pic_container .img__pc { width: 1275px; height: 795px; margin-left: -650px; top: -120px } .section__keyboard .main-content .wd__content { width: 600px; left: 50%; margin-left: 63px } .section__keyboard .main-content .wd__feature__list { width: 600px; left: 50%; margin-left: 65px; margin-top: 53px } .section__keyboard .main-content .wd__feature__list .wd__feature .wd__feature__describe { margin-top: -12px } .section__keyboard .main-content .wd__feature__list .wd__feature.feature-1 { margin-right: 20px } .section__keyboard .main-content .wd__feature__list .wd__feature.feature-2 { margin-right: 20px } .section__keyboard .main-content .wd__feature__list .wd__feature.feature-3 { width: 150px; margin-right: 0; margin-left: -30px } .section__keyboard .main-content .modal-button-container { width: 540px; display: flex; padding-left: 69px; margin-top: 30px; left: 50%; position: relative; margin-left: -4px } .section__keyboard .main-content .modal-button-container .modal-button { padding: 13px 20px } } @media all and (min-width:1280px) { .section__keyboard .wd__feature.icon01 .wd__feature__data { width: 150px !important; height: 125px !important } /* #CMD .section__keyboard .wd__feature.icon01 .img__icon { background-image: url(../images_1/icon01_audio.png) }*/ } @media all and (min-width:1280px) { .section__keyboard .wd__feature.icon02 .wd__feature__data { width: 150px !important; height: 125px !important } /* #CMD .section__keyboard .wd__feature.icon02 .img__icon { background-image: url(../images_1/icon02_audio.png) }*/ } @media all and (min-width:1280px) { .section__keyboard .wd__feature.icon03 .wd__feature__data { width: 150px !important; height: 125px !important } /* #CMD .section__keyboard .wd__feature.icon03 .img__icon { background-image: url(../images_1/icon03_audio.png) }*/ } @media all and (min-width:1280px) { .section__connectivity { margin-top: 180px; padding-bottom: 100px } .section__connectivity .wd__content .content__title { font-size: 40px } .section__connectivity .wd__content .content__info { font-size: 22px } .section__connectivity .animate__container { height: 1600px; width: 1400px; margin-left: -700px; margin-top: 230px; position: relative; left: 50% } .section__connectivity .animate__container .scrolltrigger-end { position: absolute; bottom: 370px } .section__connectivity .text_container { width: 100%; left: 0; height: 420px } .section__connectivity .text_container .line { position: relative; /*font-size: 120px;*/ font-size:110px; } .section__connectivity .text_container .line.all { position: absolute; left: 90px; top: 0 } .section__connectivity .img_container { position: relative; top: 370px } .section__connectivity .img_container .img__pc { left: 50%; margin-left: -1280px; /*margin-left: -683px;*/ width: 2560px; height: 1118px; } #CMD .section__connectivity .img__pc { background-image: url(../images/pc_desctop.png); } #CMD .section__connectivity .img__pc { mask: url(../images/pc_mask-3.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images/pc_mask-3.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:1280px) { .section__connectivity .img_container .img__line { left: 50%; margin-left: -413px; width: 572px; height: 114px; margin-top: -54px } #CMD .section__connectivity .img__line { background-image: url(../images_1/line_connectivity.png) } } @media all and (min-width:1280px) { .section__connectivity .line_container { width: 1000px; height: 50px; margin-left: -500px; top: 370px } .section__connectivity .line_container .text_item { font-size: 16px; top: 7px; border: 1px solid transparent } .section__connectivity .line_container .text_item__1 { left: -43px; width: 190px } .section__connectivity .line_container .text_item__2 { left: 183px; width: 123px } .section__connectivity .line_container .text_item__3 { left: 340px } .section__connectivity .line_container .text_item__4 { left: 580px } } @media all and (min-width:1280px) { .section__connectivity .modal-button-container { margin-top: 50px; padding-bottom: 50px; } .section__connectivity .modal-button-container .modal-button { padding: 13px 20px } } @media all and (min-width:1280px) { .section__conference-outer-s1 { padding-top: 100px; padding-bottom: 0 } .section__conference-outer-s1 .wd__content.wd__content-horz .content__title { font-size: 40px } .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2 .block-content, .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3 .block-content, .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-content { padding-bottom: 180px } } @media all and (min-width:1280px) { .modal-inner__conference section.wd__section:last-child { padding-bottom: 130px } } @media all and (min-width:1280px) { .section__security-outer-s1 { padding-top: 160px; padding-bottom: 100px } .section__security-outer-s1 .wd__content .content__title { font-size: 2.1875rem } } @media all and (min-width:1280px) { .section__userExperience-inner-s4 { padding-bottom: 60px } } @media all and (min-width:1280px) { .section__userExperience-inner-s5 { padding-top: 100px; padding-bottom: 60px } } @media all and (min-width:1280px) { .section__userExperience-inner-s6 { padding-top: 100px; padding-bottom: 76px } } @media all and (min-width:1280px) { .section__userExperience-inner-s7 { padding-top: 100px; padding-bottom: 100px } } @media all and (min-width:1280px) { .section__environment-outer-s1 { padding-bottom: 0 } .section__environment-outer-s1 .wd__content.wd__content-horz .content__title { font-size: 40px } } @media all and (min-width:1280px) { .section__military__grade { padding-top: 100px } .section__military__grade .wd__content .content__title { font-size: 40px } .section__military__grade .wd__feature__list .wd__feature .wd__feature__describe { width: 167px } .section__military__grade .wd__feature__list.features-icon { position: relative; left: 50%; margin-left: 155px; width: 430px; display: flex; flex-wrap: wrap; top: 127px } .section__military__grade .wd__feature__list.features-icon .wd__feature .img__icon { margin-right: unset; margin-left: unset } .section__military__grade .wd__feature__list.features-icon .wd__feature__describe { margin-top: 10px; text-align: left } .section__military__grade .image__container { margin-top: -1420px } .section__military__grade .image__container .img__main { left: 50%; /*margin-left: -1280px;*/ margin-left: -948px; width: 2560px; height: 900px; } #CMD .section__military__grade .img__main { background-image: url(../images_1/main_militaryGrade1.jpg) } } @media all and (min-width:1280px) { .section__software-outer-s1 { padding-top: 100px; padding-bottom: 100px } .section__software-outer-s1 .wd__content .content__title { font-size: 40px } .section__software-outer-s1 .software-info1 .feature-10 { width: 94px } } @media all and (min-width:1280px) { .section__security-outer-s1 { padding-top: 160px; padding-bottom: 100px } .section__security-outer-s1 .wd__content .content__title { font-size: 2.1875rem } } @media all and (min-width:1280px) { .section__comment { display: inline-block; margin-top: 0; padding-top: 54px; padding-bottom: 67px; width: 100% } .section__comment.footer-2023 { padding-top: 51px; padding-bottom: 68px } } @media all and (min-width:1280px) { .inner-view .wd__section.first-section { padding-top: 100px !important } .inner-view .wd__section .wd__content .content__title { font-size: 40px } .inner-view .wd__section .wd__content .content__info { font-size: 20px } .inner-view .wd__content.wd__content-horz { max-width: 1080px } .inner-view .wd__content.wd__content-horz .content-col-2 { padding-left: 58px } .inner-view .modal-inner__sectionsBattery { padding-bottom: 120px } } @media all and (min-width:1280px) { .section__innerIoport { padding-top: 100px } .section__innerIoport .img__main { left: 50%; margin-left: -953px; width: 2560px; height: 1065px; margin-top: -230px } #CMD .inner-modal.modal-innerIoport .img__main { background-image: url(../images_1/main_ioport.jpg) } } body #CMD{ font-size: 16px } .inline__block { display: inline-block } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtab.isFakeImg .wdtab__panel__item-image .img__main { margin: 0 auto; width: 660px; height: 354px } #CMD .wdtab.isFakeImg .wdtab__panel__item-image .img__main { background-image: url(https://fakeimg.pl/660x354/) } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdtab { margin-top: 70px } .wdtab .wdtab__nav-btn { padding: 8px 25px; width: auto; font-size: 20px; line-height: 1.2 } .wdtab .wdtab__panel__item { padding-top: 45px } .wdtab .wdtab__panel__item-info__text { margin: 0 auto; margin-top: 0; padding-top: 0; padding-bottom: 45px; width: 548px; font-size: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdOledTable .table_fixed_container.fixed { padding-top: 0 } .wdOledTable .table_fixed_container.fixed .table_fixed { margin-top: 0 } .wdOledTable .table_fixed_container .table_fixed { width: 100vw } .wdOledTable .table_fixed_container .table_fixed::after { display: none } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list { justify-content: flex-end } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list .table_fixed__item { padding: 8px 0 10px 26px; width: 200px } .wdOledTable .table_fixed_container .table_fixed_list { margin-top: 0; margin-right: auto; margin-left: auto; padding-bottom: 0; width: calc(100% - 6px); max-width: 768px; text-align: left } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .wdblockimg__container { margin-right: auto; margin-left: auto; width: calc(100% - 48px); max-width: 724px } .wdblockimg .wdblockimg__container .wd__content { width: 100% } .wdblockimg .wdblockimg__container .block .block-content { padding: 34px 16px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .wdblockimg__container .block.column-span-medium-2 { grid-column-end: span 2 } .wdblockimg .wdblockimg__container .block.column-span-medium-3 { grid-column-end: span 3 } .wdblockimg .wdblockimg__container .block.column-span-medium-4 { grid-column-end: span 4 } .wdblockimg .wdblockimg__container .block.column-span-medium-5 { grid-column-end: span 5 } .wdblockimg .wdblockimg__container .block.column-span-medium-6 { grid-column-end: span 6 } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-img { position: relative; width: 100% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .img__bg { position: relative; padding-bottom: 100%; width: 100%; height: 0 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-content { min-height: 400px; padding-bottom: 148px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-img { position: absolute; bottom: -1px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-content { min-height: 460px; padding-bottom: 225px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-img { position: absolute; bottom: -1px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 { min-height: 300px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-content { padding: 33px 40px; max-width: 50% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-content .wd__content { margin-left: 0; width: 100%; max-width: 330px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-img { position: absolute; top: 50%; left: 50%; width: auto; transform: translateY(-50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-img .img__bg { position: relative; width: 710px; height: 510px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-2 { grid-column-end: span 2 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-3 { grid-column-end: span 3 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-6 { min-height: 0; grid-column-end: span 6 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-6 .block-content { padding: 40px 13px 30px 17px; min-height: 0 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-6 .block-content .wd__content { margin-left: 0; width: 333px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-6 .block-img { overflow: hidden; top: unset; right: 0; bottom: 0; left: unset; width: calc(50% - 13px); height: 100%; transform: translate(0, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-medium-6 .block-img .img__bg { position: absolute; top: unset; bottom: 0; left: 50%; padding-bottom: 100%; width: 100%; height: 0; transform: translate(-50%, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .img__bg { padding-bottom: 0; height: 236px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .block-content { padding: 264px 17px 30px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-3 .block-img { overflow: hidden; height: 236px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-2 .block-img .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-3 .block-img .img__bg { top: 50%; left: 50%; width: 400px; height: 400px; transform: translate(-50%, -50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-6 { min-height: 300px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-6 .block-content { padding: 30px 13px 30px 17px; width: calc(50% - 13px) } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-6 .block-content .wd__content { width: 100% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop.column-span-6 .block-img .img_bg { position: absolute; top: 50%; margin-left: 50%; transform: translate(-50%, -50%) } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2 .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3 .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-content { padding-bottom: 240px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-img { height: 400px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .img__bg { width: 400px; height: 400px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2.imageTop .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3.imageTop .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].imageTop .block-img { height: 237px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2.imageTop .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3.imageTop .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].imageTop .block-content { padding: 264px 17px 30px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-medium-6 { min-height: 300px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-medium-6 .block-content { padding: 30px 13px 30px 17px; max-width: 50% } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-medium-6 .block-img { top: unset; right: 0; bottom: 0; width: calc(50% - 13px); height: 100%; transform: translate(0, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-medium-6 .img__bg { position: absolute; top: unset; bottom: 0; left: 50%; padding-bottom: 0; width: 450px; height: 450px; transform: translate(-50%, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-medium-6.imageTop .block-img .img__bg { top: 50%; bottom: unset; transform: translate(-50%, -50%) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].column-span-medium-6.imageTop .block-content { padding-top: 28px } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .wdblockimg__container .block.column-span-2 .block-video .video__container, .wdblockimg .wdblockimg__container .block.column-span-3 .block-video .video__container { top: unset; bottom: 0; left: 50%; width: 350px; height: 350px; transform: translateX(-50%) } .wdblockimg .wdblockimg__container .block.column-span-6 .block-video .video__container { top: 50%; bottom: unset; left: 50%; width: 100%; height: 100%; transform: translate3d(-50%, -50%, 0) } .wdblockimg .wdblockimg__container .block.column-span-medium-2 .block-video .video__container, .wdblockimg .wdblockimg__container .block.column-span-medium-3 .block-video .video__container { top: unset; bottom: 0; left: 50%; width: 350px; height: 350px; transform: translateX(-50%) } .wdblockimg .wdblockimg__container .block.column-span-medium-6 .block-video .video__container { top: 50%; bottom: unset; left: 50%; width: 724px; height: 300px; transform: translate3d(-50%, -50%, 0) } .wdblockimg .wdblockimg__container .block.imageTop .block-video { max-height: 236px } .wdblockimg .wdblockimg__container .block.imageTop.column-span-2 .block-video .video__container { left: 50%; width: 225px; height: 236px; transform: translateX(-50%) } .wdblockimg .wdblockimg__container .block.imageTop.column-span-3 .block-video .video__container { left: 50%; width: 350px; height: 236px; transform: translateX(-50%) } .wdblockimg .wdblockimg__container .block.imageTop.column-span-6 .block-video .video__container { top: 0; left: 50%; width: 1144px; height: 236px; transform: translateX(-50%) } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-] .ai__noise__container { --voice-iconSize: 240px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container { --voice-iconSize: 150px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container { --voice-iconSize: 180px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-] .ai__noise__container .noise__voice__container { height: var(--voice-iconSize); max-height: var(--voice-iconSize) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 { min-height: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .block-content, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .block-content { padding-bottom: 30px; min-height: unset } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container { padding-bottom: 30px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher.js-showed, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher.js-showed { margin-top: 0; margin-bottom: -10px; padding-top: 0; transition: opacity .5s linear 450ms, margin-top 0s linear .2s, margin-bottom .492s linear .196s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container { top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container .noise__right, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container .noise__right { transform: scale(.3, 1.4) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container.js-active { top: 0; margin-top: 0; max-height: 280px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice { transform: scale(.7) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher { top: -17px; margin-top: 0; margin-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher .noise_desc, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher .noise_desc { margin-top: 0; padding-top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn { margin-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container { margin-top: -5px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher { animation-duration: 380ms } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__left { margin-left: -850px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__right { margin-left: 50px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .img__voice { transition-delay: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container { margin-top: -5px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher { animation-duration: .445s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__left { margin-left: -860px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__right { margin-left: 60px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .img__voice { transition-delay: 0s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active { margin-top: -30px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active { margin-top: -26px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active { transition: margin-top .492s linear .196s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active .noise__switcher { top: -8px; animation-delay: 0s; animation-duration: 3s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active .img__voice { transition-delay: .495s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container { padding-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .img__noise { margin-top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .block-content { padding-bottom: 0; min-height: unset } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher { top: -20px; animation-duration: 350ms } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher.js-showed { margin-bottom: 0; padding-top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container { margin-bottom: 30px; height: 280px; min-height: 280px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container .noise__right { transform: scale(.7, 1.8) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container .noise__left { transform-origin: right } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container .noise__right { transform-origin: left } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container.js-active { margin-top: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .wdItemList { margin-top: 47px; margin-right: auto; margin-left: auto; width: 580px; flex-wrap: nowrap } .wdItemList .item__block { margin-bottom: 70px; width: 100% } .wdItemList .item__block:last-child { margin-bottom: 0 } .wdItemList .item__block__img { width: 100%; height: 342px } .wdItemList .item__block__img .item__img { width: 100%; height: 100%; height: 342px; background-position: center; background-size: 580px 342px } .wdItemList .wd__content.item-content { margin-top: 33px } .wdItemList .wd__content.item-content .content__title { font-size: 22px } .wdItemList .wd__content.item-content .content__info { font-size: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__wdvideos .item-productvideo { padding-bottom: 66px } .section__wdvideos .item-productvideo .detect-point-out { margin-top: -349px; width: 1px; height: 710px } .section__wdvideos .item-productvideo .detect-point-enter { margin-top: 0 } .section__wdvideos .item-productvideo .video__play__btn { bottom: 49px; left: 5%; margin-left: auto } .section__wdvideos .item-productvideo .video__play__btn .svg-circle { fill: transparent } .section__wdvideos .item-productvideo .btn__youtube { bottom: 40px } .section__wdvideos .item-productvideo .btn__youtube span { font-size: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__wdvideos .item-salesvideo { margin-bottom: 66px } .section__wdvideos .sales__containter { display: flex; flex-flow: wrap; width: calc(100% - 60px); max-width: 990px; gap: 12px 16px } .section__wdvideos .sales__containter.tablet.type_1 .sales__item { flex: unset; width: 100% } .section__wdvideos .sales__item { flex: 0 0 calc(50% - 8px); min-height: 271px; padding: 0 } .section__wdvideos .sales__item .sales__item_preview { position: relative; padding-top: 56.284%; height: 0 } .section__wdvideos .sales__item .sales__item_preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__wdvideos .video_info { position: relative; opacity: 1 !important; padding: 14px 0 17px; font-size: .9375rem; background: #1b1b1b; min-height: 75px } .section__wdvideos .sales_button { margin-top: -23px } } @media all and (min-width:731px) and (max-width:1279.5px) { .performance_chart { width: 88%; max-width: 676px } .performance_chart .item__content .title { padding-right: 20px; width: calc(33% + 20px); font-size: 17px; line-height: 1.3 } .performance_chart .item_contents { padding-right: 26px } .performance_chart .item_contents .bar .bar__score__txt { font-size: 16px } .performance_chart .item__highline { top: 19px } .performance_chart .item__highline .img__highline { width: 58px } .performance_chart .item__highline .highline_text { top: -10px; margin-left: 10px } .performance_chart .text_comment { margin-top: 14px } } @media all and (min-width:731px) and (max-width:1279.5px) { .performance_chart_multi { margin-top: 96px } .performance_chart_multi .chart__title { margin-bottom: 40px; font-size: 2.25rem } .performance_chart_multi .item_contents { padding-right: 242px } .performance_chart_multi .item__content { margin-bottom: 37px } .performance_chart_multi .item__content .bar__content { margin-bottom: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .performance_chart_multi .chart__bar__infos { margin-top: 41px; padding-left: 177px } .performance_chart_multi .bar__info { margin-bottom: 19px } .performance_chart_multi .bar__info__txt { margin-left: 7px; font-size: 16px } .performance_chart_multi .text_comment { margin-top: 40px; padding-left: 177px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__adobebanner-outer-s1 { overflow: hidden; margin-top: 0; padding-top: 0; padding-bottom: 0 } .section__adobebanner-outer-s1 .banner__container .banner__item { min-height: 486px } .section__adobebanner-outer-s1 .banner__container .wd__content { top: 0; padding-top: 88px; padding-bottom: 60px; width: 514px } .section__adobebanner-outer-s1 .banner__container .img__main { left: 50%; margin-top: -356px; margin-left: -650px; width: 1300px; height: 894px } .section__adobebanner-outer-s1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/adobeBanner/images/outer/medium/1x/main.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__antimicrobial-outer-s1 .wd__content .content__title { max-width: 700px } .section__antimicrobial-outer-s1 .wd__content .content__info { max-width: 830px } .section__antimicrobial-outer-s1 .img__main { margin-top: -482px; max-width: 1300px; height: 1300px } .section__antimicrobial-outer-s1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/outer/medium/1x/s1/main.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-outer-s1 .wd__feature__list { margin-top: 49px; max-width: 1000px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature { margin-right: 20px !important; margin-left: 20px !important } .section__antimicrobial-outer-s1 .wd__feature__list .feature-1 { max-width: 125px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon { top: -4px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { top: 0; margin-bottom: 13px } .section__antimicrobial-outer-s1 .wd__feature__list .icon-iso21702 { max-width: 140px } .section__antimicrobial-outer-s1 .wd__feature__list .icon-iso22196 { max-width: 160px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-outer-s1 .wd__content_2 { left: 50% !important; margin-top: -261px; margin-left: -320px; width: 640px } .section__antimicrobial-outer-s1 .wd__content_2 .content__comment { font-size: 16px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-outer-s1 .modal-button-container { margin-top: 40px } } @media all and (min-width:731px) and (max-width:1279.5px) { .inner-view .inner-modal.modal-inner__sectionsDisplay { padding-bottom: 1px } .inner-view .inner-modal.modal-inner__sectionsDisplay section.wd__section { padding-top: 107px } .inner-view .inner-modal.modal-inner__sectionsDisplay section.wd__section .wd__content { margin-top: -.4em } .inner-view .inner-modal.modal-inner__sectionsDisplay section.wd__section:last-child { margin-bottom: 167px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s1 { padding-top: 146px } .section__antimicrobial-inner-s1 .wd__content { max-width: 760px } .section__antimicrobial-inner-s1 .img__main { margin: 84px auto 0; max-width: 1300px; height: 916px } /* .section__antimicrobial-inner-s1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/inner/section1/medium/1x/main.jpg) }*/ } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s1 .image__container { margin-top: 34px; width: 566px } .section__antimicrobial-inner-s1 .image__container .imgItem { align-items: center } .section__antimicrobial-inner-s1 .image__container .imgItem-title { padding-bottom: 11px; font-size: 1.75rem } .section__antimicrobial-inner-s1 .image__container .imgItem-info { font-size: 20px; line-height: 1.5 } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-img-1 { width: 195px; height: 195px } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-content { padding-top: 0; padding-left: 25px; width: 360px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 { margin-top: 24px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-img-2 { width: 194px; height: 194px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-content { padding-top: 0; padding-left: 22px; width: 355px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 { margin-top: -9px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-img-3 { margin-left: -203px; width: 400px; height: 250px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-content { padding-top: 0; padding-left: 14px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s2 { padding-top: 96px; padding-bottom: 140px } .section__antimicrobial-inner-s2 .wd__content { max-width: 760px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s2 .colItem-2 .colItem_title { transform: translateX(-3.5px) } .section__antimicrobial-inner-s2 .colItem-2 .colItem-content .colItem_info-1, .section__antimicrobial-inner-s2 .colItem-2 .colItem-content .colItem_info-2 { transform: translateX(-3.5px) } .section__antimicrobial-inner-s2 .colItem-3 .colItem_title { transform: translateX(2px) } .section__antimicrobial-inner-s2 .colItem-4 .colItem-content .colItem_info-2 { transform: translateX(2px) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s2 .steps { margin-top: -35px } .section__antimicrobial-inner-s2 .steps .step { display: block; margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s2 .steps .step .step-img { margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s2 .steps .step .step-content { margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s2 .steps .step .step-content .content-info { text-align: center } .section__antimicrobial-inner-s2 .steps .step.step-1 { width: 470px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img { left: -6px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-content { margin-top: -5px } .section__antimicrobial-inner-s2 .steps .step.step-arrow { margin-right: auto; margin-left: auto; height: 26px } .section__antimicrobial-inner-s2 .steps .step.step-arrow .img__arrow { top: 23px; left: 50%; margin-left: -13px; width: 25px; height: 74px } .section__antimicrobial-inner-s2 .steps .step.step-2 { width: 731px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img { width: 731px; height: 468px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img .video-item { margin-left: -365px; width: 731px; height: 468px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img .video__play__btn { top: 388px; margin-left: 321px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-content { margin-top: -20px; max-width: 600px } .section__antimicrobial-inner-s2 .table__container { margin-top: 71px; margin-left: -365px; width: 730px; height: 430px } .section__antimicrobial-inner-s2 .table__container .img__bg { left: 50%; margin-left: -365px; width: 730px; height: 430px } #CMD .section__antimicrobial-inner-s2 .table__container .img__bg { background-image: url(../images_1/chart.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s2 .table__container .vertical { top: 0; left: 0; width: 730px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem { width: 160px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 { width: 157px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-1 { top: 124px; left: 20px; width: 157px; font-size: 22px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-2 { top: 283px; left: 20px; font-size: 22px; text-align: left } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem_title { width: 146px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem_title { width: 161px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { width: 140px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { top: 44px; font-size: 16px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content { top: 210px; justify-content: center; width: 220px; height: 270px; color: #bababa } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info { font-size: 16px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info-2 { top: 160px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { margin-left: 24px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-5 { width: 135px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-5 span { top: 206px; right: 15px; width: 120px; font-size: 1.4375rem } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__antimicrobial-inner-s2 .modal-button-container { margin-top: 59px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD #section__antimicrobial-inner-s2 .step-arrow .img__arrow { background-image: url(../images_1/arrow.png) } } @media all and (min-width:731px) and (max-width:1279.5px) { .modal-inner__sectionsAntimicrobial section.wd__section:last-child { padding-bottom: 111px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodirac-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__audiodirac-outer-s1 .wd__content .content__title { max-width: 700px } .section__audiodirac-outer-s1 .wd__content .content__info { max-width: 810px } .section__audiodirac-outer-s1 .img__main { margin-top: -287px; max-width: 1300px; height: 1096px } .section__audiodirac-outer-s1 .img__main { background-image: url(../images_1/main_audioDirac1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodirac-outer-s1 .wd__feature__list { max-width: 740px } .section__audiodirac-outer-s1 .wd__feature__list.list-icon { margin-top: 27px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodirac-outer-s1 .wdblockimg { margin-top: -197px } } @media all and (min-width:731px) and (max-width:1279.5px) { .modal-inner__sectionsAudioDirac section.wd__section:last-child { padding-bottom: 110px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDirac-inner-s1 { padding-top: 100px } .section__audioDirac-inner-s1 .wd__content { max-width: 800px } .section__audioDirac-inner-s1 .dirac_compare { display: flex; justify-content: center; margin-top: 50px } .section__audioDirac-inner-s1 .dirac_compare .dirac_compare__with, .section__audioDirac-inner-s1 .dirac_compare .dirac_compare__without { margin: 0 12px; border-radius: 20px } .section__audioDirac-inner-s1 .dirac_compare .compare_pic { width: 350px; height: 458px } .section__audioDirac-inner-s1 .dirac_compare .compare_text { position: absolute; top: 400px; font-size: 22px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDirac-inner-s1 .dirac_compare__without .compare_pic { background-image: url(../images_1/pic1_audioDirac1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDirac-inner-s1 .dirac_compare__with .compare_pic { background-image: url(../images_1/pic2_audioDirac1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDirac-inner-s2 { padding-top: 95px; padding-bottom: 110px } .section__audioDirac-inner-s2 .wd__content { max-width: 800px } .section__audioDirac-inner-s2 .audio__chart { margin: 0 auto; margin-top: 50px; box-sizing: border-box; width: 724px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 { height: 421px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .img-slick { width: 100%; height: 100% } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .top .topLeft { top: 26px; left: 40px; width: 41% } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .top .topRight { top: 26px; right: 12%; width: 40% } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .left { top: 170px; left: -75px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .right { right: 85px; bottom: 26px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .num { top: 49%; right: -63px; font-size: 32px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDirac-inner-s2 .audio__chart_0 .img-slick-1 { background-image: url(../images_1/pic.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodolby-outer-s1 { padding-top: 80px; padding-bottom: 80px } .section__audiodolby-outer-s1 .wd__content .content__title { max-width: 700px } .section__audiodolby-outer-s1 .wd__content .content__info { max-width: 810px } .section__audiodolby-outer-s1 .img__main { margin-top: -298px; margin-bottom: -195px; max-width: 1300px; height: 1096px } .section__audiodolby-outer-s1 .img__main { background-image: url(../images_1/main_audioDirac1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodolby-outer-s1 .wd__feature__list { max-width: 740px } .section__audiodolby-outer-s1 .wd__feature__list.list-icon { margin-top: 3px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodolby-outer-s1 .wdblockimg { margin-top: -1px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audiodolby-outer-s2 { padding-top: 60px; padding-bottom: 80px } .section__audiodolby-outer-s2 .wd__content .content__title { max-width: 700px } .section__audiodolby-outer-s2 .wd__content .content__info { max-width: 810px } .section__audiodolby-outer-s2 .wdblockimg { margin-top: 50px } } @media all and (min-width:731px) and (max-width:1279.5px) { .modal-inner__sectionsAudioDolby section.wd__section:last-child { padding-bottom: 111px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDolby-inner-s1 { padding-top: 100px } .section__audioDolby-inner-s1 .wd__content { max-width: 760px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDolby-inner-s1 .img__main { left: 50%; margin-left: -650px; width: 1300px; height: 562px; margin-top: -20px } #CMD .section__audioDolby-inner-s1 .img__main { background-image: url(../images_1/pic_audioDirac1s.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDolby-inner-s2 { padding-top: 80px } .section__audioDolby-inner-s2 .wd__content { max-width: 760px } .section__audioDolby-inner-s2 .ainoise_compare { display: flex; justify-content: center; margin-top: 50px } .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__with, .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__without { margin: 0 12px; border-radius: 20px } .section__audioDolby-inner-s2 .ainoise_compare .compare_pic { width: 350px; height: 368px } .section__audioDolby-inner-s2 .ainoise_compare .compare_text { position: absolute; top: 25px; font-size: 22px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDolby-inner-s2 .ainoise_compare__without .compare_pic { background-image: url(../images_1/pic1_audioDirac1s.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDolby-inner-s2 .ainoise_compare__with .compare_pic { background-image: url(../images_1/pic2_audioDirac1s.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDolby-inner-s3 { padding-top: 120px } .section__audioDolby-inner-s3 .wd__content { max-width: 800px } .section__audioDolby-inner-s3 .audio__chart { margin: 0 auto; margin-top: 50px; box-sizing: border-box; width: 724px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 { height: 449px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .img-slick { width: 100%; height: 100% } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .top .topLeft { top: 52px; left: 40px; width: 41% } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .top .topRight { top: 26px; right: 12%; width: 40% } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .left { top: 200px; left: -75px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .right { right: 85px; bottom: 26px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .num { top: 52%; right: -63px; font-size: 32px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDolby-inner-s1+.section__audioDolby-inner-s3 { padding-top: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDolby-inner-s3 .audio__chart_0 .img-slick-1 { background-image: url(../images_1/pic_audioDirac1a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audioDolby-inner-s4 { padding-top: 120px !important; padding-bottom: 130px } .section__audioDolby-inner-s4 .wd__content { max-width: 800px } .section__audioDolby-inner-s4 .wdtab { margin-top: 50px } .section__audioDolby-inner-s4 .wdtab .wdtab__autoPlay { margin-left: 325px } .section__audioDolby-inner-s4 .wdtab .wdtab__panel__item-info { width: 80% } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn { font-size: 1.5rem } .section__audioDolby-inner-s4 .audio__chart { margin: 0 auto; box-sizing: border-box; width: 724px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 { height: 534px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .img-slick { height: 534px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .title { top: 44px; font-size: 22px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .y { top: 168px; left: -73px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .x { right: 33px; bottom: 72px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav { bottom: 38px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item { margin: 0 22px; padding-left: 35px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item::after { width: 25px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 { height: 534px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .img-slick { height: 534px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .title { top: 35px; font-size: 22px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .y { top: 179px; left: -58px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .x { right: 35px; bottom: 87px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .red { top: 85px; left: 168px; padding: 0 10px; max-width: 140px; text-align: center } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav { display: flex; bottom: 30px; left: 55px; width: 720px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item { display: block; margin: 0 7px; padding-left: 31px; width: 20%; text-align: left } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item::after { top: 10px; bottom: inherit; left: -4px; width: 25px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--1::after { background-size: 9px 2px; background-image: linear-gradient(to right, #ff3860 57%, rgba(255, 255, 255, 0) 0) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--3::after { left: 2px; width: 24px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDolby-inner-s4 .audio__chart_1 .img-slick-1 { background-image: url(../images_1/pic1_audioDirac1a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__audioDolby-inner-s4 .audio__chart_2 .img-slick-2 { background-image: url(../images_1/pic2_audioDirac1a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__noise .sub__content { margin-top: 50px; margin-right: auto; margin-left: auto; width: 79% } .section__noise .sub__content .content__title { font-size: 1.875rem } .section__noise .sub__content .content__info { margin-top: 8px } .section__noise .nav__noise { margin-top: 37px } .section__noise .nav__noise .nav__item { margin: 0 9px; padding: 13px 10px; width: 226px; border-width: 3px; border-radius: 20px } .section__noise .nav__noise .nav__item .nav__content .img__icon { display: inline-block; margin-right: 8px; width: 45px; height: 45px } .section__noise .nav__noise .nav__item .nav__content .nav__text { display: inline-block; width: 130px } .section__noise .nav__noise .nav__item .nav__content .nav__text .content__title { font-size: 28px } .section__noise .noise__switcher { margin-top: 50px } .section__noise .noise__switcher.js-showed { margin-bottom: 50px } .section__noise .img__noise { margin-top: -100px; transform: scale(.65) } .section__noise .modal-button-container { margin-top: -40px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__conference-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__conference-outer-s1 .wd__content .content__title { max-width: 700px } .section__conference-outer-s1 .wd__content .content__info { max-width: 830px } .section__conference-outer-s1 .wdblockimg { margin-top: 49px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__conference-inner-s1 { padding-top: 80px } .section__conference-inner-s1 .wd__content { max-width: 700px } .section__conference-inner-s1 .wdtab__panel { height: 250px } .section__conference-inner-s1 .wdtab { margin: 20px auto 0 } .section__conference-inner-s1 .wdtab .wdtab__autoPlay { margin-left: 320px } .section__conference-inner-s1 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 30px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn { padding: 25px 15px 10px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn .nav_icon { margin-bottom: 14px; width: 50px; height: 50px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn span { font-size: 16px } .section__conference-inner-s1 .wdtab__panel__item-info { margin-right: auto; margin-left: auto; width: 100%; max-width: 700px; line-height: 1.5 } .section__conference-inner-s1 .wdtab__panel__item-info__text { padding-bottom: 35px } .section__conference-inner-s1 .wdtab__panel__item-image { display: flex; margin: 0 auto; max-width: 730px; grid-gap: 20px; gap: 20px } .section__conference-inner-s1 .wdtab__panel__item-image .img__main1, .section__conference-inner-s1 .wdtab__panel__item-image .img__main2 { width: 100%; height: 211px } .section__conference-inner-s1 .single-nav { margin-top: 48px } .section__conference-inner-s1 .single-nav .wdtab__panel__item-info { margin-right: auto; margin-left: auto } .section__conference-inner-s1 .video-container .video__outer { margin: 0 auto; max-width: 308px; height: 211px } .section__conference-inner-s1 .video-container .wd__play__btn { bottom: 10px; margin-left: -144px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_0 .img__main1 { background-image: url(../images_1/tab01-1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_1 .img__main1 { background-image: url(../images_1/tab02-1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_2 .img__main1 { background-image: url(../images_1/tab03-1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_3 .img__main1 { background-image: url(../images_1/tab04-1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_4 .img__main1 { background-image: url(../images_1/tab05-1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_5 .img__main1 { background-image: url(../images_1/tab06-1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_0 .img__main2 { background-image: url(../images_1/tab01-2_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_1 .img__main2 { background-image: url(../images_1/tab02-2_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_2 .img__main2 { background-image: url(../images_1/tab03-2_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_3 .img__main2 { background-image: url(../images_1/tab04-2_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_4 .img__main2 { background-image: url(../images_1/tab05-2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_5 .img__main2 { background-image: url(../images_1/tab06-2_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__noise { margin-bottom: -96px; padding-top: 120px !important } .section__noise .wd__content { max-width: 800px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__conference-inner-s3 { padding-top: 110px !important; padding-bottom: 90px } .section__conference-inner-s3 .wd__content { max-width: 800px } .section__conference-inner-s3 .mode_container { margin: 0 auto; margin-top: 50px; width: 700px } .section__conference-inner-s3 .mode_container .title { margin-bottom: 10px; font-size: 1.875rem } .section__conference-inner-s3 .mode_container .info { margin: 0 auto; width: 90%; font-size: 20px; line-height: 1.5 } .section__conference-inner-s3 .mode_container .img_containter .mode_img img { background-size: contain } .section__conference-inner-s3 .mode_container .img_containter .mode_img .img_text { padding-bottom: 5px; font-size: 20px; line-height: 1.5 } .section__conference-inner-s3 .mode_container .toggle_off, .section__conference-inner-s3 .mode_container .toggle_on { width: 65px; height: 30px } .section__conference-inner-s3 .mode_container__1 .img_containter { display: flex; justify-content: center; margin-top: 16px } .section__conference-inner-s3 .mode_container__1 .img_containter .mode_img { width: 50% } .section__conference-inner-s3 .mode_container__1 .mode1 { margin: 0 auto; width: 325px; height: 180px } .section__conference-inner-s3 .mode_container__1 .mode2 { margin: 0 auto; width: 325px; height: 180px } .section__conference-inner-s3 .mode_container__2 .img_containter { position: relative; margin-top: -10px } .section__conference-inner-s3 .mode_container__2 .img_containter .img_text { position: absolute; top: 40px; left: calc(50% - 200px); width: 400px } .section__conference-inner-s3 .mode_container__2 .img_containter .toggle_on { position: absolute; top: 90px; left: calc(50% - 32.5px) } .section__conference-inner-s3 .mode_container__2 .mode3 { left: 50%; margin-left: -365px; width: 730px; height: 365px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s3 .mode1 { background-image: url(../images_1/mode1_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s3 .mode2 { background-image: url(../images_1/mode2_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__conference-inner-s3 .mode3 { background-image: url(../images_1/mode3_conference1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .modal-inner__conference section.wd__section:last-child { padding-bottom: 62px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__corningGlass { padding-top: 84px; padding-bottom: 180px } .section__corningGlass .wd__content { max-width: 700px; margin: 0 auto } .section__corningGlass .inner_block__1 .feature-2 .wd__feature__describe { display: none } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__corningGlass .inner_block__1 { margin-bottom: 90px } .section__corningGlass .inner_block__1 .antiglare_containter { margin-top: 8px } .section__corningGlass .inner_block__1 .antiglare_containter .content { top: 31px; left: calc(50% - 315px); width: 630px } .section__corningGlass .inner_block__1 .antiglare_containter .content .item .title { font-size: 22px } .section__corningGlass .inner_block__1 .antiglare_containter .content .item .info { font-size: 18px } .section__corningGlass .inner_block__1 .antiglare_containter .img__main { left: 50%; margin-left: -417.5px; width: 835px; height: 475px } #CMD .section__corningGlass .antiglare_containter .img__main { background-image: url(../images_1/img01.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__corningGlass .inner_block__2 .campare_containter { display: flex; justify-content: space-between; margin: 0 auto; margin-top: 10px; width: 670px } .section__corningGlass .inner_block__2 .campare_containter .item { width: 326px } .section__corningGlass .inner_block__2 .campare_containter .item .img { width: 326px; height: 238px } .section__corningGlass .inner_block__2 .campare_containter .item .title { margin-top: 33px; font-size: 22px } .section__corningGlass .inner_block__2 .campare_containter .item .info { margin-top: 3px; font-size: 16px } .section__corningGlass .inner_block__2 .campare_containter__2 { margin-top: 63px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__corningGlass .campare_containter__1 .img_grid_0 { background-image: url(../images_1/campare1_01.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__corningGlass .campare_containter__1 .img_grid_1 { background-image: url(../images_1/campare1_02.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__corningGlass .campare_containter__2 .img_grid_0 { background-image: url(../images_1/campare2_01.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__corningGlass .campare_containter__2 .img_grid_1 { background-image: url(../images_1/campare2_02.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__display-outer-s1 .wd__content .content__title { max-width: 550px } .section__display-outer-s1 .wd__content .content__info { max-width: 830px } .section__display-outer-s1 .img__main { margin-top: -123px; max-width: 1300px; height: 700px } .section__display-outer-s1 .img__main { background-image: url(../images_1/main.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1 .wd__feature__list { max-width: 1000px } .section__display-outer-s1 .wd__feature__list.list-icon { margin-top: 10px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1.is-top-main .wd__feature__list { margin-top: 63px } .section__display-outer-s1.is-top-main .wd__feature__list.list-icon { margin-top: 10px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1.no-top-main .wd__feature__list { margin-top: 63px } .section__display-outer-s1.no-top-main .wd__feature__list.list-icon { margin-top: 10px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1.is-bottom-main .wdblockimg { margin-top: -82px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1.no-bottom-main .wdblockimg { margin-top: 23px } } @media all and (min-width:731px) and (max-width:1279.5px) { .inner-view .inner-modal.modal-inner__sectionsDisplay { padding-bottom: 156px } .inner-view .inner-modal.modal-inner__sectionsDisplay section.wd__section { padding-top: 80px; padding-bottom: 40px } .inner-view .inner-modal.modal-inner__sectionsDisplay section.wd__section .wd__content { margin-top: -.4em } .inner-view .inner-modal.modal-inner__sectionsDisplay section.wd__section:last-child { margin-bottom: 0; padding-bottom: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .imgItem-img-1 { background-image: url(../images_1/pic_1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .imgItem-img-2 { background-image: url(../images_1/pic_2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .imgItem-img-3 { background-image: url(../images_1/pic_3.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .imgItem-img-4 { background-image: url(../images_1/pic_4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .imgItem-img-5 { background-image: url(../images_1/pic_5.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .product_list { max-width: 730px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s1 .wdOledTable.oledTable .table_container { margin-top: 58px; margin-right: auto; margin-left: auto; padding-bottom: 0; width: calc(100% - 6px); max-width: 768px; text-align: left } .section__display-inner-s1 .wdOledTable.oledTable .table_container tr td, .section__display-inner-s1 .wdOledTable.oledTable .table_container tr th { padding: 19px 14px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col-] { padding: 0; padding-bottom: 26px; padding-left: 26px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col-]:last-child { padding-right: 26px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=rol-1], .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=td-] { padding: 26px 0 26px 26px; width: 200px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=rol-1]:last-child, .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=td-]:last-child { padding-right: 26px } .section__display-inner-s1 .wdOledTable.oledTable .table_container tbody tr:last-child td, .section__display-inner-s1 .wdOledTable.oledTable .table_container tbody tr:last-child th { padding-bottom: 0 } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val { font-size: 20px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val+.text__val { padding-top: 6px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .rol-1, .section__display-inner-s1 .wdOledTable.oledTable .table_container .td-0 { width: 170px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 .img__table { margin-left: -10px; width: 96px; height: 96px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .h-col-1 .text__val { padding-left: 10px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1 .wdblockimg .block-10.column-span-2 .block-content, .section__display-outer-s1 .wdblockimg .block-11.column-span-2 .block-content, .section__display-outer-s1 .wdblockimg .block-9.column-span-2 .block-content { padding-bottom: 242px } .section__display-outer-s1 .wdblockimg .block-10.column-span-3 .block-content, .section__display-outer-s1 .wdblockimg .block-11.column-span-3 .block-content, .section__display-outer-s1 .wdblockimg .block-9.column-span-3 .block-content { padding-bottom: 353px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s2 .wd__content { width: 88%; max-width: 780px } .section__display-inner-s2 .wd__content .content__title { width: 80%; max-width: 500px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s2 .image__container { display: flex; justify-content: space-between; margin-top: 48px; margin-right: auto; margin-left: auto; width: 716px } .section__display-inner-s2 .imgItem-img { width: 224px; height: 382px } .section__display-inner-s2 .imgItem-title { padding: 22px 9px 0; font-size: 20px; text-align: center } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s2 .modal-button-container { margin-top: 59px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1_section2f.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2_section2f.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s3 .wd__content { width: 88%; max-width: 760px } .section__display-inner-s3 .wd__content .content__title { max-width: 660px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0_section3a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1_section3a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2_section3a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-3 { background-image: url(../images_1/pic_3_section3a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s3 .image__container { margin-top: 43px; width: 726px } .section__display-inner-s3 .imgItem { position: relative; margin-bottom: 0; width: 183px } .section__display-inner-s3 .imgItem-title { padding: 0 7px; padding-bottom: 4px; font-size: 2.1875rem } .section__display-inner-s3 .imgItem-info { padding: 30px 20px 0; font-size: 20px } .section__display-inner-s3 .imgItem-img { width: 181px; height: 357px; background-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s4 .wd__content { width: 88%; max-width: 700px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s4 .campare_containter { display: flex; justify-content: space-between; margin: 0 auto; margin-top: 10px; width: 726px } .section__display-inner-s4 .campare_containter .item { width: 350px } .section__display-inner-s4 .campare_containter .item .img { width: 350px; height: 238px } .section__display-inner-s4 .campare_containter .item .title { margin-top: 33px; font-size: 22px } .section__display-inner-s4 .campare_containter .item .info { margin-top: 3px; font-size: 20px } .section__display-inner-s4 .campare_containter__2 { margin-top: 21px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s4 .campare_containter__1 .img_grid-0 { background-image: url(../images_1/campare1_0_section4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s4 .campare_containter__1 .img_grid-1 { background-image: url(../images_1/campare1_1_section4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s4 .campare_containter__2 .img_grid-0 { background-image: url(../images_1/campare2_0_section4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s4 .campare_containter__2 .img_grid-1 { background-image: url(../images_1/campare2_1_section4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-inner-s21 { padding-top: 120px; padding-bottom: 80px } .section__display-inner-s21 .wd__content { max-width: 795px } .section__display-inner-s21 .wdtab { margin-top: 47px } .section__display-inner-s21 .wdtab__nav-btn { padding-bottom: 16px; font-size: 1.5rem } .section__display-inner-s21 .wdtab__panel { min-height: 499px } .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay { margin-left: 325px } .section__display-inner-s21 .img_containter { width: 724px; height: 377px } .section__display-inner-s21 .slider_step__containter { margin: 13px auto 45px } .section__display-inner-s21 .slider_step__containter .step_icon { width: 24px; height: 24px } #CMD .section__display-inner-s21 .img__inner3__1_dark { background-image: url(../images_1/ani_dark.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__display-inner-s21 .img__inner3__1_light { background-image: url(../images_1/ani_light.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__display-inner-s21 .img__inner3__1_warm { background-image: url(../images_1/ani_warm.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__display-inner-s21 .img__inner3__1_cool { background-image: url(../images_1/ani_cool.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__environment-outer-s1 { padding-top: 76px; padding-bottom: 80px } .section__environment-outer-s1 .wd__content .content__title { max-width: 700px } .section__environment-outer-s1 .wd__content .content__info { max-width: 830px } .section__environment-outer-s1 .img__main { margin-top: -643px; max-width: 1300px; height: 1015px } .section__environment-outer-s1 .img__main { background-image: url(../images_1/main_environment.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__environment-outer-s1 .wd__feature__list { margin-top: -97px; max-width: 1000px } .section__environment-outer-s1 .wd__feature__list.list-icon { margin-top: 45px } .section__environment-outer-s1 .wd__feature__list.list-icon .wd__feature { margin-right: 20px; margin-left: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__environment-outer-s1 .wdblockimg { margin-top: 56px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp { padding-top: 100px; padding-bottom: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp+.section__wdvideos .wdVideos.active { padding-top: 100px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile { margin-right: auto; margin-left: auto; width: calc(100% - 48px); max-width: 724px } .section__ksp .wdtile .item__block { justify-content: center; padding: 54px 0 } .section__ksp .wdtile .item__block .item__content--title, .section__ksp .wdtile .item__block .item__content--title *, .section__ksp .wdtile .item__block .wd__content .content__title, .section__ksp .wdtile .item__block .wd__content .content__title * { font-size: 32px; line-height: 1.2 } .section__ksp .wdtile .item__block .item__content--descBottom, .section__ksp .wdtile .item__block .item__content--descBottom *, .section__ksp .wdtile .item__block .item__content--descTop, .section__ksp .wdtile .item__block .item__content--descTop *, .section__ksp .wdtile .item__block .item__leftdesc, .section__ksp .wdtile .item__block .item__leftdesc *, .section__ksp .wdtile .item__block .wd__content .content__info, .section__ksp .wdtile .item__block .wd__content .content__info * { font-size: 21px; line-height: 1.4 } .section__ksp .wdtile .item__block--content { padding-right: 44px; padding-left: 44px } .section__ksp .wdtile .item__block--content .wd__content { width: 100% } .section__ksp .wdtile .item__block--content .wd__content .content__title { margin-top: 0; padding: 0 } .section__ksp .wdtile .item__block--content .wd__content .content__info { margin-top: 12px } .section__ksp .wdtile .item__block--content .wd__content .content__info+.content__info { margin-top: 6px } .section__ksp .wdtile .item__block--feature { padding-right: 34px; padding-left: 34px } .section__ksp .wdtile .item__block--feature .item__leftdesc { padding: 18px 24px 24px } .section__ksp .wdtile .item__block--feature .item__image { min-height: 90px; margin-bottom: 34px } .section__ksp .wdtile .item__block--feature .item__content--descTop { margin-bottom: 12px } .section__ksp .wdtile .item__block--feature .item__content--descBottom { margin-top: 0 } .section__ksp .wdtile .item__block--feature .item__content--title+.item__content--descBottom { margin-top: 12px } .section__ksp .wdtile .item__block--feature .item__content--descBottom span+span { margin-top: 2px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .item__block.medium-v-top { justify-content: flex-start } .section__ksp .item__block--feature, .section__ksp .item__block[class*=medium-img-v-], .section__ksp .item__block[class*=medium-txt-v-] { flex-direction: column; flex-wrap: wrap } .section__ksp .item__block--content, .section__ksp .item__block[class*=medium-img-h-], .section__ksp .item__block[class*=medium-txt-h-] { flex-direction: row; flex-wrap: nowrap; align-items: stretch } .section__ksp .item__block--content.medium-img-v-txt .item__content, .section__ksp .item__block--feature.medium-img-v-txt .item__content { width: 100%; order: 2 } .section__ksp .item__block--content.medium-img-v-txt .item__image, .section__ksp .item__block--feature.medium-img-v-txt .item__image { width: 100%; order: 1 } .section__ksp .item__block--content.medium-txt-v-img .item__content, .section__ksp .item__block--feature.medium-txt-v-img .item__content { width: 100%; order: 1 } .section__ksp .item__block--content.medium-txt-v-img .item__image, .section__ksp .item__block--feature.medium-txt-v-img .item__image { width: 100%; order: 2 } .section__ksp .item__block--content.medium-img-h-txt .item__content, .section__ksp .item__block--feature.medium-img-h-txt .item__content { width: auto; order: 2; flex-basis: auto; flex-grow: 1; flex-shrink: 1 } .section__ksp .item__block--content.medium-img-h-txt .item__image, .section__ksp .item__block--feature.medium-img-h-txt .item__image { margin-bottom: 0; width: 50%; order: 1; flex-grow: 0; flex-shrink: 0 } .section__ksp .item__block--content.medium-txt-h-img .item__content, .section__ksp .item__block--feature.medium-txt-h-img .item__content { width: auto; order: 1; flex-basis: auto; flex-grow: 1; flex-shrink: 1 } .section__ksp .item__block--content.medium-txt-h-img .item__image, .section__ksp .item__block--feature.medium-txt-h-img .item__image { margin-bottom: 0; width: 50%; order: 2; flex-grow: 0; flex-shrink: 0 } .section__ksp .item__block--content.medium-img-v-txt .item__image, .section__ksp .item__block--feature.medium-img-v-txt .item__image { margin-top: 0; margin-bottom: 34px } .section__ksp .item__block--content.medium-txt-v-img .item__image, .section__ksp .item__block--feature.medium-txt-v-img .item__image { margin-top: 34px; margin-bottom: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .item__block.medium-txt-left, .section__ksp .item__block.medium-txt-left * { text-align: left } .section__ksp .item__block.medium-txt-center, .section__ksp .item__block.medium-txt-center * { text-align: center } .section__ksp .item__block.medium-txt-right, .section__ksp .item__block.medium-txt-right * { text-align: right } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__military__grade { margin-top: 0; padding-top: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__military__grade .wd__feature__list { display: flex; position: relative; left: 50%; align-items: center; margin-bottom: 280px; margin-left: 0; padding-left: 110px; width: 364px; flex-direction: column } .section__military__grade .wd__feature__list .wd__feature { margin-right: 0; margin-left: 0; width: auto } .section__military__grade .wd__feature__list .wd__feature .wd__feature__describe { margin-right: auto; margin-left: auto; width: 170px } .section__military__grade .wd__feature__list.features-icon { display: block; left: 0; margin-right: auto; margin-bottom: 833px; margin-left: auto; padding-left: 0; width: 90%; max-width: 1024px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__military__grade .image__container { overflow: hidden; margin-top: -980px } .section__military__grade .img__main { left: 50%; margin-left: -650px; width: 1300px; height: 1310px; z-index: 1 } .section__military__grade .img__main { background-image: url(../images_1/main_militaryGradea.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__military__grade .wdtile { margin-top: -270px; margin-right: auto; margin-left: auto; width: 94%; max-width: 700px } .section__military__grade .wdtile__item { padding: 37px 29px; border-radius: 20px } .section__military__grade .wdtile .item__head__slogan-text { padding-left: 14px; font-size: 20px } .section__military__grade .wdtile .item__content { margin-top: 25px } .section__military__grade .wdtile .item__content-main { margin-bottom: 7px; font-size: 16px } .section__military__grade .wdtile .item__content-sub { margin-bottom: 15px } .section__military__grade .wdtile .item__content-sub .item__content-text { margin-bottom: 5px; font-size: 16px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s1 { padding-top: 80px } .section__creatorhub-outer-s1 .wd__content { max-width: 850px } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay { top: -65px; margin-left: 262px } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 0 } .section__creatorhub-outer-s1 .wdtab .wd__play__btn { top: 0; margin-left: 294px } .section__creatorhub-outer-s1 .wdtab .wdtab__panel { margin-top: -80px } .section__creatorhub-outer-s1 .wdtab .wdtab__panel__item-image .img__main { width: 508px; height: 319px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s1 .img__containter { margin: 0 auto; margin-top: -27px; width: 704px; height: 405px; background-position: 0 50%; background-repeat: none; background-size: cover } /* #CMD .section__creatorhub-outer-s1 .img__containter { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/pc.jpg) }*/ } /*@media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .img__containter { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/pc.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-0 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-0 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-2 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen3.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-2 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen3.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-3 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-3 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen4.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-4 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen5.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-4 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen5.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-5 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen6.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-5 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen6.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-6 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen7.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-6 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s1/screen7.jpg) } }*/ @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s2 { padding-top: 120px } .section__creatorhub-outer-s2 .wd__content { max-width: 850px } .section__creatorhub-outer-s2 .s2__containter { position: relative; overflow: hidden; margin-bottom: -60px; height: 530px } .section__creatorhub-outer-s2 .s2__containter .wd__feature__list { margin-top: 37px } .section__creatorhub-outer-s2 .s2__containter .img__main { left: 50%; margin-top: -187px; margin-left: -650px; width: 1300px; height: 635px } #CMD .section__creatorhub-outer-s2 .s2__containter .img__main { background-image: url(../images_1/img1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s2.use-page-imgs .s2__containter .img__main { background-image: url(../images_1/img1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s2 .wdtab { margin-top: 35px } .section__creatorhub-outer-s2 .wdtab .wdtab__nav { left: 50%; margin-left: -340px; width: 640px } .section__creatorhub-outer-s2 .wdtab .wdtab__nav .wdtab__nav-btn { margin: 0 10px; padding: 8px 20px 10px; max-width: 200px; word-break: break-word } .section__creatorhub-outer-s2 .wdtab .wdtab__nav-container { margin: 10px 0; width: 100% !important } .section__creatorhub-outer-s2 .wdtab .wdtab__autoPlay { margin-left: 250px; width: 60px; height: 60px } .section__creatorhub-outer-s2 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: -64px; width: 60px; height: 60px } .section__creatorhub-outer-s2 .wdtab .wdtab__panel__item { padding-top: 15px } .section__creatorhub-outer-s2 .wdtab .slick-info { margin: 0 auto; padding-bottom: 30px; width: 600px } .section__creatorhub-outer-s2 .wdtab .slick-info .slick-info-text { font-size: 20px } .section__creatorhub-outer-s2 .tab__video_control { margin: 0 auto; padding-bottom: 30px; width: 700px } .section__creatorhub-outer-s2 .tab__video_control .tab__video_control_button { display: block; position: relative; z-index: 20; top: 28px; left: 50%; margin-left: 283px } .section__creatorhub-outer-s2 .video_box { margin: 0 auto; width: 640px; height: 360px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s3 { padding-top: 120px } .section__creatorhub-outer-s3 .wd__content { max-width: 910px } .section__creatorhub-outer-s3 .wdtab { margin-top: 34px } .section__creatorhub-outer-s3 .wdtab .wdtab__nav { left: 50%; margin-left: -340px; width: 640px } .section__creatorhub-outer-s3 .wdtab .wdtab__nav .wdtab__nav-btn { margin: 0 10px; padding: 8px 20px 10px; max-width: 200px; word-break: break-word } .section__creatorhub-outer-s3 .wdtab .wdtab__nav-container { margin: 10px 0; width: 100% !important } .section__creatorhub-outer-s3 .wdtab .wdtab__autoPlay { margin-left: 250px; width: 60px; height: 60px } .section__creatorhub-outer-s3 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: -64px; width: 60px; height: 60px } .section__creatorhub-outer-s3 .wdtab .wdtab__panel__item { padding-top: 17px } .section__creatorhub-outer-s3 .wdtab .slick-info-text { margin: 0 auto; width: 600px } .section__creatorhub-outer-s3 .wdtab .slick-image { top: -177px; width: 1280px; height: 556px } .section__creatorhub-outer-s3 .wdtab .img-slick { left: 50%; margin-left: -640px; width: 1280px; height: 556px; bottom: 0 } /* #CMD .section__creatorhub-outer-s3 .img-slick { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s3/pd.jpg) } #CMD .section__creatorhub-outer-s3 .img-slick { mask: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s3/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s3/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain }*/ } /*@media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s3/pd.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { mask: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s3/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/outer/medium/1x/s3/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } }*/ @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s3 .wdtab .bigScreen { top: 171px; width: 100%; height: 177.5px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s3 .wdtab .smallScreen { top: 374px; width: 100%; height: 169px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s3 .tab__video_control { margin: 0 auto; width: 700px } .section__creatorhub-outer-s3 .tab__video_control .tab__video_control_button { position: relative; z-index: 20; top: -364px; left: 50%; margin-left: -26px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s3.use-img .wdtab__panel__item-0 .smallScreen { background-image: url(../images_1/s3__adobe_screenpad.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s3.use-img .wdtab__panel__item-1 .smallScreen { background-image: url(../images_1/s3__ppt_screenpad.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s3.use-img .wdtab__panel__item-2 .smallScreen { background-image: url(../images_1/s3__music_screenpad.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s4 { margin-top: -90px; padding-top: 0 } .section__creatorhub-outer-s4 .wd__content { max-width: 870px } .section__creatorhub-outer-s4 .tab__video_control { margin: 0 auto; width: 700px } .section__creatorhub-outer-s4 .tab__video_control .tab__video_control_button { position: relative; z-index: 20; top: 323px; left: 5%; margin-left: 605px } .section__creatorhub-outer-s4 .tab__video_control .tab__video_control_button.type1 { top: 420px; margin-left: 250px } .section__creatorhub-outer-s4 .wdtab { margin-top: 420px; padding-bottom: 0; min-height: 328px } .section__creatorhub-outer-s4 .wdtab .wdtab__autoPlay { margin-top: 16px; margin-left: 307px; width: 60px; height: 60px } .section__creatorhub-outer-s4 .wdtab .wdtab__autoPlay .wd__play__btn-button { width: 60px; height: 60px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav { padding-top: 43px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav::before { bottom: 10px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn { top: 0; padding: 24px 0 10px; width: 165px; height: 148px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container { padding-bottom: 10px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__icon { transform: scale(.68); transform-origin: center } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__text { padding-top: 0; padding-bottom: 0; font-size: 18px; min-height: 44px } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item { padding-top: 20px } .section__creatorhub-outer-s4 .wdtab .slick-info { padding-bottom: 0; width: 480px; min-height: 140px } .section__creatorhub-outer-s4 .wdtab .slick-info::before { display: block; position: absolute; z-index: 1; top: -146px; left: 50%; margin-left: -512px; width: 1024px; height: calc(100% + 120px); background: linear-gradient(to left, rgba(25, 35, 52, 0) 0, rgba(25, 35, 52, .87) 15%, rgba(25, 35, 52, .87) 85%, rgba(25, 35, 52, 0) 100%); content: "" } .section__creatorhub-outer-s4 .wdtab .slick-info .slick-info-text { margin-right: auto; margin-left: auto; width: 100%; font-size: 18px text-align: center } .section__creatorhub-outer-s4 .wdtab .slick-image { top: -702px; width: 1280px; height: 894px } .section__creatorhub-outer-s4 .wdtab .slick-image::before { display: block; position: absolute; z-index: 20; bottom: 0; left: 50%; margin-left: -640px; width: 1280px; height: 140px; background: linear-gradient(to top, #000 0, transparent); content: "" } .section__creatorhub-outer-s4 .wdtab .img-slick { left: 50%; margin-left: -640px; width: 1280px; height: 894px; bottom: 0 } #CMD .section__creatorhub-outer-s4 .img-slick { background-image: url(../images_1/pd.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { background-image: url(../images_1/pd.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4 .img-slick-1 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-1 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { background-image: url(../images_1/pd_2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4 .img-slick-2 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-2 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { background-image: url(../images_1/pd_2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s4 .wdtab .bigScreen { top: 171px; width: 100%; height: 176px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s4 .wdtab .smallScreen { top: 374px; width: 100%; height: 169px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s4 .wdtab .monitorScreen { top: 128px; left: 785px; width: 875px; height: 271px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .bigScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .bigScreen { top: 273px; left: 274px; width: 460px; height: 132px } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .smallScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .smallScreen { top: 424px; left: 324px; width: 416px; height: 124px } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__creatorhub-outer-s4.use-img .wdtab__panel__item-7 .smallScreen { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/proartCreatorHub/images/video/medium/s4/controlPanel_screenpad.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__security-outer-s1 .wd__content .content__title { max-width: 700px } .section__security-outer-s1 .wd__content .content__info { max-width: 830px } .section__security-outer-s1 .img__main { margin-top: -123px; max-width: 1300px; height: 700px } .section__security-outer-s1 .img__main { background-image: url(../images_1/main_outer.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-outer-s1 .wd__feature__list { margin-top: -97px; max-width: 1000px } .section__security-outer-s1 .wd__feature__list.list-icon { margin-top: -3px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-outer-s1 .wdblockimg { margin-top: 47px } .section__security-outer-s1 .wdblockimg .block-1.column-span-2 .block-content, .section__security-outer-s1 .wdblockimg .block-4.column-span-2 .block-content, .section__security-outer-s1 .wdblockimg .block-5.column-span-2 .block-content { padding-bottom: 155px !important } .section__security-outer-s1 .wdblockimg .block-1.column-span-3 .block-content, .section__security-outer-s1 .wdblockimg .block-4.column-span-3 .block-content, .section__security-outer-s1 .wdblockimg .block-5.column-span-3 .block-content { padding-bottom: 235px !important } .section__security-outer-s1 .wdblockimg .block-1.column-span-medium-2 .block-content, .section__security-outer-s1 .wdblockimg .block-4.column-span-medium-2 .block-content, .section__security-outer-s1 .wdblockimg .block-5.column-span-medium-2 .block-content { padding-bottom: 155px !important } .section__security-outer-s1 .wdblockimg .block-1.column-span-medium-3 .block-content, .section__security-outer-s1 .wdblockimg .block-4.column-span-medium-3 .block-content, .section__security-outer-s1 .wdblockimg .block-5.column-span-medium-3 .block-content { padding-bottom: 235px !important } } @media all and (min-width:731px) and (max-width:1279.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__sectionsUserExperience section.wd__section:last-child { padding-bottom: 124px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-inner-s1 { padding-top: 120px; padding-bottom: 0 } .section__security-inner-s1 .wd__content { max-width: 700px } .section__security-inner-s1 .security-inner-s1-figure { margin-top: 55px; max-width: 720px } .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-1 { background-image: url(../images_1/img1_outer.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-2 { background-image: url(../images_1/img2_outer.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-inner-s2 { padding-top: 100px } .section__security-inner-s2 .wd__content { max-width: 760px } .section__security-inner-s2 .security-inner-s2-figure { margin-top: 55px; max-width: 720px } .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-1 { background-image: url(../images_1/img1_inner.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-2 { background-image: url(../images_1/img2_inner.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__software-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__software-outer-s1 .software-infos { margin-top: -180px } .section__software-outer-s1 .software-infos .wd__content .content__title { margin-top: 0 } .section__software-outer-s1 .software-infos .wd__content .content__info { margin-right: 50px } .section__software-outer-s1 .software-info { max-width: 724px } .section__software-outer-s1 .software-info .wd__content { padding: 44px 0 30px; padding: 54px 0 } .section__software-outer-s1 .software-info .wd__content .content__title { background-image: linear-gradient(to right, #fff 0, #fff 100%); font-size: 2.1875rem } .section__software-outer-s1 .software-info .wd__content .content__link { margin-right: 50px } .section__software-outer-s1 .software-info-icon0-outer { min-width: 210px } .section__software-outer-s1 .software-info .wd__feature__list { display: flex; margin-top: 24px; margin-left: 0; max-width: 470px; flex-wrap: wrap; flex-direction: row; gap: 0 32px } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature__data { height: 90px } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature__data .img__icon { top: 8px } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature { display: inline-block; margin-right: 0 !important; margin-bottom: 8px !important; margin-left: 0 !important; flex: unset } .section__software-outer-s1 .software-info .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 4px; text-align: left; min-width: unset } .section__software-outer-s1 .software-info .software-info1 .feature-6 .wd__feature__describe { max-width: 140px } .section__software-outer-s1 .img__main { margin-top: -130px; max-width: 1300px; height: 665px } .section__software-outer-s1 .img__main.use-page-imgs { background-image: url(../images_1/main_inner.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__software-outer-s1 .img__main { background-image: url(../images_1/main_inner.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__software-outer-s1 .software-info1 .feature-1 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-2 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-3 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-4 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-5 .wd__feature__data { width: 110px !important } .section__software-outer-s1 .software-info1 .feature-6 .wd__feature__data { width: 56px !important } .section__software-outer-s1 .software-info1 .feature-7 .wd__feature__data { width: 70px !important } .section__software-outer-s1 .software-info1 .feature-8 .wd__feature__data { width: 90px !important } .section__software-outer-s1 .software-info1 .feature-9 .wd__feature__data { width: 56px !important } .section__software-outer-s1 .software-info1 .feature-10 .wd__feature__data { width: 64px !important } .section__software-outer-s1 .software-info1 .wd__feature__describe { max-width: 143px !important } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__software-outer-s1 .software-info2 .wd__feature.feature-1 .img__icon, .section__software-outer-s1 .software-info2 .wd__feature.feature-2 .img__icon, .section__software-outer-s1 .software-info2 .wd__feature.feature-5 .img__icon, .section__software-outer-s1 .software-info2 .wd__feature.feature-6 .img__icon { left: -4px } .section__software-outer-s1 .software-info2 .feature-1 .wd__feature__data { width: 118px !important } .section__software-outer-s1 .software-info2 .feature-2 .wd__feature__data { width: 108px !important } .section__software-outer-s1 .software-info2 .feature-3 .wd__feature__data { width: 112px !important } .section__software-outer-s1 .software-info2 .feature-4 .wd__feature__data { width: 90px !important } .section__software-outer-s1 .software-info2 .feature-5 .wd__feature__data { width: 120px !important } .section__software-outer-s1 .software-info2 .feature-6 .wd__feature__data { width: 120px !important } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__software-outer-s1 .software-info3 .feature-1 .wd__feature__data { width: 66px !important } .section__software-outer-s1 .software-info3 .feature-2 .wd__feature__data { width: 60px !important } .section__software-outer-s1 .software-info3 .feature-3 .wd__feature__data { width: 58px !important } .section__software-outer-s1 .software-info3 .feature-4 .wd__feature__data { width: 54px !important } .section__software-outer-s1 .software-info3 .feature-5 .wd__feature__data { width: 52px !important } .section__software-outer-s1 .software-info3 .wd__feature__describe { max-width: 137px !important } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 { padding-top: 60px; padding-bottom: 20px } .section__spatialVision-outer-s1 .wd__content .content__title { max-width: 700px } .section__spatialVision-outer-s1 .wd__content .content__info { max-width: 830px } .section__spatialVision-outer-s1 .imgAni { height: 600px } .section__spatialVision-outer-s1 .image_container { margin-top: -138px; transform: scale(.56) } .section__spatialVision-outer-s1 .img__bg { background-image: url(../images_1/bg.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 .img__explode_back { background-image: url(../images_1/explode_back.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 .image_container .img__explode { mask: url(../images_1/explode_mask.png); -webkit-mask-image: url(../images_1/explode_mask.png) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 .img__explode_1 { background-image: url(../images_1/explode_1.jpg) } .section__spatialVision-outer-s1 .img__explode_1 { mask: url(../images_1/explode_1_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/explode_1_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 .img__explode_2 { background-image: url(../images_1/explode_2.jpg) } .section__spatialVision-outer-s1 .img__explode_2 { mask: url(../images_1/explode_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/explode_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 .img__explode_3 { background-image: url(../images_1/explode_3.jpg) } .section__spatialVision-outer-s1 .img__explode_3 { mask: url(../images_1/explode_3_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/explode_3_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s1 .wd__feature__list { justify-content: space-between; margin-top: 43px; width: calc(100% - 48px); max-width: 724px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon { margin: 0 0 40px; padding: 34px 32px; width: calc(33.3333333333% - 12px) } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top { margin-bottom: 25px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top .img__icon { height: 73px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { font-size: 1.6875rem } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: 12px; line-height: 1.4 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s2 { padding-top: 60px; padding-bottom: 50px } .section__spatialVision-outer-s2 .wd__content .content__title { max-width: 700px } .section__spatialVision-outer-s2 .wd__content .content__info { max-width: 830px } .section__spatialVision-outer-s2 .category_container { margin-top: 43px; width: 720px } .section__spatialVision-outer-s2 .category_container .category-item { width: 134px } .section__spatialVision-outer-s2 .category_container .category-item-2 { margin-top: 56px } .section__spatialVision-outer-s2 .category_container .category-item-3 { margin-top: 20px } .section__spatialVision-outer-s2 .category_container .category-item-4 { margin-top: 57px } .section__spatialVision-outer-s2 .category_container .category-item-5 { margin-top: 20px } .section__spatialVision-outer-s2 .category_container .wd__content { padding-left: 8px; width: 100% } .section__spatialVision-outer-s2 .category_container .wd__content::before { top: 3px; left: -1px; height: calc(100% - 9px) } .section__spatialVision-outer-s2 .category_container .wd__content .content__title { font-size: .9375rem } .section__spatialVision-outer-s2 .category_container .wd__content .content__info { margin-top: 5px; font-size: .9375rem } .section__spatialVision-outer-s2 .category_container .category_img { margin-top: 15px; width: 134px; height: 157px; border-radius: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 { padding-top: 60px; padding-bottom: 80px } .section__spatialVision-outer-s3 .wd__content .content__title { max-width: 700px } .section__spatialVision-outer-s3 .wd__content .content__info { max-width: 830px } .section__spatialVision-outer-s3 .image_container { margin-top: -300px; margin-bottom: -120px } .section__spatialVision-outer-s3 .image_container .img_bg { margin-left: -650px; width: 1300px; height: 977px } .section__spatialVision-outer-s3 .img_bg { background-image: url(../images_1/bg.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 .image_container .img_3d_left { margin-left: -650px; width: 1300px; height: 977px } .section__spatialVision-outer-s3 .img_3d_left { background-image: url(../images_1/3d_left.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 .image_container .img_3d_right { margin-left: -650px; width: 1300px; height: 977px } .section__spatialVision-outer-s3 .img_3d_right { background-image: url(../images_1/3d_right.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 .image_container .img_ani_text { top: 618px; font-size: .9375rem } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 .image_container .img_ani_text_left { margin-left: -71px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 .image_container .img_ani_text_right { margin-left: 15px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s3 .info_box { position: absolute; top: unset; bottom: 111px; margin-left: -292px; padding: 18px 18px 16px 24px; width: 87px } .section__spatialVision-outer-s3 .info_box .text_right::before { top: 13px; left: 14px; height: 28px } .section__spatialVision-outer-s3 .info_box .text_left::before { top: 41px; left: 14px; height: 28px } .section__spatialVision-outer-s3 .info_box .info_text_right { padding-bottom: 6px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s4 { padding-top: 60px; padding-bottom: 80px } .section__spatialVision-outer-s4 .wd__content .content__title { max-width: 700px } .section__spatialVision-outer-s4 .wd__content .content__info { max-width: 830px } .section__spatialVision-outer-s4 .nav_container { margin: 55px auto 0; width: 655px } .section__spatialVision-outer-s4 .nav_container .home .icon_home { width: 70px; height: 74px } .section__spatialVision-outer-s4 .nav_container .home .text__ttnormal { margin-top: 18px; font-size: 22px } .section__spatialVision-outer-s4 .nav_container .icon_line { margin: 17px auto 0; width: 492px; height: 26px } .section__spatialVision-outer-s4 .icon_line { background-image: url(../images_1/icon_line.png) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s4 .nav_container .child_container { margin-top: 13px } .section__spatialVision-outer-s4 .nav_container .child_container .child_item { width: 162px } .section__spatialVision-outer-s4 .nav_container .child_container .child_icon { margin: 0 auto 13px; width: 80px; height: 75px } .section__spatialVision-outer-s4 .nav_container .child_container .nav_text { font-size: 22px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s4 .child_item_1 { transform: translateX(1px) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s4 .child_item_4 { transform: translateX(-1px) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__spatialVision-outer-s4 .carousel_container { display: flex; justify-content: space-between; margin: 50px auto 0; width: 720px; flex-direction: row; flex-wrap: wrap } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box { overflow: hidden; margin-bottom: 21px; width: 350px; border-radius: 30px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content { padding: 26px; padding-bottom: 30px; min-height: 219px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__title { font-size: 1.6875rem } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__info { margin-top: 6px } .section__spatialVision-outer-s4 .carousel_container .carousel_img { width: 350px; height: 280px; border-radius: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userexperience-outer-s1 { padding-top: 60px; padding-bottom: 80px } .section__userexperience-outer-s1 .wd__content .content__title { max-width: 700px } .section__userexperience-outer-s1 .wd__content .content__info { max-width: 830px } .section__userexperience-outer-s1 .img__main { margin-top: -123px; max-width: 1300px; height: 700px } .section__userexperience-outer-s1 .img__main { background-image: url(../images_1/main.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userexperience-outer-s1 .wd__feature__list { margin-top: -97px; max-width: 1000px } .section__userexperience-outer-s1 .wd__feature__list.list-icon { margin-top: -3px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userexperience-outer-s1 .wdblockimg { margin-top: 47px } } @media all and (min-width:731px) and (max-width:1279.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__sectionsUserExperience section.wd__section:last-child { padding-bottom: 124px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s1 { padding-top: 120px; padding-bottom: 0 } .section__userExperience-inner-s1 .wd__content { max-width: 720px } .section__userExperience-inner-s1 .userExperience-inner-s1-figure { margin-top: 55px; max-width: 720px } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-1 { background-image: url(../images_1/img1-1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-2 { background-image: url(../images_1/img2-1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-3 { background-image: url(../images_1/img3.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s2 { padding-top: 120px; padding-bottom: 80px } .section__userExperience-inner-s2 .wd__content { max-width: 700px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure { margin-top: 55px; max-width: 720px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-1 { background-image: url(../images_1/img1-2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-2 { background-image: url(../images_1/img2-2.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s3 { padding-top: 120px; padding-bottom: 80px } .section__userExperience-inner-s3 .wd__content { max-width: 795px } .section__userExperience-inner-s3 .wdtab { margin-top: 47px } .section__userExperience-inner-s3 .wdtab__nav-btn { padding-bottom: 16px; font-size: 1.5rem } .section__userExperience-inner-s3 .wdtab__panel { min-height: 499px } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay { margin-left: 325px } .section__userExperience-inner-s3 .img_containter { width: 724px; height: 377px } .section__userExperience-inner-s3 .slider_step__containter { margin: 13px auto 45px } .section__userExperience-inner-s3 .slider_step__containter .step_icon { width: 24px; height: 24px } #CMD .section__userExperience-inner-s3 .img__inner3__1_dark { background-image: url(../images_1/ani_dark.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s3 .img__inner3__1_light { background-image: url(../images_1/ani_light.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s3 .img__inner3__1_warm { background-image: url(../images_1/ani_warm.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s3 .img__inner3__1_cool { background-image: url(../images_1/ani_cool.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s4 { padding-top: 80px; padding-bottom: 80px } .section__userExperience-inner-s4 .wd__content { max-width: 770px } .section__userExperience-inner-s4 .wdblockimg { margin-top: 55px } .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 .block-img .img__bg { background-position: 58% 50%; background-size: auto 100% } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s5 { padding-top: 120px; padding-bottom: 0 } .section__userExperience-inner-s5 .wd__content { max-width: 770px } .section__userExperience-inner-s5 .btn__lity__video { margin-top: 55px } .section__userExperience-inner-s5 .btn__lity__video .compare_content::before { content: ""; margin-top: -40px; margin-left: -40px; width: 80px; height: 80px } .section__userExperience-inner-s5 .btn__lity__video .video_info { padding: 20px; font-size: 20px; transform: translateY(40px) } .section__userExperience-inner-s5 .btn__lity__video .compare_content { width: 720px; height: 409px } .section__userExperience-inner-s5 .btn__lity__video.active .compare_content::after { opacity: 1 } .section__userExperience-inner-s5 .btn__lity__video.active .compare_content .video_info { opacity: 1 } .section__userExperience-inner-s5 .btn__lity__video.active .compare_content::before { transform: rotate(120deg) } .section__userExperience-inner-s5 .video__bg { width: 720px; height: 410px } #CMD .section__userExperience-inner-s5 .btn__lity__video .video__bg { background-image: url(../images_1/video_bg.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s6 { padding-top: 80px; padding-bottom: 0 } .section__userExperience-inner-s6 .wd__content { max-width: 750px } .section__userExperience-inner-s6 .wdblockimg { margin-top: 55px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s7 { padding-top: 120px; padding-bottom: 0 } .section__userExperience-inner-s7 .wd__content { max-width: 630px } .section__userExperience-inner-s7 .userExperience-inner-s7-main { margin: 44px auto 0; max-width: 720px } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer { width: 312px } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content { margin: 0; max-width: 100%; width: 100% } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content .content__title { font-size: 1.71875rem; text-align: left } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content .content__info { text-align: left; margin-top: 0 } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content .content__link { margin-top: 0 } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .textItem-outer { padding: 18px 0 10px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list { margin-top: 17px; padding-left: 20px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list .wd__content .content__title { font-size: 1.5625rem } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li { margin-bottom: 12px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li::before { top: 10px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li:last-child { padding-top: 10px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li:last-child::before { top: 17px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 { margin-bottom: 0 } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 .wd__content { margin-left: 23px !important } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 .s7-inner-item-img-2 { right: -32px } .section__userExperience-inner-s7 .s7-inner-item-img-1 { right: 23px; width: 342px; height: 498px } .section__userExperience-inner-s7 .s7-inner-item-img-2 { right: 23px; width: 342px; height: 498px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s8 { padding-top: 120px; padding-bottom: 0 } .section__userExperience-inner-s8 .wd__content { max-width: 720px } .section__userExperience-inner-s8 .userExperience-inner-s8-figure { margin-top: 55px; max-width: 720px } .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-1 { background-image: url(../images_1/img1_inner.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-2 { background-image: url(../images_1/img2-a.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s9 { padding-top: 80px } .section__userExperience-inner-s9 .wd__content { max-width: 700px } .section__userExperience-inner-s9 .wdtab__panel { height: 250px } .section__userExperience-inner-s9 .wdtab { margin-top: 20px } .section__userExperience-inner-s9 .wdtab .wdtab__autoPlay { margin-left: 320px } .section__userExperience-inner-s9 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 30px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn { padding: 25px 15px 10px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn .nav_icon { margin-bottom: 14px; width: 50px; height: 50px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn span { font-size: 16px } .section__userExperience-inner-s9 .wdtab__panel__item { padding-top: 25px } .section__userExperience-inner-s9 .wdtab__panel__item-info { margin-right: auto; margin-left: auto; width: 100%; max-width: 700px; line-height: 1.5 } .section__userExperience-inner-s9 .wdtab__panel__item-info__text { padding-bottom: 35px } .section__userExperience-inner-s9 .wdtab__panel__item-image { display: flex; justify-content: center } .section__userExperience-inner-s9 .wdtab__panel__item-image .img__main1, .section__userExperience-inner-s9 .wdtab__panel__item-image .img__main2 { margin: 0 10px; width: 355px; height: 243px } .section__userExperience-inner-s9 .single-nav { margin-top: 48px } .section__userExperience-inner-s9 .single-nav .wdtab__panel__item-info { margin-right: auto; margin-left: auto } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_0 .img__main1 { background-image: url(../images_1/tab01-1_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_1 .img__main1 { background-image: url(../images_1/tab02-1_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_2 .img__main1 { background-image: url(../images_1/tab03-1_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_3 .img__main1 { background-image: url(../images_1/tab04-1_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_4 .img__main1 { background-image: url(../images_1/tab05-1_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_5 .img__main1 { background-image: url(../images_1/tab06-1_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_0 .img__main2 { background-image: url(../images_1/tab01-2_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_1 .img__main2 { background-image: url(../images_1/tab02-2_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_2 .img__main2 { background-image: url(../images_1/tab03-2_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_3 .img__main2 { background-image: url(../images_1/tab04-2_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_4 .img__main2 { background-image: url(../images_1/tab05-2_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_5 .img__main2 { background-image: url(../images_1/tab06-2_conference.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery-inner-s1 .img__main { left: 50%; margin-left: -650px; width: 1300px; height: 665px; margin-top: -154px } #CMD .section__battery-inner-s1 .img__main { background-image: url(../images_1/main_battery.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery-inner-s2 { margin-top: -60px } .section__battery-inner-s2 .battery_animate_container .battery_animate { transform: scale(.6) translateY(-297px) } .section__battery-inner-s2 .battery_animate_container .battery_animate .wd__play__btn { transform: scale(1.5); margin-left: 508px } .section__battery-inner-s2 .battery_animate_container .battery_animate__2 { margin-top: -360px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery-inner-s3 { margin-top: -298px } .section__battery-inner-s3 .img__main { left: 50%; margin-left: -650px; width: 1300px; height: 560px; margin-top: -10px } #CMD .section__battery-inner-s3 .img__main { background-image: url(../images_1/main_battery_1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-outer-s1 .wd__block__slick--outer { margin-top: 55px } .section__aiCopilot-outer-s1 .wd__block__slick--outer::before { top: 473px; left: 0; width: 100vw } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_slickplay-aiCopilot { top: 496px; margin-left: 301px } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_videoplay-aiCopilot { top: 15px; margin-left: 313px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text { margin-top: 102px; max-width: 560px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__title { font-size: 1.75rem } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__info { font-size: 20px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__info--1 { margin-top: 15px } .section__aiCopilot-outer-s1 .wd__block__slick__item { padding: 0 10px; padding-top: 13px; min-width: 712px } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-container .wd__play__btn { top: 360px; margin-left: -437px } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-outer { position: absolute; top: 0; width: 534px; height: 334px } .section__aiCopilot-outer-s1 .wd__block__dots { top: 428px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots { height: 52px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button { padding-right: 35px; padding-left: 35px; width: auto; font-size: 20px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button p { margin-top: 3px; line-height: 1.2 } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button::before { bottom: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-outer-s1 .img__laptop { left: 50%; margin-left: -356px; width: 712px; height: 396px; position: relative; top: -14px } #CMD .section__aiCopilot-outer-s1 .img__laptop--0 { background-image: url(../images_1/laptop_0.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--0 { mask: url(../images_1/laptop_0_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_0_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--1 { background-image: url(../images_1/laptop_1.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--1 { mask: url(../images_1/laptop_1_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_1_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--2 { background-image: url(../images_1/laptop_2.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--2 { mask: url(../images_1/laptop_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--3 { background-image: url(../images_1/laptop_3.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--3 { mask: url(../images_1/laptop_3_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_3_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--4 { background-image: url(../images_1/laptop_4.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--4 { mask: url(../images_1/laptop_4_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_4_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--5 { background-image: url(../images_1/laptop_5.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--5 { mask: url(../images_1/laptop_5_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_5_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .modal-inner__aiCopilot { padding-bottom: 0 } .modal-inner__aiCopilot section.wd__section { padding-top: 120px } .modal-inner__aiCopilot section.wd__section .wd__content { margin-top: -.4em } .modal-inner__aiCopilot section.wd__section:last-child { margin-bottom: 0; padding-bottom: 120px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s1 .wd__feature__list { left: auto; margin-top: 55px; margin-right: auto; margin-left: auto; max-width: 500px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s1 .wdtab { margin-top: -506px } .section__aiCopilot-inner-s1 .wdtab .wdtab__panel { top: -228px; left: 50%; margin-left: -272px } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn { top: 160px; margin-left: -320px; transform: scale(1.15) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s1 .performance_chart_container { margin-top: -104px } .section__aiCopilot-inner-s1 .performance_chart_container .performance_chart { margin-top: 40px; width: 88%; max-width: 724px } .section__aiCopilot-inner-s1 .performance_chart_container .text_comment { padding-left: 1px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s1 .img__container { margin-top: -300px; margin-left: -80px; transform: scale(.87) } .section__aiCopilot-inner-s1 .img__bg { left: 50%; margin-left: -1000px; width: 2000px; height: 1000px } #CMD .section__aiCopilot-inner-s1 .img__bg { background-image: url(../images_1/bg_inner.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s1 .img__main-0 { width: 516px; height: 388px } #CMD .section__aiCopilot-inner-s1 .img__main-0 { background-image: url(../images_1/main0_inner.jpg) } #CMD .section__aiCopilot-inner-s1 .img__main-0 { mask: url(../images_1/main0_mask_inner.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/main0_mask_inner.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s1 .img__main-1 { width: 516px; height: 388px } #CMD .section__aiCopilot-inner-s1 .img__main-1 { background-image: url(../images_1/main1_inner.jpg) } #CMD .section__aiCopilot-inner-s1 .img__main-1 { mask: url(../images_1/main1_mask_inner.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/main1_mask_inner.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s2 { padding-top: 120px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s2 .performance_chart_container { margin-top: 56px } .section__aiCopilot-inner-s2 .performance_chart_container .performance_chart { margin-top: 0; max-width: 724px } .section__aiCopilot-inner-s2 .performance_chart_container .title { display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; width: calc(14% + 20px); min-height: 57px } .section__aiCopilot-inner-s2 .performance_chart_container .text_comment { padding-left: 1px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-inner-s2 .img__container { left: 50%; margin-left: -320px; width: 640px; height: 340px; margin-top: 55px } .section__aiCopilot-inner-s2 .img__container .img__main { left: 50%; margin-left: -531px; width: 1062px; height: 596px; bottom: 25% } #CMD .section__aiCopilot-inner-s2 .img__main { background-image: url(../images_1/main_inner1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { section .medium_use { display: block !important } section .medium_unuse { display: none } section .small_use { display: none } section .no__wrap { display: inline-block; white-space: nowrap } section .wd__link__arrow::after { padding-left: 5px } section .wd__feature__list .wd__feature .wd__feature__data.text__long-en { bottom: -4px } .wd__content { max-width: 724px } .wd__content .content__slogan { font-size: 20px } .wd__content .content__title { margin-top: 3px; font-size: 40px } .wd__content .content__info { margin-top: 10px; font-size: 20px } .wd__content .content__link.link-gradient { margin-top: -4px !important } .wd__content .content__link.link-gradient.link--1 { margin-top: 10px !important } .wd__feature__list { margin-top: 65px } .wd__feature__list .wd__feature .wd__feature__data { font-size: 48px } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe *, .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 17px } .section-media-top { height: 80px } .cmd-sidenav .item-dot.enter { background: #174d71 } } @media all and (min-width:731px) and (max-width:1279.5px) { .inner-view .wd__section.first-section { padding-top: 80px !important } .inner-view .inner-view-container { max-width: 2560px } .inner-view .section__btn__home::before { background: 0 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__kv { padding-bottom: 80px } .section__kv .wd__content { max-width: 900px; margin: -408px auto 0 } .section__kv .wd__content .content__slogan { font-size: 2.5625rem } .section__kv .wd__content .content__title { font-size: 3.125rem; margin-top: -3px } .section__kv .wd__content .content__info { margin-top: 22px } .section__kv .img__main { width: 1280px; height: 954px; position: relative; left: 50%; margin-left: -640px; margin-top: -110px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content { min-height: 240px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content { margin-top: 15px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title span { font-size: 3.75rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .ani-item-1 { top: -155px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .ani-item-3 { top: -248px; margin-left: -620px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .img { margin-top: -133px; margin-left: -237px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__block { padding: 80px 20px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__content .wd__content .content__title span { font-size: 3.75rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__block { padding: 95px 30px 80px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__image .img__item { width: 110px; height: 110px; transform: scale(1.6) translate3d(-33px, 0, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title { margin-top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title span { font-size: 38px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__block { padding: 67px 40px 53px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__content .wd__content .content__title span { font-size: 62px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__content .wd__content .content__info { font-size: 38px; line-height: 1.2 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content { display: flex; align-items: center; justify-content: center; min-height: 150px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content { width: 300px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title span { font-size: 38px !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title span .plus { position: relative; top: -8px; font-size: .7em } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__info { margin-top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__image .img__item { width: 724px; height: 380px; margin-left: 150px } #CMD .section__ksp .wdtile.wdtile-ksp .item__image-battery_bg .img__item { background-image: url(../images/battery_bg_table.webp); max-width: none; } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__block { padding-top: 96px; padding-bottom: 100px; padding-left: 20px; display: flex; align-items: center; justify-content: center; flex-direction: row-reverse } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content .content__title span { font-size: 38px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image { height: 170px; width: 300px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .ani-item-1 { width: 1086px; height: 548px; margin-top: -280px; margin-left: -716px } #CMD .section__ksp .wdtile__item-5 .ani-item-1 { background-image: url(../images_1/ksp_05__bg_inner1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .img__item { top: calc(50% - 125px); margin-left: -238px; transform: scale(.76) translateY(-20%) translateX(-45%) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5.aniPlay .item__image .img__item { transform: scale(.76) translateY(0); max-width: none; } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block { padding-top: 98px; padding-right: 40px; padding-left: 40px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__content { margin-top: -10px; width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__image { height: 99px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__image .img__item { top: 0; left: 69px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .img__pc1 { top: 51px !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .img__pc2 { top: 116px !important } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block { padding-top: 124px; padding-right: 20px; padding-left: 20px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content { width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--title span { font-size: 32px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--descBottom { margin-top: 4px; font-size: 26px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content::after { top: 278px; margin-left: -90px; transform: scale(1.2); transform-origin: center } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .ksp_audio_wave { top: 56px; transform: scale(.7); transform-origin: center } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__color { padding-top: 120px } .section__color .animate__container { margin-top: 40px } .section__color .animate__container .card__container { max-width: 1280px; width: 1000px; height: 100vh; max-height: 800px; left: 50%; margin-left: -500px } .section__color .animate__container .card__container .card_item { height: 100vh; max-height: 800px } .section__color .animate__container .card__container .card_item .item_pc { width: 1090px; height: 1000px; top: calc(50% - 525px); left: calc(50% - 621px) } .section__color .animate__container .card__container .card_item .item_title { font-size: 38px; letter-spacing: 15px; top: calc(50% - 22px) } .section__color .animate__container .card__container .nav__container { height: 70px; left: calc(50% - 365px); width: 730px } .section__color .animate__container .card__container .nav__container .nav_item { letter-spacing: 4px; font-size: 32px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__thin { padding-top: 120px } .section__thin .wd__content .content__info { font-size: 22px } .section__thin .wd__feature__list { width: 600px; margin: 0 auto; margin-top: 40px } .section__thin .wd__feature__list .wd__feature { margin-bottom: 49px; margin-right: 0 } .section__thin .animate__container { transform: scale(.6); margin-top: -50px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery { margin-top: -120px } .section__battery .sectionnNavPosition.first { top: 330px } .section__battery .opening { transform: scale(.75) } .section__battery .main-content { width: 770px; min-height: 970px; margin-top: 46px } .section__battery .main-content .wd__content { width: 310px; margin-top: 362px; left: -161px } .section__battery .main-content .wd__feature__list { width: 340px; position: absolute; top: -4px; left: 427px; margin-top: 0 } .section__battery .main-content .wd__feature__list .wd__feature { text-align: left } .section__battery .main-content .wd__feature__list .feature-1 { margin-right: 30px } .section__battery .main-content .wd__feature__list .feature-1 .wd__feature__describe { margin-top: 13px } .section__battery .main-content .wd__feature__list .feature-2 { margin-right: 0 } .section__battery .main-content .wd__feature__list .feature-3 { display: block } .section__battery .main-content .img__1 { position: absolute; left: -97px; top: -8px; width: 470px; height: 314px; background-position: 50% 50%; border: 1px solid transparent } #CMD .section__battery .img__1 { background-image: url(../images_1/pic01_inner1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery .main-content .img__2 { position: absolute; left: 424px; top: 372px; width: 400px; height: 515px; background-position: 50% 50%; border: 1px solid transparent } #CMD .section__battery .img__2 { background-image: url(../images_1/pic02_inner1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery .modal-button-container { width: 330px; display: flex; padding-left: 69px; margin-top: 37px } .section__battery .modal-button-container .modal-button { padding: 13px 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__battery-inner-s2 { margin-bottom: -250px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__performance { padding-top: 80px } .section__performance::before { margin-left: -570px; top: -80px } .section__performance .video_container { transform: scale(.68); top: 44px; margin-left: -590px } .section__performance .video_container .img__evo { transform: scale(1.5); left: 790px; top: 900px } .section__performance .video_container .wd__play__btn { transform: scale(1.5); top: 650px; margin-left: 329px } .section__performance .wd__feature__list { margin-top: 798px; width: 95%; max-width: 780px } .section__performance .wd__feature__list .feature-6 { width: 130px } .section__performance .performance_chart { margin-top: 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__s_aiCopilot { padding-top: 70px; padding-bottom: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__aiCopilot-outer-s1 { padding-top: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { .modal-inner__aiCopilot section.wd__section:last-child { margin-bottom: 0; padding-bottom: 120px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__display-outer-s1 .sectionnNavPosition.first { top: 1270px } .section__display-outer-s1 .wd__content.main-content--top { display: none } .section__display-outer-s1 .wd__content.main-content--bottom { margin-top: -120px } .section__display-outer-s1 .wd__content.main-content--bottom .content__info { font-size: 22px } .section__display-outer-s1 .wd__feature__list.list-icon { max-width: 800px; margin-top: 40px } .section__display-outer-s1 .medium__text-center.wd__feature__list .wd__feature { margin-left: 15px; margin-right: 15px } .section__display-outer-s1 .wdblockimg { margin-top: 40px } .section__display-outer-s1 .animation__container { height: 530px } .section__display-outer-s1 .ani__text .ani__text-1 { font-size: 120px; background-size: 1420px auto } .section__display-outer-s1 .img__main { margin-top: -517px; width: 810px; height: 420px; margin-left: -405px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audio .sectionnNavPosition.first { top: 0 } .section__audio .main_container { display: flex; flex-direction: column } .section__audio .animation_container { left: 50%; margin-left: -640px; width: 1280px; height: 569px; order: -1; margin-bottom: 70px } .section__audio .animation_container .img__main { width: 100%; height: 100% } #CMD .section__audio .img__main { background-image: url(../images_1/bg_inner1.jpg) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audio .animation_container .audio_wave { transform: scale(.8) translate(186px, -156px) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audio .animation_container .img__pc { transform: scale(.8) translate(150px, -126px) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audio .wd__content .content__info { font-size: 22px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__audio .wd__feature__list { margin-top: 50px !important } .section__audio .wd__feature__list .wd__feature { margin: 0 30px } .section__audio .wd__feature__list .feature-2 { margin-top: 10px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__keyboard { padding-top: 60px } .section__keyboard .wd__content .content__info { font-size: 22px } .section__keyboard .typing_text { transform: scale(.6); transform-origin: center top } .section__keyboard .main-content { margin-top: -80px } .section__keyboard .main-content .pic_container { width: 730px; height: 436px; margin: 0 auto } .section__keyboard .main-content .pic_container .img__pc { transform: scale(.68); margin-left: -650px; top: -220px } .section__keyboard .main-content .wd__content { margin-top: 50px } .section__keyboard .main-content .wd__feature__list { margin-top: 42px; width: 700px } .section__keyboard .main-content .wd__feature__list .wd__feature { width: 130px } .section__keyboard .main-content .wd__feature__list .wd__feature .img { margin: 0 auto } .section__keyboard .modal-button { margin-top: 20px; padding: 13px 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__keyboard .wd__feature.icon01 .wd__feature__data { width: 115px !important; height: 80px !important } /* #CMD .section__keyboard .wd__feature.icon01 .img__icon { background-image: url(../images_1/icon01_inner1.png) }*/ } @media all and (min-width:731px) and (max-width:1279.5px) { .section__keyboard .wd__feature.icon02 .wd__feature__data { width: 77px !important; height: 80px !important } /* #CMD .section__keyboard .wd__feature.icon02 .img__icon { background-image: url(../images_1/icon02_inner1.png) }*/ } @media all and (min-width:731px) and (max-width:1279.5px) { .section__keyboard .wd__feature.icon03 .wd__feature__data { width: 87px !important; height: 80px !important } /* #CMD .section__keyboard .wd__feature.icon03 .img__icon { background-image: url(../images_1/icon03_inner1.png) }*/ } @media all and (min-width:731px) and (max-width:1279.5px) { .section__connectivity { margin-top: 260px; padding-bottom: 80px } .section__connectivity .wd__content .content__info { font-size: 22px } .section__connectivity .sectionnNavPosition.first { top: 550px } .section__connectivity .animate__container { height: 1366px; margin-left: -365px; width: 730px; position: relative; left: 50% } .section__connectivity .animate__container .scrolltrigger-end { position: absolute; bottom: 370px } .section__connectivity .text_container { width: 100%; left: 0; height: 675px; top: -70px } .section__connectivity .text_container .line { font-size: 110px; position: relative } .section__connectivity .text_container .line.all { position: absolute; left: -50px; top: 0 } .section__connectivity .img_container { position: relative; top: 466px } .section__connectivity .img_container .img__pc { left: 50%; margin-left: -759px; width: 1518px; height: 789px; max-width: none; } #CMD .section__connectivity .img__pc { /*background-image: url(../images_1/pc_connectivity.jpg)*/ background-image: url(../images/pc_desctop.png)!important; } /* #CMD .section__connectivity .img__pc { mask: url(../images_1/pc_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pc_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain }*/ } @media all and (min-width:731px) and (max-width:1279.5px) { .section__connectivity .img_container .img__line { left: 50%; /* margin-left: -512px; width: 1024px; height: 73px; margin-top: -73px*/ margin-left: -374px; width: 1024px; height: 73px; margin-top: -38px; } #CMD .section__connectivity .img__line { background-image: url(../images/line_table.webp) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__connectivity .line_container { width: 700px; height: 50px; margin-left: -350px; top: 463px } .section__connectivity .line_container .text_item { font-size: 16px; top: 7px; border: 1px solid transparent } .section__connectivity .line_container .text_item__1 { left: -9px; width: 120px } .section__connectivity .line_container .text_item__2 { left: 141px; width: 85px } .section__connectivity .line_container .text_item__3 { left: 245px } .section__connectivity .line_container .text_item__4 { left: 447px; width: 160px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__connectivity .modal-button-container { margin-top: 35px; margin-bottom: 35px; } .section__connectivity .modal-button-container .modal-button { padding: 13px 20px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__conference-outer-s1 { padding-top: 80px; padding-bottom: 0 } .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-2 .block-content, .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block.block-imgstyle-extend.column-span-medium-3 .block-content, .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-content { padding-bottom: 150px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-outer-s1 { padding-top: 120px; padding-bottom: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s4 { padding-bottom: 96px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s5 { padding-top: 0; padding-bottom: 120px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s6 { padding-top: 0; padding-bottom: 56px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__userExperience-inner-s7 { padding-top: 80px; padding-bottom: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__environment-outer-s1 { padding-bottom: 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__environment-outer-s1 .icon-fsc { height: 102px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__military__grade { padding-top: 80px; padding-bottom: 200px } .section__military__grade .wd__feature__list.features-icon { margin-top: 597px; margin-bottom: 0; width: 700px } .section__military__grade .wd__feature__list.features-icon .wd__feature { margin-left: 15px; margin-right: 15px } .section__military__grade .wd__feature__list.features-icon .wd__feature .img__icon { margin: 0 auto } .section__military__grade .wd__feature__list.features-icon .wd__feature .wd__feature__describe { width: 150px; margin-top: 10px } .section__military__grade .image__container { margin-top: -976px } .section__military__grade .image__container .img__main { left: 50%; /*margin-left: -640px;*/ margin-left: -385px; width: 1280px; height: 814px } #CMD .section__military__grade .img__main { background-image: url(../images/main_table.webp) } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__software-outer-s1 { padding-top: 80px; padding-bottom: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__security-outer-s1 { padding-top: 120px; padding-bottom: 80px } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__comment { display: inline-block; margin-top: 0 } .section__comment.footer-2023 { padding-top: 7px; padding-bottom: 23px } } @media all and (min-width:731px) and (max-width:1279.5px) { .inner-view .wd__section.first-section { padding-top: 80px !important } .inner-view .inner-view-container { max-width: 2560px } .inner-view .section__btn__home::before { background: 0 0 } } @media all and (min-width:731px) and (max-width:1279.5px) { .section__innerIoport { padding-top: 80px } .section__innerIoport .img__main { left: 50%; margin-left: -640px; width: 1280px; height: 737px; margin-top: -95px } #CMD .inner-modal.modal-innerIoport .img__main { background-image: url(../images_1/main-1.jpg) } } .inline__block { display: inline-block } @media all and (max-width:730.5px) { .wdtab.isFakeImg .wdtab__panel__item-image .img__main { position: relative; left: 50%; margin: 0 auto; margin-left: -215px; width: 430px; height: 234px } #CMD .wdtab.isFakeImg .wdtab__panel__item-image .img__main { background-image: url(https://fakeimg.pl/430x234/) } } @media all and (max-width:730.5px) { .wdtab { margin-top: 20px } .wdtab .wdtab__nav-btn { padding: 16px 43px; width: auto; font-size: 16px } .wdtab .wdtab__panel__item { padding-top: 25px } .wdtab .wdtab__panel__item-info__text { margin: 0 auto; margin-top: 0; padding-top: 0; padding-bottom: 25px; width: 90%; font-size: .9375rem } .wdtab .wdtab__panel__item-image { position: relative; overflow: hidden } } @media all and (max-width:730.5px) { .slick-tab-content { margin: 45px auto 0; width: 100%; max-width: 720px } .slick-tab-content .slick-title { position: relative; text-align: center } .slick-tab-content .slick-title .title-nav .slick-nav-btn { padding: 16px 43px; font-size: 16px line-height: 1.2; scroll-snap-align: center } .slick-tab-content .slick-title .title-nav .slick-nav-btn.active, .slick-tab-content .slick-title .title-nav .slick-nav-btn:focus { border-bottom: 2px solid #683aff } .slick-tab-content .slick-title .title-nav .sign-fnum { top: -.6em } .slick-tab-content .slick-info-item { padding-top: 25px } .slick-tab-content .slick-info { margin: 0 auto; padding-top: 0; width: 90%; max-width: 350px } .slick-tab-content .slick-info .slick-info-text { font-size: .9375rem; line-height: 1.35 } .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 } .slick-tab-content .slick-image { position: relative; left: 50%; margin: 10px 0 0 } .slick-tab-content .slick-image .img-slick { left: 50%; width: 414px; height: 228px; border-radius: 5px; transform: translateX(-50%) } .slick-tab-content .slick-info+.slick-image { margin-top: 25px } } @media all and (max-width:730.5px) { .wdtab .wdtab__autoPlay { left: 90%; margin-left: 0 } } @media all and (max-width:730.5px) { .wdOledTable .table_fixed_container.fixed { padding-top: 0 } .wdOledTable .table_fixed_container.fixed .table_fixed { margin-top: 0 } .wdOledTable .table_fixed_container .table_fixed { width: 100% } .wdOledTable .table_fixed_container .table_fixed::after { display: none } .wdOledTable .table_fixed_container .table_fixed .table_fixed_list .table_fixed__item { padding-right: 0; padding-left: 0; font-size: 18px } } @media all and (max-width:730.5px) { .wdOledTable .table_fixed_container.fixed { left: 18px; width: calc(100% - 18px) } } @media all and (max-width:730.5px) { .wdblockimg .wdblockimg__container { margin-right: auto; margin-left: auto; width: 89.2%; max-width: 414px } .wdblockimg .wdblockimg__container .block { grid-column-end: span 6 !important } .wdblockimg .wdblockimg__container .block .block-content { padding: 26px 14px } } @media all and (max-width:730.5px) { .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-content, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-content { min-height: 350px; padding-bottom: 66% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .block-img, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .block-img { position: relative; position: absolute; bottom: -1px; width: 100% } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-2 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-3 .img__bg, .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.column-span-6 .img__bg { position: relative; padding-bottom: 100%; width: 100%; height: 0 } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .img__bg { padding-bottom: 0; height: 178px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .block-content { padding: 203px 24px 30px } .wdblockimg .wdblockimg__container .block.block-imgstyle-scale.imageTop .block-video { max-height: 178px } } @media all and (max-width:730.5px) { .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-content { padding-bottom: 270px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .block-img { position: absolute; top: unset; right: 0; bottom: 0; left: 50%; width: 100%; height: 480px; transform: translate(-50%, 0) } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-] .img__bg { width: 480px; height: 480px } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].imageTop .block-img { top: 0; left: 0; width: 100%; height: 237px; transform: unset } .wdblockimg .wdblockimg__container .block.block-imgstyle-extend[class*=column-span-].imageTop .block-content { padding: 278px 14px 40px } } @media all and (max-width:730.5px) { .wdblockimg .wdblockimg__container .block .block-video .video__container { bottom: 0; left: 50%; width: 414px; height: 414px; transform: translateX(-50%) } .wdblockimg .wdblockimg__container .block.imageTop .block-video { max-height: 178px } .wdblockimg .wdblockimg__container .block.imageTop .block-video .video__container { width: 414px; height: 178px } } @media all and (max-width:730.5px) { .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-] .ai__noise__container { --voice-iconSize: 180px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-] .ai__noise__container .noise__voice__container { height: var(--voice-iconSize); max-height: var(--voice-iconSize) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 { min-height: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .block-content, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .block-content, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .block-content { padding-bottom: 30px; min-height: unset } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container { padding-bottom: 30px; transition: margin-top .721s linear 0s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher.js-showed, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher.js-showed, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher.js-showed { margin-top: 0; margin-bottom: 0; padding-top: 0; transition: opacity .5s linear 580ms, margin-top 0s linear .2s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container { top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container .noise__right, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container .noise__right, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container .noise__right { transform: scale(.3, 1.4) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container.js-active { top: 0; margin-top: 0; max-height: 280px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__voice__container.js-active .img__noise .img__voice { transform: scale(.8) } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher { top: -17px; margin-top: 0; margin-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher .noise_desc, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher .noise_desc, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher .noise_desc { margin-top: 0; padding-top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher .aiNoiseSwitcher_btn { margin-bottom: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container { margin-top: 0 } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__switcher { animation-duration: .498s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__left, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__left { margin-left: -850px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .noise__right, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .noise__right, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .noise__right { margin-left: 50px } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container .img__voice { transition: transform .583s ease-in-out 0s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container.js-active { margin-top: -20px; transition: margin-top .499s ease 0s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active .noise__switcher, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container.js-active .noise__switcher { top: -2px; animation-delay: 0s; animation-duration: 3s } .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-2 .ai__noise__container.js-active .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-3 .ai__noise__container.js-active .img__voice, .wdblockimg .block[data-blocktype=aiNoise][class*=block-imgstyle-].column-span-6 .ai__noise__container.js-active .img__voice { transition-delay: .119s } } @media all and (max-width:730.5px) { .wdItemList { margin-top: 52px; width: 100% } .wdItemList .item__block { margin-right: auto; margin-bottom: 41px; margin-left: auto; width: 100%; max-width: 414px } .wdItemList .item__block:last-child { margin-bottom: 0 } .wdItemList .item__block__img { width: 100% } .wdItemList .item__block__img .item__img { position: relative; padding-bottom: 51%; width: 100%; height: 0; background-position: center; background-size: contain } .wdItemList .wd__content.item-content { margin-top: 23px } .wdItemList .wd__content.item-content .content__title { font-size: 21px } .wdItemList .wd__content.item-content .content__info { font-size: 18px } } @media all and (max-width:730.5px) { .section__wdvideos .item-productvideo { padding-bottom: 61px } .section__wdvideos .item-productvideo .detect-point-out { margin-top: -229px; width: 1px; height: 470px } .section__wdvideos .item-productvideo .detect-point-enter { margin-top: 0 } .section__wdvideos .item-productvideo .video__play__btn { bottom: 22px; left: 5%; margin-left: auto } .section__wdvideos .item-productvideo .video__play__btn .svg-circle { fill: transparent } .section__wdvideos .item-productvideo .btn__youtube { bottom: 20px; padding: 12px 40px 12px 20px } .section__wdvideos .item-productvideo .btn__youtube span { font-size: 14px } .section__wdvideos .item-productvideo .btn__youtube::after { top: calc(50% - 10px); right: 12px; width: 20px; height: 20px } } @media all and (max-width:730.5px) { .section__wdvideos .item-salesvideo { padding-bottom: 58px } .section__wdvideos .sales__containter { width: calc(100% - 32px); max-width: 320px; gap: 20px } .section__wdvideos .sales__containter .sales__item { padding: 0; width: 100% } .section__wdvideos .sales__containter .sales__item .sales__item_preview { padding-bottom: 56.25%; height: 0 } .section__wdvideos .sales__containter .sales__item .sales__item_preview img { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .section__wdvideos .video_info { position: relative; opacity: 1 !important; padding: 14px 24px; font-size: .9375rem; background: #16151b; min-height: 46px } .section__wdvideos .video_info span { margin: 0 } } @media all and (max-width:730.5px) { .performance_chart { overflow: initial; margin: 0 auto; margin-top: 15px; width: 320px } .performance_chart .item__highline .img__highline { width: 54px } .performance_chart .item__highline .highline_text .text1 { font-size: 1.875rem } .performance_chart .item__highline .highline_text .text2 { margin-top: -6px; font-size: .75rem } } @media all and (max-width:730.5px) { .performance_chart { margin-top: 24px; margin-left: auto; padding-right: 0; padding-right: 14px; padding-left: 14px; width: 100%; max-width: 414px } .performance_chart .item { margin-bottom: 60px } .performance_chart .item::after { left: 0; margin-bottom: 10px; width: calc(100% + 51px) } .performance_chart .item:last-child { margin-bottom: 0 } .performance_chart .item_contents { padding-right: 18px } .performance_chart .item__content { display: flex; margin-bottom: 25px; flex-direction: column-reverse } .performance_chart .item__content .title { margin-top: 10px; padding-right: 0; width: 100%; font-size: 16px text-align: left; line-height: 1.3 } .performance_chart .item__content .bar { padding-left: 0; width: 100% } .performance_chart .item__content .bar__content { height: 18px; border-radius: 0 4px 4px 0 } .performance_chart .item__content .bar__score__txt { top: 1px; padding-right: 5px; font-size: 16px } .performance_chart .item__highline { display: flex; top: -5px; right: 0; align-items: center; justify-content: flex-end; width: 100px; flex-direction: column-reverse } .performance_chart .item__highline .highline_text { margin-bottom: 5px; margin-left: 0 } .performance_chart .item__highline .highline_text .text1 { font-size: 30px } .performance_chart .item__highline .highline_text .text2 { font-size: 16px } } @media all and (max-width:730.5px) { .text_comment { margin-top: -5px; padding-left: 0; font-size: } } @media all and (max-width:730.5px) { .performance_chart_multi { margin-top: 96px } .performance_chart_multi .performance_chart { margin-top: 35px } .performance_chart_multi .chart__title { margin-right: auto; margin-left: auto; padding-right: 0; width: 292px; font-size: 1.875rem; text-align: left } .performance_chart_multi .item_contents { padding-right: 0 } .performance_chart_multi .item__content { margin-bottom: 23px } .performance_chart_multi .item__content .title { justify-content: flex-start; margin-top: 7px } .performance_chart_multi .item__content .bar__content { margin-bottom: 11px } } @media all and (max-width:730.5px) { .performance_chart_multi .chart__bar__infos { margin-top: 23px; padding-left: 0 } .performance_chart_multi .bar__info { margin-bottom: 12px } .performance_chart_multi .bar__info__color { width: 12px; height: 12px; border-radius: 3px } .performance_chart_multi .bar__info__txt { top: 2px; margin-left: 8px; font-size: .75rem } .performance_chart_multi .text_comment { margin-top: 23px; padding-left: 0 } } @media all and (max-width:730.5px) { .section__adobebanner-outer-s1 { overflow: hidden; margin-top: 0; padding-top: 0; padding-bottom: 0 } .section__adobebanner-outer-s1 .banner__container .banner__item { min-height: 486px } .section__adobebanner-outer-s1 .banner__container .wd__content { top: 0; padding-top: 58px; padding-bottom: 60px } .section__adobebanner-outer-s1 .banner__container .wd__content .content__title { max-width: 470px } .section__adobebanner-outer-s1 .banner__container .wd__content .content__title .no__wrap { white-space: normal } .section__adobebanner-outer-s1 .banner__container .image__container { overflow: visible } .section__adobebanner-outer-s1 .banner__container .img__main { left: 50%; margin-top: -331px; margin-left: -365px; width: 730px; height: 644px } .section__adobebanner-outer-s1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/adobeBanner/images/outer/small/1x/main.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-outer-s1 { padding-top: 40px; padding-bottom: 50px } .section__antimicrobial-outer-s1 .img__main { margin-top: -135px; max-width: 730px; height: 443px } .section__antimicrobial-outer-s1 .img__main { background-image: url(https://dlcdnwebimgs.asus.com/files/media/ea5bde46-a344-49d0-8bcc-befd7351d88b/v1/features/sections/antimicrobial/images/outer/small/1x/s1/main.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-outer-s1 .wd__feature__list { margin-top: 50px; max-width: 400px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature { width: 160px } .section__antimicrobial-outer-s1 .wd__feature__list .feature-icon-data { top: -7px; margin-bottom: 2px; width: 65px; height: 65px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon { top: -13px } .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { top: 0 } } @media all and (max-width:730.5px) { .section__antimicrobial-outer-s1 .wd__content_2 { margin-top: -47px; margin-left: auto; width: 89.2% } } @media all and (max-width:730.5px) { .section__antimicrobial-outer-s1 .modal-button-container { margin-top: 30px } } @media (max-width:730.5px) and (max-width:390px) { .section__antimicrobial-outer-s1 .wd__feature__list .wd__feature.feature-icon { top: 0 !important } } @media all and (max-width:730.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay { padding-bottom: 1px } .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay section.wd__section { padding-top: 79px } .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay section.wd__section .wd__content { margin-top: -.4em } .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay section.wd__section:last-child { margin-bottom: 149px } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s1 { padding-top: 116px } .section__antimicrobial-inner-s1 .img__main { margin: 249px auto 0; max-width: 730px; height: 1124px } .section__antimicrobial-inner-s1 .img__main { background-image: url(../images_1/main.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s1 .image__container { margin-top: 22px; width: 320px } .section__antimicrobial-inner-s1 .image__container .imgItem { position: relative; align-items: center; margin-bottom: 0; width: 100%; flex-direction: column } .section__antimicrobial-inner-s1 .image__container .imgItem .imgItem-content { padding: 16px 20px 0; width: 320px } .section__antimicrobial-inner-s1 .image__container .imgItem-title { padding: 0 7px 13px; font-size: 21px; text-align: center } .section__antimicrobial-inner-s1 .image__container .imgItem-info { font-size: 18px text-align: center; line-height: 1.37 } .section__antimicrobial-inner-s1 .image__container .imgItem-1 .imgItem-img-1 { width: 163px; height: 163px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 { margin-top: 22px } .section__antimicrobial-inner-s1 .image__container .imgItem-2 .imgItem-img-2 { width: 157px; height: 157px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 { margin-top: 5px } .section__antimicrobial-inner-s1 .image__container .imgItem-3 .imgItem-img-3 { margin-bottom: -20px; margin-left: -51px; width: 287px; height: 167px } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 { margin-top: 0; padding-top: 70px; padding-bottom: 80px } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .colItem-2 .colItem-content .colItem_info-2 { left: 2px } .section__antimicrobial-inner-s2 .colItem-4 .colItem-content .colItem_info-2 { left: 2px } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .steps { margin-top: -66px } .section__antimicrobial-inner-s2 .steps .step { display: block; margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s2 .steps .step .step-img { margin-right: auto; margin-left: auto } .section__antimicrobial-inner-s2 .steps .step .step-content { margin-right: auto; margin-left: auto; width: 90%; max-width: 374px } .section__antimicrobial-inner-s2 .steps .step .step-content .content-info { font-size: 18px } .section__antimicrobial-inner-s2 .steps .step.step-1 { width: 100% } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-content { margin-top: 1px } .section__antimicrobial-inner-s2 .steps .step.step-1 .step-img { left: -6px; margin-top: 82px } .section__antimicrobial-inner-s2 .steps .step.step-arrow { margin-right: auto; margin-left: auto; height: 106px } .section__antimicrobial-inner-s2 .steps .step.step-arrow .img__arrow { top: 21px; left: 50%; margin-left: -12.5px; width: 25px; height: 74px } .section__antimicrobial-inner-s2 .steps .step.step-2 { width: 100%; max-width: 414px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img { padding-bottom: 56.687%; width: 100%; height: 0 } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img .video-item { left: 0; margin-left: auto; width: 100%; height: 100% } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-img .video__play__btn { top: -67px; margin-left: 105px } .section__antimicrobial-inner-s2 .steps .step.step-2 .step-content { margin-top: 13px } .section__antimicrobial-inner-s2 .table__container { margin-top: 71px; margin-left: -160px; width: 320px; height: auto } .section__antimicrobial-inner-s2 .table__container .img__bg { position: absolute; bottom: 40px; left: 50%; margin-left: -180px; width: 360px; height: 882px } #CMD .section__antimicrobial-inner-s2 .table__container .img__bg { background-image: url(../images_1/chart.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .table__container .vertical { position: relative; top: 0; left: 0; width: 320px; flex-direction: column } .section__antimicrobial-inner-s2 .table__container .vertical span { position: relative; font-size: 20px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem { width: 100% } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 { display: flex; justify-content: center; flex-direction: row-reverse; margin-top: 65px; min-height: 882px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-1 { top: 0; left: 0; width: 160px; font-size: 18px text-align: center } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-1 .nav-2 { top: 0; left: 0; width: 160px; font-size: 18px text-align: center } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 { align-items: center; justify-content: center; flex-direction: column } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem_title, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { top: 0; font-size: .9375rem } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content { top: 116px; justify-content: center; width: 100%; height: 20px; color: #bababa } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info { width: 50%; font-size: .75rem } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 .colItem-content .colItem_info-2, .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content .colItem_info-2 { top: 0 } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 { position: absolute; bottom: 763px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-2 .colItem_title { width: 280px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-3 { position: absolute; bottom: 518px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 { position: absolute; bottom: 309px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem_title { width: 280px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-4 .colItem-content { top: 111px } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-5 { display: block; position: absolute; bottom: 76px; left: 50%; justify-content: center; width: 150px; transform: translateX(-50%) } .section__antimicrobial-inner-s2 .table__container .vertical .colItem-5 span { top: 0; right: unset; width: 120px; font-size: 1.4375rem } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-3 { background-image: url(../images_1/pic_3.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-4 { background-image: url(../images_1/pic_4.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-5 { background-image: url(../images_1/pic_5.jpg) } } @media all and (max-width:730.5px) { .section__antimicrobial-inner-s2 .image__container .imgItem .imgItem-img-6 { background-image: url(../images_1/pic_6.jpg) } } @media all and (max-width:730.5px) { #CMD #section__antimicrobial-inner-s2 .step-arrow .img__arrow { background-image: url(../images_1/arrow.png) } } @media all and (max-width:730.5px) { .modal-inner__sectionsAntimicrobial section.wd__section:last-child { padding-bottom: 92px } } @media all and (max-width:730.5px) { .section__audiodirac-outer-s1 { padding-top: 40px; padding-bottom: 50px } .section__audiodirac-outer-s1 .img__main { margin-top: -107px; max-width: 730px; height: 540px } .section__audiodirac-outer-s1 .img__main { background-image: url(../images_1/main-2.jpg) } } @media all and (max-width:730.5px) { .section__audiodirac-outer-s1 .wd__feature__list { max-width: 440px } .section__audiodirac-outer-s1 .wd__feature__list.list-icon { margin-top: -4px } } @media all and (max-width:730.5px) { .section__audiodirac-outer-s1 .wdblockimg { margin-top: -95px } } @media all and (max-width:730.5px) { .modal-inner__sectionsAudioDirac section.wd__section:last-child { padding-bottom: 133px } } @media all and (max-width:730.5px) { .section__audioDirac-inner-s1 { padding-top: 80px } .section__audioDirac-inner-s1 .dirac_compare { margin-top: 50px } .section__audioDirac-inner-s1 .dirac_compare .dirac_compare__with, .section__audioDirac-inner-s1 .dirac_compare .dirac_compare__without { margin: 0 auto 25px; max-width: 414px; border-radius: 20px; background-color: #1e1e1e } .section__audioDirac-inner-s1 .dirac_compare .compare_pic { left: 50%; margin-left: -176.5px; width: 353px; height: 388px; height: 388px; background-position: 50%; background-size: 353px auto } .section__audioDirac-inner-s1 .dirac_compare .compare_text { position: absolute; top: 335px; font-size: 18px } } @media all and (max-width:730.5px) { #CMD .section__audioDirac-inner-s1 .dirac_compare__without .compare_pic { background-image: url(../images_1/pic1.jpg) } } @media all and (max-width:730.5px) { #CMD .section__audioDirac-inner-s1 .dirac_compare__with .compare_pic { background-image: url(../images_1/pic2.jpg) } } @media all and (max-width:730.5px) { .section__audioDirac-inner-s2 { padding-top: 50px; padding-bottom: 100px } .section__audioDirac-inner-s2 .audio__chart_containter { width: 100%; max-width: 414px; height: 340px; border-radius: 20px; background-color: #1e1e1e } .section__audioDirac-inner-s2 .audio__chart { margin: 0 auto; width: 320px; height: 340px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 { position: relative; margin-top: 40px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .img { left: 50%; margin-left: -180px; width: 360px; height: 340px; width: 360px; height: 340px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .top .topLeft { top: 50px; left: 10px; padding: 0 10px; width: 130px; font-size: 16px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .top .topRight { top: 33px; right: 10px; padding: 0 10px; width: 160px; font-size: 16px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .left { top: 194px; left: -103px; font-size: 12px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .right { right: 30px; bottom: 26px; font-size: 12px } .section__audioDirac-inner-s2 .audio__chart.audio__chart_0 .num { top: 180px; right: -97px; font-size: 25px } } @media all and (max-width:730.5px) { #CMD .section__audioDirac-inner-s2 .audio__chart_0 .img-slick-1 { background-image: url(../images_1/pic.jpg) } } @media all and (max-width:730.5px) { .section__audiodolby-outer-s1 { padding-top: 60px; padding-bottom: 50px } .section__audiodolby-outer-s1 .img__main { margin-top: -107px; margin-bottom: -98px; max-width: 730px; height: 540px } .section__audiodolby-outer-s1 .img__main { background-image: url(../images_1/main_audioDirac1.jpg) } } @media all and (max-width:730.5px) { .section__audiodolby-outer-s1 .wd__feature__list { max-width: 440px } .section__audiodolby-outer-s1 .wd__feature__list.list-icon { margin-top: -4px } } @media all and (max-width:730.5px) { .section__audiodolby-outer-s1 .wdblockimg { margin-top: 42px } } @media all and (max-width:730.5px) { .section__audiodolby-outer-s2 { padding-top: 40px; padding-bottom: 50px } .section__audiodolby-outer-s2 .wdblockimg { margin-top: 32px } } @media all and (max-width:730.5px) { .modal-inner__sectionsAudioDolby section.wd__section:last-child { padding-bottom: 133px } } @media all and (max-width:730.5px) { .section__audioDolby-inner-s1 { padding-top: 60px !important } } @media all and (max-width:730.5px) { .section__audioDolby-inner-s1 .img__main { left: 50%; margin-left: -365px; width: 730px; height: 289px; margin-top: -10px } #CMD .section__audioDolby-inner-s1 .img__main { background-image: url(../images_1/pic_audioDirac2.jpg) } } @media all and (max-width:730.5px) { .section__audioDolby-inner-s2 { padding-top: 60px !important } .section__audioDolby-inner-s2 .ainoise_compare { margin-top: 50px } .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__with, .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__without { display: flex; justify-content: center; margin: 0 auto; max-width: 414px; border-radius: 20px; background-color: #1e1e1e } .section__audioDolby-inner-s2 .ainoise_compare .ainoise_compare__without { margin-bottom: 25px } .section__audioDolby-inner-s2 .ainoise_compare .compare_pic { margin: 0 auto; width: 414px; height: 329px } .section__audioDolby-inner-s2 .ainoise_compare .compare_text { position: absolute; top: 25px; font-size: 18px } } @media all and (max-width:730.5px) { #CMD .section__audioDolby-inner-s2 .ainoise_compare__without .compare_pic { background-image: url(../images_1/pic1_audioDirac2.jpg) } } @media all and (max-width:730.5px) { #CMD .section__audioDolby-inner-s2 .ainoise_compare__with .compare_pic { background-image: url(../images_1/pic2_audioDirac2.jpg) } } @media all and (max-width:730.5px) { .section__audioDolby-inner-s3 { padding-top: 90px } .section__audioDolby-inner-s3 .audio__chart_containter { width: 100%; max-width: 414px; height: 300px; border-radius: 20px; background-color: #1e1e1e } .section__audioDolby-inner-s3 .audio__chart { margin: 0 auto; width: 320px; height: 300px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 { position: relative; margin-top: 40px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .img { width: 320px; height: 280px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .top { display: flex; position: absolute; top: 26px; left: 34px; width: 234px; height: 60px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .top .topLeft { top: 0; left: 0; padding: 0 5px; width: 50%; font-size: 14px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .top .topRight { top: 0; right: 0; padding: 0 5px; width: 50%; font-size: 14px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .left { top: 186px; left: -78px; font-size: 12px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .right { right: 51px; bottom: 29px; font-size: 12px } .section__audioDolby-inner-s3 .audio__chart.audio__chart_0 .num { top: 52%; right: -73px; font-size: 25px } } @media all and (max-width:730.5px) { .section__audioDolby-inner-s1+.section__audioDolby-inner-s3 { padding-top: 60px } } @media all and (max-width:730.5px) { #CMD .section__audioDolby-inner-s3 .audio__chart_0 .img-slick-1 { background-image: url(../images_1/pic_audioDirac.jpg) } } @media all and (max-width:730.5px) { .section__audioDolby-inner-s4 { padding-top: 90px !important; padding-bottom: 120px } .section__audioDolby-inner-s4 .wdtab { margin-top: 60px } .section__audioDolby-inner-s4 .wdtab .wdtab__autoPlay { top: -60px; left: 5.4%; margin-left: 0 } .section__audioDolby-inner-s4 .wdtab .wdtab__panel__item-info__text { line-height: 1.5; font-size: 18px } .section__audioDolby-inner-s4 .wdtab .wdtab__nav-btn { padding-right: 20px; padding-left: 20px; font-size: 22px } .section__audioDolby-inner-s4 .audio__chart_containter { width: 100%; max-width: 414px; border-radius: 20px; background-color: #1e1e1e } .section__audioDolby-inner-s4 .audio__chart { margin: 0 auto; width: 320px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 { height: 330px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .img-slick { height: 330px; background-size: 330px auto } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .title { top: 27px; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .y { top: 161px; left: -85px; font-size: 12px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .x { right: 23px; bottom: 53px; font-size: 12px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav { display: flex; bottom: 23px; left: 22px; width: 310px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item { margin: 0; padding-left: 35px; width: 50%; font-size: 12px; text-align: left } .section__audioDolby-inner-s4 .audio__chart.audio__chart_1 .nav .nav-item::after { bottom: calc(50% - 1px); width: 25px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 { height: 386px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .img-slick { height: 386px; background-size: 360px 386px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .title { top: 25px; font-size: 18px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .y { top: 191px; left: -83px; font-size: 12px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .x { right: 14px; bottom: 77px; font-size: 12px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .red { top: 97px; left: 81px; max-width: 70px; font-size: 12px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav { display: flex; bottom: 5px; left: 50%; margin-left: -140px; width: 320px; flex-wrap: wrap } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item { display: block; margin: 0 7px 10px; padding-left: 31px; width: 40%; font-size: 12px; text-align: left } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2 .nav .nav-item::after { top: 6px; bottom: inherit; left: -2px; width: 25px } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--1::after { left: 1px; background-size: 9px 2px; background-image: linear-gradient(to right, #ff3860 57%, rgba(255, 255, 255, 0) 0) } .section__audioDolby-inner-s4 .audio__chart.audio__chart_2.audio__chart_2 .nav .nav-item--3::after { left: 2px; width: 24px } } @media all and (max-width:730.5px) { #CMD .section__audioDolby-inner-s4 .audio__chart_1 .img-slick-1 { background-image: url(../images_1/pic1_audioDirac1a.jpg) } } @media all and (max-width:730.5px) { #CMD .section__audioDolby-inner-s4 .audio__chart_2 .img-slick-2 { background-image: url(../images_1/pic2_audioDirac1a.jpg) } } @media all and (max-width:730.5px) { .section__noise .sub__content { margin: 50px auto 0; width: 89.2%; text-align: left } .section__noise .sub__content .content__title { font-size: 21px } .section__noise .sub__content .content__info { margin-top: 11px; font-size: 18px } .section__noise .nav__noise { margin-top: 59px; flex-direction: column } .section__noise .nav__noise .nav__item { margin: 0 auto 13px; padding: 13px 15px; box-sizing: border-box; width: 89.2%; max-width: 400px; border-width: 1px } .section__noise .nav__noise .nav__item.js-selected { border-width: 1px } .section__noise .nav__noise .nav__item .nav__content { width: 100% } .section__noise .nav__noise .nav__item .nav__content .img__icon { display: inline-block; margin-right: 8px; width: 45px; height: 45px } .section__noise .nav__noise .nav__item .nav__content .nav__text { display: inline-block; width: calc(100% - 54px) } .section__noise .nav__noise .nav__item .nav__content .nav__text .content__title { font-size: 23px } .section__noise .nav__noise .nav__item .nav__content .nav__text .content__info { margin-top: 3px; font-size: 17px; letter-spacing: .1px; line-height: 1.45 } .section__noise .noise__switcher { margin-top: 30px } .section__noise .noise__switcher span { font-size: 20px } .section__noise .noise__switcher .noise_desc { width: 80%; max-width: 414px } .section__noise .img__noise { margin-top: -94px; transform: scale(.52) } .section__noise .modal-button-container { margin-top: -87px } } @media all and (max-width:730.5px) { .section__conference-outer-s1 { padding-top: 60px; padding-bottom: 50px } .section__conference-outer-s1 .wdblockimg { margin-top: 42px } .section__conference-outer-s1 .wdblockimg .block-3.column-span-2 .wd__content .content__info, .section__conference-outer-s1 .wdblockimg .block-3.column-span-3 .wd__content .content__info { padding-bottom: 50px } } @media all and (max-width:730.5px) { .section__conference-inner-s1 { padding-top: 60px; padding-bottom: 0 } .section__conference-inner-s1 .wdtab__panel { height: 665px } .section__conference-inner-s1 .wdtab { margin: 86px auto 0 } .section__conference-inner-s1 .wdtab .wdtab__autoPlay { left: 5% } .section__conference-inner-s1 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: -164px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn { padding: 0 15px 16px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn .nav_icon { margin-bottom: 14px; width: 50px; height: 50px } .section__conference-inner-s1 .wdtab .wdtab__nav-btn span { font-size: 16px } .section__conference-inner-s1 .wdtab__panel__item { padding-top: 25px } .section__conference-inner-s1 .wdtab__panel__item-info { padding-bottom: 13px; width: 100%; max-width: 700px; line-height: 1.5 } .section__conference-inner-s1 .wdtab__panel__item-info__text { padding-bottom: 10px; font-size: 18px } .section__conference-inner-s1 .wdtab__panel__item-image { display: block; margin: 0 auto; max-width: 320px } .section__conference-inner-s1 .wdtab__panel__item-image .img__main1 { margin-bottom: 24px } .section__conference-inner-s1 .wdtab__panel__item-image .img__main1, .section__conference-inner-s1 .wdtab__panel__item-image .img__main2 { padding-bottom: 60%; width: 100%; height: 0 } .section__conference-inner-s1 .single-nav { margin-top: 40px; width: 89.5%; max-width: 600px } .section__conference-inner-s1 .video-container { position: relative; margin: 0 auto; width: fit-content } .section__conference-inner-s1 .video-container .video__outer { margin: 0 auto; max-width: 320px; height: auto } .section__conference-inner-s1 .video-container .wd__play__btn { bottom: 10px; left: 5%; margin-left: 0 } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_0 .img__main1 { background-image: url(../images_1/tab01-1_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_1 .img__main1 { background-image: url(../images_1/tab02-1_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_2 .img__main1 { background-image: url(../images_1/tab03-1_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_3 .img__main1 { background-image: url(../images_1/tab04-1_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_4 .img__main1 { background-image: url(../images_1/tab05-1_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_5 .img__main1 { background-image: url(../images_1/tab06-1_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_0 .img__main2 { background-image: url(../images_1/tab01-2_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_1 .img__main2 { background-image: url(../images_1/tab02-2_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_2 .img__main2 { background-image: url(../images_1/tab03-2_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_3 .img__main2 { background-image: url(../images_1/tab04-2_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_4 .img__main2 { background-image: url(../images_1/tab05-2_conference.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s1 .conference_inner__img_5 .img__main2 { background-image: url(../images_1/tab06-2_conference.jpg) } } @media all and (max-width:730.5px) { .section__noise { margin-bottom: 0; padding-top: 90px !important; background-size: 460px auto } .section__noise .nav__noise { margin-top: 43px } .section__noise .noise__switcher { margin-top: 0 } .section__noise .noise__switcher.js-showed { padding-top: 25px } .section__noise .noise__voice__container { overflow: hidden; margin-top: 10px; margin-bottom: -13px; height: 208px } .section__noise .img__noise { transform: scale(.52) translateY(10px) } } @media all and (max-width:730.5px) { .section__conference-inner-s3 { padding-top: 90px !important; padding-bottom: 122px } .section__conference-inner-s3 .mode_container { margin: 0 auto; margin-top: 40px; width: 90% } .section__conference-inner-s3 .mode_container .title { margin-bottom: 10px; font-size: 21px; text-align: left } .section__conference-inner-s3 .mode_container .info { margin: 0 auto; font-size: 18px line-height: 1.5; text-align: left } .section__conference-inner-s3 .mode_container .img_containter { margin-top: -20px } .section__conference-inner-s3 .mode_container .img_containter .mode_img img { background-size: contain } .section__conference-inner-s3 .mode_container .img_containter .img_text { position: relative; z-index: 2; padding-bottom: 5px; font-size: 20px; line-height: 1.5 } .section__conference-inner-s3 .mode_container .toggle_off, .section__conference-inner-s3 .mode_container .toggle_on { width: 65px; height: 30px } .section__conference-inner-s3 .mode_container__1 .img_containter .mode_img__1 .img_text { margin-top: -10px } .section__conference-inner-s3 .mode_container__1 .img_containter .mode_img__2 .img_text { margin-top: -10px } .section__conference-inner-s3 .mode_container__1 .mode1, .section__conference-inner-s3 .mode_container__1 .mode2 { margin: 0 auto; width: 100%; height: 225px; background-size: 400px auto } .section__conference-inner-s3 .mode_container__2 .img_containter { position: relative; margin-top: 20px } .section__conference-inner-s3 .mode_container__2 .img_containter .mode_img__1 .img_text { margin-top: -10px } .section__conference-inner-s3 .mode_container__2 .mode3 { left: 50%; margin-left: -200px; width: 400px; height: 200px } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s3 .mode1 { background-image: url(../images_1/mode1_conference1.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s3 .mode2 { background-image: url(../images_1/mode2.jpg) } } @media all and (max-width:730.5px) { #CMD .section__conference-inner-s3 .mode3 { background-image: url(../images_1/mode3_s3.jpg) } } @media all and (max-width:730.5px) { .modal-inner__conference section.wd__section:last-child { padding-bottom: 129px } } @media all and (max-width:730.5px) { .section__corningGlass { padding-top: 60px; padding-bottom: 175px } .section__corningGlass .wd__content { max-width: 600px; margin: 0 auto } .section__corningGlass .inner_block__1 .feature-1 .wd__feature__describe, .section__corningGlass .inner_block__1 .feature-2 .wd__feature__describe { display: none } } @media all and (max-width:730.5px) { .section__corningGlass .inner_block__1 { margin-bottom: 90px } .section__corningGlass .inner_block__1 .wd__feature__list { margin: 0 auto; margin-top: 30px !important; max-width: 460px } .section__corningGlass .inner_block__1 .antiglare_containter { margin-top: -15px } .section__corningGlass .inner_block__1 .antiglare_containter .content { top: 28px; left: calc(50% - 160px); width: 320px } .section__corningGlass .inner_block__1 .antiglare_containter .content .item .title { font-size: 18px } .section__corningGlass .inner_block__1 .antiglare_containter .content .item .info { font-size: 14px } .section__corningGlass .inner_block__1 .antiglare_containter .content .content__left { text-align: right } .section__corningGlass .inner_block__1 .antiglare_containter .content .content__right { margin-left: 34px; text-align: left } .section__corningGlass .inner_block__1 .antiglare_containter .img__main { left: 50%; margin-left: -275px; width: 550px; height: 315px } #CMD .section__corningGlass .antiglare_containter .img__main { background-image: url(../images_1/img01.jpg) } } @media all and (max-width:730.5px) { .section__corningGlass .inner_block__2 { margin-top: -24px } .section__corningGlass .inner_block__2 .campare_containter .item { display: flex; flex-direction: column-reverse } .section__corningGlass .inner_block__2 .campare_containter .item .img { margin-top: 10px; width: 257px; height: 285px } .section__corningGlass .inner_block__2 .campare_containter .item .title { margin-top: 33px; font-size: 20px } .section__corningGlass .inner_block__2 .campare_containter .item .info { font-size: 14px } .section__corningGlass .inner_block__2 .campare_containter__2 { margin-top: 27px } } @media all and (max-width:730.5px) { #CMD .section__corningGlass .campare_containter__1 .img_grid_0 { background-image: url(../images_1/campare1_01.jpg) } } @media all and (max-width:730.5px) { #CMD .section__corningGlass .campare_containter__1 .img_grid_1 { background-image: url(../images_1/campare1_02.jpg) } } @media all and (max-width:730.5px) { #CMD .section__corningGlass .campare_containter__2 .img_grid_0 { background-image: url(../images_1/campare2_01.jpg) } } @media all and (max-width:730.5px) { #CMD .section__corningGlass .campare_containter__2 .img_grid_1 { background-image: url(../images_1/campare2_02.jpg) } } @media all and (max-width:730.5px) { .section__display-outer-s1 { padding-top: 40px; padding-bottom: 50px } .section__display-outer-s1 .img__main { margin-top: -128px; max-width: 730px; height: 490px } .section__display-outer-s1 .img__main { background-image: url(../images_1/main_outer.jpg) } } @media all and (max-width:730.5px) { .section__display-outer-s1 .wd__feature__list { margin-top: -42px; max-width: 600px } .section__display-outer-s1 .wd__feature__list.list-icon { margin-top: 9px } } @media all and (max-width:730.5px) { .section__display-outer-s1.is-top-main .wd__feature__list { margin-top: 58px } .section__display-outer-s1.is-top-main .wd__feature__list.list-icon { margin-top: 9px } } @media all and (max-width:730.5px) { .section__display-outer-s1.no-top-main .wd__feature__list { margin-top: 63px } .section__display-outer-s1.no-top-main .wd__feature__list.list-icon { margin-top: 9px } } @media all and (max-width:730.5px) { .section__display-outer-s1.is-bottom-main .wdblockimg { margin-top: -56px } } @media all and (max-width:730.5px) { .section__display-outer-s1.no-bottom-main .wdblockimg { margin-top: 17px } } @media all and (max-width:730.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay { padding-bottom: 132px } .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay section.wd__section { padding-top: 60px; padding-bottom: 30px } .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay section.wd__section .wd__content { margin-top: -.4em } .inner-view .inner-view-container .inner-modal.modal-inner__sectionsDisplay section.wd__section:last-child { margin-bottom: 0; padding-bottom: 0 } } @media all and (max-width:730.5px) { .section__display-inner-s1 .imgItem-img-1 { background-image: url(../images_1/pic_1.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s1 .imgItem-img-2 { background-image: url(../images_1/pic_2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s1 .imgItem-img-3 { background-image: url(../images_1/pic_3.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s1 .imgItem-img-4 { background-image: url(../images_1/pic_4.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s1 .imgItem-img-5 { background-image: url(../images_1/pic_5-1.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s1 .product_list { margin-top: 42px } } @media all and (max-width:730.5px) { .section__display-inner-s1 .wdOledTable.oledTable { margin-top: 58px } } @media all and (max-width:730.5px) { .section__display-inner-s1 .wdOledTable.oledTable .table_fixed_container .table_fixed__item { width: 260px } .section__display-inner-s1 .wdOledTable.oledTable .table_fixed_container .table_fixed__item span.text__val { position: relative; left: -6px } .section__display-inner-s1 .wdOledTable.oledTable .table_container { overflow-x: auto; margin-top: 0; margin-right: unset; margin-bottom: -10px; margin-left: auto; padding-bottom: 0; width: calc(100% - 18px); text-align: left } .section__display-inner-s1 .wdOledTable.oledTable .table_container table { width: 780px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=h-col] { padding: 19px 36px 19px 0; width: 260px } .section__display-inner-s1 .wdOledTable.oledTable .table_container [class*=td-] { padding: 79px 36px 26px 0; width: 260px; vertical-align: top } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val { font-size: 16px text-align: left } .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-1 td, .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-1 th { border-top: 2px solid #fff } .section__display-inner-s1 .wdOledTable.oledTable .table_container .text__val+.text__val { padding-top: 6px } .section__display-inner-s1 .wdOledTable.oledTable .table_container thead tr:first-child td, .section__display-inner-s1 .wdOledTable.oledTable .table_container thead tr:first-child th { padding-bottom: 15px } .section__display-inner-s1 .wdOledTable.oledTable .table_container thead .h-col-1 .img__table { margin-left: -3px; width: 96px; height: 96px } .section__display-inner-s1 .wdOledTable.oledTable .table_container thead .h-col-1 .text__val { padding-left: 10px; font-size: 18px transition: transform .1s linear 0s } .section__display-inner-s1 .wdOledTable.oledTable .table_container .rol-1, .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-0 td { position: relative; padding: 0; width: 1px } .section__display-inner-s1 .wdOledTable.oledTable .table_container .rol-1 .text__val, .section__display-inner-s1 .wdOledTable.oledTable .table_container .tr-0 td .text__val { position: absolute; top: 0; left: 0; padding-top: 30px; padding-bottom: 17px; width: 176px; font-size: 18px } .section__display-inner-s1 .wdOledTable.oledTable .table_container tbody .rol-1 { display: table-cell; position: sticky; z-index: 1; left: 0; vertical-align: top } } @media all and (max-width:730.5px) { .section__display-inner-s1 .wdOledTable { overflow: hidden; margin-bottom: -18px } } @media all and (max-width:730.5px) { .section__display-inner-s1 .wdOledTable.showControlButton .table__control { display: block; position: relative; z-index: 13 } .section__display-inner-s1 .wdOledTable.showControlButton .table__control .btn_item.btn_item-show { display: block; opacity: 0; animation-name: showBtnAni; animation-duration: .5s; animation-fill-mode: forwards; animation-delay: 0s; animation-timing-function: cubic-bezier(0, .28, .61, 1.05) } .section__display-inner-s1 .wdOledTable .table__control { display: none } .section__display-inner-s1 .wdOledTable .table__control .btn_item { display: flex; position: fixed; overflow: hidden; top: 50vh; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 99px; background-color: #fff } .section__display-inner-s1 .wdOledTable .table__control .btn_item svg { width: 14px; height: 14px } .section__display-inner-s1 .wdOledTable .table__control .btn_next { display: none; right: 12px } .section__display-inner-s1 .wdOledTable .table__control .btn_prev { display: none; left: 12px } } @media all and (max-width:730.5px) { @keyframes showBtnAni { 0% { display: block; opacity: 0 } 100% { display: block; opacity: 1 } } } @media all and (max-width:730.5px) { .section__display-inner-s2 { margin-top: 0; padding-top: 70px } } @media all and (max-width:730.5px) { .section__display-inner-s2 .image__container { display: flex; justify-content: space-between; margin-top: 50px; margin-right: auto; margin-left: auto; width: 100%; max-width: 320px } .section__display-inner-s2 .imgItem { margin-bottom: 25px } .section__display-inner-s2 .imgItem:last-child { margin-bottom: 0 } .section__display-inner-s2 .imgItem-title { padding: 15px 12px 0; font-size: 21px } .section__display-inner-s2 .imgItem-img { width: 320px; height: 220px } } @media all and (max-width:730.5px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1-1.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s2 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2-1.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s3 { margin-top: 0; padding-top: 95px } } @media all and (max-width:730.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-0 { background-image: url(../images_1/pic_0-2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-1 { background-image: url(../images_1/pic_1-2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-2 { background-image: url(../images_1/pic_2-2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s3 .image__container .imgItem .imgItem-img-3 { background-image: url(../images_1/pic_3-2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s3 .image__container { display: block; margin-top: 45px; margin-right: auto; margin-left: auto; width: 320px } .section__display-inner-s3 .imgItem { position: relative; margin-bottom: 27px } .section__display-inner-s3 .imgItem:last-child { margin-bottom: 0 } .section__display-inner-s3 .imgItem-title { padding: 0 7px; padding-bottom: 4px; font-size: 24px } .section__display-inner-s3 .imgItem-info { padding: 9px 20px; font-size: 18px } .section__display-inner-s3 .imgItem-img { width: 320px; height: 199px } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter .item { display: flex; flex-direction: column-reverse } .section__display-inner-s4 .campare_containter .item .imgItem-img-outer { margin-top: 17px; margin-right: auto; margin-left: auto; width: 100%; max-width: 359px } .section__display-inner-s4 .campare_containter .item .img { width: 100%; height: 285px } .section__display-inner-s4 .campare_containter .item .title { margin-top: 2px; font-size: 20px } .section__display-inner-s4 .campare_containter .item .info { font-size: 18px } .section__display-inner-s4 .campare_containter .item__1 { margin-top: 42px } .section__display-inner-s4 .campare_containter__2 { margin-top: 49px } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__1 .img_grid-0 { background-image: url(../images_1/campare1_0.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__1 .img_grid-1 { background-image: url(../images_1/campare1_1.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__1 .img_grid-2 { background-image: url(../images_1/campare1_2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__1 .img_grid-3 { background-image: url(../images_1/campare1_3.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__2 .img_grid-0 { background-image: url(../images_1/campare2_0.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__2 .img_grid-1 { background-image: url(../images_1/campare2_1.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__2 .img_grid-2 { background-image: url(../images_1/campare2_2.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s4 .campare_containter__2 .img_grid-3 { background-image: url(../images_1/campare2_3.jpg) } } @media all and (max-width:730.5px) { .section__display-inner-s21 { padding-top: 90px; padding-bottom: 60px } .section__display-inner-s21 .wdtab { margin-top: 73px } .section__display-inner-s21 .wdtab__nav-btn { font-size: 22px } .section__display-inner-s21 .wdtab__panel { min-height: 295px } .section__display-inner-s21 .wdtab .wd__play__btn.wdtab__autoPlay { top: -68px; left: 0; margin-left: 25px } .section__display-inner-s21 .img_containter { width: 89.2%; max-width: 414px; height: 200px } .section__display-inner-s21 .img_containter>img { padding-bottom: 52% } .section__display-inner-s21 .slider_step__containter { width: 100%; max-width: 320px } .section__display-inner-s21 .slider_step__containter { position: relative; margin: 13px auto 38px } .section__display-inner-s21 .slider_step__containter .step_icon { width: 24px; height: 24px } .section__display-inner-s21 .slider_step__containter .step_icon.candle, .section__display-inner-s21 .slider_step__containter .step_icon.dark { left: 32px } .section__display-inner-s21 .slider_step__containter .step_icon.cloud, .section__display-inner-s21 .slider_step__containter .step_icon.light { right: 26px } .section__display-inner-s21 .slider_step__containter .beer-slider { width: 180px } #CMD .section__display-inner-s21 .img__inner3__1_dark { background-image: url(../images_1/ani_dark.jpg) } } @media all and (max-width:730.5px) { #CMD .section__display-inner-s21 .img__inner3__1_light { background-image: url(../images_1/ani_light.jpg) } } @media all and (max-width:730.5px) { #CMD .section__display-inner-s21 .img__inner3__1_warm { background-image: url(../images_1/ani_warm.jpg) } } @media all and (max-width:730.5px) { #CMD .section__display-inner-s21 .img__inner3__1_cool { background-image: url(../images_1/ani_cool.jpg) } } @media all and (max-width:730.5px) { .section__environment-outer-s1 { padding-top: 56px; padding-bottom: 50px } .section__environment-outer-s1::before { height: 550px } .section__environment-outer-s1 .img__main { margin-top: -527px; max-width: 730px; height: 750px } .section__environment-outer-s1 .img__main { background-image: url(../images_1/main_small.jpg) } } @media all and (max-width:730.5px) { .section__environment-outer-s1 .wd__feature__list { margin-top: -42px; max-width: 600px } .section__environment-outer-s1 .wd__feature__list.list-icon { margin-top: 42px } .section__environment-outer-s1 .wd__feature__list.list-icon .wd__feature__describe { display: none } } @media all and (max-width:730.5px) { .section__environment-outer-s1 .wdblockimg { margin-top: 50px } } @media all and (max-width:730.5px) { .section__ksp { padding-top: 58px; padding-bottom: 0 } } @media all and (max-width:730.5px) { .section__ksp+.section__wdvideos .wdVideos.active { padding-top: 58px } } @media all and (max-width:730.5px) { .section__ksp .wdtile { margin-right: auto; margin-left: auto; width: 89.2%; max-width: 414px } .section__ksp .wdtile .item__block { justify-content: center; padding: 54px 0 } .section__ksp .wdtile .item__block .item__content--title, .section__ksp .wdtile .item__block .item__content--title *, .section__ksp .wdtile .item__block .wd__content .content__title, .section__ksp .wdtile .item__block .wd__content .content__title * { font-size: 32px; line-height: 1.2 } .section__ksp .wdtile .item__block .item__content--descBottom, .section__ksp .wdtile .item__block .item__content--descBottom *, .section__ksp .wdtile .item__block .item__content--descTop, .section__ksp .wdtile .item__block .item__content--descTop *, .section__ksp .wdtile .item__block .item__leftdesc, .section__ksp .wdtile .item__block .item__leftdesc *, .section__ksp .wdtile .item__block .wd__content .content__info, .section__ksp .wdtile .item__block .wd__content .content__info * { font-size: 20px; line-height: 1.4 } .section__ksp .wdtile .item__block--content, .section__ksp .wdtile .item__block--feature { padding-right: 38px; padding-left: 38px } .section__ksp .wdtile .item__block--content .wd__content { width: 100% } .section__ksp .wdtile .item__block--content .wd__content .content__title { margin-top: 0; padding: 0 } .section__ksp .wdtile .item__block--content .wd__content .content__info { margin-top: 12px } .section__ksp .wdtile .item__block--content .wd__content .content__info+.content__info { margin-top: 6px } .section__ksp .wdtile .item__block--feature { padding-right: 38px; padding-left: 38px } .section__ksp .wdtile .item__block--feature .item__leftdesc { padding: 15px 20px 20px } .section__ksp .wdtile .item__block--feature .item__leftdesc+.item__image { margin-top: 19px } .section__ksp .wdtile .item__block--feature .item__image { min-height: 101px; margin-bottom: 38px } .section__ksp .wdtile .item__block--feature .item__image { display: block; margin-bottom: 18px; min-height: auto } .section__ksp .wdtile .item__block--feature .item__image .img__item { display: block; position: relative } .section__ksp .wdtile .item__block--feature .item__content--descTop { margin-bottom: 17px } .section__ksp .wdtile .item__block--feature .item__content--descBottom { margin-top: 0 } .section__ksp .wdtile .item__block--feature .item__content--title+.item__content--descBottom { margin-top: 12px } .section__ksp .wdtile .item__block--feature .item__content--descBottom span+span { margin-top: 5px } } @media all and (max-width:730.5px) { .section__ksp .item__block.small-v-top { justify-content: flex-start } .section__ksp .item__block--feature, .section__ksp .item__block[class*=small-img-v-], .section__ksp .item__block[class*=small-txt-v-] { flex-direction: column; flex-wrap: wrap } .section__ksp .item__block--content, .section__ksp .item__block[class*=small-img-h-], .section__ksp .item__block[class*=small-txt-h-] { flex-direction: row; flex-wrap: nowrap; align-items: stretch } .section__ksp .item__block--content.small-img-v-txt .item__content, .section__ksp .item__block--feature.small-img-v-txt .item__content { width: 100%; order: 2 } .section__ksp .item__block--content.small-img-v-txt .item__image, .section__ksp .item__block--feature.small-img-v-txt .item__image { width: 100%; order: 1 } .section__ksp .item__block--content.small-txt-v-img .item__content, .section__ksp .item__block--feature.small-txt-v-img .item__content { width: 100%; order: 1 } .section__ksp .item__block--content.small-txt-v-img .item__image, .section__ksp .item__block--feature.small-txt-v-img .item__image { width: 100%; order: 2 } .section__ksp .item__block--content.small-img-h-txt .item__content, .section__ksp .item__block--feature.small-img-h-txt .item__content { width: 50%; order: 2 } .section__ksp .item__block--content.small-img-h-txt .item__image, .section__ksp .item__block--feature.small-img-h-txt .item__image { width: 50%; order: 1 } .section__ksp .item__block--content.small-txt-h-img .item__content, .section__ksp .item__block--feature.small-txt-h-img .item__content { width: 50%; order: 1 } .section__ksp .item__block--content.small-txt-h-img .item__image, .section__ksp .item__block--feature.small-txt-h-img .item__image { width: 50%; order: 2 } .section__ksp .item__block--content.small-img-v-txt .item__image, .section__ksp .item__block--feature.small-img-v-txt .item__image { margin-top: 0; margin-bottom: 26px; width: 100% } .section__ksp .item__block--content.small-txt-v-img .item__image, .section__ksp .item__block--feature.small-txt-v-img .item__image { margin-top: 26px; margin-bottom: 0; width: 100% } } @media all and (max-width:730.5px) { .section__ksp .item__block.small-txt-left, .section__ksp .item__block.small-txt-left * { text-align: left } .section__ksp .item__block.small-txt-center, .section__ksp .item__block.small-txt-center * { text-align: center } .section__ksp .item__block.small-txt-right, .section__ksp .item__block.small-txt-right * { text-align: right } } @media all and (max-width:730.5px) { .section__military__grade { margin-top: 0; padding-top: 0 } } @media all and (max-width:730.5px) { .section__military__grade .wd__feature__list { position: relative } .section__military__grade .wd__feature__list .wd__feature .wd__feature__describe { margin-right: auto; margin-left: auto; width: 170px } .section__military__grade .wd__feature__list.features-icon { margin-bottom: 50px; width: 90%; max-width: 600px } } @media all and (max-width:730.5px) { .section__military__grade .image__container { margin-top: -90px } .section__military__grade .img__main { left: 50%; margin-left: -50%; width: 100%; height: 848px; position: relative; z-index: 1; top: 0 } .section__military__grade .img__main { background-image: url(../images_1/main_small1.jpg) } } @media all and (max-width:730.5px) { .section__military__grade .wdtile { margin-top: -140px; margin-right: auto; margin-left: auto; width: 94%; max-width: 500px } .section__military__grade .wdtile__item { padding: 28px 12px; border-radius: 20px } .section__military__grade .wdtile__item .img__slogan { width: 64px; height: 58px; background-size: contain } .section__military__grade .wdtile .block__scroll.block__scroll__small-noscroll .scroll-trigger-end { position: absolute !important; bottom: 0 } .section__military__grade .wdtile .item__head__slogan-text { margin-top: 13px; padding-left: 10px; font-size: 18px } .section__military__grade .wdtile .item__content { margin-top: 14px; margin-bottom: 5px } .section__military__grade .wdtile .item__content .item__content-main { margin-bottom: 5px; font-size: 14px } .section__military__grade .wdtile .item__content .item__content-sub { font-size: 14px } } @media all and (max-width:730.5px) and (max-width:599px) { .section__military__grade .wdtile .item__head { display: block } .section__military__grade .wdtile .item__head__slogan-text { padding-left: 0 } } @media all and (max-width:730.5px) { .section__military__grade .wdtile__item { min-height: auto } .section__military__grade .wdtile .item__content-main { display: flex } .section__military__grade .wdtile .item__content-main-num { min-width: 20px; display: block; text-align: right } .section__military__grade .wdtile .item__content-main-text { padding-left: 4px } .section__military__grade .wdtile .item__content-sub { display: none } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s1 { padding-top: 60px; padding-bottom: 20px } .section__creatorhub-outer-s1 .wdtab .wdtab__autoplay__enterdetect { top: 39px } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay { top: 290px; left: 50%; margin-left: -18px } .section__creatorhub-outer-s1 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 0 } .section__creatorhub-outer-s1 .wdtab .wdtab__panel { margin-top: -11px } .section__creatorhub-outer-s1 .wdtab .wdtab__panel__item .img__main { width: 100%; height: 187px; background-size: 298px 187px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s1 .img__containter { position: relative; left: 50%; margin-top: -17px; margin-left: -365px; width: 730px; height: 310px; background-position: 0 50%; background-repeat: none; background-size: cover } #CMD .section__creatorhub-outer-s1 .img__containter { background-image: url(../images_1/pc.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .img__containter { background-image: url(../images_1/pc.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-0 .img__main { background-image: url(../images_1/screen1.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-0 .img__main { background-image: url(../images_1/screen1.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-1 .img__main { background-image: url(../images_1/screen2.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-1 .img__main { background-image: url(../images_1/screen2.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-2 .img__main { background-image: url(../images_1/screen3.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-2 .img__main { background-image: url(../images_1/screen3.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-3 .img__main { background-image: url(../images_1/screen4.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-3 .img__main { background-image: url(../images_1/screen4.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-4 .img__main { background-image: url(../images_1/screen5.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-4 .img__main { background-image: url(../images_1/screen5.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-5 .img__main { background-image: url(../images_1/screen6.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-5 .img__main { background-image: url(../images_1/screen6.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1 .wdtab__panel__item-6 .img__main { background-image: url(../images_1/screen7.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s1.use-page-imgs .wdtab__panel__item-6 .img__main { background-image: url(../images_1/screen7.jpg) } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s2 { padding-top: 90px; padding-bottom: 30px } .section__creatorhub-outer-s2 .s2__containter { position: relative; overflow: hidden; margin-bottom: -70px; height: 380px } .section__creatorhub-outer-s2 .s2__containter .wd__feature__list { margin-top: 30px } .section__creatorhub-outer-s2 .s2__containter .img__main { left: 50%; margin-top: -103px; margin-left: -367px; width: 734px; height: 413px } #CMD .section__creatorhub-outer-s2 .s2__containter .img__main { background-image: url(../images_1/img1.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s2.use-page-imgs .s2__containter .img__main { background-image: url(../images_1/img1.jpg) } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s2 .wdtab { margin-top: 78px } .section__creatorhub-outer-s2 .wdtab .wdtab__nav-container { padding: 10px 0 } .section__creatorhub-outer-s2 .wdtab .wdtab__nav .wdtab__nav-btn { margin: 0 8px; padding: 9px 34px; font-size: 18px } .section__creatorhub-outer-s2 .wdtab .wdtab__autoPlay { top: -60px; left: calc(50% - 30px); width: 60px; height: 60px } .section__creatorhub-outer-s2 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 0; width: 60px; height: 60px } .section__creatorhub-outer-s2 .wdtab .wdtab__panel__item { padding-top: 0 } .section__creatorhub-outer-s2 .wdtab .slick-info { margin: 0 auto; padding-top: 20px; padding-bottom: 30px; width: 80% } .section__creatorhub-outer-s2 .wdtab .slick-info .slick-info-text { font-size: 18px } .section__creatorhub-outer-s2 .tab__video_control .tab__video_control_button { display: block; position: relative; top: 24px; left: 50%; margin-left: -18px } .section__creatorhub-outer-s2 .video_box { margin: 0 auto; width: 100%; max-width: 414px; height: 58vw; max-height: 233px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s3 { padding-top: 90px; padding-bottom: 30px } .section__creatorhub-outer-s3 .wdtab { min-height: 328px; margin-top: 78px } .section__creatorhub-outer-s3 .wdtab .wdtab__nav-container { padding: 10px 0 } .section__creatorhub-outer-s3 .wdtab .wdtab__nav-btn { margin: 0 8px; padding: 7px 34px 9px; font-size: 18px } .section__creatorhub-outer-s3 .wdtab .wdtab__autoPlay { top: -60px; left: calc(50% - 30px); width: 60px; height: 60px } .section__creatorhub-outer-s3 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 0; width: 60px; height: 60px } .section__creatorhub-outer-s3 .wdtab .wdtab__panel__item { padding-top: 0 } .section__creatorhub-outer-s3 .wdtab .slick-info { padding-top: 20px; padding-bottom: 0 } .section__creatorhub-outer-s3 .wdtab .slick-info-text { margin-right: auto; margin-left: auto; width: 90% } .section__creatorhub-outer-s3 .wdtab .slick-image { top: -17px; width: 730px; height: 272px } .section__creatorhub-outer-s3 .wdtab .img-slick { left: 50%; margin-left: -365px; width: 730px; height: 272px } #CMD .section__creatorhub-outer-s3 .img-slick { background-image: url(../images_1/pd.jpg) } #CMD .section__creatorhub-outer-s3 .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { background-image: url(../images_1/pd.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s3.use-page-imgs .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s3 .wdtab .bigScreen { top: 55px; left: 166px; width: 398px; height: 100px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s3 .wdtab .smallScreen { top: 169px; left: 203px; width: 328px; height: 97px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s3 .tab__video_control .tab__video_control_button { position: relative; z-index: 20; top: 10px; left: 5%; margin-left: -40px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s4 { padding-top: 80px } .section__creatorhub-outer-s4 .screenpadContainer { margin-top: -20px } .section__creatorhub-outer-s4 .wdtab { margin-top: 348px; min-height: 328px } .section__creatorhub-outer-s4 .wdtab .wdtab__autoPlay { top: -32px; left: 50%; margin-left: -30px; width: 60px; height: 60px } .section__creatorhub-outer-s4 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: 0; width: 60px; height: 60px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-scrollouter { position: relative; z-index: 3 } .section__creatorhub-outer-s4 .wdtab .wdtab__nav { padding-top: 0 } .section__creatorhub-outer-s4 .wdtab .wdtab__nav::before { bottom: 10px } .section__creatorhub-outer-s4 .wdtab .wd_play__btn { top: 340px; left: calc(50% - 18px) } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn { padding: 18px 20px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-btn::before { bottom: -6px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container { padding-bottom: 10px } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__icon { transform: scale(.6); transform-origin: center } .section__creatorhub-outer-s4 .wdtab .wdtab__nav-container .nav__text { margin-top: -10px; padding-top: 0; padding-bottom: 2px } .section__creatorhub-outer-s4 .wdtab .slick-info { padding-bottom: 28px; min-height: 60px } .section__creatorhub-outer-s4 .wdtab .slick-info::before { top: -182px; left: 50%; margin-left: -640px; width: 1280px; height: calc(100% + 180px); content: "" } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item { padding-top: 3px } .section__creatorhub-outer-s4 .wdtab .slick-info-text { margin-right: auto; margin-left: auto; padding-top: 10px; width: 100%; font-size: 16px text-align: center } .section__creatorhub-outer-s4 .wdtab .slick-image { top: -455px; width: 730px; height: 478px } .section__creatorhub-outer-s4 .wdtab .img-slick { left: 50%; margin-left: -365px; width: 730px; height: 478px } #CMD .section__creatorhub-outer-s4 .img-slick { background-image: url(../images_1/pd.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { background-image: url(../images_1/pd.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick { mask: url(../images_1/pd_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4 .img-slick-1 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-1 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { background-image: url(../images_1/pd_2.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-1 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4 .img-slick-2 { background-image: url(../images_1/pd_2.jpg) } #CMD .section__creatorhub-outer-s4 .img-slick-2 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { background-image: url(../images_1/pd_2.jpg) } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-page-imgs .img-slick-2 { mask: url(../images_1/pd_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pd_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s4 .wdtab .bigScreen { top: 58px; left: 166px; width: 398px; height: 98px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s4 .wdtab .smallScreen { top: 169px; left: 203px; width: 328px; height: 97px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s4 .wdtab .monitorScreen { top: 88px; left: 420px; width: 385px; height: 118px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .bigScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .bigScreen { top: 152px; left: 193px; width: 218px; height: 57px } .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-0 .smallScreen, .section__creatorhub-outer-s4 .wdtab .wdtab__panel__item-1 .smallScreen { top: 215px; left: 220px; width: 184px; height: 54px } } @media all and (max-width:730.5px) { .section__creatorhub-outer-s4 .tab__video_control .tab__video_control_button { position: relative; z-index: 20; top: 33px; left: 5%; margin-left: -36px } } @media all and (max-width:730.5px) { #CMD .section__creatorhub-outer-s4.use-img .wdtab__panel__item-7 .smallScreen { background-image: url(../images_1/controlPanel_screenpad.jpg) } } @media all and (max-width:730.5px) { .section__security-outer-s1 { padding-top: 40px; padding-bottom: 50px } .section__security-outer-s1 .wdblockimg { margin-top: 42px } } @media all and (max-width:730.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__sectionsUserExperience section.wd__section:last-child { padding-bottom: 111px } } @media all and (max-width:730.5px) { .section__security-inner-s1 { padding-top: 90px; padding-bottom: 0 } .section__security-inner-s1 .security-inner-s1-figure { margin-top: 50px; width: 89.2%; max-width: 414px } .section__security-inner-s1 .security-inner-s1-figure-item { margin-bottom: 24px } .section__security-inner-s1 .security-inner-s1-figure-item img { padding-bottom: 75%; height: 0 } .section__security-inner-s1 .security-inner-s1-figure-item:last-child { margin-bottom: 0 } .section__security-inner-s1 .security-inner-s1-imgs { display: block } .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-1 { background-image: url(../images_1/img1.jpg) } } @media all and (max-width:730.5px) { .section__security-inner-s1 .security-inner-s1-figure .security-inner-s1-img-2 { background-image: url(../images_1/img2.jpg) } } @media all and (max-width:730.5px) { .section__security-inner-s2 { padding-top: 60px !important; padding-bottom: 70px } .section__security-inner-s2 .security-inner-s2-figure { margin-top: 50px; width: 89.2%; max-width: 414px } .section__security-inner-s2 .security-inner-s2-figure-item { margin-bottom: 24px } .section__security-inner-s2 .security-inner-s2-figure-item img { padding-bottom: 75%; height: 0 } .section__security-inner-s2 .security-inner-s2-figure-item:last-child { margin-bottom: 0 } .section__security-inner-s2 .security-inner-s2-imgs { display: block } .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-1 { background-image: url(../images_1/img1.jpg) } } @media all and (max-width:730.5px) { .section__security-inner-s2 .security-inner-s2-figure .security-inner-s2-img-2 { background-image: url(../images_1/img2_inner.jpg) } } @media all and (max-width:730.5px) { .section__software-outer-s1 { padding-top: 40px; padding-bottom: 50px } .section__software-outer-s1 .wd__content .content__title { max-width: 700px } .section__software-outer-s1 .wd__content .content__info { max-width: 580px } .section__software-outer-s1 .software-infos { margin-top: -110px } .section__software-outer-s1 .software-info { display: block; padding: 45px 0 33px; width: 89.2%; max-width: 414px; border-radius: 20px } .section__software-outer-s1 .software-info .wd__content { padding: 32px 0 7px } .section__software-outer-s1 .software-info .wd__content .content__info { padding-right: 14px; padding-left: 14px; max-width: 100% } .section__software-outer-s1 .software-info-icon0-outer { min-width: 210px } .section__software-outer-s1 .software-info-icon0 { width: 65px; height: 65px } .section__software-outer-s1 .wd__feature__list { display: flex; margin-top: -6px; margin-left: 0; flex-wrap: wrap; flex-direction: row; gap: 0 20px } .section__software-outer-s1 .wd__feature__list .wd__feature { margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; flex-basis: 39%; flex-grow: 1; flex-shrink: 1 } .section__software-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { top: 7px; width: 100% !important; height: 116px } .section__software-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data .img__icon { background-size: 150px auto } .section__software-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: -13px; margin-left: 0 !important; max-width: unset !important; text-align: center; min-width: unset !important } .section__software-outer-s1 .wd__feature__list .software-info3 .feature-3 .wd__feature__describe { max-width: 100% !important } .section__software-outer-s1 .img__main { margin-top: -57px; max-width: 1034px; height: 362px } .section__software-outer-s1 .img__main.use-page-imgs { background-image: url(../images_1/main_inner.jpg) } } @media all and (max-width:730.5px) { .section__software-outer-s1 .img__main { background-image: url(../images_1/main_inner.jpg) } } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon0 { background-image: url(../images_1/icon1-0_s1.png) } } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon1 { background-image: url(../images_1/icon1-1_s1.png) } } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon2 { background-image: url(../images_1/icon1-2.png) } } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon3 { background-image: url(../images_1/icon1-3_s1.png) } } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon4 { background-image: url(../images_1/icon1-4_s1.png) } } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon5 { background-image: url(../images_1/icon1-5_s1.png) } } /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon6 { background-image: url(../images_1/icon1-6_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon7 { background-image: url(../images_1/icon1-7_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon8 { background-image: url(../images_1/icon1-8_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon9 { background-image: url(../images_1/icon1-9_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info1 .img__icon10 { background-image: url(../images_1/icon1-10_s1.png) } }*/ @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon0 { background-position: center center; background-size: contain } #CMD .section__software-outer-s1 .software-info2 .img__icon0 { background-image: url(../images_1/icon2-0_s1.png) } } @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon1 { background-position: center center; background-size: contain } /* #CMD .section__software-outer-s1 .software-info2 .img__icon1 { background-image: url(../images_1/icon2-1_s1.png) }*/ .wd__section .wd__feature__list .wd__feature.feature-icon .wd__feature__data .img__icon { /* width: 50%; height: 100%;*/ margin: 0 auto; } } @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon2 { background-position: center center; background-size: contain } /* #CMD .section__software-outer-s1 .software-info2 .img__icon2 { background-image: url(../images_1/icon2-2_s1.png) }*/ } @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon3 { background-position: center center; background-size: contain } /* #CMD .section__software-outer-s1 .software-info2 .img__icon3 { background-image: url(../images_1/icon2-3_s1.png) }*/ } @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon4 { background-position: center center; background-size: contain } /* #CMD .section__software-outer-s1 .software-info2 .img__icon4 { background-image: url(../images_1/icon2-4_s1.png) }*/ } @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon5 { background-position: center center; background-size: contain } /* #CMD .section__software-outer-s1 .software-info2 .img__icon5 { background-image: url(../images_1/icon2-5_s1.png) }*/ } @media all and (max-width:730.5px) { .section__software-outer-s1 .software-info2 .img__icon6 { background-position: center center; background-size: contain } /* #CMD .section__software-outer-s1 .software-info2 .img__icon6 { background-image: url(../images_1/icon2-6_s1.png) }*/ } @media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info3 .img__icon0 { background-image: url(../images_1/icon3-0_s1.png) } } /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info3 .img__icon1 { background-image: url(../images_1/icon3-1_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info3 .img__icon2 { background-image: url(../images_1/icon3-2_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info3 .img__icon3 { background-image: url(../images_1/icon3-3_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info3 .img__icon4 { background-image: url(../images_1/icon3-4_s1.png) } }*/ /*@media all and (max-width:730.5px) { #CMD .section__software-outer-s1 .software-info3 .img__icon5 { background-image: url(../images_1/icon3-5_s1.png) } }*/ @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 { padding-top: 40px; padding-bottom: 35px } .section__spatialVision-outer-s1 .imgAni { height: 530px } .section__spatialVision-outer-s1 .image_container { margin-top: -223px; transform: scale(.38) } .section__spatialVision-outer-s1 .image_container::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-size: cover } /* .section__spatialVision-outer-s1 .image_container::after { background-image: url(../images_1/explode_back_.png) } */ } /* @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .img__bg { background-image: url(../images_1/bg.jpg) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .img__explode_back { background-image: url(../images_1/explode_back.jpg) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .image_container .img__explode { mask: url(../images_1/explode_mask.png); -webkit-mask-image: url(../images_1/explode_mask.png) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .img__explode_1 { background-image: url(../images_1/explode_1.jpg) } .section__spatialVision-outer-s1 .img__explode_1 { mask: url(../images_1/explode_1_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/explode_1_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .img__explode_2 { background-image: url(../images_1/explode_2.jpg) } .section__spatialVision-outer-s1 .img__explode_2 { mask: url(../images_1/explode_2_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/explode_2_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .img__explode_3 { background-image: url(../images_1/explode_3.jpg) } .section__spatialVision-outer-s1 .img__explode_3 { mask: url(../images_1/explode_3_mask.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/explode_3_mask.png); -webkit-mask-position: center; -webkit-mask-size: contain } } */ @media all and (max-width:730.5px) { .section__spatialVision-outer-s1 .wd__feature__list { position: relative; margin-top: 44px; width: 89.2%; max-width: 414px; flex-direction: column } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon { margin: 0 0 23px; padding: 30px 32px; width: 100%; border-radius: 20px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top { margin-bottom: 18px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe__top .img__icon { height: 73px } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__data { font-size: 1.75rem } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe { margin-top: 7px; line-height: 1.45 } .section__spatialVision-outer-s1 .wd__feature__list .wd__feature.feature-icon .wd__feature__describe * { font-size: 18px } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s2 { padding-top: 40px; padding-bottom: 50px } .section__spatialVision-outer-s2 .category_container { position: relative; margin-top: 38px; width: 100%; max-width: 360px; flex-direction: column } .section__spatialVision-outer-s2 .category_container .category-item { width: 100% } .section__spatialVision-outer-s2 .category_container .category-item-2, .section__spatialVision-outer-s2 .category_container .category-item-3, .section__spatialVision-outer-s2 .category_container .category-item-4, .section__spatialVision-outer-s2 .category_container .category-item-5 { margin-top: 30px } .section__spatialVision-outer-s2 .category_container .wd__content { padding-left: 9px } .section__spatialVision-outer-s2 .category_container .wd__content::before { top: 3px; height: calc(100% - 9px) } .section__spatialVision-outer-s2 .category_container .wd__content .content__title { font-size: 18px } .section__spatialVision-outer-s2 .category_container .wd__content .content__info { margin-top: -1px; font-size: .9375rem } .section__spatialVision-outer-s2 .category_container .category_img_container { position: relative; left: 50%; margin-left: -180px; width: 360px } .section__spatialVision-outer-s2 .category_container .category_img { display: inline-block; margin-top: 10px; width: 174px; height: 201px; border-radius: 20px } .section__spatialVision-outer-s2 .category_container .category_img_1 { margin-right: 12px } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 { padding-top: 40px; padding-bottom: 50px } .section__spatialVision-outer-s3 .image_container { margin-top: -135px; margin-bottom: -82px } .section__spatialVision-outer-s3 .image_container .img_bg { margin-left: -365px; width: 730px; height: 690px } .section__spatialVision-outer-s3 .img_bg { background-image: url(../images_1/bg.jpg) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 .image_container .img_3d_left { margin-left: -365px; width: 730px; height: 690px } .section__spatialVision-outer-s3 .img_3d_left { background-image: url(../images_1/3d_left.jpg) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 .image_container .img_3d_right { margin-left: -365px; width: 730px; height: 690px } .section__spatialVision-outer-s3 .img_3d_right { background-image: url(../images_1/3d_right.jpg) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 .image_container .img_ani_text { top: 437px; font-size: .9375rem } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 .image_container .img_ani_text_left { right: 50%; left: auto; margin-right: 5px } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 .image_container .img_ani_text_right { margin-left: 8px } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s3 .info_box { position: relative; top: 41px; margin-left: -44px; padding: 18px 14px 17px 25px; width: 86px } .section__spatialVision-outer-s3 .info_box .text_right::before { top: 14px; left: 14px; height: 28px } .section__spatialVision-outer-s3 .info_box .text_left::before { top: 42px; left: 14px; height: 28px } .section__spatialVision-outer-s3 .info_box .info_text_right { padding-bottom: 6px } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s4 { padding-top: 40px; padding-bottom: 50px } .section__spatialVision-outer-s4 .nav_container { position: relative; margin: 41px auto 0; width: 100%; max-width: 320px } .section__spatialVision-outer-s4 .nav_container .home { width: 320px } .section__spatialVision-outer-s4 .nav_container .home .icon_home { width: 65px; height: 70px } .section__spatialVision-outer-s4 .nav_container .home .text__ttnormal { margin-top: 16px; font-size: 20px } .section__spatialVision-outer-s4 .nav_container .icon_line { margin: 11px auto 0; width: 202px; height: 19px } .section__spatialVision-outer-s4 .icon_line { background-image: url(../images_1/icon_line.png) } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s4 .nav_container .child_container { justify-content: center; margin-top: 19px; flex-wrap: wrap } .section__spatialVision-outer-s4 .nav_container .child_container .child_item { margin-bottom: 24px; width: 150px } .section__spatialVision-outer-s4 .nav_container .child_container .child_icon { margin: 0 auto 15px; width: 74px; height: 70px } .section__spatialVision-outer-s4 .nav_container .child_container .nav_text { font-size: 20px } } @media all and (max-width:730.5px) { .section__spatialVision-outer-s4 .carousel_container { display: flex; position: relative; justify-content: space-between; margin: 25px auto 0; width: 89.2%; max-width: 414px; flex-direction: row; flex-wrap: wrap } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box { overflow: hidden; margin-bottom: 25px; width: 100%; border-radius: 30px } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content { padding: 25px; min-height: unset } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__title { font-size: 1.75rem } .section__spatialVision-outer-s4 .carousel_container .carousel-item-box .wd__content .content__info { margin-top: 6px } .section__spatialVision-outer-s4 .carousel_container .carousel_img { width: 100%; height: 286px; border-radius: 0 } } @media all and (max-width:730.5px) { .section__userexperience-outer-s1 { padding-top: 40px; padding-bottom: 50px } .section__userexperience-outer-s1 .wdblockimg { margin-top: 42px } } @media all and (max-width:730.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__sectionsUserExperience section.wd__section:last-child { padding-bottom: 111px } } @media all and (max-width:730.5px) { .section__userExperience-inner-s1 { padding-top: 90px; padding-bottom: 0 } .section__userExperience-inner-s1 .userExperience-inner-s1-figure { margin-top: 50px; width: 89.2%; max-width: 414px } .section__userExperience-inner-s1 .userExperience-inner-s1-figure-item { margin-bottom: 24px } .section__userExperience-inner-s1 .userExperience-inner-s1-figure-item img { padding-bottom: 75%; height: 0 } .section__userExperience-inner-s1 .userExperience-inner-s1-figure-item:last-child { margin-bottom: 0 } .section__userExperience-inner-s1 .userExperience-inner-s1-imgs { display: block } .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-1 { background-image: url(../images_1/img1.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-2 { background-image: url(../images_1/img2.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s1 .userExperience-inner-s1-figure .userExperience-inner-s1-img-3 { background-image: url(../images_1/img3.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s2 { padding-top: 90px; padding-bottom: 60px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure { margin-top: 50px; width: 89.2%; max-width: 414px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure-item { margin-bottom: 24px } .section__userExperience-inner-s2 .userExperience-inner-s2-figure-item img { padding-bottom: 75%; height: 0 } .section__userExperience-inner-s2 .userExperience-inner-s2-figure-item:last-child { margin-bottom: 0 } .section__userExperience-inner-s2 .userExperience-inner-s2-imgs { display: block } .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-1 { background-image: url(../images_1/img1.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s2 .userExperience-inner-s2-figure .userExperience-inner-s2-img-2 { background-image: url(../images_1/img2.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s3 { padding-top: 90px; padding-bottom: 60px } .section__userExperience-inner-s3 .wdtab { margin-top: 73px } .section__userExperience-inner-s3 .wdtab__nav-btn { font-size: 22px } .section__userExperience-inner-s3 .wdtab__panel { min-height: 295px } .section__userExperience-inner-s3 .wdtab .wd__play__btn.wdtab__autoPlay { top: -68px; left: 0; margin-left: 25px } .section__userExperience-inner-s3 .img_containter { width: 89.2%; max-width: 414px; height: 200px } .section__userExperience-inner-s3 .img_containter>img { padding-bottom: 52% } .section__userExperience-inner-s3 .slider_step__containter { width: 100%; max-width: 320px } .section__userExperience-inner-s3 .slider_step__containter { position: relative; margin: 13px auto 38px } .section__userExperience-inner-s3 .slider_step__containter .step_icon { width: 24px; height: 24px } .section__userExperience-inner-s3 .slider_step__containter .step_icon.candle, .section__userExperience-inner-s3 .slider_step__containter .step_icon.dark { left: 32px } .section__userExperience-inner-s3 .slider_step__containter .step_icon.cloud, .section__userExperience-inner-s3 .slider_step__containter .step_icon.light { right: 26px } .section__userExperience-inner-s3 .slider_step__containter .beer-slider { width: 180px } #CMD .section__userExperience-inner-s3 .img__inner3__1_dark { background-image: url(../images_1/ani_dark.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s3 .img__inner3__1_light { background-image: url(../images_1/ani_light.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s3 .img__inner3__1_warm { background-image: url(../images_1/ani_warm.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s3 .img__inner3__1_cool { background-image: url(../images_1/ani_cool.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s4 { padding-top: 60px; padding-bottom: 60px } .section__userExperience-inner-s4 .wdblockimg { margin-top: 50px } .section__userExperience-inner-s4 .wdblockimg .block { opacity: 1 !important } .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 .block-img { top: 0 } .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 .img__bg { padding-bottom: 0; height: 178px } .section__userExperience-inner-s4 .wdblockimg .wdblockimg__container .block-6 .block-content { padding: 203px 24px 30px } } @media all and (max-width:730.5px) { .section__userExperience-inner-s5 { padding-top: 90px; padding-bottom: 0 } .section__userExperience-inner-s5 .btn__lity__video { margin-top: 50px } .section__userExperience-inner-s5 .btn__lity__video .compare_content::before { content: ""; margin-top: -38px; margin-left: -38px; width: 76px; height: 76px } .section__userExperience-inner-s5 .btn__lity__video .video_info { padding: 16px; font-size: 18px transform: translateY(40px) } .section__userExperience-inner-s5 .btn__lity__video .compare_content { margin: 0 auto; width: 89.2%; max-width: 414px; height: auto } .section__userExperience-inner-s5 .btn__lity__video .compare_content::after { overflow: hidden; border-radius: 20px } .section__userExperience-inner-s5 .btn__lity__video.active .compare_content::after { opacity: 1 } .section__userExperience-inner-s5 .btn__lity__video.active .compare_content .video_info { opacity: 1 } .section__userExperience-inner-s5 .btn__lity__video.active .compare_content::before { transform: rotate(120deg) } .section__userExperience-inner-s5 .video__bg { margin: 0 auto; padding-bottom: 113%; width: 100%; height: 0 } #CMD .section__userExperience-inner-s5 .btn__lity__video .video__bg { background-image: url(../images_1/video_bg-1.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s6 { padding-top: 60px; padding-bottom: 0 } .section__userExperience-inner-s6 .wdblockimg { margin-top: 50px } .section__userExperience-inner-s6 .wdblockimg .block { opacity: 1 !important } } @media all and (max-width:730.5px) { .section__userExperience-inner-s7 { padding-top: 90px; padding-bottom: 0 } .section__userExperience-inner-s7::before { background-color: #dadada } .section__userExperience-inner-s7 .userExperience-inner-s7-main { margin: 42px auto 0; width: 89.2%; max-width: 414px } .section__userExperience-inner-s7 .userExperience-inner-s7-item { opacity: 1 !important; flex-flow: column-reverse } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer { margin-left: 0; padding: 22px 0 10px; width: 100% } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content { max-width: 100%; width: 89.2%; margin: 0 auto } .section__userExperience-inner-s7 .userExperience-inner-s7-item .textItem-outer .wd__content .content__title { font-size: 1.75rem } .section__userExperience-inner-s7 .userExperience-inner-s7-item .imgItem-outer { width: 100% } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list .wd__content { width: 100%; margin: 0 } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list .wd__content .content__title { font-size: 21px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-1 .userExperience-inner-s7-item-list li { margin-bottom: 21px } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 .s7-inner-item-img-2 { right: 0 } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 .wd__content { margin-left: auto !important } .section__userExperience-inner-s7 .userExperience-inner-s7-item-2 .textItem-outer { padding-bottom: 28px } .section__userExperience-inner-s7 .userExperience-inner-s7-item .imgItem-outer { overflow: hidden; width: 100% } .section__userExperience-inner-s7 .s7-inner-item-img-1 { right: 0; padding-bottom: 66%; width: 100%; height: 0 } .section__userExperience-inner-s7 .s7-inner-item-img-2 { right: 0; padding-bottom: 66%; width: 100%; height: 0 } } @media all and (max-width:730.5px) { .section__userExperience-inner-s8 { padding-top: 90px; padding-bottom: 0 } .section__userExperience-inner-s8 .userExperience-inner-s8-figure { margin-top: 50px; width: 89.2%; max-width: 414px } .section__userExperience-inner-s8 .userExperience-inner-s8-figure-item { margin-bottom: 24px } .section__userExperience-inner-s8 .userExperience-inner-s8-figure-item img { padding-bottom: 75%; height: 0 } .section__userExperience-inner-s8 .userExperience-inner-s8-figure-item:last-child { margin-bottom: 0 } .section__userExperience-inner-s8 .userExperience-inner-s8-imgs { display: block } .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-1 { background-image: url(../images_1/img1_inner.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s8 .userExperience-inner-s8-figure .userExperience-inner-s8-img-2 { background-image: url(../images_1/img2-a.jpg) } } @media all and (max-width:730.5px) { .section__userExperience-inner-s9 { margin-bottom: -10px; padding-top: 60px; padding-bottom: 0 } .section__userExperience-inner-s9 .wdtab__panel { height: 500px } .section__userExperience-inner-s9 .wdtab { margin-top: 86px } .section__userExperience-inner-s9 .wdtab .wdtab__autoPlay { left: 5% } .section__userExperience-inner-s9 .wdtab .wdtab__autoPlay .wd__play__btn-button { top: -164px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn { padding: 0 15px 16px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn .nav_icon { margin-bottom: 14px; width: 50px; height: 50px } .section__userExperience-inner-s9 .wdtab .wdtab__nav-btn span { font-size: 16px } .section__userExperience-inner-s9 .wdtab__panel__item { padding-top: 25px } .section__userExperience-inner-s9 .wdtab__panel__item-info { width: 100%; max-width: 700px; line-height: 1.5 } .section__userExperience-inner-s9 .wdtab__panel__item-info__text { padding-bottom: 10px; font-size: 18px } .section__userExperience-inner-s9 .wdtab__panel__item-image .img__main1, .section__userExperience-inner-s9 .wdtab__panel__item-image .img__main2 { margin: 0 auto; width: 320px; height: 240px; background-size: contain } .section__userExperience-inner-s9 .single-nav { margin-top: 40px; width: 89.5%; max-width: 600px } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_0 .img__main1 { background-image: url(../images_1/tab01-1_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_1 .img__main1 { background-image: url(../images_1/tab02-1_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_2 .img__main1 { background-image: url(../images_1/tab03-1_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_3 .img__main1 { background-image: url(../images_1/tab04-1_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_4 .img__main1 { background-image: url(../images_1/tab05-1_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_5 .img__main1 { background-image: url(../images_1/tab06-1_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_0 .img__main2 { background-image: url(../images_1/tab01-2_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_1 .img__main2 { background-image: url(../images_1/tab02-2_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_2 .img__main2 { background-image: url(../images_1/tab03-2_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_3 .img__main2 { background-image: url(../images_1/tab04-2_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_4 .img__main2 { background-image: url(../images_1/tab05-2_s9.jpg) } } @media all and (max-width:730.5px) { #CMD .section__userExperience-inner-s9 .userExperience_inner__img_5 .img__main2 { background-image: url(../images_1/tab06-2_s9.jpg) } } @media all and (max-width:730.5px) { .modal-inner__sectionsBattery .wd__content .content__title { font-size: 38px; margin-bottom: 4px } } @media all and (max-width:730.5px) { .section__battery-inner-s1 .img__main { left: 50%; margin-left: -360px; width: 720px; height: 315px; margin-top: -61px } #CMD .section__battery-inner-s1 .img__main { background-image: url(../images_1/main-b.jpg) } } @media all and (max-width:730.5px) { .section__battery-inner-s2 { margin-top: 50px } .section__battery-inner-s2 .battery_animate_container { margin-top: 62px } .section__battery-inner-s2 .battery_animate_container .battery_animate { transform: scale(.35) translateY(-716px) } .section__battery-inner-s2 .battery_animate_container .battery_animate .wd__play__btn { transform: scale(2.55) translate(-203px, -60px) } .section__battery-inner-s2 .battery_animate_container .battery_animate__2 { margin-top: -460px } } @media all and (max-width:730.5px) { .section__battery-inner-s3 { margin-top: -440px; padding-bottom: 70px } .section__battery-inner-s3 .img__main { left: 50%; margin-left: -365px; width: 730px; height: 317px; margin-top: -20px } #CMD .section__battery-inner-s3 .img__main { background-image: url(../images_1/main-s3.jpg) } } @media all and (max-width:730.5px) { .section__aiCopilot-outer-s1 .wd__block__slick--outer { margin-top: 0; padding-top: 88px } .section__aiCopilot-outer-s1 .wd__block__slick--outer::before { top: 380px; left: 0; width: 100vw } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_slickplay-aiCopilot { top: 23px; margin-left: -30px } .section__aiCopilot-outer-s1 .wd__block__slick--outer .btn_videoplay-aiCopilot { top: 0; margin-left: -18px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text { margin-top: 99px; margin-right: auto; margin-left: auto; text-align: left } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__title { font-size: 21px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__info { font-size: 18px } .section__aiCopilot-outer-s1 .wd__block__slick .slick__item--text .item__info--1 { margin-top: 16px } .section__aiCopilot-outer-s1 .wd__block__slick__item { padding: 0; min-width: 414px } .section__aiCopilot-outer-s1 .wd__block__slick__item .slick__item--text { width: 89.2vw !important } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-container .wd__play__btn { top: 360px; margin-left: -437px } .section__aiCopilot-outer-s1 .slick-list .slick-slide .video-outer { position: absolute; top: 7px; width: 310px; height: 194px } .section__aiCopilot-outer-s1 .wd__block__dots { top: 336px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots { height: 50px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button { padding-right: 20px; padding-left: 20px; width: auto; font-size: 18px } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button p { margin-top: 7px; line-height: 1.2 } .section__aiCopilot-outer-s1 .wd__block__dots .slick-dots li button::before { bottom: 0; width: 8px; height: 8px } } @media all and (max-width:730.5px) { .section__aiCopilot-outer-s1 .img__laptop { left: 50%; margin-left: -207px; width: 414px; height: 230px; position: relative; top: 0 } #CMD .section__aiCopilot-outer-s1 .img__laptop--0 { background-image: url(../images_1/laptop_0_aiCopilot.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--0 { mask: url(../images_1/laptop_0_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_0_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--1 { background-image: url(../images_1/laptop_1_aiCopilot.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--1 { mask: url(../images_1/laptop_1_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_1_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--2 { background-image: url(../images_1/laptop_2_aiCopilot.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--2 { mask: url(../images_1/laptop_2_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_2_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--3 { background-image: url(../images_1/laptop_3_aiCopilot.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--3 { mask: url(../images_1/laptop_3_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_3_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--4 { background-image: url(../images_1/laptop_4_aiCopilot.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--4 { mask: url(../images_1/laptop_4_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_4_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { #CMD .section__aiCopilot-outer-s1 .img__laptop--5 { background-image: url(../images_1/laptop_5_aiCopilot.jpg) } #CMD .section__aiCopilot-outer-s1 .img__laptop--5 { mask: url(../images_1/laptop_5_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/laptop_5_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__aiCopilot { padding-bottom: 0 } .inner-view .inner-view-container .inner-modal.modal-inner__aiCopilot section.wd__section { padding-top: 90px } .inner-view .inner-view-container .inner-modal.modal-inner__aiCopilot section.wd__section .wd__content { margin-top: -.4em } .inner-view .inner-view-container .inner-modal.modal-inner__aiCopilot section.wd__section:last-child { margin-bottom: 0; padding-bottom: 140px } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s1 .wd__feature__list { left: auto; margin-top: 55px; margin-right: auto; margin-left: auto; max-width: 500px } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s1 .wdtab { margin-top: -502px } .section__aiCopilot-inner-s1 .wdtab .wdtab__panel { top: -213px; left: 50%; margin-left: -272px } .section__aiCopilot-inner-s1 .wdtab .wd__play__btn { top: 394px; left: 50%; margin-left: -18px; transform: scale(1.6) } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s1 .performance_chart_container { margin-top: -122px } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s1 .img__container { margin-top: -347px; transform: scale(.6) } .section__aiCopilot-inner-s1 .img__bg { left: 50%; margin-left: -1000px; width: 2000px; height: 1000px } #CMD .section__aiCopilot-inner-s1 .img__bg { background-image: url(../images_1/bg_aiCopilot.jpg) } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s1 .img__main-0 { width: 516px; height: 388px } #CMD .section__aiCopilot-inner-s1 .img__main-0 { background-image: url(../images_1/main0_aiCopilot.jpg) } #CMD .section__aiCopilot-inner-s1 .img__main-0 { mask: url(../images_1/main0_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/main0_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s1 .img__main-1 { width: 516px; height: 388px } #CMD .section__aiCopilot-inner-s1 .img__main-1 { background-image: url(../images_1/main1_aiCopilot.jpg) } #CMD .section__aiCopilot-inner-s1 .img__main-1 { mask: url(../images_1/main1_mask_aiCopilot.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/main1_mask_aiCopilot.png); -webkit-mask-position: center; -webkit-mask-size: contain } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s2 { padding-top: 90px } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s2 .performance_chart_container { margin-top: 50px } .section__aiCopilot-inner-s2 .performance_chart_container .performance_chart { margin-top: 0 } } @media all and (max-width:730.5px) { .section__aiCopilot-inner-s2 .img__container { left: 50%; margin-left: -207px; width: 414px; height: 250px; margin-top: 50px } .section__aiCopilot-inner-s2 .img__container .img__main { left: 50%; margin-left: -365px; width: 730px; height: 448px; bottom: 25% } #CMD .section__aiCopilot-inner-s2 .img__main { background-image: url(../images_1/main_inner1.jpg) } } @media all and (max-width:730.5px) { section .small_use { display: block !important } section .small_unuse { display: none } section .no__wrap { white-space: normal } section .wd__link__arrow::after { padding-left: 5px } .wd__content .content__slogan { font-size: 16px } .wd__content .content__title { margin-top: -1px; font-size: 38px } .wd__content .content__info { font-size: 18px } .wd__content .content__link.link-gradient { margin-top: -4px !important } .wd__content .content__link.link-gradient.link--1 { margin-top: 7px !important } section .modal-button-container .modal-button { min-width: auto } section .modal-button-container .modal-button, section .modal-button-container .modal-button * { font-size: 18px } .wd__feature__list { margin-top: 55px } .wd__feature__list .wd__feature { margin-bottom: 32px } .wd__feature__list .wd__feature .wd__feature__data { font-size: 40px; line-height: 1.2 } .wd__feature__list .wd__feature .wd__feature__describe, .wd__feature__list .wd__feature .wd__feature__describe *, .wd__feature__list .wd__feature .wd__feature__describe__top, .wd__feature__list .wd__feature .wd__feature__describe__top * { font-size: 16px } .wd__feature__list .wd__feature .wd__feature__describe__top { margin-bottom: 0 } .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 0 } .section-media-top { height: 48px } .cmd-sidenav .item-dot.enter { background: #174d71 } section .modal-button-container .modal-button { padding: 10px 16px; margin-bottom: 51px; } } @media all and (max-width:730.5px) { .inner-view { margin-bottom: 0 } .inner-view .wd__section.first-section { padding-top: 60px !important } .inner-view .inner-view-container { max-width: 730px } .inner-view .inner-view-container .inner-modal { margin-right: auto; margin-left: auto; padding-bottom: 0; width: 100%; max-width: 730px } .inner-view .inner-view-container .wd__section .wd__content .content__slogan::after, .inner-view .inner-view-container .wd__section .wd__content .content__slogan::before, .inner-view .inner-view-container .wd__section .wd__content .content__title::after, .inner-view .inner-view-container .wd__section .wd__content .content__title::before { display: none } .inner-view .inner-view-container .modal-button-container .modal-inner-text { top: 0 !important; font-size: 18px } .inner-view .section__btn__home::before { background: 0 0 } } @media all and (max-width:730.5px) and (min-height:0) and (max-height:539px) { .section__color .animate__container .card__container .card_item .item_pc { top: calc(50% - 260px) } } @media all and (max-width:730.5px) { .section__kv { padding-bottom: 90px } .section__kv .wd__content { max-width: 600px; margin: -207px auto 0 } .section__kv .wd__content .content__slogan { font-size: 26px; margin-top: 27px } .section__kv .wd__content .content__title { font-size: 32px; margin-top: 2px } .section__kv .wd__content .content__info { margin-top: 9px; font-size: 22px; width: 100% } .section__kv .img__main { width: 730px; height: 510px; position: relative; left: 50%; margin-left: -365px; margin-top: -53px } } @media all and (max-width:730.5px) { .section__ksp { padding-bottom: 16px } .section__ksp .wdtile .item__block--feature .item__content--title+.item__content--descBottom { margin-top: 5px } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__block { padding: 27px 20px 177px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image::before { top: -316px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content { min-height: 240px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content { margin-top: 15px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title { transform: translate3d(0, -20px, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__title span { font-size: 3.125rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__content .wd__content .content__info { transform: translate3d(0, -20px, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .ani-item-1 { top: -324px; margin-left: -200px; width: 500px; height: 650px } #CMD .section__ksp .wdtile__item-0 .item__image .ani-item-1 { background-image: url(../images_1/ksp_01__bg-1.jpg) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .ani-item-3 { top: -361px; margin-left: -460px; transform: scale(.6) rotate(-70deg) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-0 .item__image .img { margin-top: -278px; margin-left: -410px; transform: scale(.6) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__content .wd__content .content__title { transform: translate3d(0, 0, 0); transition: opacity .5s .8s, transform 1s .8s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__content .wd__content .content__info { transform: translate3d(0, 0, 0); transition: opacity .5s 1.1s, transform 1s 1.1s } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__image .ani-item-1 { margin-left: -290px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-0.aniPlay .item__image .ani-item-3 { transform: rotate(0) scale(.6) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__block { padding: 40px 40px 51px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-1 .item__content .wd__content .content__title span { font-size: 3.125rem } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__block { padding: 63px 30px 51px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__image .img__item { width: 135px; height: 135px; top: 60px; transform: scale(1.3) translate3d(-51px, -15px, 0) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title { margin-top: 0 } .section__ksp .wdtile.wdtile-ksp .wdtile__item-2 .item__content--title span { font-size: 32px } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__block { padding: 67px 40px 53px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__content .wd__content .content__title span { font-size: 3.125rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-3 .item__content .wd__content .content__info { font-size: 32px; line-height: 1.2 } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__block { padding-bottom: 42px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__image { height: 100px !important } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__image .img__item { width: 414px; height: 378px; margin-left: 0; margin-top: 85px } #CMD .section__ksp .wdtile.wdtile-ksp .item__image-battery_bg .img__item { background-image: url(../images/battery_bg.webp) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content { display: flex; align-items: center; justify-content: center; min-height: 110px; margin-top: 45px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content { width: 360px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title span { font-size: 32px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__title span .plus { position: relative; top: -8px; font-size: .7em } .section__ksp .wdtile.wdtile-ksp .wdtile__item-4 .item__content .wd__content .content__info { margin-top: 0 } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__block { padding-top: 48px; padding-right: 20px; padding-left: 20px; flex-direction: column-reverse } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content { width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content .content__title span { font-size: 32px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__content .content__info { margin-top: 10px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image { height: 150px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .ani-item-1 { width: 621px; height: 510px; margin-top: -280px; margin-left: -366px } #CMD .section__ksp .wdtile__item-5 .ani-item-1 { background-image: url(../images_1/ksp_05__bg_ksp.jpg) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5 .item__image .img__item { top: -12px; left: 50%; margin-left: -254px; /*margin-left: -174px;*/ transform: scale(.7) translateY(-50%) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-5.aniPlay .item__image .img__item { transform: scale(.7) translateY(0) } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block { padding-top: 98px; padding-right: 40px; padding-left: 40px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__content { width: 100% } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__image { height: 99px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .item__block .item__image .img__item { top: 9px; left: 50%; margin-left: -20px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .img__pc1 { top: 53px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-8 .img__pc2 { top: 129px } } @media all and (max-width:730.5px) { .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block { padding: 20px 20px 116px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content { margin-top: -4px; position: relative } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--title span { font-size: 3.125rem } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--descBottom { margin-top: 10px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content--descBottom span { font-size: 18px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__content::after { top: unset; left: 50%; margin-left: -88px; transform: scale(.85); bottom: -66px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__image { margin: 0; height: 83px } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .item__block .item__image .img__item { top: -32px; left: 50%; margin-left: -160px; transform: scale(.65) } .section__ksp .wdtile.wdtile-ksp .wdtile__item-9 .ksp_audio_wave { transform: scale(.7) } } @media all and (max-width:730.5px) { .section__color { padding-top: 90px } .section__color .animate__container { margin-top: 40px } .section__color .animate__container .card__container { max-width: 1280px; width: 730px; height: 100vh; max-height: 540px; left: 50%; margin-left: -365px } .section__color .animate__container .card__container .card_item { height: 100vh; max-height: 540px } .section__color .animate__container .card__container .card_item .item_pc { width: 690px; height: 600px; top: calc(50% - 290px); left: calc(50% - 404px) } .section__color .animate__container .card__container .card_item .item_title { width: 250px; margin: 0 auto; top: 115px; font-size: 18px letter-spacing: 7px; line-height: 1.3 } .section__color .animate__container .card__container .nav__container { height: 30px; left: calc(50% - 160px); width: 320px; bottom: unset; top: 64px } .section__color .animate__container .card__container .nav__container .nav_item { letter-spacing: 4px; font-size: 26px; width: 100%; position: absolute; left: 0; top: 0 } } @media all and (max-width:730.5px) { .section__thin { padding-top: 90px } .section__thin .wd__content .content__info { font-size: 19px } .section__thin .wd__feature__list { width: 300px; margin: 0 auto; margin-top: 40px } .section__thin .wd__feature__list .wd__feature { margin-bottom: 49px; margin-right: 0 } .section__thin .animate__container { transform: scale(.35); margin-top: -220px } .section__thin .animate__container .img__text { transform: scale(.8); top: 15px } } @media all and (max-width:730.5px) { .section__battery { margin-top: -250px; padding-bottom: 60px } .section__battery .sectionnNavPosition.first { top: 540px } .section__battery .opening { transform: scale(.35) } .section__battery .opening .battery_type__1 .outter { transform: scale(1, .9); transform-origin: center } .section__battery .main-content { margin-top: -62px } .section__battery .main-content .wd__content { margin-top: 44px } .section__battery .main-content .wd__content .content__info { margin-bottom: 40px } .section__battery .main-content .img__icon1 { width: 105px !important; height: 53px !important; margin: 0 auto } .section__battery .main-content .wd__feature__list { margin-top: 48px; width: 92%; max-width: 600px } .section__battery .main-content .wd__feature__list .feature-1 .wd__feature__describe { margin-top: 14px } .section__battery .main-content .img__1 { left: 50%; margin-left: -140px; width: 280px; height: 188px; border: 1px solid transparent; background-position: 50% 50% } #CMD .section__battery .img__1 { background-image: url(../images_1/pic01.jpg) } } @media all and (max-width:730.5px) { .section__battery .main-content .img__2 { left: 50%; margin-left: -140px; width: 280px; height: 366px; border: 1px solid transparent; background-position: 50% 50% } #CMD .section__battery .img__2 { background-image: url(../images_1/pic02.jpg) } } @media all and (max-width:730.5px) { .section__battery-inner-s2 { margin-bottom: -400px } } @media all and (max-width:730.5px) { .section__performance { padding-top: 60px } .section__performance::before { background-size: 730px auto; width: 730px; height: 782px; margin-left: -365px; top: 130px } #CMD .section__performance.loadImg::before { background-image: url(../images_1/bg-0.jpg) } } @media all and (max-width:730.5px) { .section__performance .video_container { transform: scale(.365); position: relative; top: -340px; margin-left: -614px } .section__performance .video_container .img__evo { transform: scale(2.1); top: 1220px; left: 459px } .section__performance .video_container .wd__play__btn { transform: scale(2.1); top: 760px; margin-left: 250px } } @media all and (max-width:730.5px) { .section__performance .wd__feature__list { width: 90%; margin-top: -530px; max-width: 600px } .section__performance .wd__feature__list .feature-6 { width: 130px } .section__performance .wd__feature__list .feature-1 .wd__feature__describe { display: none } } @media all and (max-width:730.5px) { .section__performance .performance_chart_container { margin-top: 10px } } @media all and (max-width:730.5px) { .section__s_aiCopilot { padding-top: 50px; padding-bottom: 60px } } @media all and (max-width:730.5px) { .section__aiCopilot-outer-s1 { padding-top: 60px } } @media all and (max-width:730.5px) { .inner-view .inner-view-container .inner-modal.modal-inner__aiCopilot section.wd__section:last-child { margin-bottom: 0; padding-bottom: 140px } } @media all and (max-width:730.5px) { .section__display-outer-s1 { padding-bottom: 60px; padding-top: 100px } .section__display-outer-s1 .sectionnNavPosition.first { top: 1500px } .section__display-outer-s1 .scrollend_container { top: -130px; position: relative } .section__display-outer-s1 .wd__content.main-content--top { display: none } .section__display-outer-s1 .wd__content.main-content--bottom .content__info { font-size: 19px } .section__display-outer-s1 .wd__feature__list { max-width: 500px; margin-top: 30px !important } .section__display-outer-s1 .wd__feature__list .wd__feature { width: 170px } .section__display-outer-s1 .medium__text-center.wd__feature__list .wd__feature { margin-left: 15px; margin-right: 15px } .section__display-outer-s1 .wdblockimg { margin-top: 40px } .section__display-outer-s1 .ani__text { height: 132px } .section__display-outer-s1 .ani__text .ani__text-1 { font-size: 66px; background-size: 790px auto } .section__display-outer-s1 .img__main { margin-top: -210px; width: 650px; height: 230px; margin-left: -325px; /*margin-left: -220px;*/ } } @media all and (max-width:730.5px) { .section__bigAudio .scale_range { transform: scale(.48); transform-origin: center top } } @media all and (max-width:730.5px) { .section__audio { margin-top: -410px; padding-top: 310px } .section__audio .wd__content .content__info { font-size: 19px } .section__audio .sectionnNavPosition.first { top: -310px } .section__audio .animation_container { position: absolute; left: 50%; margin-left: -365px; width: 730px; height: 268px; /*top: 0*/ top:-259px; } .section__audio .animation_container .img__main { width: 100%; height: 100% } #CMD .section__audio .img__main { background-image: url(../images_1/bg-9.jpg) } } @media all and (max-width:730.5px) { .section__audio .animation_container .audio_wave { transform: scale(.38) translate(-239px,-865px) } } @media all and (max-width:730.5px) { .section__audio .animation_container .img__pc { transform: scale(.38) translate(-154px, -815px) } } @media all and (max-width:730.5px) { .section__audio .wd__feature__list { margin-top: 38px !important } .section__audio .wd__feature__list .wd__feature { margin: 0 30px } .section__audio .wd__feature__list .wd__feature.hl1 .img__icon { width: 142px !important; height: 60px !important } .section__audio .wd__feature__list .wd__feature.hl2 .img__icon { width: 193px !important; height: 47px !important } .section__audio .wd__feature__list .feature-2 { margin-top: 10px } } @media all and (max-width:730.5px) { .section__keyboard { padding-top: 90px; z-index: 3 } .section__keyboard .wd__content .content__info { font-size: 19px } .section__keyboard .typing_text { transform: scale(.3); transform-origin: center top } .section__keyboard .main-content { margin-top: -160px } .section__keyboard .main-content .pic_container { width: 360px; height: 216px; left: 50%; margin-left: -180px; position: relative } .section__keyboard .main-content .pic_container .img__pc { transform: scale(.34); margin-left: -641px; top: -293px } .section__keyboard .main-content .wd__content { margin-top: 30px } .section__keyboard .main-content .wd__feature__list { width: 90%; max-width: 500px; margin: 42px auto 5px } .section__keyboard .main-content .wd__feature__list .wd__feature .img { margin: 0 auto } .section__keyboard .main-content .wd__feature__list .wd__feature .wd__feature__describe { margin-top: 10px } } @media all and (max-width:730.5px) { .section__keyboard .wd__feature.icon01 .wd__feature__data { width: 115px !important; height: 60px !important } /* #CMD .section__keyboard .wd__feature.icon01 .img__icon { background-image: url(../images_1/icon01_inner1.png) }*/ } @media all and (max-width:730.5px) { .section__keyboard .wd__feature.icon02 .wd__feature__data { width: 77px !important; height: 60px !important } /* #CMD .section__keyboard .wd__feature.icon02 .img__icon { background-image: url(../images_1/icon02_inner1.png) }*/ } @media all and (max-width:730.5px) { .section__keyboard .wd__feature.icon03 .wd__feature__data { width: 87px !important; height: 60px !important } /* #CMD .section__keyboard .wd__feature.icon03 .img__icon { background-image: url(../images_1/icon03_inner1.png) }*/ } @media all and (max-width:730.5px) { .section__connectivity { margin-top: 230px; padding-bottom: 60px; z-index: 1 } .section__connectivity .sectionnNavPosition.first { top: -230px } .section__connectivity .animate__container { height: 600px; width: 320px; left: 50%; margin-left: -160px; border: 1px solid transparent; position: relative } .section__connectivity .text_container { width: 300px; left: 50%; top: 0; height: 450px; margin-left: -150px } .section__connectivity .text_container .line { font-size: 50px; letter-spacing: -1px } .section__connectivity .text_container .line.line1 { position: relative; left: 30px } .section__connectivity .text_container .line.all { position: absolute; left: -10px; top: 0 } .section__connectivity .img_container { position: absolute; left: 50%; width: 1547px; height: 834px; margin-left: -593.5px; top: -410px } .section__connectivity .img_container .img__pc { width: 100%; height: 100% } #CMD .section__connectivity .img__pc { background-image: url(../images/pc_mobile.png)!important; } /* #CMD .section__connectivity .img__pc { mask: url(../images_1/pc_mask_connectivity.png); mask-position: center; mask-size: contain; -webkit-mask-image: url(../images_1/pc_mask_connectivity.png); -webkit-mask-position: center; -webkit-mask-size: contain }*/ } @media all and (max-width:730.5px) { .section__connectivity .img_container .img__line { width: 300px; /* height: 75px; top: -105px;*/ top: -45px; left: 446px; left: 446px; background-size: 500px 75px; background-position: 0 0 } #CMD .section__connectivity .img__line { background-image: url(../images/line_mobile_1.webp) } } @media all and (max-width:730.5px) { .section__connectivity .img_container .img__line__right { background-size: 500px 75px; width: 500px; height: 75px; /* top: -179px; left: 446px;*/ top: -96px; left: 446px; position: relative; } #CMD .section__connectivity .img__line__right { background-image: url(../images/line_mobile_2.webp); } } @media all and (max-width:730.5px) { .section__connectivity .line_container { width: 500px; height: 50px; left: 50%; top: 390px; margin-left: -133px; } .section__connectivity .line_container .text_item { font-size: 14px; top: 7px; border: 1px solid transparent } .section__connectivity .line_container .text_item__1 { left: -20px; width: 90px; text-align: right } .section__connectivity .line_container .text_item__2 { left: 102px; width: 85px } .section__connectivity .line_container .text_item__3 { left: 208px } .section__connectivity .line_container .text_item__4 { left: 361px; width: 110px } .section__connectivity .line_container .mobile_cover { background-color: #854343; width: 100px; height: 100px; position: absolute; right: 0; top: 0 } } @media all and (max-width:730.5px) { .section__connectivity .bottom_content .wd__content { margin-top: -127px } .section__connectivity .bottom_content .wd__content .content__info { font-size: 19px } } @media all and (max-width:730.5px) { .section__connectivity .modal-button-container { margin-top: 35px } } @media all and (max-width:730.5px) { .section__conference-outer-s1 { padding-top: 60px; padding-bottom: 0 } .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block-1.block-imgstyle-extend.column-span-medium-2 .block-content, .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block-1.block-imgstyle-extend.column-span-medium-3 .block-content, .section__conference-outer-s1 .wdblockimg .wdblockimg__container .block-1.block-imgstyle-extend[class*=column-span-] .block-content { padding-bottom: 340px } /* .section__conference-outer-s1 .block-1 .img__bg { margin-left: 12px }*/ } @media all and (max-width:730.5px) { .section__security-outer-s1 { padding-top: 90px; padding-bottom: 60px } } @media all and (max-width:730.5px) { .section__userExperience-inner-s4 { padding-bottom: 66px } } @media all and (max-width:730.5px) { .section__userExperience-inner-s5 { padding-top: 0; padding-bottom: 90px } } @media all and (max-width:730.5px) { .section__userExperience-inner-s6 { padding-top: 0; padding-bottom: 66px } } @media all and (max-width:730.5px) { .section__userExperience-inner-s7 { padding-top: 60px; padding-bottom: 60px } } @media all and (max-width:730.5px) { .section__environment-outer-s1 { padding-top: 60px; padding-bottom: 0 } .section__environment-outer-s1 .wd__feature__list { width: 300px } .section__environment-outer-s1 .wd__feature__list .wd__feature { width: 110px } .section__environment-outer-s1 .wd__feature__list .wd__feature .img__icon3 { margin-top: 9px } } @media all and (max-width:730.5px) { .section__military__grade { padding-top: 60px; padding-bottom: 35px; overflow: hidden } .section__military__grade .col { display: flex; flex-direction: column } .section__military__grade .wd__feature__list.features-icon { margin-top: -390px; margin-bottom: 0; width: 100%; max-width: 500px; order: 3 } .section__military__grade .wd__feature__list.features-icon .wd__feature .img__icon { margin: 0 auto; width: 60px !important; height: 60px !important } .section__military__grade .wd__feature__list.features-icon .wd__feature .wd__feature__describe { max-width: 130px; margin-top: 10px } .section__military__grade .image__container { margin-top: -37px } .section__military__grade .image__container .img__main { left: 50%; /*margin-left: -365px;*/ width: 730px; height: 951px } #CMD .section__military__grade .img__main { background-image: url(../images_1/main-7.jpg) } } @media all and (max-width:730.5px) { .section__software-outer-s1 { padding-top: 60px; padding-bottom: 60px } } @media all and (max-width:730.5px) { .section__security-outer-s1 { padding-top: 90px; padding-bottom: 60px } } @media all and (max-width:730.5px) { .section__comment { margin-top: 0 } .section__comment .footnotes { margin-top: 0 } .section__comment.footer-2023 { padding-top: 32px; padding-bottom: 22px } } @media all and (max-width:730.5px) { .inner-view { margin-bottom: 0 } .inner-view .wd__section.first-section { padding-top: 60px !important } .inner-view .inner-view-container { max-width: 730px } .inner-view .inner-view-container .inner-modal { margin-right: auto; margin-left: auto; padding-bottom: 0; width: 100%; max-width: 730px } .inner-view .inner-view-container .wd__section .wd__content .content__slogan::after, .inner-view .inner-view-container .wd__section .wd__content .content__slogan::before, .inner-view .inner-view-container .wd__section .wd__content .content__title::after, .inner-view .inner-view-container .wd__section .wd__content .content__title::before { display: none } .inner-view .inner-view-container .modal-button-container .modal-inner-text { top: 0 !important; font-size: 18px } .inner-view .section__btn__home::before { background: 0 0 } } @media all and (max-width:730.5px) { .section__innerIoport { padding-top: 60px } .section__innerIoport .img__main { left: 50%; margin-left: -365px; width: 730px; height: 582px; margin-top: -70px } #CMD .inner-modal.modal-innerIoport .img__main { background-image: url(../images_1/main-10.jpg) } } @media all and (min-height:0) and (max-height:539px) { .section__color .animate__container .card__container .card_item .item_pc { top: calc(50% - 260px) } }